/* ============================================================
   Nassar Foam — "Molten"
   Dark cinematic material showcase. Ambient ember light, glass
   depth, bento composition. The accent is still the logo's red;
   amber is the heat the material is made with.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --void:        #06090D;
  --ink:         #0B1117;
  --ink-raise:   #111A22;
  --glass:       rgba(255, 255, 255, 0.045);
  --glass-2:     rgba(255, 255, 255, 0.08);

  /* The logo's red, opened into a working range. Each value that ever carries
     white text is held at or above 4.5:1 against white — the obvious lift
     (#E14A3C) measures 4.0:1 and fails, so hover stops at #CE3A34 (4.9:1).
     --ember-hot never sits under text; it is a light source and a text colour
     on the dark ground (7.1:1), not a fill. */
  --ember:       #B72F2A;   /* white on this: 6.1:1 */
  --ember-lift:  #CE3A34;   /* white on this: 4.9:1 — hover */
  --ember-hot:   #FF6B4A;   /* on --void: 7.1:1 — text and glow only */
  --amber:       #E0A24A;

  --on-void:       #F2EDEA;
  --on-void-mute:  #A9B4BD;
  /* Lifted from #6F7D88: that cleared 4.5:1 against the pure ground (4.72) but
     only managed 4.25 on a raised panel, where most faint text actually sits.
     #7C8A96 holds 5.6 on the ground and 5.1 on a raised surface. */
  --on-void-faint: #7C8A96;

  --hair:      rgba(255, 255, 255, 0.10);
  --hair-lift: rgba(255, 255, 255, 0.22);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Manrope carries no Arabic glyphs at all, so an Arabic page in it falls back
     silently to whatever the OS has. Cairo covers Arabic and Latin, reaches the
     heavy weights this display scale needs, and is the face Egyptian readers
     actually expect. */
  --font-ar: "Cairo", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;

  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;

  --page:   1280px;
  --gutter: clamp(20px, 5vw, 64px);

  --t-fast: 160ms;
  --t:      280ms;
  --t-slow: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--on-void);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--ember); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ember-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.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;
}

.skip {
  position: absolute; inset-inline-start: var(--gutter); top: 12px; z-index: 200;
  transform: translateY(-200%);
  background: var(--ember); color: #fff; padding: 14px 20px;
  border-radius: var(--r-sm); font-weight: 800; text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus { transform: none; }

/* ---------- 3. Ambient light ----------
   The page's light source. Two ember pools and one cold rim, drifting
   slowly so the ground is never a flat black rectangle. Fixed, behind
   everything, and it costs one compositor layer. */
.aura {
  position: fixed; inset: -20% -10% auto -10%; height: 140vh;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(46vw 42vw at 18% 12%, rgba(225, 74, 60, 0.20), transparent 62%),
    radial-gradient(38vw 36vw at 82% 8%,  rgba(224, 162, 74, 0.13), transparent 60%),
    radial-gradient(52vw 44vw at 62% 68%, rgba(183, 47, 42, 0.14), transparent 66%);
  filter: blur(20px);
  animation: drift 22s var(--ease) infinite alternate;
}
@keyframes drift {
  to { transform: translate3d(0, -4%, 0) scale(1.08); }
}

/* film grain: the one texture that stops a dark gradient reading as plastic */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* Stack explicitly. A blanket `body > *` rule here also caught the skip link and
   the icon sprite and forced them into flow, which put a visible "Skip to
   content" band on the page at rest. */
.hdr { position: sticky; z-index: 60; }
main, .ftr { position: relative; z-index: 2; }

/* ---------- 4. Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  background: rgba(6, 9, 13, 0.62);
  border-bottom: 1px solid var(--hair);
}
.hdr__in { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.hdr__logo { display: inline-flex; align-items: center; min-height: 48px; }
.hdr__logo img { width: 158px; height: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px;
  border-radius: 999px; text-decoration: none;
  color: var(--on-void-mute); font-size: 0.9375rem; font-weight: 600;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--on-void); background: var(--glass-2); }

/* ---------- 4b. Mobile menu ----------
   Below 900px the inline nav has nowhere to go, so it moves into a full
   -screen dialog. Hidden entirely above the breakpoint so there is never a
   second, invisible copy of the navigation in the tab order. */
.burger {
  display: none;
  align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  border: 1px solid var(--hair-lift); border-radius: 999px;
  background: transparent; color: var(--on-void); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.burger:hover { background: var(--glass-2); }
.burger svg { width: 22px; height: 22px; }

.mmenu {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column;
  background: rgba(6, 9, 13, 0.97);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility 0s linear var(--t);
}
.mmenu[data-open="true"] {
  opacity: 1; visibility: visible;
  transition: opacity var(--t) var(--ease), visibility 0s;
}
.mmenu__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; border-bottom: 1px solid var(--hair); }
.mmenu__top .burger { display: inline-flex; }

.mmenu__nav { display: grid; padding-block: 8px; }
.mmenu__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding-block: 6px;
  border-bottom: 1px solid var(--hair);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--on-void); text-decoration: none;
}
.mmenu__nav a svg { width: 20px; height: 20px; color: var(--ember-hot); flex: 0 0 auto; }
.mmenu__foot { margin-top: auto; padding-block: 24px 32px; }
.mmenu__foot .btn { width: 100%; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--ember);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding-inline: 28px;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: #fff;
  font: inherit; font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 30px -12px rgba(225, 74, 60, 0.7);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover { background: var(--ember-lift); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 20px 42px -14px rgba(225, 74, 60, 0.85); }
.btn:active { transform: translateY(0); }

/* An <svg><use> has no intrinsic size: with no width/height it falls back to
   the 300x150 default for a replaced element and bursts the button. Every
   other icon context sets this; .btn was the one that did not. */
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn--glass {
  background: var(--glass); color: var(--on-void);
  border: 1px solid var(--hair-lift);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn--glass:hover { background: var(--glass-2); box-shadow: none; transform: translateY(-2px); }

.btn--sm { min-height: 46px; padding-inline: 20px; font-size: 0.875rem; }

/* ---------- 6. Glass surface ---------- */
.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 30px 60px -30px rgba(0,0,0,0.8);
}
/* a single specular edge along the top — what makes glass read as glass */
.glass::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  pointer-events: none;
}

/* ---------- 7. Hero ---------- */
.hero { position: relative; padding-block: clamp(56px, 9vw, 116px) clamp(64px, 10vw, 130px); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

/* The headline takes the full measure rather than half of it. "specification"
   is thirteen characters that cannot break, and inside a half-width column it
   ran straight under the photograph — a long word sets the floor for the
   column it lives in, so the column has to be the page. */
.hero__title { grid-column: 1 / -1; }

.hero h1 {
  font-size: clamp(2.9rem, 7.2vw, 6.4rem);
  letter-spacing: -0.045em;
  line-height: 0.94;
  max-width: 20ch;
}
/* The heat belongs in the room, not painted on the letters: gradient text is
   the format's most recognisable tell and it makes contrast unprovable. The
   word takes one solid ember instead, and the gradients stay in the aura, the
   button glow and the enquiry band. */
.hero h1 em { font-style: normal; color: var(--ember-hot); }
.hero__lede {
  margin-top: 26px; max-width: 50ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.62;
  color: var(--on-void-mute);
}
.hero__cta { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }

.hero__facts { margin-top: 52px; display: flex; flex-wrap: wrap; gap: 12px 34px; }
.fact strong {
  display: block; font-size: clamp(1.65rem, 2.4vw, 2.3rem); font-weight: 800;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1;
}
.fact span { display: block; margin-top: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--on-void-faint); }

/* the material, shown big */
.hero__media { position: relative; }
.hero__shot {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.95), 0 0 0 1px var(--hair);
}
/* The stock shot is a near-monochrome close-up that sits at about a quarter
   brightness as supplied. Lifted here so the foam's cell structure is the
   thing you see; without it the frame reads as an empty black panel. */
.hero__shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.42) contrast(1.06);
}
/* The scrim protects the card's band only. Carried across the whole frame it
   crushed the photograph flat and the material disappeared. The warm wash is
   the same ember light as the page aura, landing on the material. */
.hero__shot::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(6,9,13,0.94) 0%, rgba(6,9,13,0.6) 20%, rgba(6,9,13,0) 50%),
    radial-gradient(72% 54% at 16% 6%, rgba(255, 107, 74, 0.20), transparent 68%);
}
/* The card carries its own ground rather than trusting the photo behind it:
   translucent glass alone cannot guarantee 4.5:1 over an arbitrary image. */
.hero__card {
  position: absolute; inset-inline: 22px; bottom: 22px; z-index: 2;
  padding: 20px 22px; border-radius: var(--r);
  background: rgba(9, 13, 18, 0.74);
}
.hero__card h2 { font-size: 1rem; letter-spacing: -0.02em; }
.hero__card p { margin-top: 8px; font-size: 0.875rem; color: var(--on-void-mute); line-height: 1.5; }

/* ---------- 8. Section furniture ---------- */
.section { padding-block: clamp(64px, 9vw, 132px); }
.section__head { max-width: 46ch; margin-bottom: clamp(36px, 4.4vw, 60px); }
.section__head h2 { font-size: clamp(2.1rem, 4.3vw, 3.6rem); letter-spacing: -0.04em; }
.section__head p { margin-top: 18px; color: var(--on-void-mute); font-size: 1.0625rem; max-width: 58ch; }

/* ---------- 9. Bento ----------
   Six families at three weights: two leads, one tall, three compact.
   Sizes carry standing, so nothing needs a rank label. */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 220px;
}
.tile {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  transition: transform var(--t) var(--expo), border-color var(--t) var(--ease);
}
.tile:hover { transform: translateY(-5px); border-color: var(--hair-lift); }
.tile__bg { position: absolute; inset: 0; z-index: 0; }
.tile__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform var(--t-slow) var(--expo); }
.tile:hover .tile__bg img { transform: scale(1.09); }
.tile__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,9,13,0.94) 6%, rgba(6,9,13,0.55) 48%, rgba(6,9,13,0.2) 100%);
}
.tile__body { position: relative; z-index: 1; }
.tile h3 { font-size: 1.375rem; letter-spacing: -0.03em; }
.tile p { margin-top: 8px; font-size: 0.9375rem; color: var(--on-void-mute); line-height: 1.5; }
.tile__go {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.875rem; font-weight: 800; color: var(--ember-hot);
}
.tile__go svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.tile:hover .tile__go svg { transform: translateX(5px); }

.tile--lead { grid-column: span 2; grid-row: span 2; }
.tile--tall { grid-column: span 2; grid-row: span 1; }
.tile--wide { grid-column: span 2; grid-row: span 1; }

/* ---------- 10. Applications ---------- */
/* Bento for a database-driven list.
   The hand-tuned 4-column arrangement assumes a fixed set. Driven from the
   products table it has to tile cleanly for whatever count is active, and a
   2x2 lead plus 1x1 tiles across FOUR columns covers 4+(n-1) cells, which is a
   whole number of rows only for n=4 and n=6 -- at six it left the bottom-right
   quadrant empty. Across THREE columns the same shapes cover 3+n cells, which
   divides evenly whenever n is a multiple of 3: 3, 6, 9, 12. Those are the
   counts a curated catalogue actually takes. */
.bento--auto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .bento--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .bento--auto { grid-template-columns: minmax(0, 1fr); } }

.apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app { position: relative; border-radius: var(--r); overflow: hidden; }
.app__img { aspect-ratio: 3 / 4; }
.app__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--expo); }
.app:hover .app__img img { transform: scale(1.06); }
.app::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,9,13,0.92), rgba(6,9,13,0.05) 62%);
  pointer-events: none;
}
.app__cap { position: absolute; inset-inline: 18px; bottom: 16px; z-index: 1; }
.app__cap h3 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.app__cap p { margin-top: 5px; font-size: 0.8125rem; color: var(--on-void-mute); }

/* ---------- 11. Spec panel (the honesty component, restyled) ---------- */
.spec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.spec__panel { padding: clamp(26px, 3.4vw, 40px); }
.spec__row {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 18px; padding-block: 17px; border-top: 1px solid var(--hair);
}
.spec__row:first-of-type { border-top: 0; }
.spec__row dt { font-size: 0.9375rem; font-weight: 800; color: var(--on-void); letter-spacing: -0.02em; }
.spec__row dd { margin: 0; font-size: 0.9375rem; color: var(--on-void-mute); }
/* Inside a glass panel this used to be a bordered box within a bordered box.
   A rule and a wash carry the same emphasis without the second frame. */
.note {
  display: flex; gap: 13px; align-items: flex-start;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(224, 162, 74, 0.32);
  font-size: 0.9375rem; color: var(--on-void-mute); line-height: 1.55;
}
.note svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--amber); margin-top: 2px; }
.note b { color: var(--on-void); font-weight: 800; }

/* ---------- 12. Contact ---------- */
.cta { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(38px, 5.5vw, 78px); }
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(225, 74, 60, 0.26), transparent 64%),
    radial-gradient(50% 100% at 92% 100%, rgba(224, 162, 74, 0.17), transparent 62%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -0.04em; max-width: 18ch; }
.cta p { margin-top: 18px; max-width: 54ch; color: var(--on-void-mute); }

.rail { margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
/* Wells, not cards. These sit inside the glass enquiry band, and giving them
   their own border made a frame inside a frame; the fill alone separates them. */
.rail a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: 68px; padding: 14px 18px;
  border-radius: var(--r); border: 0;
  background: rgba(255,255,255,0.055);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.rail a:hover { background: rgba(255,255,255,0.11); transform: translateY(-2px); }
.rail svg { width: 22px; height: 22px; color: var(--ember-hot); }
.rail b { display: block; font-size: 0.9375rem; color: var(--on-void); overflow-wrap: anywhere; }
/* the email address is one 26-character token and ran straight out of its tile
   into the next one; min-width:0 lets the grid track shrink, anywhere breaks it */
.rail a > span { min-width: 0; }
.rail span { display: block; font-size: 0.8125rem; overflow-wrap: anywhere; }
.rail a > span > span { color: var(--on-void-mute); }

/* ---------- 13. Footer ---------- */
.ftr { border-top: 1px solid var(--hair); margin-top: clamp(60px, 8vw, 110px); }
.ftr__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-block: clamp(46px, 6vw, 72px) 34px; }
.ftr img { width: 150px; height: auto; }
.ftr p { margin-top: 18px; font-size: 0.9375rem; color: var(--on-void-mute); line-height: 1.6; }
.ftr h3 { font-size: 0.8125rem; font-weight: 800; color: var(--on-void-faint); letter-spacing: 0.02em; }
.ftr ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
/* 44px on the smallest axis, not just the tallest: "Email" is 37px of text */
.ftr ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 0.9375rem; color: var(--on-void-mute); text-decoration: none; }
.ftr ul a:hover { color: var(--on-void); }
.ftr__base { border-top: 1px solid var(--hair); padding-block: 24px; font-size: 0.8125rem; color: var(--on-void-faint); }

/* ---------- 14b. Footer map ----------
   The old site ended on a Google embed and the location link; both were lost
   in the port. Google only ships light tiles for a keyless embed, so rather
   than filter their imagery -- which their terms do not invite -- the frame
   itself carries the design: the page's own radius, hairline and inset
   shadow, so the map reads as a window cut into the footer rather than a
   bright rectangle dropped on it. */
.ftr__map {
  position: relative; margin-bottom: 34px;
  border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 26px 50px -30px rgba(0,0,0,0.9);
}
.ftr__map iframe { display: block; width: 100%; height: clamp(220px, 26vw, 320px); border: 0; }
/* Over the map, so the control sits on the thing it acts on. Inline-start,
   which flips with the document for Arabic. */
.ftr__maplink { position: absolute; inset-block-end: 16px; inset-inline-start: 16px; }
@media (max-width: 640px) {
  /* Under it on a phone: 16px from the edge leaves too little map to read. */
  .ftr__map { display: grid; }
  .ftr__maplink { position: static; margin: 12px; justify-self: start; }
}

/* ---------- 15. Scroll-driven reveal ----------
   Native scroll timelines where they exist; a plain fade elsewhere. No
   library, no observer, and nothing is hidden if neither path runs. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 34%;
    }
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 16. Responsive ---------- */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--lead, .tile--tall, .tile--wide { grid-column: span 2; grid-row: span 1; }
  .tile--lead { grid-row: span 2; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* the inline nav and the header CTA both move into the dialog */
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-flex; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 16ch; }
  .spec { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 260px; }
  .tile--lead, .tile--tall, .tile--wide { grid-column: span 1; grid-row: span 1; }
  .apps { grid-template-columns: minmax(0, 1fr); }
  .app__img { aspect-ratio: 16 / 10; }
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .ftr__in { grid-template-columns: minmax(0, 1fr); }
  .hero__cta .btn { flex: 1 1 auto; }
}

/* ---------- 17. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .aura { animation: none; }
  .rise { opacity: 1; transform: none; }
}

/* ---------- 18. Bilingual: Arabic and RTL ----------
   Arabic is not a string swap on an English page. It changes the typeface, the
   tracking, the leading and the direction of the whole composition, and every
   one of those is a correctness requirement rather than a refinement. */

/* Manrope has no Arabic glyphs; left alone the page falls back silently to
   whatever the OS happens to have, which is the classic bilingual bug. */
:root[lang="ar"] { --font: var(--font-ar); }

/* Arabic script is cursive and connected. The negative tracking that gives the
   Latin display its bite pulls Arabic letterforms into one another, so every
   tracked step resets rather than inheriting. */
:root[lang="ar"] h1,
:root[lang="ar"] h2,
:root[lang="ar"] h3,
:root[lang="ar"] .btn,
:root[lang="ar"] .fact strong,
:root[lang="ar"] .spec__row dt,
:root[lang="ar"] .tile h3 { letter-spacing: normal; }

/* Arabic sets taller than Latin at the same size and needs the extra leading;
   0.94 line-height on a display heading clips ascenders and vowel marks. */
:root[lang="ar"] .hero h1 { line-height: 1.18; }
:root[lang="ar"] h2, :root[lang="ar"] h3 { line-height: 1.3; }
:root[lang="ar"] body { line-height: 1.85; }

/* Direction. Layout is already logical throughout, so only two kinds of thing
   need mirroring here: a drawn arrow, and light that falls from a chosen side. */
[dir="rtl"] .tile__go svg,
[dir="rtl"] .mmenu__nav a svg,
[dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .tile:hover .tile__go svg { transform: scaleX(-1) translateX(5px); }

[dir="rtl"] .hero__shot::after {
  background:
    linear-gradient(to top, rgba(6,9,13,0.94) 0%, rgba(6,9,13,0.6) 20%, rgba(6,9,13,0) 50%),
    radial-gradient(72% 54% at 84% 6%, rgba(255, 107, 74, 0.20), transparent 68%);
}
[dir="rtl"] .cta::after {
  background:
    radial-gradient(60% 120% at 88% 0%, rgba(225, 74, 60, 0.26), transparent 64%),
    radial-gradient(50% 100% at 8% 100%, rgba(224, 162, 74, 0.17), transparent 62%);
}
[dir="rtl"] .aura {
  background:
    radial-gradient(46vw 42vw at 82% 12%, rgba(225, 74, 60, 0.20), transparent 62%),
    radial-gradient(38vw 36vw at 18% 8%,  rgba(224, 162, 74, 0.13), transparent 60%),
    radial-gradient(52vw 44vw at 38% 68%, rgba(183, 47, 42, 0.14), transparent 66%);
}

/* Numbers stay Western-Arabic and LTR inside an RTL line: phone numbers and
   figures are read as sequences, and bidi would otherwise reorder them. */
:root[lang="ar"] .fact strong,
:root[lang="ar"] .rail span { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* WeChat has two paths and needs both: the deep link opens the app on a phone,
   the code covers the desktop reader who has WeChat on a different device. */
.wechat {
  display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap;
  margin-top: 20px; padding: 20px;
  border-radius: var(--r); background: rgba(255,255,255,0.055);
  scroll-margin-top: 100px;
}
.wechat img { width: 118px; height: 118px; border-radius: var(--r-sm); }
.wechat__body { flex: 1 1 260px; display: grid; gap: 8px; justify-items: start; }
.wechat__body h3 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.wechat__body p { font-size: 0.9375rem; color: var(--on-void-mute); line-height: 1.5; }

.wechat__open {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding-inline: 16px; margin-top: 2px;
  border-radius: 999px; border: 1px solid var(--hair-lift);
  background: rgba(255,255,255,0.05);
  font-size: 0.9375rem; font-weight: 800; color: var(--on-void); text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wechat__open:hover { background: var(--glass-2); transform: translateY(-2px); }
.wechat__open svg { width: 19px; height: 19px; color: var(--ember-hot); }

/* two classes, not !important: this has to beat `.wechat__body p` */
.wechat__body .wechat__hint { font-size: 0.8125rem; color: var(--on-void-faint); }

.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding-inline: 15px;
  border: 1px solid var(--hair-lift); border-radius: 999px;
  background: transparent; color: var(--on-void);
  font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lang:hover { background: var(--glass-2); border-color: var(--hair-lift); }

/* ============================================================
   19. Inner pages — catalogue, detail, about, enquiry
   ============================================================ */

.phead { padding-block: clamp(44px, 6vw, 88px) clamp(28px, 3.5vw, 48px); }
.phead h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); letter-spacing: -0.045em; line-height: 1; max-width: 18ch; }
.phead p { margin-top: 20px; max-width: 60ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: var(--on-void-mute); }
.section--tight { padding-block: clamp(36px, 5vw, 72px); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 0.875rem; color: var(--on-void-faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; color: var(--on-void-faint); text-decoration: none; }
.crumbs a:hover { color: var(--on-void); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag {
  display: inline-flex; align-items: center; min-height: 30px; padding-inline: 12px;
  border: 1px solid var(--hair); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; color: var(--on-void-mute);
}

/* ---------- catalogue ---------- */
.cat { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cat__item {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 36px); align-items: center;
  padding: 18px; border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  transition: background var(--t-fast) var(--ease);
}
.cat__item:hover { background: rgba(255,255,255,0.07); }
.cat__img { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--expo); }
.cat__item:hover .cat__img img { transform: scale(1.05); }
.cat__body h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -0.03em; }
.cat__body h2 a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.cat__body h2 a:hover { color: var(--ember-hot); }
.cat__body p { margin-top: 6px; max-width: 62ch; font-size: 0.9375rem; line-height: 1.55; color: var(--on-void-mute); }
.cat__go { display: grid; gap: 8px; align-content: center; min-width: 176px; }

/* ---------- product detail ---------- */
.pd-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pd-media { margin: 0; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 10; box-shadow: 0 40px 70px -40px rgba(0,0,0,0.9); }
.pd-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t) var(--ease); }
.pd-media img[data-swap="true"] { opacity: 0; }
.pd-desc { margin-top: 26px; max-width: 68ch; font-size: 1.0625rem; line-height: 1.65; color: var(--on-void-mute); }
.pd-apps { margin-top: 34px; }
.pd-apps h2, .pd-spec h2 { font-size: 1.25rem; letter-spacing: -0.03em; }
.pd-spec { margin-top: 42px; }
.pd-spec .spec__panel { margin-top: 18px; }
.pd-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; position: sticky; top: 100px; }
.pd-quote { padding: clamp(22px, 2.6vw, 30px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pd-quote h2 { font-size: 1.25rem; letter-spacing: -0.03em; }
.pd-quote p { font-size: 0.9375rem; line-height: 1.55; color: var(--on-void-mute); margin-bottom: 4px; }
.pd-otherh { font-size: 1rem; letter-spacing: -0.02em; color: var(--on-void-faint); }

.fam-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fam-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 68px; padding: 8px 12px; border-radius: var(--r);
  text-decoration: none; transition: background var(--t-fast) var(--ease);
}
.fam-row:hover { background: rgba(255,255,255,0.06); }
.fam-row img { width: 56px; height: 44px; object-fit: cover; border-radius: 8px; }
.fam-row__name { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.02em; }
.fam-row svg { width: 18px; height: 18px; color: var(--ember-hot); }

/* ---------- about ---------- */
.ab-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ab-media { margin: 0; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 3 / 4; box-shadow: 0 40px 70px -40px rgba(0,0,0,0.9); }
.ab-media img { width: 100%; height: 100%; object-fit: cover; }
.ab-grid h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.035em; }
.ab-facts { margin-top: 20px; padding: clamp(22px, 2.6vw, 32px); }
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-card { padding: clamp(22px, 2.6vw, 30px); }
.ab-card h3 { font-size: 1.125rem; letter-spacing: -0.02em; color: var(--ember-hot); }
.ab-card p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.6; color: var(--on-void-mute); }
.ab-note { margin-top: 26px; }

/* ---------- enquiry ---------- */
.qt-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.qt-form { padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.qt-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; position: sticky; top: 100px; }
.qt-side h2 { font-size: 1.125rem; letter-spacing: -0.02em; }
.rail--stack { grid-template-columns: minmax(0, 1fr); }

.field { display: grid; gap: 7px; }
.field label { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; }
.field .opt { font-weight: 500; color: var(--on-void-faint); }
.hint { font-size: 0.8125rem; color: var(--on-void-faint); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.input, .select, .textarea {
  width: 100%; min-height: 54px; padding: 14px 16px;
  border: 1px solid var(--hair-lift); border-radius: var(--r);
  background: rgba(255,255,255,0.04); color: var(--on-void);
  font: inherit; font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--on-void-faint); }
.input:hover, .select:hover, .textarea:hover { background: rgba(255,255,255,0.06); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ember-hot);
  box-shadow: 0 0 0 3px rgba(255,107,74,0.18);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23A9B4BD' stroke-width='2'><path d='M1 1l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; padding-inline-end: 44px;
}
[dir="rtl"] .select { background-position: left 16px center; padding-inline-end: 16px; padding-inline-start: 44px; }

.err { display: none; align-items: flex-start; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--ember-hot); }
.err svg { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; }
.field[data-invalid="true"] .err { display: flex; animation: reveal var(--t) var(--ease) both; }
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--ember-hot); background: rgba(255,107,74,0.07); }

@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.form__summary { display: none; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--ember-hot); background: rgba(255,107,74,0.08); }
.form__summary[data-show="true"] { display: block; animation: reveal var(--t) var(--ease) both; }
.form__summary h2 { font-size: 1rem; letter-spacing: -0.02em; }
.form__summary ul { margin: 10px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.form__summary a { color: var(--ember-hot); font-size: 0.9375rem; font-weight: 600; }

.form__state { display: none; padding: 20px 22px; border-radius: var(--r); border: 1px solid var(--hair-lift); background: rgba(255,255,255,0.05); }
.form__state[data-show="true"] { display: block; animation: reveal var(--t) var(--ease) both; }
.form__state h2 { font-size: 1.125rem; letter-spacing: -0.02em; }
.form__state p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--on-void-mute); }
.form__state .btn { margin-top: 14px; }
.form__state--ok { border-color: rgba(169,198,190,0.5); background: rgba(169,198,190,0.09); }

.demo-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding-top: 18px; border-top: 1px solid rgba(224,162,74,0.3);
  font-size: 0.875rem; line-height: 1.55; color: var(--on-void-mute);
}
.demo-note svg { width: 18px; height: 18px; color: var(--amber); margin-top: 2px; flex: 0 0 auto; }
.demo-note b { color: var(--on-void); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding-inline: 14px; border-radius: 999px;
  background: rgba(255,107,74,0.14); border: 1px solid rgba(255,107,74,0.4);
  font-size: 0.875rem; font-weight: 800;
}
.chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-inline-end: -6px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--on-void-mute); cursor: pointer;
}
.chip button:hover { color: var(--on-void); background: rgba(255,255,255,0.14); }
.chip svg { width: 14px; height: 14px; }
.chip--arrive { animation: reveal var(--t) var(--ease) both; }

/* ---------- inner-page responsive ---------- */
@media (max-width: 1080px) {
  .ab-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pd-grid, .qt-grid, .ab-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-side, .qt-side { position: static; }
  .cat__item { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .cat__go { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
}
@media (max-width: 700px) {
  .cat__item { grid-template-columns: minmax(0, 1fr); }
  .cat__img { aspect-ratio: 16 / 10; }
  .cat__go { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .ab-media { aspect-ratio: 16 / 11; }
}