/* ===================================================================
   Emirates Industrial Filters Modern Front-End
   Design system: dark industrial / futuristic
   Motif: the three diagonal pleat bars from the EIF mark
   =================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand scale built around #0A5894 the exact blue sampled from the
     EIF logo (hue 205°). Everything else is a shift along that hue. */
  --brand-900: #042940;
  --brand-800: #063F68;
  --brand-700: #0A5894;   /* ← the logo blue itself */
  --brand-500: #1278C4;
  --brand-300: #4FA6E4;
  --brand-100: #A9D4F4;

  /* Accent = same hue rotated toward cyan: the "clean side" of the filter.
     The logo's three white bars stay pure #FFF as the third brand colour. */
  --accent-600: #0BB6D6;
  --accent-500: #22C9E8;
  --accent-400: #5BDDF2;
  --accent-glow: rgba(34, 201, 232, 0.45);

  /* surfaces */
  --bg: #05090F;
  --bg-2: #080E18;
  --bg-3: #0C1422;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* type */
  --text: #E9EFF8;
  --text-2: #B6C6DB;
  --muted: #7E92AC;

  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 10px;

  --shell: 1240px;
  --gutter: 24px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Brand standard type: Causten (English) and Fustat (Arabic), declared
     in fonts.css along with the four brand sizes. */
  --font: var(--font-brand, "Causten", "Fustat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- the parts a second theme changes ----
     Four of these are bare numbers rather than colours, so each rule can
     pick its own transparency: rgba(var(--bg-rgb), .72). That is what
     lets one token serve a scrim at 95% and a glass panel at 6%. */
  --bg-rgb: 5, 9, 15;          /* the page colour, for scrims over images */
  --deep-rgb: 3, 6, 11;        /* the darker backdrop behind a popup */
  --panel-rgb: 12, 20, 34;     /* a raised panel */
  --tint-rgb: 255, 255, 255;   /* the pale film that lifts a surface */
  --shadow-rgb: 0, 0, 0;

  --panel-a: #0E1726;          /* the two stops of a panel gradient */
  --panel-b: #070D16;
  --on-accent: #03131b;        /* text sitting on an accent-coloured button */
  --placeholder: #55687f;

  /* The brand and status colours as numbers, for the same reason: a
     tint of the accent at 14% and a border of it at 40% are the same
     colour wearing different clothes. */
  --accent-rgb: 34, 201, 232;
  --brand-rgb: 18, 120, 196;
  --ok-rgb: 74, 222, 128;
  --bad-rgb: 248, 113, 113;
  --warn-rgb: 251, 191, 36;

  /* The bright end of the gradients used on headlines and figures. */
  --grad-ink: #ffffff;

  color-scheme: dark;
}

/* ---------- 1b. Light theme ----------
   The same design in daylight: the dark surfaces become paper and the
   ink flips. The brand blue carries more of the work, because a glow
   does nothing on white. The logo is never recoloured on light it is
   set on a brand-blue plaque instead, so the artwork stays exactly as
   EIF supplied it. */
html[data-theme="light"] {
  --bg: #F4F7FB;
  --bg-2: #EAF0F7;
  --bg-3: #FFFFFF;

  --bg-rgb: 244, 247, 251;
  --deep-rgb: 16, 30, 48;
  --panel-rgb: 255, 255, 255;
  --tint-rgb: 10, 40, 80;
  --shadow-rgb: 16, 42, 76;

  --panel-a: #FFFFFF;
  --panel-b: #F1F5FA;

  --surface: rgba(10, 40, 80, 0.035);
  --surface-2: rgba(10, 40, 80, 0.065);
  --border: rgba(10, 40, 80, 0.14);
  --border-strong: rgba(10, 40, 80, 0.26);

  --text: #0C1A2B;
  --text-2: #334F6D;
  --muted: #5D7391;

  --placeholder: #93A6BD;
  --on-accent: #FFFFFF;

  /* The accent is a pale cyan: right as a glow on black, far too faint
     as ink on white. On light it darkens enough to read as a link. */
  --accent-600: #0A7E96;
  --accent-500: #0B8CA6;
  --accent-400: #0A6E85;
  --accent-glow: rgba(10, 88, 148, 0.2);

  --brand-300: #1278C4;
  --brand-100: #0A5894;

  /* A tint must be darker on paper than on black to carry the same
     weight, so the accent and the status colours deepen as well. */
  --accent-rgb: 11, 140, 166;
  --brand-rgb: 10, 88, 148;
  --ok-rgb: 17, 138, 88;
  --bad-rgb: 199, 48, 48;
  --warn-rgb: 176, 115, 7;

  /* Dark end instead of white, so a gradient headline still reads. */
  --grad-ink: #0C1A2B;

  color-scheme: light;
}

/* While the theme changes, let the colours move rather than jump. */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .32s ease, border-color .32s ease, color .32s ease,
              fill .32s ease, box-shadow .32s ease !important;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;                      /* browsers without clamp() */
  font-size: var(--fs-body-2, 16px);    /* Body text 2 15pt Regular */
  font-weight: var(--fw-body-2, 400);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 650;
}

/* Headline 65pt ExtraBold; Sub-Headline 45pt Bold (see fonts.css) */
h1 { font-size: 2.6rem; font-size: var(--fs-headline); font-weight: var(--fw-headline, 800); letter-spacing: -0.03em; line-height: 1.06; }
h2 { font-size: 2rem; font-size: var(--fs-subheadline); font-weight: var(--fw-subheadline, 700); letter-spacing: -0.025em; line-height: 1.1; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.08rem; }
p  { margin: 0 0 1.1em; color: var(--text-2); }

::selection { background: var(--accent-500); color: var(--on-accent); }

/* ---------- 3. Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.section {
  padding-block: clamp(72px, 10vw, 132px);
}

.section--tight { padding-block: clamp(56px, 7vw, 88px); }

.section-head {
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- 4. Shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-400);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-500));
}
.section-head--center .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-500), transparent);
}

/* Body text 1 25pt Medium */
.lede {
  font-size: 1.12rem;
  font-size: var(--fs-body-1);
  font-weight: var(--fw-body-1, 500);
  color: var(--text-2);
  max-width: 62ch;
}

.grad-text {
  /* The first stop was a flat #fff, which simply vanished once the page
     behind it turned white. It is a token now, so the headline keeps its
     contrast in both themes. */
  background: linear-gradient(104deg, var(--grad-ink) 8%, var(--accent-400) 54%, var(--brand-300) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* pleat motif the three logo bars, used as a divider */
.pleats {
  display: flex;
  gap: 6px;
  height: 26px;
  align-items: center;
}
.pleats span {
  display: block;
  width: 5px;
  height: 100%;
  border-radius: 99px;
  background: var(--accent-500);
  transform: skewX(-22deg);
  opacity: 0.85;
  animation: pleatPulse 2.4s var(--ease-in-out) infinite;
}
.pleats span:nth-child(2) { animation-delay: 0.18s; opacity: 0.6; }
.pleats span:nth-child(3) { animation-delay: 0.36s; opacity: 0.38; }

@keyframes pleatPulse {
  0%, 100% { transform: skewX(-22deg) scaleY(1); }
  50%      { transform: skewX(-22deg) scaleY(0.55); }
}

/* ---------- 5. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 99px;
  border: 1px solid transparent;
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background 0.3s var(--ease), border-color 0.3s var(--ease);
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--accent-500), var(--brand-500));
  color: var(--on-accent);
  box-shadow: 0 8px 28px -10px var(--accent-glow);
}
.btn--primary:hover { box-shadow: 0 14px 38px -10px var(--accent-glow); }

/* sheen sweep */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.5) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent-500); }

.btn--sm { padding: 10px 18px; font-size: 0.85rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent-400);
}
.arrow-link svg { transition: transform 0.35s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* ---------- 6. Header / nav ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(var(--bg-rgb), 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--border);
}

/* the header gets a little more room than the page content */
.site-header .shell { max-width: 1400px; }

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 76px;
}

/* The logo is never allowed to shrink. A flex item shrinks by default, and
   the global `img { max-width: 100% }` then narrows the image while its
   height stays fixed which squashes the lockup out of proportion. */
.brand {
  display: flex;
  align-items: center;
  margin-inline-end: auto;
  flex: none;
}

/* The EIF lockup (reversed for the dark header). Its proportions are
   locked: height is set, width follows, and nothing may override that. */
.brand-mark {
  height: 48px;
  width: auto;
  max-width: none;
  flex: none;
  display: block;
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.brand:hover .brand-mark {
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 16px rgba(var(--accent-rgb), 0.4));
}

.site-footer .brand-mark { height: 48px; }

@media (max-width: 520px) {
  .brand-mark { height: 30px; }
  .site-footer .brand-mark { height: 40px; }
}

/* Small phones: logo, language switch and menu button must share about
   330px. Everything else tightens so the logo can stay as large as it can. */
/* (these sit above the rules they override in the file, hence the extra
   `.nav` / `.nav-cta` qualifier to win on specificity) */
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .site-header .nav { gap: 10px; }
  .nav .nav-cta { gap: 6px; }
  .brand-mark { height: 27px; }
  .nav-cta .lang-switch button,
  .nav-cta .lang-switch a { padding: 5px 9px; font-size: .74rem; }
  .nav-cta .nav-toggle { width: 38px; height: 38px; }
}
/* Narrowest phones (Galaxy Fold folded, small Androids): the language
   switch shows only the language you can switch TO one button instead
   of two. Saves ~40px so the logo can stay full size. */
@media (max-width: 380px) {
  .nav-cta .lang-switch button.is-active,
  .nav-cta .lang-switch a.is-active { display: none; }
}
@media (max-width: 340px) {
  .brand-mark { height: 24px; }
  .site-footer .brand-mark { height: 32px; }
}

.nav-links { display: flex; align-items: center; gap: 2px; }

.nav-links > a,
.nav-drop > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 9px;
  background: none;
  border: 0;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-2);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-links > a:hover,
.nav-drop > button:hover,
.nav-links > a[aria-current="page"] { color: var(--text); background: var(--surface); }

.nav-links > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-500);
}

/* dropdown */
.nav-drop { position: relative; }
.nav-drop > button svg { transition: transform 0.3s var(--ease); }
.nav-drop:hover > button svg { transform: rotate(180deg); }

.drop-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 290px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(var(--deep-rgb), 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -18px rgba(var(--shadow-rgb), 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.nav-drop:hover .drop-panel,
.nav-drop:focus-within .drop-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop-panel a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  transition: background 0.22s var(--ease);
}
.drop-panel a:hover { background: var(--surface-2); }
.drop-panel b { font-size: 0.88rem; font-weight: 600; }
.drop-panel small { font-size: 0.76rem; color: var(--muted); }

/* The Solutions panel is white in both themes a clean card that stands
   off the dark header, with its own dark ink so it reads the same on the
   light theme too. Scoped to .site-header so they outrank the phone-menu
   version of .drop-panel further down. */
.site-header .drop-panel {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(10, 40, 80, 0.10);
  box-shadow: 0 24px 60px -18px rgba(5, 9, 15, 0.45), 0 2px 8px rgba(5, 9, 15, 0.08);
  color: #0A1420;
}
.site-header .drop-panel a { color: #0A1420; }
.site-header .drop-panel b { color: #0A1420; }
.site-header .drop-panel small { color: #5B6B80; }
.site-header .drop-panel a:hover,
.site-header .drop-panel a:focus-visible { background: #EEF3F8; }
.site-header .drop-panel a:hover b { color: #0B5894; }

.nav-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  position: relative;
  transition: background 0.2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top: 5.5px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.is-open span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 76px;
  overflow: hidden;
  isolation: isolate;
}

#filterCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero::after {
  /* vignette so type stays readable over the canvas */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(78% 82% at 13% 46%, rgba(var(--bg-rgb), 0.95) 16%, rgba(var(--bg-rgb), 0.62) 44%, transparent 72%),
    linear-gradient(to bottom, rgba(var(--bg-rgb), 0.72) 0%, transparent 22%, transparent 74%, var(--bg) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
  padding-block: 80px;
}

.hero h1 { margin-bottom: 22px; }
.hero .lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); margin-bottom: 34px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 7px 7px 14px;
  margin-bottom: 26px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.8rem;
  color: var(--text-2);
}
.hero-badge i {
  font-style: normal;
  padding: 4px 10px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--accent-500), var(--brand-500));
  color: var(--on-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* live dot */
.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulseDot 2.2s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 11px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* hero stat panel */
.hero-panel {
  position: relative;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(var(--tint-rgb), 0.075), rgba(var(--tint-rgb), 0.015));
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 32px 80px -30px rgba(var(--shadow-rgb), 0.9);
}
.hero-panel::before {
  /* animated conic ring */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ang, 0deg), transparent 62%, var(--accent-500), transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spinRing 7s linear infinite;
  pointer-events: none;
}
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spinRing { to { --ang: 360deg; } }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.panel-head h4 { margin: 0; font-size: 0.95rem; }
.panel-head span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-400);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  padding: 20px 18px;
  background: var(--bg-3);
  transition: background 0.3s var(--ease);
}
.stat:hover { background: var(--panel-a); }
.stat b {
  display: block;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--grad-ink), var(--accent-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat small {
  display: block;
  margin-top: 7px;
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* scroll hint */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-hint i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--accent-500), transparent);
  animation: scrollLine 2.1s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%        { transform: scaleY(0); opacity: 0; }
  40%       { transform: scaleY(1); opacity: 1; }
  100%      { transform: scaleY(1) translateY(42px); opacity: 0; }
}

/* ---------- 8. Marquee (trust bar) ---------- */
.marquee {
  padding-block: 30px;
  border-block: 1px solid var(--border);
  background: var(--bg-2);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.marquee-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.marquee-item:hover { color: var(--text); }
.marquee-item i {
  font-style: normal;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-500);
  opacity: 0.65;
}

/* ---------- 9. Cards ---------- */
.grid {
  display: grid;
  gap: 20px;
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(var(--tint-rgb), 0.055), rgba(var(--tint-rgb), 0.012));
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: 0 26px 56px -28px rgba(var(--shadow-rgb), 0.92);
}

/* cursor-tracked glow, driven by JS vars --mx/--my */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--accent-rgb), 0.13), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

.card > * { position: relative; }

/* Anything that looks clickable is clickable: a card holding an arrow link
   gets a stretched hit area covering the whole card, so the entire tile
   follows that link instead of just the few words at the bottom. */
.has-stretch-link { cursor: pointer; }
.has-stretch-link .arrow-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.has-stretch-link:hover .arrow-link svg { transform: translateX(5px); }
/* keep genuinely separate controls above the stretched area */
.has-stretch-link .btn,
.has-stretch-link a:not(.arrow-link) { position: relative; z-index: 4; }

.card-ico {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.17), rgba(var(--brand-rgb), 0.1));
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  color: var(--accent-400);
  transition: transform 0.45s var(--ease);
}
.card:hover .card-ico { transform: scale(1.07) rotate(-5deg); }

.card h3 { font-size: 1.14rem; margin-bottom: 9px; }
.card p  { font-size: 0.92rem; margin-bottom: 0; line-height: 1.6; }

.card-num {
  position: absolute;
  top: 20px; right: 24px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  opacity: 0.5;
}

/* feature card with media */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 28px 60px -30px rgba(var(--shadow-rgb), 0.95);
}

/* The EIF product photography is shot on white, so the image sits on a
   light "product plate" rather than fighting the dark card. Reads as a
   spec-sheet swatch and keeps every shot seamless. */
.pcard-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(158deg, #FFFFFF 0%, #EDF2F8 62%, #DFE8F2 100%);
  box-shadow: inset 0 -1px 0 rgba(var(--brand-rgb), 0.12);
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
}
.pcard-media img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.6s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.07); }

.pcard-tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(var(--bg-rgb), 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-400);
}

.pcard-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pcard-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.pcard-body p  { font-size: 0.88rem; margin-bottom: 18px; flex: 1; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.73rem;
  color: var(--text-2);
}

/* ---------- 10. Capability split ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--flip .split-media { order: -1; }

.split-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--panel-a), var(--panel-b));
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  padding: 34px;
}
.split-media img { max-height: 100%; width: auto; object-fit: contain; }

.check-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 13px; }
.check-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text-2);
}
.check-list svg { flex: none; margin-top: 3px; color: var(--accent-500); }
.check-list b { color: var(--text); font-weight: 600; }

/* ---------- 11. Industries ---------- */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.ind {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(155deg, var(--panel-a), var(--panel-b));
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease);
}
.ind:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), 0.45); }

.ind img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: grayscale(0.55) contrast(1.05);
  transition: transform 0.7s var(--ease), opacity 0.45s var(--ease), filter 0.45s var(--ease);
}
.ind:hover img { transform: scale(1.1); opacity: 0.8; filter: grayscale(0) contrast(1); }

.ind::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--bg-rgb), 0.96) 8%, rgba(var(--bg-rgb), 0.3) 54%, transparent 86%);
}

.ind-body {
  position: absolute;
  inset: auto 0 0;
  padding: 18px;
  z-index: 1;
}
.ind-body h4 { margin: 0; font-size: 0.97rem; letter-spacing: -0.015em; }
.ind-body small {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.ind:hover .ind-body small { opacity: 1; transform: translateY(0); }

/* fallback tile when no photo exists */
.ind--noimg .ind-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.16;
  color: var(--accent-500);
}

/* ---------- 12. Gallery ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 34px;
}
.filter-btn {
  padding: 9px 18px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
  transition: all 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--border-strong); color: var(--text); }
.filter-btn.is-active {
  background: linear-gradient(135deg, var(--accent-500), var(--brand-500));
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 210px;
  gap: 16px;
}
.gal-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  /* product shots are on white, so they sit on a light plate; real
     photographs opt out with .gal-item--photo */
  background: linear-gradient(158deg, #FFFFFF 0%, #EDF2F8 62%, #DFE8F2 100%);
  cursor: zoom-in;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              opacity 0.4s var(--ease);
}
.gal-item--tall { grid-row: span 2; }
.gal-item--wide { grid-column: span 2; }
.gal-item:hover { transform: scale(1.015); border-color: rgba(var(--accent-rgb), 0.45); }
/* generic filter state shared by the gallery and the product catalogue */
.is-hidden { display: none !important; }

.gal-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 22px;
  mix-blend-mode: multiply;
  transition: transform 0.6s var(--ease);
}
.gal-item:hover img { transform: scale(1.05); }

/* real photographs: edge to edge on the dark card, no plate, no blend */
.gal-item--photo { background: linear-gradient(160deg, var(--panel-a), var(--panel-b)); }
.gal-item--photo img {
  object-fit: cover;
  padding: 0;
  mix-blend-mode: normal;
}

.gal-cap {
  position: absolute;
  inset: auto 0 0;
  padding: 30px 16px 15px;
  background: linear-gradient(to top, rgba(var(--bg-rgb), 0.95), transparent);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
}
.gal-item:hover .gal-cap { transform: translateY(0); }
.gal-cap b { display: block; font-size: 0.88rem; font-weight: 600; }
.gal-cap small { font-size: 0.74rem; color: var(--muted); }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 74px 20px 20px;
  background: rgba(var(--deep-rgb), 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* the pane the image lives in this is what clips the image when zoomed */
.lightbox-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 0;
  touch-action: none;
}

.lightbox-stage img {
  max-width: min(1180px, 92vw);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.42s var(--ease), opacity 0.3s var(--ease);
  transform-origin: center center;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.is-open .lightbox-stage img { transform: scale(1); opacity: 1; }

/* zoomed JS drives --z (scale) and --px/--py (pan, in pre-scale px) */
.lightbox.is-open.is-zoomed .lightbox-stage img {
  transform: scale(var(--z, 2)) translate(var(--px, 0px), var(--py, 0px));
  cursor: grab;
}
.lightbox.is-open.is-zoomed.is-panning .lightbox-stage img {
  cursor: grabbing;
  transition: none;
}

/* fade while stepping to another image */
.lightbox-stage img.is-swapping { opacity: 0; }

.lightbox-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 16px;
}
.lightbox-cap {
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-2);
  max-width: 60ch;
}
.lightbox-cap b { color: var(--text); }
.lightbox-cap small { display: block; color: var(--muted); font-size: .8rem; }

/* top bar: counter, zoom controls, close */
.lightbox-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  z-index: 3;
}
.lightbox-count {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--muted);
  margin-inline-end: auto;
  padding-left: 4px;
}
.lb-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: background .25s var(--ease), color .25s, border-color .25s,
              opacity .25s, transform .25s var(--ease);
}
.lb-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.lb-btn[disabled] { opacity: .3; pointer-events: none; }

.lightbox-x {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: background 0.25s, transform 0.25s, color .25s;
}
.lightbox-x:hover { background: var(--surface-2); color: var(--text); transform: rotate(90deg); }

/* prev / next */
.lightbox-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--panel-rgb), 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--text-2);
  z-index: 2;
  transition: background .25s var(--ease), color .25s, opacity .25s;
}
.lightbox-nav:hover { background: var(--surface-2); color: var(--text); }
.lightbox-nav--prev { left: 14px; }
.lightbox-nav--next { right: 14px; }
.lightbox.is-zoomed .lightbox-nav { opacity: 0; pointer-events: none; }

.lightbox-hint {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .75;
}

@media (max-width: 680px) {
  .lightbox { padding: 64px 10px 14px; }
  .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-nav--prev { left: 6px; }
  .lightbox-nav--next { right: 6px; }
  .lightbox-hint { display: none; }
}

/* upload hint tile CMS teaser */
.gal-upload {
  display: grid;
  place-items: center;
  gap: 10px;
  border-radius: var(--radius);
  border: 1.5px dashed var(--border-strong);
  background: var(--surface);
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 0.85rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.gal-upload:hover { border-color: var(--accent-500); color: var(--text-2); }

/* ---------- 13. CTA band ---------- */
.cta-band {
  position: relative;
  padding: clamp(44px, 6vw, 72px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 150% at 12% 0%, rgba(var(--brand-rgb), 0.3), transparent 62%),
    radial-gradient(70% 120% at 92% 100%, rgba(var(--accent-rgb), 0.22), transparent 60%),
    linear-gradient(150deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--border);
  overflow: hidden;
  text-align: center;
}
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; margin-bottom: 30px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- 14. Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
}

.info-list { display: grid; gap: 14px; }
.info-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.info-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.info-item .card-ico { width: 42px; height: 42px; margin: 0; border-radius: 11px; flex: none; }
.info-item h4 { margin: 0 0 3px; font-size: 0.86rem; color: var(--muted); font-weight: 500; }
.info-item p { margin: 0; font-size: 0.95rem; color: var(--text); font-weight: 500; }
.info-item a:hover { color: var(--accent-400); }

.form-card {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(var(--tint-rgb), 0.06), rgba(var(--tint-rgb), 0.014));
  border: 1px solid var(--border);
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: rgba(var(--bg-rgb), 0.62);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-note {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- 15. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  padding-block: clamp(48px, 6vw, 72px) 28px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}
.foot-grid h5 {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  font-weight: 500;
}
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-links a { font-size: 0.89rem; color: var(--text-2); transition: color 0.25s, padding-left 0.25s; }
.foot-links a:hover { color: var(--accent-400); padding-left: 4px; }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}
.foot-ar {
  font-size: 1rem;
  color: var(--text-2);
  direction: rtl;
}

/* ---------- 16. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* progress bar */
.scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 150;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ---------- 17. Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding-top: calc(76px + clamp(56px, 8vw, 96px));
  padding-bottom: clamp(44px, 6vw, 72px);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(70% 120% at 16% 0%, rgba(var(--brand-rgb), 0.24), transparent 60%),
    radial-gradient(60% 100% at 88% 10%, rgba(var(--accent-rgb), 0.14), transparent 58%),
    var(--bg);
}
.page-hero h1 { font-size: var(--fs-headline); }

.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.crumb a:hover { color: var(--accent-400); }

/* decorative pleat bars in page hero */
.hero-pleats {
  position: absolute;
  top: 0; right: -40px;
  height: 100%;
  width: 320px;
  display: flex;
  gap: 26px;
  opacity: 0.16;
  pointer-events: none;
}
.hero-pleats i {
  display: block;
  width: 42px;
  height: 140%;
  border-radius: 99px;
  background: linear-gradient(to bottom, var(--accent-500), transparent 72%);
  transform: skewX(-20deg) translateY(-18%);
}

/* ---------- 18. Accordion (FAQ) ---------- */
.acc { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color 0.25s var(--ease);
}
.acc-q:hover { color: var(--accent-400); }
.acc-q i {
  flex: none;
  position: relative;
  width: 18px; height: 18px;
}
.acc-q i::before, .acc-q i::after {
  content: "";
  position: absolute;
  background: var(--accent-500);
  border-radius: 2px;
  transition: transform 0.35s var(--ease);
}
.acc-q i::before { inset: 8px 0; height: 2px; }
.acc-q i::after  { inset: 0 8px; width: 2px; }
.acc-item.is-open .acc-q i::after { transform: scaleY(0); }

.acc-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}
.acc-item.is-open .acc-a { grid-template-rows: 1fr; }
.acc-a > div { overflow: hidden; }
.acc-a p, .acc-a ul { font-size: 0.92rem; }
.acc-a ul { margin: 0 0 1em; padding-left: 1.1em; color: var(--text-2); }
.acc-a li { margin-bottom: 7px; font-size: 0.92rem; }
.acc-a > div > :last-child { margin-bottom: 22px; }

/* ---------- 19. Modal / popup ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  background: rgba(var(--deep-rgb), 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal-card {
  position: relative;
  width: min(620px, 100%);
  max-height: min(88vh, 860px);
  max-height: min(88svh, 860px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--border);
  box-shadow: 0 40px 100px -30px rgba(var(--shadow-rgb), 0.95);
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform 0.42s var(--ease), opacity 0.42s var(--ease);
}
.modal.is-open .modal-card { transform: none; opacity: 1; }

/* the same animated conic ring as the hero panel */
.modal-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ang, 0deg), transparent 62%, var(--accent-500), transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spinRing 7s linear infinite;
  pointer-events: none;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 26px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0 0 5px; font-size: 1.22rem; }
.modal-head p  { margin: 0; font-size: .88rem; }

.modal-x {
  flex: none;
  margin-inline-start: auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: background .25s var(--ease), transform .25s var(--ease), color .25s;
}
.modal-x:hover { background: var(--surface-2); color: var(--text); transform: rotate(90deg); }

.modal-body {
  padding: 24px 26px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* quick contact strip inside the modal */
.modal-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.modal-quick a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .85rem;
  font-weight: 500;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.modal-quick a:hover { border-color: var(--accent-500); background: var(--surface-2); }
.modal-quick svg { color: var(--accent-400); flex: none; }

/* success state */
.modal-done {
  display: none;
  text-align: center;
  padding: 18px 0 6px;
}
.modal-card.is-done .modal-done { display: block; }
.modal-card.is-done .modal-form { display: none; }

.modal-done-ico {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .2), rgba(var(--brand-rgb), .12));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent-400);
  animation: popIn .5s var(--ease) both;
}
@keyframes popIn {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

@media (max-width: 560px) {
  .modal { padding: 14px 12px; }
  .modal-head { padding: 20px 18px 15px; }
  .modal-body { padding: 18px; }
  .modal-quick { grid-template-columns: 1fr; }
}

/* ---------- 20. Product detail modal ---------- */
.modal--wide .modal-card { width: min(860px, 100%); }

.pm-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.pm-shot {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: linear-gradient(158deg, #FFFFFF 0%, #EDF2F8 62%, #DFE8F2 100%);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
}
.pm-shot img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* the shot can be enlarged into the lightbox */
.pm-shot.is-zoomable { position: relative; cursor: zoom-in; }
.pm-zoom-hint {
  position: absolute;
  right: 9px; bottom: 9px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* The badge takes the page colour, so the icon has to take the page ink
     with it a white magnifier disappeared on the light theme. */
  color: var(--text);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;
}
.pm-shot.is-zoomable:hover .pm-zoom-hint { opacity: 1; transform: scale(1); }

/* industry shots are photographs, so they fill the plate */
.im-shot { background: linear-gradient(160deg, var(--panel-a), var(--panel-b)); padding: 0; overflow: hidden; }
.im-shot img {
  width: 100%; height: 100%;
  max-height: none;
  object-fit: cover;
  mix-blend-mode: normal;
}
.im-shot--none {
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(var(--brand-rgb), 0.3), transparent 72%),
    linear-gradient(160deg, var(--panel-a), var(--panel-b));
}

/* single-image lightbox: no stepping, no counter */
.lightbox.is-solo .lightbox-nav { display: none; }
.lightbox.is-solo .lightbox-count { visibility: hidden; }

.pm-tagline {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--accent-400);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.pm-summary { font-size: .93rem; margin: 0; }

.pm-sec { margin-bottom: 26px; }
.pm-sec:last-child { margin-bottom: 0; }
.pm-sec > h4 {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 14px;
}

/* "why choose it" label + explanation pairs */
.pm-why { display: grid; gap: 10px; }
/* direct children only the inner wrapper must not inherit the row box */
.pm-why > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}
.pm-why > div > div { min-width: 0; }
.pm-why svg { color: var(--accent-500); margin-top: 3px; flex: none; }
.pm-why b { display: block; font-size: .9rem; margin-bottom: 2px; }
.pm-why span { font-size: .86rem; color: var(--text-2); line-height: 1.55; }

/* option groups */
.pm-group { margin-bottom: 18px; }
.pm-group h5 {
  font-size: .9rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.pm-group p { font-size: .82rem; color: var(--muted); margin: 0 0 10px; }

/* spec table */
.pm-specs {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pm-specs div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 15px;
  background: var(--bg-3);
  font-size: .87rem;
}
.pm-specs dt { color: var(--muted); margin: 0; }
.pm-specs dd { margin: 0; color: var(--text-2); }

/* highlighted callout */
.pm-callout {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(var(--brand-rgb), 0.2), rgba(var(--accent-rgb), 0.07));
  border: 1px solid rgba(var(--accent-rgb), 0.26);
}
.pm-callout h5 { margin: 0 0 10px; font-size: .95rem; }
.pm-callout ul { margin: 0; padding-left: 1.1em; }
.pm-callout li { font-size: .86rem; color: var(--text-2); margin-bottom: 5px; }

/* related products */
.pm-related { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-related button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text-2);
  transition: all .25s var(--ease);
}
.pm-related button:hover {
  border-color: var(--accent-500);
  color: var(--text);
  background: var(--surface-2);
}

/* sticky action bar at the foot of the product modal */
.pm-actions {
  position: sticky;
  bottom: -26px;
  margin: 26px -26px -26px;
  padding: 18px 26px;
  background: linear-gradient(to top, var(--panel-a) 70%, rgba(var(--panel-rgb), 0.9));
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pm-actions .btn { flex: 1 1 auto; }

/* the card is clickable on the catalogue */
.pcard[data-product] { cursor: pointer; }
.pcard-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-400);
}
.pcard-more svg { transition: transform .35s var(--ease); }
.pcard:hover .pcard-more svg { transform: translateX(4px); }

@media (max-width: 660px) {
  .pm-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pm-shot { max-width: 200px; }
  .pm-specs div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* Phones. The action bar's negative margins and sticky offset must match
   the popup body's padding, which drops to 18px at this same width
   matching it at a different breakpoint left a gap at the edges. */
@media (max-width: 560px) {
  .pm-actions {
    bottom: -18px;
    margin: 22px -18px -18px;
    padding: 12px 18px;
    gap: 8px;
  }
  .pm-actions .btn { padding: 12px 16px; font-size: .9rem; }
  /* "Keep browsing" does exactly what the ✕ above it does; on a phone
     that room is worth more as content */
  .pm-actions [data-close-pm],
  .pm-actions [data-close-im] { display: none; }
}

/* ---------- 20c. "Find my filter" selector ---------- */
.sel-progress {
  height: 2px;
  background: var(--border);
  overflow: hidden;
}
.sel-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 0.5s var(--ease);
}

.sel-count {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-400);
  margin-bottom: 10px;
}
.sel-q {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.sel-hint { font-size: .88rem; color: var(--muted); margin: 0 0 22px; }

.sel-options { display: grid; gap: 10px; }
.sel-option {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  padding-right: 46px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .28s var(--ease), background .28s var(--ease),
              transform .28s var(--ease);
}
.sel-option:hover {
  border-color: var(--accent-500);
  background: var(--surface-2);
  transform: translateX(3px);
}
.sel-option b { display: block; font-size: .97rem; margin-bottom: 3px; }
.sel-option span { display: block; font-size: .85rem; color: var(--text-2); line-height: 1.5; }

/* arrow that appears on hover */
.sel-option::after {
  content: "";
  position: absolute;
  right: 18px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--accent-500);
  border-top: 2px solid var(--accent-500);
  transform: rotate(45deg) translateX(-4px);
  opacity: 0;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.sel-option:hover::after { opacity: 1; transform: rotate(45deg) translateX(0); }

.sel-nav { margin-top: 18px; }

/* result */
.sel-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
}
.sel-answers .chip {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-400);
}
.sel-disclaimer {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.65;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  margin: 0;
}

/* the result's "what to watch" rows have no bold label */
.sel-result .pm-why > div > div > span { font-size: .88rem; }

/* entry point card on the page */
.sel-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: clamp(26px, 4vw, 38px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 140% at 10% 0%, rgba(var(--brand-rgb), 0.26), transparent 62%),
    linear-gradient(150deg, var(--panel-a), var(--panel-b));
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.sel-cta:hover { border-color: rgba(var(--accent-rgb), 0.55); transform: translateY(-3px); }
.sel-cta-ico {
  flex: none;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.2), rgba(var(--brand-rgb), 0.12));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent-400);
}
.sel-cta-txt { flex: 1 1 320px; }
.sel-cta-txt h3 { margin: 0 0 6px; font-size: 1.2rem; }
.sel-cta-txt p { margin: 0; font-size: .92rem; }

/* header button */
.nav-selector { gap: 7px; }
.nav-selector svg { color: var(--accent-400); width: 16px; height: 16px; }

/* Mid-width laptops: the label goes, the icon stays, so the header still
   fits on one line without squeezing anything.

   Measured, not guessed. With eight links, the light/dark switch and both
   buttons labelled, the row needs 1,436px on the dark theme and 1,478px on
   the light one the logo plaque is wider in daylight. That left every
   laptop between the 1,400px collapse and about 1,480px with buttons
   running off the right-hand edge, which is what a 13-inch MacBook showed.
   Dropping this one label frees 106px, so the full row now fits from
   1,400px up and no laptop is pushed into the menu button. */
@media (max-width: 1540px) {
  .nav-selector { width: 40px; height: 40px; padding: 0; gap: 0; }
  .nav-selector .nav-selector-label { display: none; }
}

/* Mobile menu entry. Needs `.nav-links > a.` to outrank the
   `.nav-links > a { display: inline-flex }` rule, otherwise it leaks
   onto the desktop header. */
.nav-links > a.nav-sel-mobile { display: none; }
@media (max-width: 1400px) {
  .nav-links > a.nav-sel-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 13px 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(var(--brand-rgb), .1));
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--accent-400);
    font-weight: 600;
  }
}

@media (max-width: 560px) {
  .sel-option { padding: 14px 16px; padding-right: 40px; }
}

/* ---------- 20b. Smooth filtering (FLIP) ---------- */
.filter-grid > * {
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
/* items on their way out */
.filter-grid > .is-leaving {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
}
/* items arriving */
.filter-grid > .is-entering {
  opacity: 0;
  transform: translateY(14px) scale(.97);
}
/* while a FLIP move is playing, suppress the normal transition */
.filter-grid > .is-moving { transition: none; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* The header collapses into the menu button well before the content does,
   because a squeezed header is what distorted the logo once already.
   Raised from 1,240px to 1,400px when the eighth link and the light/dark
   switch were added: at 1,366px an ordinary laptop the row no longer
   fitted and the buttons ran off the right-hand edge. */
@media (max-width: 1400px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    inset: 76px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 16px var(--gutter) 26px;
    background: var(--panel-b);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    max-height: calc(100vh - 76px);
    max-height: calc(100svh - 76px);
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links > a, .nav-drop > button { width: 100%; padding: 13px 14px; font-size: 0.97rem; }
  .nav-links > a[aria-current="page"]::after { display: none; }

  .nav-drop { width: 100%; }
  .drop-panel {
    position: static;
    translate: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 2px 0 8px;
    background: rgba(var(--tint-rgb), 0.025);
    box-shadow: none;
    /* Closed until Solutions is tapped. display rather than opacity, so
       hover and :focus-within (which stay true after a tap) cannot hold
       it open the way they do in the desktop header. */
    display: none;
  }
  .nav-drop.is-open .drop-panel { display: block; }
  .nav-drop:hover > button svg { transform: none; }
  .nav-drop.is-open > button svg { transform: rotate(180deg); }
}

@media (max-width: 920px) {
  .hero-grid, .split, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split-media { order: 0; }
  .hero { min-height: auto; }
  .scroll-hint { display: none; }
  .gal-item--wide { grid-column: span 1; }
}

@media (max-width: 680px) {
  :root { --gutter: 18px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .gal-grid { grid-auto-rows: 180px; }
  .gal-item--tall { grid-row: span 1; }
  .hero-pleats { display: none; }
  .card, .form-card, .hero-panel { padding: 22px; }
}

/* ---------- 22. Language switch ---------- */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
}
/* Both element types. The switch is written by the server as links, so
   that it answers before any script has run; main.js still injects
   buttons if it ever finds a page without one. */
.lang-switch button,
.lang-switch a {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border: 0;
  border-radius: 99px;
  background: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease);
}
.lang-switch button:hover,
.lang-switch a:hover { color: var(--text); }
.lang-switch button.is-active,
.lang-switch a.is-active {
  background: linear-gradient(135deg, var(--accent-500), var(--brand-500));
  color: var(--on-accent);
}
.lang-switch button[lang="ar"],
.lang-switch a[lang="ar"] { font-size: .84rem; }

/* ---------- 23. Arabic, right to left ----------
   The whole document is dir="rtl" in Arabic, so the header, the grids,
   the lists and the text alignment mirror by themselves — flexbox, grid
   and the `inset` shorthand are all direction-aware. What follows is the
   remainder: the places written in physical left/right terms, the things
   that must NOT flip, and the typography the script needs.

   It used to be deliberate that Arabic did not mirror. It mirrors now
   because that is what an Arabic reader expects, and because the parts
   that genuinely must stay put — the logo, phone numbers, model codes —
   can be held in place one by one, which is the smaller problem. */

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

/* Arabic script is cursive; tracking breaks the letter joins, so every
   element that is letter-spaced in English loses it here. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .scroll-hint,
html[lang="ar"] .panel-head span,
html[lang="ar"] .pcard-tag,
html[lang="ar"] .foot-grid h5,
html[lang="ar"] .lightbox-count,
html[lang="ar"] .lightbox-hint,
html[lang="ar"] .foot-bottom span,
html[lang="ar"] .card-num,
html[lang="ar"] .pm-sec > h4,
html[lang="ar"] .chip,
html[lang="ar"] .hero-badge i,
html[lang="ar"] .filter-btn,
html[lang="ar"] .evt-pop-tag,
html[lang="ar"] .btn { letter-spacing: 0; }

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5 { letter-spacing: 0; line-height: 1.3; }

/* Arabic needs more room between lines than Latin at the same size. */
html[lang="ar"] p,
html[lang="ar"] .lede,
html[lang="ar"] li { line-height: 1.85; }

/* ---- what must not flip ----
   Each of these is a run of Latin inside an Arabic page. Left to the
   page direction, a phone number comes out backwards and a model code
   like 316L loses its letter to the wrong end. */
/* .brand is deliberately NOT in this list. A logical property resolves
   against the element's OWN direction, so `direction: ltr` on the link
   turned its `margin-inline-end: auto` back into a right-hand margin and
   left the logo stranded in the middle of the header. The lockup inside
   is artwork and needs no direction of its own. */
html[dir="rtl"] .brand-mark,
html[dir="rtl"] .marquee,
html[dir="rtl"] .marquee-item,
html[dir="rtl"] .stat b,
html[dir="rtl"] .lightbox-count,
html[dir="rtl"] .evt-pop-qr,
html[dir="rtl"] code,
html[dir="rtl"] .lang-switch,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="https://wa.me"] { direction: ltr; unicode-bidi: embed; }

/* The stand number, the invitation code and anything else deliberately
   kept in Latin reads left to right inside its own box. */
html[dir="rtl"] .evt-pop-stand b,
html[dir="rtl"] .pass-code,
html[dir="rtl"] .inv-code { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---- the physical leftovers ----
   Everything the page uses that names a side rather than a start or an
   end. There are not many; the site was built on flexbox and grid. */

/* Arrows point the way the reader travels, so they turn round. The
   magnifier and the chevron on a dropdown are symmetrical and do not. */
html[dir="rtl"] .btn--primary .ico-arrow,
html[dir="rtl"] .evt-tab-ico,
html[dir="rtl"] .crumb-sep,
html[dir="rtl"] .pm-nav svg,
html[dir="rtl"] .lightbox-prev svg,
html[dir="rtl"] .lightbox-next svg { transform: scaleX(-1); }

/* A translateX nudge on hover moves the wrong way once the page is
   mirrored. */
html[dir="rtl"] .evt-bar-in:hover .evt-bar-go,
html[dir="rtl"] .foot-links a:hover { transform: translateX(-3px); }

/* Anything anchored to a screen corner: the corner changes. */
html[dir="rtl"] .evt-tab { left: auto; right: 18px; }
html[dir="rtl"] .evt-pop-x { right: auto; left: 10px; }
html[dir="rtl"] .chat-launcher,
html[dir="rtl"] .chat-panel { right: auto; left: 18px; }

@media (max-width: 680px) {
  html[dir="rtl"] .evt-tab { left: auto; right: 12px; }
}

/* A left border marking a quote or a note belongs on the other side. */
html[dir="rtl"] blockquote,
html[dir="rtl"] .note { border-left: 0; border-right: 3px solid var(--accent-500); }

/* The scroll-progress bar fills from the side the reader starts on. */
html[dir="rtl"] .scroll-bar { left: auto; right: 0; transform-origin: right; }

/* ---------- 24. Touch devices (phones, tablets) ---------- */

/* iOS Safari zooms the whole page in when a form field with text smaller
   than 16px is focused. 16px keeps the view still on every iPhone. */
@media (hover: none), (max-width: 920px) {
  .field input,
  .field select,
  .field textarea { font-size: 16px; }
}

/* Anything revealed on hover would simply never appear on a touchscreen,
   so on touch devices it is shown from the start. */
@media (hover: none) {
  .gal-cap { transform: none; }
  .ind-body small { opacity: 1; transform: none; }
  .pm-zoom-hint { opacity: 1; transform: none; }
  .sel-option::after { opacity: 1; transform: rotate(45deg); }
  .card::before { display: none; }          /* cursor glow has no cursor */
}

/* The Solutions dropdown opens on hover with a mouse; on a touchscreen
   (an iPad Pro in landscape gets the full desktop nav) it opens on tap. */
.nav-drop.is-open .drop-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop.is-open > button svg { transform: rotate(180deg); }

/* Android/iOS tap flash is replaced by the site's own pressed states */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Very wide screens (2K / 4K / ultrawide): scale type up a touch */
@media (min-width: 2000px) {
  html { font-size: 17px; }
}

/* ---------- 25. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; }
}

/* ---------- 26. The event announcement ----------
   This was a strip above the header. The header is position:fixed, so
   the strip drew on top of the logo and the navigation instead of
   pushing them down — and a thin bar at the very top of a page is the
   one band people have learned to skip. An exhibition four days away
   deserves better than the place reserved for cookie notices.

   So: a card in the middle, once per visitor per event, with the poster
   and a code to carry the details away on a phone. */
/* This has to come first and it has to be here.
   `hidden` works by way of `display: none` in the browser's own
   stylesheet, and a class beats that every time — so `.evt-pop` saying
   `display: flex` quietly cancelled the attribute. The card closed, the
   script ran, the state was right, and it stayed on the screen anyway:
   the cross, "Maybe later" and the link all looked dead. */
.evt-pop[hidden] { display: none; }

.evt-pop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 14, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: evtFade .32s var(--ease);
}
@keyframes evtFade { from { opacity: 0; } to { opacity: 1; } }

/* Nothing scrolls behind it while it is open. */
html.evt-pop-open, html.evt-pop-open body { overflow: hidden; }

.evt-pop-card {
  position: relative;
  display: flex;
  width: min(820px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .7);
  animation: evtRise .36s var(--ease);
}
@keyframes evtRise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.evt-pop-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(var(--bg-rgb), .72);
  color: var(--text);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.evt-pop-x:hover { background: var(--surface); }

/* The poster beside the words on a wide screen, above them on a narrow
   one. A portrait poster is shown whole, the same as on the events
   page — the logo at the top of it is not ours to crop. */
.evt-pop-pic {
  flex: none;
  width: 40%;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
}
.evt-pop-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evt-pop-pic--poster { padding: 12px; }
.evt-pop-pic--poster img { object-fit: contain; }

.evt-pop-body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 26px 26px 24px;
}
.evt-pop-tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .14);
  border: 1px solid rgba(var(--accent-rgb), .36);
  color: var(--accent-400);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.evt-pop-body h2 { margin: 12px 0 6px; font-size: 1.5rem; line-height: 1.15; }
.evt-pop-when { margin: 0 0 12px; color: var(--text-2); font-size: .92rem; }
.evt-pop-stand { margin: 0 0 16px; font-size: .92rem; color: var(--text-2); }
.evt-pop-stand b { color: var(--accent-400); font-size: 1.05rem; }

/* The code sits on white whatever the page is doing: a reader expects
   dark modules on a light ground, and some will not read an inverted
   one at all. */
.evt-pop-qr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 18px;
}
/* Big enough to scan from an arm's length off a laptop screen, which is
   where most people will meet it. The code carries a short address, so
   the modules stay chunky at this size. */
.evt-pop-qr svg {
  flex: none;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}
.evt-pop-qr span { font-size: .88rem; color: var(--text-2); line-height: 1.4; }

/* ---------- the code on the gallery page ----------
   The same generator and the same quiet zone as the popup, in a
   different frame: here it sits alone in a square panel rather than in
   a row, so it is drawn large and centred with its caption underneath.

   What was here before was a DRAWING of a QR — squares arranged to look
   like one, carrying nothing. It was marked "decorative" in the source,
   but nobody reads the source: people point a phone at a QR, and when
   nothing happens the page has told them a small lie. This one is a
   real code. */
.gal-qr {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 24px;
}
/* The width lives on the LINK, not on the svg inside it.
   A percentage on the svg resolves against this element, whose own
   width is decided by its content — the svg. That circle collapses to
   the code's intrinsic 148px and the QR comes out thumbnail-sized in a
   panel four times the size. */
.gal-qr-code {
  display: block;
  width: min(74%, 300px);
  line-height: 0;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.35s var(--ease);
}
.gal-qr-code svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 18px 44px -22px rgba(var(--shadow-rgb), 0.9);
}
.gal-qr-say {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* A scan target with a mouse, a tap target on a phone — the same
   distinction the popup makes, for the same reason: on a phone the
   visitor is already holding the camera they would scan it with. */
.gal-qr-tap { display: none; }
@media (hover: none), (pointer: coarse) {
  .gal-qr-code { -webkit-tap-highlight-color: transparent; }
  .gal-qr-code:active { transform: scale(0.97); }
  .gal-qr-scan { display: none; }
  .gal-qr-tap  { display: inline; color: var(--accent-400); font-weight: 700; }
}
@media (hover: hover) and (pointer: fine) {
  /* Nothing to click with a mouse: it is there to be scanned. */
  .gal-qr-code { pointer-events: none; }
}

/* The linked code: a scan target with a mouse, a tap target on a phone. */
a.evt-pop-qr { color: inherit; text-decoration: none; }
.evt-pop-qr-tap { display: none; }
@media (hover: none), (pointer: coarse) {
  a.evt-pop-qr { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  a.evt-pop-qr:active { border-color: var(--accent-400); }
  .evt-pop-qr--link .evt-pop-qr-scan { display: none; }
  .evt-pop-qr--link .evt-pop-qr-tap { display: inline; color: var(--accent-400); font-weight: 600; }
}
@media (hover: hover) and (pointer: fine) {
  a.evt-pop-qr { pointer-events: none; }
}

.evt-pop-go { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- the way back ----------
   The card is shown once. This stays in the corner afterwards, so
   somebody who closed it in the first second can still get the stand
   number. Bottom left, because the chat bubble owns the right. */
.evt-tab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 36px);
  padding: 9px 15px 9px 11px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: rgba(var(--bg-rgb), .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6);
  cursor: pointer;
  text-align: left;
  animation: evtTabIn .4s var(--ease);
  transition: transform .28s var(--ease), border-color .28s var(--ease);
}
@keyframes evtTabIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.evt-tab:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .5); }
.evt-tab[hidden] { display: none; }

.evt-tab-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-500), var(--brand-500));
  color: var(--on-accent);
}
.evt-tab-ico svg { width: 16px; height: 16px; }
.evt-tab-txt { min-width: 0; }
.evt-tab-txt b {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evt-tab-txt small { display: block; font-size: .72rem; color: var(--muted); }

@media (max-width: 680px) {
  .evt-pop { padding: 12px; }
  .evt-pop-card { flex-direction: column; }
  /* The poster keeps a sensible share of a phone screen rather than
     filling it and pushing the stand number out of sight. */
  .evt-pop-pic { width: 100%; max-height: 34dvh; }
  .evt-pop-pic--poster img { max-height: 32dvh; }
  .evt-pop-body { padding: 18px 18px 20px; }
  .evt-pop-body h2 { font-size: 1.25rem; }
  /* Still large: a phone camera reading its own screen is not the case
     here — somebody else's phone reads this one. */
  .evt-pop-qr svg { width: 124px; height: 124px; }
  .evt-tab { left: 12px; bottom: 12px; padding: 8px 13px 8px 9px; }
  .evt-tab-txt b { font-size: .78rem; }
}

/* On the narrowest screens the chat bubble and the tab would meet in the
   middle, so the tab keeps its icon and drops the words. */
@media (max-width: 420px) {
  .evt-tab-txt { display: none; }
  .evt-tab { padding: 8px; border-radius: 50%; }
}

/* iPhones: once the toolbar collapses on scroll the page runs under the
   home indicator, and a plain bottom offset drops the tab out of line
   with the chat bubble. Same insets as .chat-fab in chat.css. */
@supports (padding: max(0px)) {
  .evt-tab {
    left: max(18px, calc(env(safe-area-inset-left) + 12px));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  }
  @media (max-width: 560px) {
    .evt-tab {
      left: max(14px, calc(env(safe-area-inset-left) + 8px));
      bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
    }
  }
}

/* A tap leaves :hover stuck on touch screens, which kept the tab 2px
   higher than it should sit. */
@media (hover: none) {
  .evt-tab:hover { transform: none; }
}
/* ---------- 27. Events on the site ---------- */
.evt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.evt {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.evt:hover { border-color: var(--accent-500); transform: translateY(-3px); }
.evt-pic {
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
}
.evt-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- an exhibition poster ----------
   A poster is portrait and carries its own typography: the logo, the
   stand number, the venue, the registration address. Cropping it to the
   card's 16/9 keeps a band through the middle and loses the lot — the
   EIF logo first, which is the one thing that may never be cropped.

   So a poster gets a taller box and is shown whole inside it. The space
   either side is the page's own colour, not black bars, so it reads as
   part of the card rather than as a letterboxed video.

   3/4 rather than the poster's own 4/5: tall enough that a portrait
   poster is comfortable, short enough that a row of cards does not turn
   into a column of towers. */
.evt-pic--poster {
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--brand-rgb), .16), transparent 70%),
    linear-gradient(160deg, var(--bg-3), var(--bg-2));
  padding: 10px;
}
.evt-pic--poster img { object-fit: contain; }

/* On a phone the cards are already full width, so a 3/4 poster would run
   most of the screen height before the text. It relaxes there. */
@media (max-width: 560px) {
  .evt-pic--poster { aspect-ratio: 4 / 5; }
}
.evt-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.evt-when {
  display: flex; align-items: center; gap: 9px;
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-400); font-weight: 700;
}
.evt-state {
  padding: 2px 9px; border-radius: 99px;
  background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3);
  letter-spacing: 0; text-transform: none; font-size: .72rem;
}
.evt-state--now { background: rgba(var(--ok-rgb), .14); border-color: rgba(var(--ok-rgb), .36); color: rgb(var(--ok-rgb)); }
.evt h3 { margin: 0; font-size: 1.22rem; letter-spacing: -0.02em; }
.evt-where { color: var(--muted); font-size: .86rem; margin: 0; }
.evt-sum { color: var(--text-2); font-size: .9rem; line-height: 1.65; margin: 4px 0 0; }
.evt-stand {
  margin-top: auto; padding-top: 12px;
  font-size: .86rem; color: var(--text);
}
.evt-stand strong { color: var(--accent-400); }

/* ---------- 28. An invitation, on screen ---------- */
.pass-wrap { padding: 54px 0 80px; }
.pass-shell { max-width: 620px; }
.pass {
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border);
  padding: 34px 30px;
  box-shadow: 0 30px 70px -34px rgba(var(--shadow-rgb), .9);
}
.pass--in { border-color: rgba(var(--ok-rgb), .45); }
.pass--bad { border-color: rgba(var(--bad-rgb), .4); text-align: center; }
.pass-mark {
  width: 54px; height: 54px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--bad-rgb), .12);
  border: 1px solid rgba(var(--bad-rgb), .4);
  color: rgb(var(--bad-rgb)); font-size: 1.5rem;
}
.pass-role {
  display: inline-block; margin-bottom: 16px;
  padding: 4px 11px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .72rem; color: var(--muted);
}
.pass-eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-400); font-weight: 700; margin-bottom: 6px;
}
.pass h1 { margin: 0; font-size: 1.9rem; letter-spacing: -0.03em; }
.pass-company { margin: 4px 0 0; color: var(--muted); }
.pass-event {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.pass-event h2 { margin: 0 0 14px; font-size: 1.1rem; letter-spacing: -0.015em; }
.pass-event dl { margin: 0; display: grid; gap: 10px; }
.pass-event dl > div { display: flex; gap: 14px; align-items: baseline; }
.pass-event dt {
  flex: none; width: 76px;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.pass-event dd { margin: 0; font-size: .95rem; }
.pass-code { font-family: var(--mono); letter-spacing: .08em; color: var(--accent-400); }
.pass-done, .pass-warn, .pass-note {
  margin-top: 22px; padding: 13px 16px; border-radius: 11px; font-size: .9rem;
}
.pass-done { background: rgba(var(--ok-rgb), .1); border: 1px solid rgba(var(--ok-rgb), .35); color: rgb(var(--ok-rgb)); }
.pass-warn { background: rgba(var(--warn-rgb), .1); border: 1px solid rgba(var(--warn-rgb), .35); color: rgb(var(--warn-rgb)); }
.pass-note { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.pass-actions { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.pass-help { margin-top: 22px; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.pass-history { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.pass-history h3 {
  margin: 0 0 10px; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.pass-history ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pass-history li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: .84rem; font-family: var(--mono); color: var(--text-2);
}
.pass-history li span { color: var(--muted); font-family: var(--font); }

@media (max-width: 560px) {
  .pass { padding: 26px 20px; }
  .pass h1 { font-size: 1.5rem; }
  .pass-event dl > div { flex-direction: column; gap: 2px; }
  .pass-event dt { width: auto; }
}

/* ---------- 29. Light / dark switch ----------
   A small sun-and-moon slider. It is the only control that changes how
   the whole site looks, so it reads as a switch rather than a button:
   role="switch" with aria-checked, and a knob that actually travels. */
.theme-toggle {
  --tt-w: 54px;
  --tt-h: 29px;
  --tt-pad: 3px;
  position: relative;
  flex: none;
  width: var(--tt-w);
  height: var(--tt-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.theme-toggle:hover { border-color: var(--border-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 3px; }

.tt-knob {
  position: absolute;
  top: var(--tt-pad);
  left: var(--tt-pad);
  width: calc(var(--tt-h) - var(--tt-pad) * 2);
  height: calc(var(--tt-h) - var(--tt-pad) * 2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent-500), var(--brand-500));
  color: var(--on-accent);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .35);
  transition: transform .42s var(--ease), background .3s var(--ease);
}
.tt-icon {
  position: absolute;
  width: 15px;
  height: 15px;
  transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* aria-checked="true" means dark is on, which is where the site starts. */
.theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(calc(var(--tt-w) - var(--tt-h))); }
.theme-toggle[aria-checked="true"] .tt-sun  { opacity: 0; transform: rotate(90deg) scale(.4); }
.theme-toggle[aria-checked="true"] .tt-moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle[aria-checked="false"] .tt-sun  { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle[aria-checked="false"] .tt-moon { opacity: 0; transform: rotate(-70deg) scale(.4); }
.theme-toggle:active .tt-knob { width: calc(var(--tt-h) - var(--tt-pad) * 2 + 3px); }

@media (max-width: 1240px) {
  .theme-toggle { --tt-w: 48px; --tt-h: 26px; }
  .tt-icon { width: 13px; height: 13px; }
}

/* ---------- 30. The logo in daylight ----------
   EIF supplied the lockup twice: reversed, drawn in white for a dark
   page, and standard, in brand blue and charcoal for a light one. So
   daylight needs no plaque and no recolouring it needs the other file,
   which is the one the company already uses on white.

   Both are in the page and the theme chooses between them. They are the
   same 497x96 artwork, so nothing moves when it changes, and switching
   theme never waits for a download. */
.brand-mark--light { display: none; }
html[data-theme="light"] .brand-mark--dark { display: none; }
html[data-theme="light"] .brand-mark--light { display: block; }

/* ---------- 32. Social accounts ----------
   A row of icons in the footer, under the address. Each is a link the
   size of a fingertip 40px, which is the smallest a touch target
   should be and the icon inside stays small so the row reads as
   quiet rather than as a second navigation. */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}
.social svg { width: 17px; height: 17px; display: block; }
.social a:hover {
  background: linear-gradient(135deg, var(--accent-500), var(--brand-500));
  border-color: transparent;
  color: var(--on-accent);
  transform: translateY(-2px);
}
.social a:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb));
  outline-offset: 2px;
}

/* A few places lean on the dark page for contrast and need help on paper. */
html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.84);
  border-bottom-color: var(--border);
}
html[data-theme="light"] .hero-canvas { opacity: .3; }
html[data-theme="light"] .hero-pleats { opacity: .45; }
html[data-theme="light"] .gal-item--photo,
html[data-theme="light"] .im-shot { background: linear-gradient(160deg, #EEF3F9, #E3EBF4); }
html[data-theme="light"] ::selection { background: var(--accent-500); color: #fff; }

/* ---------- 31. The switch on a phone ----------
   On the narrowest screens the header row has to hold the logo, the
   language switch and the menu button inside about 330px. Rather than
   squeeze the logo the one thing that must not shrink the theme
   switch moves into the opened menu, the same way "Find my filter"
   already does. Below this width the header copy is the only copy. */
.theme-mobile { display: none; }

@media (max-width: 440px) {
  .nav-cta .theme-toggle { display: none; }

  .nav-links > .theme-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: auto;
    margin-top: 6px;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
  }
  /* The knob stops travelling and simply shows which mode is on; the
     label beside it says the same thing in words. */
  .nav-links > .theme-mobile .tt-knob {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    width: 26px;
    height: 26px;
    transform: none;
  }
  .nav-links > .theme-mobile .tt-icon { width: 14px; height: 14px; }
}

.tt-say { display: none; }
.theme-mobile[aria-checked="true"] .tt-say-dark,
.theme-mobile[aria-checked="false"] .tt-say-light { display: inline; }

/* ---------- Devices: notches, home indicator, older browsers ---------- */
/* The viewport is viewport-fit=cover so the page runs edge to edge on
   iPhones with a notch or Dynamic Island. These keep content out from
   under them in landscape and above the home indicator. On every other
   device env() is 0 and max() leaves the normal gutter. */
@supports (padding: max(0px)) {
  .shell {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .site-header { padding-top: env(safe-area-inset-top); }
  .site-footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Long words (product codes, e-mail addresses, Arabic compounds) wrap
   instead of pushing a narrow phone sideways. */
h1, h2, h3, h4, p, li, td, dd { overflow-wrap: break-word; word-wrap: break-word; }

/* ---------- About: partner logos ---------- */
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 18px 20px;
  text-align: center;
}
/* Every plate is the same height whatever the shape of the logo inside,
   so a square mark and a long wordmark sit in an even row. */
.partner-logo {
  position: relative;
  display: block;
  width: 100%;
  height: 120px;
  height: clamp(92px, 9vw, 132px);
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(10, 40, 80, .08);
}
.partner-logo img {
  position: absolute;
  top: 14%;
  left: 10%;
  width: 80%;
  height: 72%;
  max-width: none;
  object-fit: contain;
}
.partner-card h4 {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.partner-card--cta { display: grid; place-items: center; min-height: 100%; }
a.partner-card--cta:hover,
a.partner-card--cta:focus-visible { border-color: var(--accent-400); }
a.partner-card--cta:hover .arrow-link { color: var(--accent-400); }
a.partner-card { color: inherit; text-decoration: none; cursor: pointer; }
a.partner-card .partner-logo { transition: transform .3s var(--ease, ease), box-shadow .3s; }
a.partner-card:hover .partner-logo,
a.partner-card:focus-visible .partner-logo {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(10, 40, 80, .08), 0 10px 26px rgba(0, 0, 0, .22);
}
a.partner-card:hover h4,
a.partner-card:focus-visible h4 { color: var(--accent-400); }
a.partner-card:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 3px; }
.partner-ext { display: inline-block; margin-left: 2px; opacity: .55; font-size: .85em; transition: opacity .2s, transform .2s; }
a.partner-card:hover .partner-ext { opacity: 1; transform: translate(1px, -1px); }
/* Logos read fine two to a row on a phone; one per row would blow each
   one up to the full width of the screen. */
@media (max-width: 680px) {
  .grid--partners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 560px) {
  .partner-logo { height: 84px; }
  .partner-card { padding: 12px 12px 14px; gap: 10px; }
  .partner-card h4 { font-size: .78rem; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 33. Where we are ----------
   The map and the address side by side, the map taking the larger share
   because it is the part people came to look at. On a phone they stack,
   map first. */
.map-band {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.map-frame {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.map-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.map-side h3 { margin: 0; font-size: 1.05rem; }
.map-side > p { margin: 0; color: var(--text-2); font-size: .92rem; max-width: 36ch; }

.map-facts { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; }
.map-facts dt {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding-top: 2px;
}
.map-facts dd { margin: 0; font-size: .92rem; }
.map-facts a { color: var(--text); text-decoration: none; }
.map-facts a:hover { color: var(--accent-400); }

.map-side .btn-row { margin-top: auto; padding-top: 6px; }

@media (max-width: 900px) {
  .map-band { grid-template-columns: 1fr; }
  .map-frame { min-height: 280px; }
  .map-side { padding: 20px; }
}

/* ---------- the spam honeypot ----------
   A field people never see and robots fill in. It cannot be
   display:none — robots skip those — so it used to be parked at
   left:-9999px.

   That is safe in a left-to-right page, where content off the left edge
   creates no scrollbar, and wrong in a right-to-left one, where the
   overflow direction reverses: the Arabic contact page came out 11,234
   pixels wide on a 360-pixel phone.

   One pixel, clipped to nothing, works the same in both directions. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 34. Legal pages ----------
   One column of running text at a comfortable reading width. Nothing
   clever: a privacy policy is read once, carefully, usually because
   somebody is looking for a particular sentence. */
.legal { max-width: 74ch; }
.legal .lede { margin-bottom: 26px; }
.legal h2 {
  margin: 34px 0 10px;
  font-size: 1.16rem;
  line-height: 1.3;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 12px; color: var(--text-2); line-height: 1.75; }
.legal ul { margin: 0 0 16px; padding-inline-start: 20px; }
.legal li { margin-bottom: 9px; color: var(--text-2); line-height: 1.7; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent-400); }
.legal .muted { font-size: .88rem; }

/* ---------- 35. Company catalogue ----------
   The one PDF a visitor can take away, offered in three places: a card
   in the hero, a showcase straight after the partner strip, and a link
   in the header on every page. All three go through /catalogue, which
   counts the download. */

/* hero card: the real cover, what the file is, and a download mark */
.hero-cat {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  margin-top: 26px;
  padding: 9px;
  padding-inline-end: 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  transition: transform 0.35s var(--ease), border-color 0.3s var(--ease),
              box-shadow 0.35s var(--ease), background 0.3s var(--ease);
}
.hero-cat:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
  border-color: var(--accent-500);
  box-shadow: 0 14px 38px -16px var(--accent-glow);
}
.hero-cat-cover {
  flex: none;
  width: 64px;
  height: 53px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 4px 14px -4px rgba(var(--shadow-rgb), 0.45);
}
.hero-cat-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cat-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero-cat-txt b { font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.hero-cat-txt small { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
.hero-cat-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-inline-start: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-500), var(--brand-500));
  color: var(--on-accent);
}
.hero-cat-ico svg { animation: cat-nudge 2.4s var(--ease-in-out) infinite; }
@keyframes cat-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  75%           { transform: translateY(3px); }
}

/* showcase */
.cat-show {
  background: var(--bg-2);
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.cat-show-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}

/* the cover, held up as a book: tilted, with a stack of pages behind */
.cat-book {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  justify-self: center;
  perspective: 1400px;
  padding: 8px 22px 22px 8px;
}
.cat-book::before {
  content: "";
  position: absolute;
  inset: 12% 6% 0 10%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.28), transparent);
  filter: blur(30px);
  z-index: 0;
}
.cat-book-pages,
.cat-book-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 834;
  border-radius: 6px 12px 12px 6px;
  transform: rotateY(-13deg) rotateX(4deg);
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
}
.cat-book-pages {
  position: absolute;
  inset: 8px 22px 22px 8px;
  width: auto;
  background: #fff;
  box-shadow: 5px 5px 0 -1px #e9eef4, 10px 10px 0 -2px #dfe6ee, 15px 15px 0 -3px #d3dce6,
              24px 30px 50px -18px rgba(var(--shadow-rgb), 0.55);
  z-index: 1;
}
.cat-book-cover {
  z-index: 2;
  height: auto;          /* the img's height attribute would beat aspect-ratio */
  object-fit: cover;
  box-shadow: inset 4px 0 8px -4px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
}
.cat-book-cover--plain {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-700), var(--accent-500));
  color: #fff;
  font-size: 4rem;
  font-weight: 800;
}
.cat-book:hover .cat-book-pages,
.cat-book:hover .cat-book-cover { transform: rotateY(-4deg) rotateX(1deg) translateY(-4px); }
.cat-book-badge {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-end: 8px;
  padding: 6px 12px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--accent-500), var(--brand-500));
  color: var(--on-accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: 0 8px 22px -8px var(--accent-glow);
}
html[dir="rtl"] .cat-book { padding: 8px 8px 22px 22px; }
html[dir="rtl"] .cat-book-pages { inset: 8px 8px 22px 22px; }
html[dir="rtl"] .cat-book-pages,
html[dir="rtl"] .cat-book-cover { transform: rotateY(13deg) rotateX(4deg); transform-origin: right center; }
html[dir="rtl"] .cat-book:hover .cat-book-pages,
html[dir="rtl"] .cat-book:hover .cat-book-cover { transform: rotateY(4deg) rotateX(1deg) translateY(-4px); }

.cat-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 24px;
  margin: 4px 0 30px;
  padding: 0;
  list-style: none;
}
.cat-toc li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.93rem; color: var(--text-2); }
.cat-toc svg { flex: none; margin-top: 3px; color: var(--accent-400); }
.cat-show .btn svg { flex: none; }
.cat-meta { margin: 16px 0 0; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.02em; }

/* header link: the one entry that is a file, so it looks like one */
.nav-links > a.nav-cat {
  margin-inline-start: 4px;
  color: var(--accent-400);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  font-weight: 600;
}
.nav-links > a.nav-cat:hover { background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent-500); color: var(--text); }
/* The global `svg { max-width: 100% }` lets a flex item squeeze an icon
   to nothing; this one keeps its size. */
.nav-cat svg { flex: none; width: 15px; height: 15px; }

/* The header row had 6px to spare at 1,408px before this link arrived.
   On laptop widths it is the icon alone (the title gives the words on
   hover, aria-label to a screen reader), and every entry gives up 3px of
   padding; the full label returns once there is room for it. */
@media (min-width: 1401px) and (max-width: 1839px) {
  .nav-links > a, .nav-drop > button { padding-inline: 9px; }
  .nav-links > a.nav-cat { padding-inline: 10px; }
  .nav-links > a.nav-cat span { display: none; }
}

@media (max-width: 1400px) {
  .nav-links > a.nav-cat {
    margin: 10px 0 0;
    padding: 13px 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(var(--brand-rgb), .1));
  }
}

@media (max-width: 900px) {
  .cat-show-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-book { max-width: 520px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .cat-toc { grid-template-columns: minmax(0, 1fr); }
  .hero-cat { display: flex; }
  .hero-cat-txt b { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cat-ico svg { animation: none; }
  .cat-book-pages, .cat-book-cover { transition: none; }
}

/* footer entry */
.foot-links a.foot-cat { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--accent-400); font-weight: 600; }
.foot-links a.foot-cat svg { flex: none; width: 14px; height: 14px; margin-top: 3px; }
.foot-links a.foot-cat small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: 0.76rem; }

/* floating button, phones and small tablets only: stacked above the
   "Ask us" chat button, on the same side, so it never meets the event
   tab in the opposite corner */
.cat-fab { display: none; }
@media (max-width: 900px) {
  .cat-fab {
    position: fixed;
    right: max(14px, calc(env(safe-area-inset-right) + 8px));
    bottom: calc(max(14px, calc(env(safe-area-inset-bottom) + 8px)) + 58px);
    z-index: 170;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px 10px 12px;
    border-radius: 99px;
    background: var(--panel-a);
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    color: var(--accent-400);
    font-size: 0.84rem;
    font-weight: 650;
    box-shadow: 0 10px 28px -12px rgba(var(--shadow-rgb), 0.55), 0 0 0 4px rgba(var(--accent-rgb), 0.08);
    opacity: 0;
    transform: translateY(14px) scale(0.94);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
  }
  .cat-fab svg { flex: none; width: 17px; height: 17px; }
  .cat-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  /* out of the way while the chat or the menu is open */
  body.chat-open .cat-fab,
  body:has(.nav-links.is-open) .cat-fab { opacity: 0; pointer-events: none; }
  html[dir="rtl"] .cat-fab {
    right: auto;
    left: max(14px, calc(env(safe-area-inset-left) + 8px));
    padding: 10px 12px 10px 15px;
  }
}
@media (min-width: 561px) and (max-width: 900px) {
  .cat-fab {
    right: max(22px, calc(env(safe-area-inset-right) + 12px));
    bottom: calc(max(22px, calc(env(safe-area-inset-bottom) + 12px)) + 62px);
  }
  html[dir="rtl"] .cat-fab { left: max(22px, calc(env(safe-area-inset-left) + 12px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-fab { transition: none; }
}