/* ==========================================================================
   El Ezz Tex — Circular Knitting & Textile Manufacturing
   Design system: "Indigo & Copper"
   - Indigo   : the historic textile dye. Trust, craft, industry.
   - Copper   : spools, brass machinery. Warmth, energy, the accent.
   - Cotton   : warm off-white ground. Easy on the eyes for long reading.
   Fully bilingual (AR / EN) with logical properties so RTL works for free.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ink:        #0A1B33;
  --indigo:     #152D5C;
  --indigo-2:   #23457F;
  --indigo-3:   #3A6BB5;
  --copper:     #C2703C;
  --copper-2:   #DE9155;
  --copper-3:   #F2C9A6;

  /* Neutrals (warm) */
  --cotton:     #FAF7F2;
  --cotton-2:   #F2ECE3;
  --cotton-3:   #E7DFD3;
  --line:       #E0D8CB;
  --line-dark:  rgba(255, 255, 255, .14);

  /* Text */
  --text:       #16233B;
  --text-2:     #4E5A6E;
  --text-3:     #7A8698;
  --on-dark:    #EDF1F7;
  --on-dark-2:  #A9B7CC;

  --white:      #FFFFFF;
  --whatsapp:   #25D366;

  /* Type */
  --font-ar: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-en: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;
  --font:    var(--font-en);

  /* Radii */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(10, 27, 51, .06), 0 2px 8px rgba(10, 27, 51, .05);
  --sh-2: 0 4px 12px rgba(10, 27, 51, .07), 0 12px 32px rgba(10, 27, 51, .08);
  --sh-3: 0 18px 50px rgba(10, 27, 51, .18);

  /* Layout */
  --wrap:    1280px;
  --gutter:  clamp(20px, 5vw, 64px);
  --sec-y:   clamp(64px, 8vw, 116px);
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Zoom-out on hover. Woodmart's own curve ends at 1.18, which overshoots
     past the resting scale and springs back — that kick is what reads as
     jerky on a large photo. This is a pure ease-out: fast at the start,
     long smooth settle, no reversal. */
  --ease-zoom: cubic-bezier(.22, 1, .36, 1);
  --dur-zoom:  .85s;
}

/* --------------------------------------------------------------------------
   1b. Dark theme
   Three states, not two: an explicit choice stamps data-theme on <html>, and
   the default "system" setting stamps nothing — so the media query has to
   carry the un-stamped case, guarded so an explicit light choice still wins
   on a dark OS. Only tokens are redefined; no component rule lives in here.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cotton:    #0E1520;
    --cotton-2:  #151E2C;
    --cotton-3:  #1F2A3B;
    --line:      #273347;

    --text:      #E7EDF6;
    --text-2:    #A4B2C6;
    --text-3:    #77879E;
    --white:     #141D2B;

    --indigo:    #1B3765;
    --indigo-2:  #2A4E8C;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .26);
    --sh-2: 0 4px 12px rgba(0, 0, 0, .34), 0 12px 32px rgba(0, 0, 0, .3);
    --sh-3: 0 18px 50px rgba(0, 0, 0, .46);
  }
}

:root[data-theme="dark"] {
  --cotton:    #0E1520;
  --cotton-2:  #151E2C;
  --cotton-3:  #1F2A3B;
  --line:      #273347;

  --text:      #E7EDF6;
  --text-2:    #A4B2C6;
  --text-3:    #77879E;
  --white:     #141D2B;

  --indigo:    #1B3765;
  --indigo-2:  #2A4E8C;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .26);
  --sh-2: 0 4px 12px rgba(0, 0, 0, .34), 0 12px 32px rgba(0, 0, 0, .3);
  --sh-3: 0 18px 50px rgba(0, 0, 0, .46);
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  background: var(--cotton);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Arabic needs a slightly looser line-height and no negative tracking */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.32; }
html[lang="ar"] body { line-height: 1.95; }

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

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

/* Skip link */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: var(--copper);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus { inset-inline-start: 12px; }

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

.section { padding-block: var(--sec-y); }

.section--alt  { background: var(--cotton-2); }
.section--white{ background: var(--white); }
.section--dark {
  background: var(--indigo);
  color: var(--on-dark);
  background-image:
    radial-gradient(1100px 520px at 12% -10%, rgba(58, 107, 181, .38), transparent 62%),
    radial-gradient(760px 420px at 96% 108%, rgba(194, 112, 60, .20), transparent 60%);
}
.section--dark h2,
.section--dark h3 { color: var(--white); }
.section--dark p  { color: var(--on-dark-2); }

/* Eyebrow — small caps label with a copper rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--copper);
  border-radius: 2px;
}
.section--dark .eyebrow { color: var(--copper-2); }
.section--dark .eyebrow::before { background: var(--copper-2); }
html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }

.section-head { max-width: 860px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: clamp(30px, 4.2vw, 50px); }
.section-head > p {
  margin-top: 18px;
  font-size: 17.5px;
  color: var(--text-2);
  max-width: 720px;
}
.section--dark .section-head > p { color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: .01em;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--copper);
  color: #fff;
  box-shadow: 0 8px 22px rgba(194, 112, 60, .34);
}
.btn--primary:hover {
  background: var(--copper-2);
  box-shadow: 0 12px 30px rgba(194, 112, 60, .44);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, .06);
}
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }

.btn--solid {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 8px 22px rgba(21, 45, 92, .26);
}
.btn--solid:hover { background: var(--indigo-2); }

.btn--outline {
  border-color: var(--indigo);
  color: var(--indigo);
}
.btn--outline:hover { background: var(--indigo); color: #fff; }

.btn__icon { width: 18px; height: 18px; flex: 0 0 auto; }
html[dir="rtl"] .btn__icon { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 27, 51, .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck {
  background: rgba(10, 27, 51, .97);
  box-shadow: 0 8px 30px rgba(10, 27, 51, .28);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 42px; height: 42px; border-radius: 12px; }
.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__name b {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
}
.brand__name span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper-2);
}
html[lang="ar"] .brand__name span { letter-spacing: 0; text-transform: none; font-size: 12px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-dark-2);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.nav a.is-active { color: #fff; background: rgba(194, 112, 60, .22); }

.header__actions { display: flex; align-items: center; gap: 12px; }

/* Language switch */
.lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}
.lang button {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--on-dark-2);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang button:hover { color: #fff; }
.lang button[aria-pressed="true"] { background: var(--copper); color: #fff; }

/* Theme toggle — one button, icon swaps with the resolved theme */
.theme-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark-2);
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.theme-btn:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .icon-moon { display: none; }
:root[data-theme="dark"] .theme-btn .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .icon-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-btn .icon-moon { display: block; }
}

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.menu-btn span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6b. Hero peek carousel
   Active panel holds most of the width; the next one edges in from the side
   so there is always a visible affordance to move toward.
   -------------------------------------------------------------------------- */
.hc {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}

.hc__viewport { overflow: hidden; }

.hc__track {
  display: flex;
  transition: transform .75s var(--ease);
  will-change: transform;
}

/* Heights taken from Woodmart's own generated rule: min-height 600px, 500px
   below the mobile breakpoint. */
.hc__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
}

.hc__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Readability scrim. The current slides are dark factory photos, so the text
   side needs cover. Swap in light artwork later and add .hc--light on the
   section to drop the scrim and flip the type to dark. */
/* Routed through a variable rather than competing selectors: a direction rule
   like html[dir="rtl"] .hc__slide::before outranks .hc--light .hc__slide::before
   on specificity, so the scrim would win and grey out light artwork. A custom
   property set on the section itself always beats one set on <html>. */
html {
  --hc-scrim: linear-gradient(100deg, rgba(10, 27, 51, .88) 0%, rgba(10, 27, 51, .62) 42%, rgba(10, 27, 51, .18) 78%, transparent 100%);
}
html[dir="rtl"] {
  --hc-scrim: linear-gradient(260deg, rgba(10, 27, 51, .88) 0%, rgba(10, 27, 51, .62) 42%, rgba(10, 27, 51, .18) 78%, transparent 100%);
}
/* Declared on the section, so it is a direct value beating an inherited one —
   specificity never enters into it. */
.hc--light { --hc-scrim: none; }

.hc__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hc-scrim);
}
.hc--light .hc__title  { color: var(--ink); }
.hc--light .hc__lead   { color: var(--text-2); }
.hc--light .hc__eyebrow { color: var(--copper); }
.hc--light .hc__eyebrow::before { background: var(--copper); }

/* The hero art is deliberately bright. Against a dark page that reads as a
   glare band, so knock it back a little — enough to sit in the page, not so
   far that the dark copy on it loses contrast. */
:root[data-theme="dark"] .hc--light .hc__img { filter: brightness(.88) saturate(.95); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc--light .hc__img { filter: brightness(.88) saturate(.95); }
}

/* Panels that are not the active one dim back a little */
.hc__slide { transition: opacity .55s var(--ease); opacity: .45; }
.hc__slide.is-active { opacity: 1; }

/* Content rides the same container as the rest of the page, so the headline
   starts on the exact grid line the section headings below it use. */
/* The artwork puts its subject in the left third and leaves the right side
   open, so the copy sits right in BOTH languages — physical, not logical,
   because the images are physically composed that way. */
.hc__body {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  min-height: 600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
html[dir="ltr"] .hc__body { align-items: flex-end; text-align: right; }

/* Entrance, read frame by frame off the reference recording. Three things
   happen at once on the headline: each line rises out from behind a hidden
   edge, the whole block drifts in horizontally, and it fades up. The drift
   is the parallax lag — the copy arrives a beat after the artwork has
   already settled, which is what makes it feel unhurried. */
/* Entrance built the way an editor would key it: the text starts fully
   outside the frame on its own side, travels in under heavy motion blur,
   then spends the last quarter of the timeline barely moving — the slow
   settle is what stops it landing with a thud.
   Distances are keyed inside the frames rather than left to one bezier, so
   ~88% of the travel is done by the halfway mark and the tail crawls. */
:root { --fly: 46vw; }

/* 83% of the travel lands inside the first 12% of the timeline, so the text
   is on screen almost at once instead of leaving the frame empty. Everything
   after that is the settle — a long, barely-moving crawl into place. */
@keyframes hcFly {
  0%   { opacity: 0; transform: translateX(var(--fly));                filter: blur(4px);   }
  12%  { opacity: 1; transform: translateX(calc(var(--fly) * .17));    filter: blur(3px);   }
  30%  {             transform: translateX(calc(var(--fly) * .052));   filter: blur(1.6px); }
  55%  {             transform: translateX(calc(var(--fly) * .015));   filter: blur(.6px);  }
  78%  {             transform: translateX(calc(var(--fly) * .004));   filter: blur(.2px);  }
  100% { opacity: 1; transform: translateX(0);                         filter: blur(0);     }
}

.hc__title .ln { display: block; }
.hc__title .ln > * { display: block; font-weight: inherit; }

.hc__slide.is-active .hc__eyebrow { animation: hcFly 1.5s linear 0s both; }
.hc__slide.is-active .hc__lead    { animation: hcFly 1.5s linear .18s both; }
.hc__slide.is-active .btn         { animation: hcFly 1.5s linear .26s both; }

.hc__slide.is-active .hc__title .ln:nth-child(1) > b {
  animation: hcFly 1.5s linear .06s both;
}

/* The accent line also carries the copper shine, so both animations are
   listed together — a second `animation` declaration would replace the
   shine outright and the gradient would freeze mid-sweep. */
.hc__slide.is-active .hc__title .ln:nth-child(2) > em {
  animation: hcFly 1.5s linear .12s both,
             shineLtr 16s ease-in-out infinite;
}
html[dir="rtl"] .hc__slide.is-active .hc__title .ln:nth-child(2) > em {
  animation: hcFly 1.5s linear .12s both,
             shineRtl 16s ease-in-out infinite;
}


/* 760px keeps "إنتاج تريكو يُعتمد عليه." on one line at desktop */
.hc__title { max-width: 760px; }
.hc__lead  { max-width: 560px; }

.hc__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper-2);
}
.hc__eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--copper-2);
  border-radius: 2px;
}
html[lang="ar"] .hc__eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }

.hc__title {
  margin: 0 0 20px;
  font-size: clamp(32px, 4.6vw, 62px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
}
html[lang="ar"] .hc__title { letter-spacing: 0; line-height: 1.3; }
.hc__title em {
  display: block;
  font-style: normal;
  color: var(--copper-2);
}

.hc__lead {
  margin: 0 0 30px;
  max-width: 520px;
  font-size: clamp(15.5px, 1.5vw, 18px);
  color: #C9D4E4;
}

/* Woodmart's wd-style-3 arrows: 50px circle (40px ≤1024), white ground,
   18px icon (14px ≤1024), and a 4px ambient shadow — not a drop shadow. */
.hc__arrow {
  position: absolute;
  z-index: 250;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #3A4657;
  box-shadow: 0 0 4px rgba(0, 0, 0, .1);
  transition: all .25s ease;
}
.hc__arrow:hover { color: var(--copper); }
.hc__arrow svg { width: 18px; height: 18px; }
.hc__arrow--prev { inset-inline-start: 20px; }
.hc__arrow--next { inset-inline-end: 20px; }
html[dir="rtl"] .hc__arrow svg { transform: scaleX(-1); }

/* inset-inline:0 + margin-inline:auto centres in both directions without a
   transform, which translateX cannot do reliably under RTL. */
.hc__dots {
  position: absolute;
  z-index: 5;
  bottom: 22px;
  inset-inline: 0;
  width: max-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Their pagination is an outlined 10px circle that fills when active —
   not an elongating pill. */
.hc__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 2px solid rgba(15, 24, 38, .28);
  border-radius: 50%;
  background: transparent;
  transition: all .25s ease;
}
.hc__dots button:hover { border-color: rgba(15, 24, 38, .7); }
.hc__dots button[aria-current="true"] { border-color: var(--copper); background: var(--copper); }

/* --------------------------------------------------------------------------
   7. Stats strip
   -------------------------------------------------------------------------- */
.stats { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .08); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 8px;
}
.stats__grid > div {
  padding: 30px 24px;
  border-inline-end: 1px solid rgba(255, 255, 255, .10);
}
.stats__grid > div:last-child { border-inline-end: 0; }
.stats strong {
  display: block;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -.02em;
}
.stats span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--on-dark-2);
}

/* --------------------------------------------------------------------------
   8. About
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.about__copy p { color: var(--text-2); font-size: 17px; }
.about__copy h2 { font-size: clamp(30px, 4.2vw, 50px); margin-bottom: 22px; }

.about__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 27, 51, .5), transparent 55%);
}
.about__tag {
  position: absolute;
  z-index: 2;
  inset-inline-start: 22px;
  bottom: 22px;
  padding: 14px 22px;
  border-radius: var(--r);
  background: rgba(250, 247, 242, .96);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-2);
}
.about__tag b { display: block; font-size: 22px; color: var(--indigo); line-height: 1.2; }
.about__tag span { font-size: 13px; color: var(--text-2); }

.about__points {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.about__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: var(--text-2);
}
.about__points svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--copper);
}

/* --------------------------------------------------------------------------
   9. Capability cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.card {
  position: relative;
  padding: 32px 28px 30px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              background-color .3s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--copper), transparent);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(222, 145, 85, .5);
  background: rgba(255, 255, 255, .09);
}
.card:hover::before { opacity: 1; }

.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(194, 112, 60, .18);
  border: 1px solid rgba(222, 145, 85, .4);
  color: var(--copper-2);
  font-weight: 800;
  font-size: 15px;
}
.card h3 { font-size: 20px; margin-bottom: 10px; color: #fff; }
.card p { font-size: 15.5px; line-height: 1.75; color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   10. Factory photo slider
   -------------------------------------------------------------------------- */
.slider { position: relative; }

.slider__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 660px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--indigo);
  box-shadow: var(--sh-3);
}
.slider__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .6s var(--ease), transform 6s linear;
}
.slider__frame img.is-active { opacity: 1; transform: scale(1); }

.slider__caption {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 44px 32px 26px;
  background: linear-gradient(to top, rgba(10, 27, 51, .88), transparent);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
}
.slider__count {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
  direction: ltr;          /* keep "1 / 9" from flipping in RTL */
  unicode-bidi: isolate;
}

.slider__btn {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(10, 27, 51, .55);
  backdrop-filter: blur(10px);
  color: #fff;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.slider__btn:hover {
  background: var(--copper);
  border-color: var(--copper);
  transform: translateY(-50%) scale(1.07);
}
.slider__btn svg { width: 22px; height: 22px; }
.slider__btn--prev { inset-inline-start: 18px; }
.slider__btn--next { inset-inline-end: 18px; }
html[dir="rtl"] .slider__btn svg { transform: scaleX(-1); }

.slider__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}
/* Same outlined-circle pagination as the hero, so the two carousels read as
   one component. */
.slider__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 2px solid rgba(15, 24, 38, .28);
  border-radius: 50%;
  background: transparent;
  transition: all .25s ease;
}
.slider__dots button:hover { border-color: rgba(15, 24, 38, .7); }
.slider__dots button[aria-current="true"] { border-color: var(--copper); background: var(--copper); }
/* --------------------------------------------------------------------------
   12. Products
   -------------------------------------------------------------------------- */
.subsection { margin-top: clamp(44px, 6vw, 72px); }
.subsection:first-of-type { margin-top: 0; }

.subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.subhead h3 { font-size: clamp(21px, 2.4vw, 27px); }
.subhead span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
html[lang="ar"] .subhead span { letter-spacing: 0; text-transform: none; font-size: 14px; }

.details-box {
  padding: 30px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--copper);
  border-radius: var(--r);
  background: var(--white);
  color: var(--text-2);
}

/* ── Circular category tiles ──────────────────────────────────────────── */
.circle-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
}

.circle-cat {
  display: block;
  text-align: center;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.circle-cat__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cotton-2);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Zoom-out: scale3d(1.1) at rest settling to 1 on hover, so the move reveals
   more of the weave rather than cropping into it. Timing is --dur-zoom /
   --ease-zoom, deliberately gentler than the reference's springy curve. */
.circle-cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale3d(1.1, 1.1, 1);
  transition: transform var(--dur-zoom) var(--ease-zoom);
}
.circle-cat__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: .1;
  transition: opacity var(--dur-zoom) var(--ease-zoom);
}
.circle-cat:hover .circle-cat__media {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(10, 27, 51, .22);
}
.circle-cat:hover .circle-cat__media::after,
.circle-cat:focus-visible .circle-cat__media::after { opacity: .4; }
.circle-cat:hover .circle-cat__media img,
.circle-cat:focus-visible .circle-cat__media img { transform: none; }

/* The tiles carry no caption, so the filter's active state has to be shown on
   the photo itself — a copper ring, drawn inside the circle so it does not
   shift the grid. */
.circle-cat.is-active .circle-cat__media {
  box-shadow: inset 0 0 0 3px var(--copper);
}
.circle-cat.is-active:hover .circle-cat__media {
  box-shadow: inset 0 0 0 3px var(--copper), 0 18px 40px rgba(10, 27, 51, .22);
}

/* ── Filter tabs ──────────────────────────────────────────────────────── */
.subhead--tabs { flex-wrap: wrap; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs button {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 700;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tabs button:hover { color: var(--indigo); background: var(--cotton-2); }
.tabs button[aria-selected="true"] { background: var(--indigo); color: #fff; }

/* ── Product cards ────────────────────────────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.prod {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.prod:hover {
  transform: translateY(-6px);
  border-color: var(--copper-3);
  box-shadow: 0 18px 44px rgba(10, 27, 51, .16);
}

/* The whole media area is the button, so the card stays one tap target */
.prod__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--cotton);
  aspect-ratio: 1;
  overflow: hidden;
  cursor: zoom-in;
}
.prod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale3d(1.1, 1.1, 1);
  transition: transform var(--dur-zoom) var(--ease-zoom);
}
.prod:hover .prod__media img,
.prod:focus-within .prod__media img { transform: none; }

.prod__badge {
  position: absolute;
  z-index: 2;
  inset-inline-start: 12px;
  top: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
}

.prod__zoom {
  position: absolute;
  z-index: 2;
  inset-inline-end: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250, 247, 242, .94);
  color: var(--indigo);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.prod:hover .prod__zoom { opacity: 1; transform: translateY(0); }
.prod__zoom svg { width: 17px; height: 17px; }

.prod__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 18px;
}
.prod__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.prod__row h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.prod__meta { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.prod__cat  { margin: 0; font-size: 14px; color: var(--text-3); }

.prod__cta {
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--copper);
  transition: color .2s var(--ease);
}
.prod__cta:hover { color: var(--copper-2); }

.prod.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   12b. Image hotspots
   Ported from Woodmart's wd-spots: 20px dot, wd-Pulse on the fill,
   wd-Sonar on the halo, 260px popup, and an invisible bridge so the
   cursor can travel from dot to popup without it closing.
   -------------------------------------------------------------------------- */
.spots {
  position: relative;
  border-radius: var(--r-lg);
  overflow: visible;
  box-shadow: var(--sh-3);
}
.spots__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--r-lg);
}

/* Physical left/right throughout: the coordinates are relative to the photo,
   and the photo does not mirror in RTL. Logical properties would drift the
   markers off their subjects the moment the language flips. */
.spot {
  position: absolute;
  margin-top: -10px;
  margin-left: -10px;
  transition: opacity .25s ease;
}

/* Keep the machine callouts quiet until the visitor explores the photo. */
.spots .spot {
  opacity: 0;
  pointer-events: none;
  transform: scale(.72);
  transition: opacity .22s ease, transform .22s var(--ease);
}
.spots:hover .spot,
.spots:focus-within .spot,
.spots .spot.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Touch screens have no persistent hover, so keep the callouts tappable. */
@media (hover: none) {
  .spots .spot {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
}

.spot__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.spot__icon::before {              /* the + glyph, above the fill */
  content: "+";
  position: relative;
  z-index: 4;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.spot__icon::after {               /* sonar halo */
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, .5);
  animation: sonar 2s ease infinite;
}
.spot__bg {                        /* pulsing fill */
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: var(--copper);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes sonar { 0% { opacity: 0; transform: scale(.2); } 50% { opacity: .8; } 100% { opacity: 0; transform: scale(1); } }

.spot__pop {
  position: absolute;
  z-index: 20;
  top: -45px;
  left: 100%;
  margin-left: 20px;
  width: 260px;
  padding: 18px;
  border-radius: var(--r);
  background: var(--white);
  box-shadow: 0 18px 44px rgba(10, 27, 51, .22);
  text-align: start;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
/* Flip to the other side when the dot sits in the right half of the photo */
.spot--flip .spot__pop {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 20px;
}
/* Invisible bridge so the cursor can cross the 20px gap without it closing */
.spot__pop::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 25px;
}
.spot--flip .spot__pop::after { right: auto; left: 100%; }

.spot:hover .spot__pop,
.spot:focus-within .spot__pop,
.spot.is-open .spot__pop {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.spot__pop b { display: block; font-size: 16px; color: var(--indigo); margin-bottom: 4px; }
.spot__pop span { display: block; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.spot__pop em {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cotton-2);
  color: var(--copper);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   12c. Fabric collection mosaic
   A five-column editorial grid. Markers stay quiet until the image is
   explored; their popups use the paired close-up fabric photographs.
   -------------------------------------------------------------------------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  direction: rtl;
}
.mosaic__col {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.mosaic__tile {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--r);
  overflow: visible;
  background: var(--cotton-2);
  box-shadow: var(--sh-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mosaic__tile:hover,
.mosaic__tile:focus-within {
  z-index: 30;
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.mosaic__tile > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: var(--pos, center);
}
.r1-1 { aspect-ratio: 1; }
.r4-5 { aspect-ratio: 4 / 5; }
.r3-4 { aspect-ratio: 3 / 4; }
.r5-8 { aspect-ratio: 5 / 8; }

.mosaic__note {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--cotton-2);
}
.mosaic__note h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 800;
  line-height: 1.35;
}
.mosaic__note p {
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.7;
}
.mosaic__note b {
  color: var(--copper);
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
}
.section--dark .mosaic__note {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.section--dark .mosaic__note h3 { color: var(--on-dark); }
.section--dark .mosaic__note p { color: var(--on-dark-2); }
:root[data-theme="light"] .section--dark .mosaic__note {
  border-color: #E8E5DF;
  background: #F7F4EF;
}
:root[data-theme="light"] .section--dark .mosaic__note h3 { color: #242424; }
:root[data-theme="light"] .section--dark .mosaic__note p { color: #767676; }

/* Markers appear when the parent image is explored. */
.mosaic__tile .spot {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: scale(.72);
  transition: opacity .22s ease, transform .22s var(--ease);
}
.mosaic__tile:hover .spot,
.mosaic__tile:focus-within .spot,
.mosaic__tile .spot.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.mosaic .spot__pop {
  top: auto;
  right: auto;
  bottom: calc(100% + 16px);
  left: 50%;
  width: min(244px, 82vw);
  margin: 0;
  padding: 0 0 16px;
  overflow: hidden;
  direction: rtl;
  transform: translate(calc(-50% + var(--nudge, 0px)), 8px);
}
html[dir="ltr"] .mosaic .spot__pop { direction: ltr; }
.mosaic .spot:hover .spot__pop,
.mosaic .spot:focus-within .spot__pop,
.mosaic .spot.is-open .spot__pop {
  transform: translate(calc(-50% + var(--nudge, 0px)), 0);
}
.mosaic .spot__pop::after {
  top: 100%;
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 20px;
}
.mosaic__col:first-child .spot__pop { --nudge: -42px; }
.mosaic__col:last-child .spot__pop { --nudge: 42px; }
.spot__shot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  border-radius: 0;
  object-fit: cover;
}
.mosaic .spot__pop b,
.mosaic .spot__pop span,
.mosaic .spot__pop em { margin-inline: 18px; }
.mosaic .spot__pop span { font-size: 13.5px; line-height: 1.65; }

@media (hover: none) {
  .mosaic__tile .spot {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
}
@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mosaic__col { gap: 12px; }
  .mosaic__col:nth-child(odd) .spot__pop { --nudge: -48px; }
  .mosaic__col:nth-child(even) .spot__pop { --nudge: 48px; }
  .mosaic__note { min-height: 150px; padding: 20px 18px; }
}
@media (max-width: 420px) {
  .mosaic { grid-template-columns: 1fr; }
  .mosaic__col .spot__pop { --nudge: 0px; }
  .mosaic__note { min-height: 0; }
}


/* --------------------------------------------------------------------------
   12d. Cover cards (machine types)
   -------------------------------------------------------------------------- */
.cover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--indigo);
  isolation: isolate;
}
/* --py is driven by the scroll parallax; it composes into both the rest and
   hover transforms so the two effects never fight over `transform`. */
.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transform: translateY(var(--py, 0px)) scale3d(1.1, 1.1, 1);
  transition: transform var(--dur-zoom) var(--ease-zoom);
}
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 27, 51, .78), rgba(10, 27, 51, .12) 55%);
  transition: opacity var(--dur-zoom) var(--ease-zoom);
}
.cover:hover img { transform: translateY(var(--py, 0px)) scale(1); }
.cover:hover::after { opacity: .85; }

.cover__body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 20px;
  align-items: flex-end;
}
.cover__body h3 { font-size: 19px; color: #fff; margin: 0; }
/* Scoped to the inner text block rather than a bare `.cover__body span`. */
.cover__body div span { display: block; font-size: 13.5px; color: #C9D4E4; }

/* A cover opens its photo full size. The whole card is one transparent
   button sitting over the artwork — nothing under it is interactive — so it
   gets the pointer, the focus ring, and the same zoom badge the fabric
   cards use. `overflow: hidden` on the card would clip an outward ring,
   hence the negative offset. */
.cover__open {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.cover__open:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -4px;
  border-radius: inherit;
}
.cover__zoom {
  position: absolute;
  z-index: 1;
  inset-inline-end: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250, 247, 242, .94);
  color: var(--indigo);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cover:hover .cover__zoom,
.cover__open:focus-visible .cover__zoom { opacity: 1; transform: translateY(0); }
.cover__zoom svg { width: 17px; height: 17px; }
/* No hover to reveal the badge on touch, so it just stays put. */
@media (hover: none) {
  .cover__zoom { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   12d. Collapsible long-form block
   -------------------------------------------------------------------------- */
.collapse {
  position: relative;
  max-height: 190px;
  overflow: hidden;
  color: var(--text-2);
  transition: max-height .5s var(--ease);
}
.collapse.is-open { max-height: 1800px; }
.collapse::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(to top, var(--cotton-2), transparent);
  transition: opacity .3s var(--ease);
}
.collapse.is-open::after { opacity: 0; }
.collapse h3 { font-size: 19px; margin: 24px 0 8px; color: var(--text); }
.collapse h3:first-child { margin-top: 0; }

.collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 22px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--indigo);
  font-size: 14.5px;
  font-weight: 700;
  transition: all .25s ease;
}
.collapse-btn:hover { border-color: var(--copper); color: var(--copper); }
.collapse-btn svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.collapse-btn[aria-expanded="true"] svg { transform: rotate(180deg); }


/* Keep each zooming photo on its own compositor layer for the whole hover,
   not just once the transform starts — promoting mid-transition causes a
   one-frame hitch and a flash of re-rasterised (softer) pixels. Scoped to
   the hovered card so the page is not carrying 20 permanent layers. */
.prod:hover .prod__media img,
.circle-cat:hover .circle-cat__media img,
.cover:hover img {
  will-change: transform;
}
/* --------------------------------------------------------------------------
   13. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 27, 51, .93);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1100px, 94vw);
  max-height: 84vh;
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  object-fit: contain;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .2s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--copper); border-color: var(--copper); }
.lightbox__close { top: 22px; inset-inline-end: 22px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { inset-inline-start: 22px; }
.lightbox__nav--next { inset-inline-end: 22px; }
.lightbox__nav[hidden] { display: none; }
.lightbox__close svg, .lightbox__nav svg { width: 22px; height: 22px; }
html[dir="rtl"] .lightbox__nav svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   14. Quality
   -------------------------------------------------------------------------- */
.quality__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.quality__list { display: grid; gap: 0; }
.quality__item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.quality__item:first-child { padding-top: 0; }
.quality__item:last-child { border-bottom: 0; padding-bottom: 0; }
.quality__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--cotton-2);
  border: 1px solid var(--line);
  color: var(--copper);
}
.quality__icon svg { width: 22px; height: 22px; }
.quality__item b { display: block; font-size: 17.5px; color: var(--text); margin-bottom: 3px; }
.quality__item span { font-size: 15.5px; color: var(--text-2); line-height: 1.7; }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  background-image:
    radial-gradient(900px 420px at 8% 0%, rgba(58, 107, 181, .5), transparent 62%),
    radial-gradient(700px 380px at 96% 100%, rgba(194, 112, 60, .34), transparent 60%);
  color: #fff;
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  padding-block: clamp(52px, 7vw, 82px);
}
.cta h2 { font-size: clamp(26px, 3.4vw, 42px); color: #fff; max-width: 700px; }
.cta p { margin-top: 12px; color: #C3D0E2; max-width: 620px; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.contact__list { display: grid; gap: 2px; margin-top: 30px; }
.contact__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-inline-start .25s var(--ease);
}
.contact__row:hover { padding-inline-start: 8px; }
.contact__row:last-child { border-bottom: 0; }
.contact__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--cotton-2);
  border: 1px solid var(--line);
  color: var(--copper);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.contact__row:hover .contact__icon { background: var(--copper); color: #fff; border-color: var(--copper); }
.contact__icon svg { width: 19px; height: 19px; }
.contact__row b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
html[lang="ar"] .contact__row b { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.contact__row span { font-size: 16.5px; font-weight: 600; color: var(--text); direction: ltr; unicode-bidi: embed; }
html[dir="rtl"] .contact__row span { text-align: right; }
.contact__row div { min-width: 0; }

/* Form */
.form {
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-2);
}
.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 700; color: var(--text); }
.field label i { color: var(--copper); font-style: normal; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cotton);
  color: var(--text);
  font: inherit;
  font-size: 15.5px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.7; }
.field select { appearance: none; cursor: pointer; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--copper);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(194, 112, 60, .14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }

.field--select { position: relative; }
.field--select::after {
  content: "";
  position: absolute;
  inset-inline-end: 16px;
  bottom: 20px;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  pointer-events: none;
}

.field__error {
  display: none;
  font-size: 13px;
  font-weight: 600;
  color: #C0392B;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #C0392B; background: #FDF3F2; }
.field.has-error .field__error { display: block; }

.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.form__note { font-size: 13.5px; color: var(--text-3); }
.form button[type="submit"] { min-width: 190px; }
.form button[type="submit"][disabled] { opacity: .62; cursor: not-allowed; transform: none; }

/* Honeypot — must stay visually hidden but reachable to bots */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.form__status {
  display: none;
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
.form__status.is-visible { display: block; }
.form__status.is-ok  { background: #E9F7EF; color: #1E7A46; border: 1px solid #B9E3CA; }
.form__status.is-err { background: #FDF3F2; color: #B0392B; border: 1px solid #F2C9C4; }

.map-link {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--cotton-2);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.map-link:hover { border-color: var(--copper-3); transform: translateY(-3px); box-shadow: var(--sh-2); }
.map-link svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--copper); }
.map-link b { display: block; font-size: 15.5px; }
.map-link span { font-size: 14px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--on-dark-2);
  padding-block: clamp(48px, 6vw, 72px) 28px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer h4 {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper-2);
}
html[lang="ar"] .footer h4 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.footer p { font-size: 15px; line-height: 1.8; max-width: 380px; }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer ul a { font-size: 15px; transition: color .2s var(--ease); }
.footer ul a:hover { color: var(--copper-2); }
.footer .brand { margin-bottom: 18px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   18. WhatsApp FAB
   -------------------------------------------------------------------------- */
.wa {
  position: fixed;
  z-index: 80;
  inset-inline-end: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .42);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa:hover { transform: scale(1.09); box-shadow: 0 14px 38px rgba(37, 211, 102, .55); }
.wa svg { width: 30px; height: 30px; }
.wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   19b. Ambient effects
   Ported from the serop-comp-website motion system and re-keyed to the
   Indigo & Copper palette. Every effect here is decorative only — the page
   reads identically with all of it switched off.
   ========================================================================== */

/* ── Shine sweep. Two keyframe sets so the light travels with the reading
      direction instead of against it. ───────────────────────────────────── */
@keyframes shineLtr { 0% { background-position: -150% center; } 100% { background-position: 250% center; } }
@keyframes shineRtl { 0% { background-position:  250% center; } 100% { background-position: -150% center; } }

.hc__title em {
  background: linear-gradient(
    90deg,
    var(--copper-2) 0%,  var(--copper-2) 30%,
    #FFD9B5 46%,         #FFF4E8 50%,      #FFD9B5 54%,
    var(--copper-2) 70%, var(--copper-2) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shineLtr 16s ease-in-out infinite;
}
html[dir="rtl"] .hc__title em { animation-name: shineRtl; }

/* ── Ambient orbs ─────────────────────────────────────────────────────── */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0)        scale(1); }
  33%      { transform: translate(8px, -24px)  scale(1.05); }
  66%      { transform: translate(-6px, -10px) scale(.96); }
}

.orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  will-change: transform;
}
.orb--indigo { background: rgba(58, 107, 181, .34); }
.orb--copper { background: rgba(194, 112, 60, .26); }

.orb--a { inset-inline-start: -140px; top: -80px;    width: 460px; height: 460px; animation: orbFloat 11s ease-in-out infinite; }
.orb--b { inset-inline-end:  -110px; bottom: -90px;  width: 380px; height: 380px; animation: orbFloat 16s ease-in-out infinite reverse; }
.orb--c { inset-inline-end:  22%;    top: 12%;       width: 300px; height: 300px; animation: orbFloat 20s ease-in-out infinite; }

/* ── Light beam sweep ─────────────────────────────────────────────────── */
@keyframes beamSweep {
  0%   { transform: translateX(-140%) skewX(-14deg); opacity: 0; }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translateX(340%)  skewX(-14deg); opacity: 0; }
}

.beam-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.beam-track::before {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 130px;
  background: linear-gradient(90deg, transparent, rgba(222, 145, 85, .5), transparent);
  filter: blur(8px);
  opacity: .5;
  animation: beamSweep 9s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* ── Hairline glow at the top of dark bands ───────────────────────────── */
.section--dark,
.cta,
.stats { position: relative; }

.section--dark::before,
.cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(222, 145, 85, .6), rgba(58, 107, 181, .6), transparent);
}

/* ── Aurora mesh + particle dust on dark bands ────────────────────────── */
@keyframes aurora {
  0%, 100% { background-position:   0% 50%; }
  25%      { background-position: 100%  0%; }
  50%      { background-position: 100% 100%; }
  75%      { background-position:   0% 100%; }
}

.section--dark::after,
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1px),
    radial-gradient(circle, rgba(222, 145, 85, .10) 1px, transparent 1px);
  background-size: 46px 46px, 74px 74px;
  background-position: 0 0, 23px 23px;
  opacity: .55;
}

.section--dark > .wrap,
.cta > .wrap { position: relative; z-index: 1; }

.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(58, 107, 181, .5),  transparent 62%),
    radial-gradient(ellipse 55% 45% at 82% 78%, rgba(194, 112, 60, .34), transparent 60%),
    radial-gradient(ellipse 50% 40% at 60% 10%, rgba(35, 69, 127, .5),   transparent 58%);
  background-size: 400% 400%;
  animation: aurora 22s ease-in-out infinite;
}

/* ── Magnetic button glow ─────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }

.btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: none;
}
.btn:hover::after {
  animation: btnShine .75s cubic-bezier(.4, 0, .2, 1);
}
@keyframes btnShine {
  0%   { inset-inline-start: -60%; opacity: 0; }
  20%  { opacity: 1; }
  100% { inset-inline-start: 130%; opacity: 0; }
}

.btn--primary:hover {
  box-shadow: 0 12px 32px rgba(194, 112, 60, .5), 0 2px 10px rgba(222, 145, 85, .34);
}
.btn--solid:hover {
  box-shadow: 0 12px 32px rgba(21, 45, 92, .45), 0 2px 10px rgba(58, 107, 181, .3);
}

/* ── Neon edge on cards ───────────────────────────────────────────────── */
.card {
  box-shadow: 0 0 0 1px rgba(58, 107, 181, .22), 0 8px 30px rgba(0, 0, 0, .22);
}
.card:hover {
  box-shadow:
    0 0 0 1px rgba(222, 145, 85, .55),
    0 0 30px rgba(194, 112, 60, .2),
    0 16px 46px rgba(0, 0, 0, .3);
}

/* ── Layered depth on the big media blocks ────────────────────────────── */
.slider__frame,
.about__media {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .07) inset,
    0 1px 0 rgba(255, 255, 255, .1) inset,
    0 6px 14px rgba(10, 27, 51, .18),
    0 18px 44px rgba(10, 27, 51, .18),
    0 36px 80px rgba(10, 27, 51, .14);
}

/* ── Gentle float on the floating stat badge ──────────────────────────── */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.about__tag { animation: floatY 6s ease-in-out infinite; }

/* ── Gradient depth divider ───────────────────────────────────────────── */
.depth-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, rgba(194, 112, 60, .4), rgba(58, 107, 181, .4), transparent);
}

/* ── Entrance: blur-in, and word-by-word for the hero headline ────────── */
[data-reveal] { filter: blur(5px); }
[data-reveal].is-in { filter: blur(0); }
[data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }

@keyframes wordIn {
  from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.word {
  display: inline-block;
  animation: wordIn .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--d, 0ms);
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cards      { grid-template-columns: repeat(2, 1fr); }
  .nav a      { padding: 8px 10px; font-size: 13.5px; }
  .prod-grid  { grid-template-columns: repeat(3, 1fr); }
  .circle-grid{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 960px) {
  :root { --header-h: 68px; }

  .menu-btn { display: block; }

  .nav {
    position: fixed;
    inset-block: var(--header-h) auto;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 16px var(--gutter) 26px;
    background: rgba(10, 27, 51, .99);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 13px 14px; font-size: 16px; border-radius: 12px; }

  .about__grid,
  .quality__grid,
  .contact__grid { grid-template-columns: 1fr; }

  .about__media { aspect-ratio: 16 / 10; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid > div:nth-child(2) { border-inline-end: 0; }
  .stats__grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }


  .prod-grid   { grid-template-columns: repeat(2, 1fr); }
  .circle-grid { grid-template-columns: repeat(3, 1fr); }
  .subhead--tabs { flex-direction: column; align-items: flex-start; gap: 14px; }

  .hc__arrow { width: 40px; height: 40px; }
  .hc__arrow svg { width: 14px; height: 14px; }
  .hc__arrow--prev { inset-inline-start: 10px; }
  .hc__arrow--next { inset-inline-end: 10px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }

  .hero__actions .btn { flex: 1 1 100%; }
  .hero__badges { gap: 8px; }
  .hero__badges span { font-size: 12.5px; padding: 7px 13px; }

  .stats__grid > div { padding: 22px 14px; }

  .cards      { grid-template-columns: 1fr; }

  .prod-grid   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod__body  { padding: 12px 12px 14px; }
  .prod__row h4{ font-size: 15px; }
  .circle-grid { grid-template-columns: repeat(2, 1fr); }

  /* At this width the arrows sit on top of the headline. Swipe and the dots
     already cover navigation on touch, so drop them rather than squeeze the
     copy into the middle third of the screen. */
  .hc__arrow { display: none; }
  .hc__dots { bottom: 16px; }

  .hc__slide, .hc__body { min-height: 500px; }
  .hc__body .btn { width: 100%; }

  .slider__frame { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
  .slider__btn { width: 44px; height: 44px; }
  .slider__btn--prev { inset-inline-start: 10px; }
  .slider__btn--next { inset-inline-end: 10px; }
  .slider__caption { padding: 34px 18px 18px; font-size: 13px; }

  .form__grid { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form button[type="submit"] { width: 100%; }

  .quality__item { flex-direction: column; gap: 12px; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  .wa { width: 54px; height: 54px; inset-inline-end: 16px; bottom: 16px; }
  .wa svg { width: 27px; height: 27px; }

  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { inset-inline-start: 10px; }
  .lightbox__nav--next { inset-inline-end: 10px; }
}

/* --------------------------------------------------------------------------
   21. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) { scroll-behavior: auto; }
  :root:not([data-motion="full"]) *,
  :root:not([data-motion="full"]) *::before,
  :root:not([data-motion="full"]) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  :root:not([data-motion="full"]) [data-reveal] { opacity: 1; transform: none; filter: none; }

  /* Motion-only decoration: drop it rather than freeze it mid-sweep */
  :root:not([data-motion="full"]) .beam-track { display: none; }
  :root:not([data-motion="full"]) .word { animation: none; opacity: 1; filter: none; transform: none; }
  :root:not([data-motion="full"]) .hc__title em {
    -webkit-text-fill-color: var(--copper-2);
    color: var(--copper-2);
    background: none;
  }
  :root:not([data-motion="full"]) .hc__track { transition: none; }
  :root:not([data-motion="full"]) .hc__slide { opacity: 1; }

  /* The blanket animation-duration override would leave the staggered copy
     stuck at its `from` state — invisible and shoved off to the side — so
     drop the animations outright and show the finished position. */
  :root:not([data-motion="full"]) .hc__slide.is-active :is(.hc__eyebrow, .hc__lead, .btn),
  :root:not([data-motion="full"]) .hc__slide.is-active .hc__title .ln > * {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  :root:not([data-motion="full"]) .cover img { --py: 0px; }
}

/* Big blurred orbs are the most expensive thing on the page — shrink them
   where the GPU is weakest. */
@media (max-width: 620px) {
  .orb { filter: blur(60px); }
  .orb--a { width: 300px; height: 300px; }
  .orb--b { width: 240px; height: 240px; }
  .orb--c { display: none; }
  .beam-track { display: none; }
}

@media print {
  .header, .wa, .slider__btn, .slider__dots, .menu-btn, .lang, .form { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .cta, .stats, .footer { background: #fff !important; color: #000 !important; }
  .section--dark h2, .section--dark h3, .cta h2, .stats strong { color: #000 !important; }
}

/* ===========================================================================
   22. Industrial Editorial — 2026 art direction
   A precise, high-contrast layer built around the visual language of circular
   knitting: radial motion, machine grids, copper, steel and deep indigo.
   ========================================================================== */
:root {
  --ink: #06111F;
  --indigo: #0A2340;
  --indigo-2: #143A64;
  --indigo-3: #3E82B8;
  --copper: #EF7135;
  --copper-2: #FF9257;
  --copper-3: #FFD0B2;
  --signal: #FF6C2C;
  --steel: #99D7DE;
  --night: #040C16;
  --wrap: 1440px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
}

body {
  background-image:
    radial-gradient(circle at 8% 18%, rgba(239, 113, 53, .045), transparent 24rem),
    linear-gradient(rgba(10, 35, 64, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 35, 64, .025) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}

/* Brand intro: one short, mechanical draw-in before the page takes over. */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(20, 58, 100, .56), transparent 34rem),
    linear-gradient(135deg, #040C16, #07192D 62%, #040C16);
  color: #fff;
  pointer-events: all;
  transition: opacity .55s ease, visibility .55s ease;
}
.site-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(153, 215, 222, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 215, 222, .18) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle, #000, transparent 64%);
}
.site-intro__lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  animation: introLockup .9s var(--ease-premium) both;
}
.site-intro__lockup img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 20px 60px rgba(0,0,0,.4);
}
.site-intro__lockup div { display: grid; gap: 4px; }
.site-intro__lockup span {
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 850;
  line-height: .95;
  letter-spacing: .09em;
}
.site-intro__lockup small {
  color: var(--copper-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .24em;
}
.site-intro__track {
  position: relative;
  width: min(360px, 70vw);
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.13);
}
.site-intro__track i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--copper-2), var(--steel));
  transform-origin: left;
  animation: introTrack 1s var(--ease-premium) both;
}
.site-intro.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.site-intro.is-skip { display: none; }
@keyframes introLockup {
  from { opacity: 0; transform: translateY(22px); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes introTrack { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.scroll-progress {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--copper), var(--copper-2), var(--steel));
  box-shadow: 0 0 16px rgba(255,108,44,.6);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Header — compact glass control bar. */
.header {
  background: rgba(4, 12, 22, .76);
  border-color: rgba(153, 215, 222, .12);
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
}
.header.is-stuck {
  background: rgba(4, 12, 22, .94);
  box-shadow: 0 18px 50px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.05) inset;
}
.brand img { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.28); }
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 14px 3px;
  height: 1px;
  background: var(--copper-2);
  transform: scaleX(0);
  transition: transform .35s var(--ease-premium);
}
.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { background: rgba(239,113,53,.13); }

/* Hero — dark industrial editorial composition, with the product left and
   the commercial message on a technical glass surface at right. */
.hc {
  background: var(--night);
  border-bottom: 1px solid rgba(153,215,222,.12);
}
.hc__viewport { position: relative; }
.hc__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(rgba(153,215,222,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,215,222,.10) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.7), transparent 58%);
}
.hc__slide {
  min-height: clamp(660px, calc(100svh - var(--header-h)), 860px);
  opacity: .12;
  background: var(--night);
}
.hc__slide.is-active { opacity: 1; }
.hc__img {
  object-position: left center;
  filter: brightness(.62) saturate(.78) contrast(1.12);
  transform: scale(1.035) translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  transition: transform 1.2s var(--ease-premium), filter .8s ease;
}
.hc__slide::before {
  background:
    linear-gradient(90deg, rgba(4,12,22,.05) 0%, rgba(4,12,22,.18) 31%, rgba(4,12,22,.9) 59%, rgba(4,12,22,.985) 100%),
    linear-gradient(0deg, rgba(4,12,22,.76), transparent 40%);
}
.hc__body {
  z-index: 3;
  min-height: clamp(660px, calc(100svh - var(--header-h)), 860px);
  padding: clamp(70px, 8vw, 126px) var(--gutter) clamp(112px, 10vw, 148px) 52%;
  align-items: flex-start;
  text-align: start;
}
html[dir="ltr"] .hc__body { align-items: flex-start; text-align: left; }
.hc__index {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--steel);
  font: 800 11px/1 var(--font-en);
  letter-spacing: .2em;
}
.hc__index::after { content: ""; width: 72px; height: 1px; background: currentColor; opacity: .5; }
.hc__eyebrow {
  margin-bottom: 18px;
  color: var(--copper-2);
  font-size: 13px;
}
.hc__title {
  max-width: 820px;
  margin-bottom: 24px;
  color: #F8FAFC;
  font-size: clamp(43px, 5.5vw, 82px);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
html[lang="ar"] .hc__title { line-height: 1.18; }
.hc__title em {
  padding-block: .3em;
  margin-block: -.3em;
  color: var(--copper-2);
  background: linear-gradient(90deg, var(--copper-2), #FFD1B4 48%, var(--copper-2));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hc__lead {
  max-width: 650px;
  margin-bottom: 30px;
  color: #B7C7DA;
  font-size: clamp(16px, 1.45vw, 20px);
}
.hc__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.hc__text-link {
  position: relative;
  color: #EAF1F7;
  font-size: 14px;
  font-weight: 750;
  border-bottom: 1px solid rgba(153,215,222,.42);
  transition: color .25s ease, border-color .25s ease;
}
.hc__text-link:hover { color: var(--copper-2); border-color: var(--copper-2); }
.hc .btn--primary {
  min-width: 190px;
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
  box-shadow: 0 14px 44px rgba(255,108,44,.24);
}
.hc__proof {
  display: flex;
  width: min(100%, 620px);
  margin-top: 38px;
  padding: 16px 0;
  border-top: 1px solid rgba(153,215,222,.18);
  border-bottom: 1px solid rgba(153,215,222,.18);
}
.hc__proof > span {
  flex: 1;
  display: grid;
  gap: 3px;
  padding-inline: 18px;
  border-inline-end: 1px solid rgba(153,215,222,.16);
}
.hc__proof > span:first-child { padding-inline-start: 0; }
.hc__proof > span:last-child { border: 0; }
.hc__proof b {
  color: #fff;
  font: 800 clamp(18px, 1.75vw, 27px)/1 var(--font-en);
  letter-spacing: -.03em;
}
.hc__proof small { color: #8295AA; font-size: 11px; font-weight: 700; }
.hc__ghost {
  position: absolute;
  z-index: 0;
  left: 2.5vw;
  bottom: -4vw;
  color: rgba(255,255,255,.045);
  font: 900 clamp(180px, 27vw, 460px)/.75 var(--font-en);
  letter-spacing: -.1em;
  user-select: none;
}
.hc__arrow {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(4,12,22,.44);
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
}
.hc__arrow:hover {
  border-color: var(--copper-2);
  background: var(--signal);
  color: #fff;
  transform: translateY(-50%) scale(1.07);
}
.hc__dots { bottom: 30px; gap: 8px; }
.hc__dots button {
  width: 34px;
  height: 3px;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,.24);
}
.hc__dots button:hover { background: rgba(255,255,255,.65); }
.hc__dots button[aria-current="true"] { width: 64px; background: var(--copper-2); }
.hc__scroll {
  position: absolute;
  z-index: 5;
  inset-inline-end: var(--gutter);
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #90A1B4;
  font-size: 11px;
  font-weight: 700;
}
.hc__scroll i { position: relative; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.hc__scroll i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: var(--copper-2);
  transform: translateX(-50%);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { transform: translate(-50%,0); opacity: .3; } 50% { transform: translate(-50%,10px); opacity: 1; } }

@keyframes industrialIn {
  from { opacity: 0; transform: translateY(38px); filter: blur(10px); clip-path: inset(100% 0 0); }
  to { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0); }
}
.hc__slide.is-active :is(.hc__index, .hc__eyebrow, .hc__lead, .hc__actions, .hc__proof) {
  animation: industrialIn .9s var(--ease-premium) both;
}
.hc__slide.is-active .hc__eyebrow { animation-delay: .08s; }
.hc__slide.is-active .hc__title .ln:nth-child(1) > b { animation: industrialIn 1s var(--ease-premium) .12s both; }
.hc__slide.is-active .hc__title .ln:nth-child(2) > em {
  animation: industrialIn 1s var(--ease-premium) .2s both, shineRtl 12s ease-in-out 1.2s infinite;
}
html[dir="ltr"] .hc__slide.is-active .hc__title .ln:nth-child(2) > em {
  animation: industrialIn 1s var(--ease-premium) .2s both, shineLtr 12s ease-in-out 1.2s infinite;
}
.hc__slide.is-active .hc__lead { animation-delay: .28s; }
.hc__slide.is-active .hc__actions { animation-delay: .36s; }
.hc__slide.is-active .hc__proof { animation-delay: .44s; }
.hc__slide.is-active .hc__actions .btn { animation: none; }

/* Live production proof ticker. */
.proof-ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: 13px 0;
  background: var(--signal);
  color: #fff;
  border-block: 1px solid rgba(255,255,255,.22);
}
.proof-ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: proofTicker 28s linear infinite;
}
.proof-ticker__track span {
  padding-inline-end: 5rem;
  font: 800 12px/1 var(--font);
  letter-spacing: .08em;
}
html[lang="ar"] .proof-ticker__track span { letter-spacing: 0; }
html[dir="rtl"] .proof-ticker__track { animation-direction: reverse; }
@keyframes proofTicker { to { transform: translateX(-50%); } }

/* Numbers — the factory's scale is presented as a precision instrument. */
.stats { position: relative; background: #071321; }
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0, rgba(62,130,184,.18), transparent 45%);
}
.stats__grid { position: relative; grid-template-columns: repeat(4, 1fr); padding-block: 0; }
.stats__grid > div {
  position: relative;
  min-height: 148px;
  padding: 36px 26px 30px;
  overflow: hidden;
  transition: background .35s ease;
}
.stats__grid > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--copper-2);
  transform: scaleX(0);
  transition: transform .45s var(--ease-premium);
}
.stats__grid > div:hover { background: rgba(255,255,255,.035); }
.stats__grid > div:hover::before { transform: scaleX(1); }
.stats strong { display: flex; align-items: baseline; gap: 8px; font-size: clamp(28px, 3vw, 46px); }
.stats strong .stat__num { display: inline; margin: 0; color: #fff; font: inherit; }
.stats strong i { color: var(--copper-2); font-size: .38em; font-style: normal; font-weight: 800; }
.stats__grid > div > span { margin-top: 10px; color: #899AAD; font-size: 12px; font-weight: 750; letter-spacing: .06em; }

/* Editorial section rhythm. */
.section { position: relative; }
.section-head h2,
.about__copy h2,
.quality__grid h2,
.contact__grid h2 { font-size: clamp(38px, 5vw, 68px); text-wrap: balance; }
.eyebrow { color: var(--copper); }
.eyebrow::before { width: 52px; background: linear-gradient(90deg, var(--copper), var(--steel)); }
.about__media { border-radius: 2px 34px 2px 34px; overflow: visible; }
.about__media::after {
  content: "MADE IN EGYPT";
  position: absolute;
  inset: auto;
  inset-inline-start: -24px;
  top: 28px;
  z-index: 2;
  padding: 9px 13px;
  background: var(--night);
  color: var(--steel);
  font: 800 10px/1 var(--font-en);
  letter-spacing: .16em;
}
.about__media img { border-radius: inherit; filter: saturate(.72) contrast(1.08); }
.about__tag { border-radius: 2px 18px 2px 18px; background: linear-gradient(145deg, var(--signal), #B44219); }

/* Bento capability grid. */
.section--dark {
  background-color: #071423;
  background-image:
    radial-gradient(900px 520px at 12% 0, rgba(35,95,141,.34), transparent 60%),
    linear-gradient(rgba(153,215,222,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,215,222,.045) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}
.cards { grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card { min-height: 242px; border-radius: 2px 24px 2px 24px; isolation: isolate; }
.card:nth-child(1), .card:nth-child(4) { grid-column: span 5; }
.card:nth-child(2), .card:nth-child(3) { grid-column: span 7; }
.card::before,
.spec-ledger__grid article::before,
.prod::before,
.quality__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,146,87,.18), transparent 58%);
  transition: opacity .3s ease;
}
.card:hover::before,
.spec-ledger__grid article:hover::before,
.prod:hover::before,
.quality__item:hover::before { opacity: 1; }
.card__num { color: rgba(153,215,222,.58); font: 800 11px/1 var(--font-en); letter-spacing: .18em; }
.card h3 { font-size: clamp(24px, 2.2vw, 34px); }

.spec-ledger {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.8fr);
  gap: 0;
  margin-top: 22px;
  border: 1px solid rgba(153,215,222,.16);
  border-radius: 24px 2px 24px 2px;
  overflow: hidden;
  background: rgba(3,12,22,.5);
  box-shadow: 0 32px 80px rgba(0,0,0,.22);
}
.spec-ledger__intro { padding: clamp(30px, 4vw, 54px); border-inline-end: 1px solid rgba(153,215,222,.16); }
.spec-ledger__code { color: var(--steel); font: 800 10px/1 var(--font-en); letter-spacing: .2em; }
.spec-ledger__intro h3 { margin-top: 48px; font-size: clamp(28px, 3vw, 44px); }
.spec-ledger__intro p { margin-top: 18px; color: #93A5B9; }
.spec-ledger__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.spec-ledger__grid article {
  position: relative;
  z-index: 0;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  padding: 24px;
  border-inline-end: 1px solid rgba(153,215,222,.12);
  border-bottom: 1px solid rgba(153,215,222,.12);
  transition: background .3s ease;
}
.spec-ledger__grid article:nth-child(3n) { border-inline-end: 0; }
.spec-ledger__grid article:nth-child(n+4) { border-bottom: 0; }
.spec-ledger__grid article:hover { background: rgba(255,255,255,.035); }
.spec-ledger__grid article > span { position: absolute; top: 20px; inset-inline-end: 20px; color: rgba(153,215,222,.42); font: 800 10px/1 var(--font-en); }
.spec-ledger__grid b { color: #fff; font: 800 clamp(20px, 2vw, 30px)/1 var(--font-en); letter-spacing: -.035em; }
.spec-ledger__grid small { color: #889AAF; font-size: 12px; }

/* Imagery and product surfaces become sharper and more technical. */
.slider__frame,
.spots,
.prod,
.details-box,
.form { border-radius: 3px 24px 3px 24px; }
.slider__frame::after,
.spots::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(153,215,222,.22);
  border-radius: inherit;
  box-shadow: inset 0 0 0 8px rgba(4,12,22,.08);
}
.prod { position: relative; isolation: isolate; overflow: hidden; }
.prod__media { border-radius: 0; }
.prod__cta { color: var(--copper); font-weight: 800; }
.details-box { border-inline-start: 4px solid var(--signal); }

.quality__item { position: relative; isolation: isolate; overflow: hidden; border-radius: 2px 18px 2px 18px; }
.cert-status {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  margin-top: 28px;
  padding: 13px 17px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--sh-1);
}
.cert-status > span { width: 10px; height: 10px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 5px rgba(239,113,53,.13); }
.cert-status div { display: grid; gap: 1px; }
.cert-status b { font: 800 13px/1.3 var(--font-en); color: var(--text); }
.cert-status small { color: var(--copper); font-size: 11px; font-weight: 800; }

.cta { background: #071423; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,108,44,.16), transparent 42%), linear-gradient(rgba(153,215,222,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(153,215,222,.04) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.contact__hours {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cotton-2);
}
.contact__hours span { color: var(--text-3); font-size: 12px; font-weight: 800; }
.contact__hours b { color: var(--text); font-size: 13px; }

@media (max-width: 1100px) {
  .hc__body { padding-left: 46%; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid > div:nth-child(2n) { border-inline-end: 0; }
  .stats__grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card:nth-child(n) { grid-column: auto; }
}

@media (max-width: 860px) {
  .hc__slide::before {
    background: linear-gradient(0deg, rgba(4,12,22,.98) 0%, rgba(4,12,22,.9) 50%, rgba(4,12,22,.28) 100%);
  }
  .hc__viewport::after { mask-image: linear-gradient(0deg, #000, transparent 72%); }
  .hc__slide,
  .hc__body { min-height: 720px; }
  .hc__img { object-position: 22% center; filter: brightness(.48) saturate(.7) contrast(1.12); }
  .hc__body {
    justify-content: flex-end;
    padding: 190px var(--gutter) 112px;
  }
  .hc__title { font-size: clamp(39px, 8.5vw, 64px); }
  .hc__lead { max-width: 680px; }
  .hc__ghost { display: none; }
  .hc__scroll { display: none; }
  .spec-ledger { grid-template-columns: 1fr; }
  .spec-ledger__intro { border-inline-end: 0; border-bottom: 1px solid rgba(153,215,222,.16); }
  .spec-ledger__intro h3 { margin-top: 28px; }
}

@media (max-width: 620px) {
  .site-intro__lockup { gap: 12px; }
  .site-intro__lockup img { width: 50px; height: 50px; border-radius: 13px; }
  .site-intro__lockup span { font-size: 26px; }
  .site-intro__lockup small { font-size: 8px; letter-spacing: .14em; }
  .hc__slide,
  .hc__body { min-height: 680px; }
  .hc__body { padding: 150px 20px 86px; }
  .hc__index { margin-bottom: 14px; }
  .hc__eyebrow { margin-bottom: 12px; }
  .hc__title { margin-bottom: 16px; font-size: clamp(36px, 10.8vw, 50px); }
  .hc__lead { margin-bottom: 22px; font-size: 15px; line-height: 1.75; }
  .hc__actions { width: 100%; gap: 15px; }
  .hc__actions .btn { width: auto; flex: 1; min-width: 160px; }
  .hc__text-link { flex: 0 0 auto; }
  .hc__proof { margin-top: 24px; padding-block: 12px; }
  .hc__proof > span { padding-inline: 10px; }
  .hc__proof b { font-size: 17px; }
  .hc__proof small { font-size: 9px; }
  .hc__dots { bottom: 19px; }
  .proof-ticker { padding-block: 11px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid > div { min-height: 122px; padding: 26px 16px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .stats__grid > div:nth-child(2n) { border-inline-end: 0; }
  .stats__grid > div:nth-child(3) { border-inline-end: 1px solid rgba(255,255,255,.1); }
  .stats__grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .stats strong { font-size: 31px; }
  .cards { grid-template-columns: 1fr; }
  .spec-ledger__grid { grid-template-columns: repeat(2, 1fr); }
  .spec-ledger__grid article:nth-child(n) { border-inline-end: 1px solid rgba(153,215,222,.12); border-bottom: 1px solid rgba(153,215,222,.12); }
  .spec-ledger__grid article:nth-child(2n) { border-inline-end: 0; }
  .spec-ledger__grid article:nth-child(n+5) { border-bottom: 0; }
  .spec-ledger__grid article { min-height: 145px; padding: 18px; }
  .spec-ledger__grid b { font-size: 18px; }
  .about__media::after { inset-inline-start: 12px; top: 12px; }
  .contact__hours { flex-direction: column; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .site-intro { display: none; }
  :root:not([data-motion="full"]) .proof-ticker__track,
  :root:not([data-motion="full"]) .hc__scroll i::after { animation: none; }
  :root:not([data-motion="full"]) .hc__img { transform: none; }
  :root:not([data-motion="full"]) .hc__slide.is-active :is(.hc__index, .hc__eyebrow, .hc__lead, .hc__actions, .hc__proof),
  :root:not([data-motion="full"]) .hc__slide.is-active .hc__title .ln > * { animation: none; opacity: 1; transform: none; filter: none; clip-path: none; }
}

@media print {
  .site-intro, .scroll-progress, .proof-ticker, .hc__scroll { display: none !important; }
}

/* ==========================================================================
   23. Unified navy direction + explicit hero copy timeline
   User-directed refinement: one calm colour family across the full page,
   a 550px desktop hero, and unmistakable text animation per carousel slide.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cotton: #081522;
  --cotton-2: #0A1827;
  --cotton-3: #102235;
  --line: #1C344A;
  --text: #EDF4FA;
  --text-2: #AAB9C8;
  --text-3: #74879A;
  --white: #0D1D2D;
  --indigo: #081522;
  --indigo-2: #102B47;
  --indigo-3: #3B7296;
  --on-dark: #EDF4FA;
  --on-dark-2: #AAB9C8;
  --sh-1: 0 1px 2px rgba(0,0,0,.25), 0 7px 22px rgba(0,0,0,.16);
  --sh-2: 0 10px 34px rgba(0,0,0,.24);
  --sh-3: 0 24px 70px rgba(0,0,0,.32);
}

:root[data-theme="light"] {
  color-scheme: light;
  --cotton: #F5F1EB;
  --cotton-2: #EFE9E0;
  --cotton-3: #E5DDD1;
  --line: #D8CEC0;
  --text: #142338;
  --text-2: #536174;
  --text-3: #7A8795;
  --white: #FFFDFC;
  --indigo: #102B47;
  --indigo-2: #1E456A;
  --indigo-3: #3B7296;
  --on-dark: #EDF4FA;
  --on-dark-2: #AAB9C8;
  --sh-1: 0 1px 2px rgba(20,35,56,.06), 0 8px 24px rgba(20,35,56,.07);
  --sh-2: 0 12px 38px rgba(20,35,56,.1);
  --sh-3: 0 26px 72px rgba(20,35,56,.15);
}

body {
  color: var(--text);
  background-color: var(--cotton);
  background-image:
    radial-gradient(circle at 8% 16%, rgba(59,114,150,.08), transparent 30rem),
    linear-gradient(rgba(153,215,222,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,215,222,.022) 1px, transparent 1px);
}
.theme-btn { display: grid; }
.section,
.section--alt,
.section--white { background-color: var(--cotton); }
.section--dark,
.cta,
.stats,
.footer { background-color: #07131F; }
.section--dark {
  background-image:
    radial-gradient(900px 520px at 12% 0, rgba(35,95,141,.17), transparent 60%),
    linear-gradient(rgba(153,215,222,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,215,222,.03) 1px, transparent 1px);
}
.card,
.form,
.details-box,
.quality__item,
.contact__row,
.map-link,
.contact__hours,
.prod,
.collapse,
.circle-cat__media {
  background-color: var(--white);
  border-color: var(--line);
}
.field input,
.field textarea,
.field select { background: var(--cotton); color: var(--text); border-color: var(--line); }
.field input::placeholder,
.field textarea::placeholder { color: #62788E; }

/* The light mode stays in the same restrained family: warm cotton surfaces,
   navy type and the same copper accent. */
:root[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 8% 16%, rgba(59,114,150,.07), transparent 30rem),
    linear-gradient(rgba(20,35,56,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,35,56,.025) 1px, transparent 1px);
}
:root[data-theme="light"] :is(.section--dark, .cta, .stats, .footer) {
  color: var(--text);
  background-color: #EFE9E0;
}
:root[data-theme="light"] .section--dark {
  background-image:
    radial-gradient(900px 520px at 12% 0, rgba(59,114,150,.1), transparent 60%),
    linear-gradient(rgba(20,35,56,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,35,56,.028) 1px, transparent 1px);
}
:root[data-theme="light"] :is(.section--dark h2, .section--dark h3, .cta h2, .stats strong, .footer h4),
:root[data-theme="light"] .spec-ledger__grid b,
:root[data-theme="light"] .footer .brand__name b { color: var(--text); }
:root[data-theme="light"] :is(.section--dark p, .section--dark .section-head > p, .cta p, .footer p, .footer ul a, .footer__bottom),
:root[data-theme="light"] .spec-ledger__intro p,
:root[data-theme="light"] .spec-ledger__grid small { color: var(--text-2); }
:root[data-theme="light"] :is(.card, .spec-ledger, .spec-ledger__grid article) {
  background-color: rgba(255,253,252,.76);
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
:root[data-theme="light"] .spec-ledger__intro,
:root[data-theme="light"] .spec-ledger__grid article { border-color: var(--line); }
:root[data-theme="light"] .stats__grid > div { border-color: rgba(20,35,56,.12); }
:root[data-theme="light"] .stats strong .stat__num { color: var(--text); }
:root[data-theme="light"] .stats__grid > div > span { color: var(--text-2); }
:root[data-theme="light"] .footer__bottom { border-color: var(--line); }
:root[data-theme="light"] .cta .btn--ghost { color: var(--text); border-color: rgba(20,35,56,.25); }

/* Keep the product photography intact while turning the hero's editorial
   copy panel into a true white surface in light mode. */
:root[data-theme="light"] .hc,
:root[data-theme="light"] .hc__slide { background: #fff; }
:root[data-theme="light"] .hc__slide::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.9) 57%, #fff 72%, #fff 100%),
    linear-gradient(0deg, rgba(255,255,255,.22), transparent 38%);
}
:root[data-theme="light"] .hc__img { filter: brightness(.88) saturate(.82) contrast(1.06); }
:root[data-theme="light"] .hc__viewport::after {
  opacity: .22;
  background-image:
    linear-gradient(rgba(20,35,56,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,35,56,.08) 1px, transparent 1px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.42), transparent 58%);
}
:root[data-theme="light"] .hc__title,
:root[data-theme="light"] .hc__proof b { color: var(--text); }
:root[data-theme="light"] .hc__lead,
:root[data-theme="light"] .hc__proof small { color: var(--text-2); }
:root[data-theme="light"] .hc__text-link { color: var(--text); border-color: rgba(20,35,56,.32); }
:root[data-theme="light"] .hc__proof {
  border-top-color: rgba(20,35,56,.15);
  border-bottom-color: rgba(20,35,56,.15);
}
:root[data-theme="light"] .hc__proof > span { border-inline-end-color: rgba(20,35,56,.14); }
:root[data-theme="light"] .hc__arrow {
  color: var(--text);
  background: rgba(255,255,255,.84);
  border-color: rgba(20,35,56,.2);
  box-shadow: 0 10px 30px rgba(20,35,56,.12);
}
:root[data-theme="light"] .hc__arrow:hover { color: #fff; background: var(--signal); border-color: var(--signal); }
:root[data-theme="light"] .hc__dots button { background: rgba(20,35,56,.26); }
:root[data-theme="light"] .hc__dots button:hover { background: rgba(20,35,56,.6); }
:root[data-theme="light"] .hc__dots button[aria-current="true"] { background: var(--copper-2); }

@media (min-width: 861px) {
  .hc__slide,
  .hc__body {
    height: 550px;
    min-height: 550px;
  }
  .hc__body {
    padding-block: 30px 48px;
    padding-left: 51%;
  }
  html[dir="rtl"] .hc__body {
    width: min(100%, 1600px);
    max-width: 1600px;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    align-items: stretch;
    text-align: right;
  }
  html[dir="rtl"] .hc__title,
  html[dir="rtl"] .hc__lead,
  html[dir="rtl"] .hc__actions,
  html[dir="rtl"] .hc__proof {
    width: min(100%, 500px);
    margin-left: auto;
    margin-right: 0;
  }
  html[dir="rtl"] .hc__actions {
    justify-content: flex-start;
  }
  html[dir="rtl"] .hc__img {
    transform-origin: left center;
    transform: scale(1.16) translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  }
  html[dir="rtl"] .hc__slide::before {
    background:
      linear-gradient(90deg, rgba(4,12,22,.12) 0%, rgba(4,12,22,.28) 30%, rgba(4,12,22,.72) 55%, rgba(4,12,22,.98) 79%, rgba(4,12,22,.995) 100%),
      linear-gradient(0deg, rgba(4,12,22,.72), transparent 42%);
  }
  .hc__index { margin-bottom: 10px; }
  .hc__eyebrow { margin-bottom: 9px; }
  .hc__title {
    max-width: 720px;
    margin-bottom: 12px;
    font-size: clamp(38px, 4.15vw, 62px);
    line-height: .98;
  }
  html[lang="ar"] .hc__title { line-height: 1.08; }
  .hc__lead {
    max-width: 590px;
    margin-bottom: 17px;
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.7;
  }
  .hc__actions { gap: 16px; }
  .hc .btn--primary { min-width: 172px; min-height: 46px; padding-block: 11px; }
  .hc__proof { margin-top: 18px; padding-block: 10px; }
  .hc__proof b { font-size: clamp(17px, 1.45vw, 23px); }
  .hc__proof small { font-size: 10px; }
  .hc__scroll { display: none; }
  .hc__dots { bottom: 15px; }
}

/* Neutralise the legacy entrance declarations so the deliberate timeline
   below is the only animation controlling hero copy. */
.hc__slide.is-active :is(.hc__index, .hc__eyebrow, .hc__lead, .hc__actions, .hc__proof),
.hc__slide.is-active .hc__title .ln > *,
.hc__slide.is-active .btn { animation: none; }
.hc__title .ln {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.hc__title .ln > * { transform-origin: 50% 100%; }

@keyframes heroLineReveal {
  0% { opacity: 0; transform: translateY(112%) rotate(2deg); filter: blur(8px); }
  62% { opacity: 1; filter: blur(1px); }
  100% { opacity: 1; transform: translateY(0) rotate(0); filter: none; }
}
@keyframes heroMetaReveal {
  0% { opacity: 0; transform: translateY(24px); filter: blur(7px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes heroProofReveal {
  0% { opacity: 0; transform: scaleX(.72) translateY(18px); filter: blur(5px); }
  100% { opacity: 1; transform: scaleX(1) translateY(0); filter: none; }
}

.hc__slide.is-active.is-entering .hc__index {
  animation: heroMetaReveal .55s var(--ease-premium) .05s both;
}
.hc__slide.is-active.is-entering .hc__eyebrow {
  animation: heroMetaReveal .62s var(--ease-premium) .12s both;
}
.hc__slide.is-active.is-entering .hc__title .ln:nth-child(1) > * {
  animation: heroLineReveal .9s var(--ease-premium) .18s both;
}
.hc__slide.is-active.is-entering .hc__title .ln:nth-child(2) > * {
  animation: heroLineReveal .98s var(--ease-premium) .31s both;
}
.hc__slide.is-active.is-entering .hc__lead {
  animation: heroMetaReveal .7s var(--ease-premium) .48s both;
}
.hc__slide.is-active.is-entering .hc__actions {
  animation: heroMetaReveal .7s var(--ease-premium) .58s both;
}
.hc__slide.is-active.is-entering .hc__proof {
  animation: heroProofReveal .78s var(--ease-premium) .68s both;
  transform-origin: center right;
}
html[dir="ltr"] .hc__slide.is-active.is-entering .hc__proof { transform-origin: center left; }

/* The older fly-in rule is more specific for the highlighted line. Keep its
   copper shimmer, but make its entrance use the same deliberate reveal as the
   first title line. */
.hc__slide.is-active.is-entering .hc__title .ln:nth-child(2) > em {
  animation: heroLineReveal .98s var(--ease-premium) .31s both,
             shineLtr 16s ease-in-out infinite;
}
html[dir="rtl"] .hc__slide.is-active.is-entering .hc__title .ln:nth-child(2) > em {
  animation: heroLineReveal .98s var(--ease-premium) .31s both,
             shineRtl 16s ease-in-out infinite;
}

@media (min-width: 621px) and (max-width: 860px) {
  .hc__slide,
  .hc__body { height: 620px; min-height: 620px; }
  .hc__body { padding-block: 105px 72px; }
  html[dir="rtl"] .hc__body {
    align-items: flex-start;
    text-align: right;
  }
  html[dir="rtl"] .hc__title,
  html[dir="rtl"] .hc__lead,
  html[dir="rtl"] .hc__actions,
  html[dir="rtl"] .hc__proof {
    width: min(100%, 560px);
  }
  .hc__title { font-size: clamp(38px, 7.6vw, 58px); }
  .hc__proof { margin-top: 18px; }
}
@media (max-width: 620px) {
  .hc__slide,
  .hc__body { height: auto; min-height: 640px; }
  .hc__body { padding-block: 105px 68px; }
  html[dir="rtl"] .hc__body {
    align-items: flex-start;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .hc__slide.is-active.is-entering :is(.hc__index, .hc__eyebrow, .hc__lead, .hc__actions, .hc__proof),
  :root:not([data-motion="full"]) .hc__slide.is-active.is-entering .hc__title .ln > * { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ===========================================================================
   24. Calm showroom scale
   Adapted from the restraint of the supplied furniture reference: white and
   warm-white surfaces, charcoal typography, compact controls and quiet cards.
   El Ezz Tex keeps its own copper signal colour and industrial content.
   ========================================================================== */
:root {
  --wrap: 1280px;
  --gutter: clamp(18px, 4vw, 48px);
  --sec-y: clamp(48px, 5.4vw, 72px);
  --header-h: 68px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --font-en: "Work Sans", Arial, Helvetica, sans-serif;
}

body { font-size: 15.5px; line-height: 1.65; }
html[lang="ar"] body { line-height: 1.75; }
html[lang="en"] :is(h1, h2, h3, h4, h5, h6, .brand__name) {
  font-family: "Urbanist", Arial, Helvetica, sans-serif;
}

.header__inner { min-height: var(--header-h); gap: 18px; }
.brand { gap: 10px; }
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.brand__name b { font-size: 15px; }
.brand__name span { font-size: 9.5px; }
.nav { gap: 1px; }
.nav a { padding: 8px 11px; font-size: 14px; }
.header__actions { gap: 8px; }
.lang button { padding: 5px 11px; font-size: 12px; }
.theme-btn { width: 36px; height: 36px; }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 42px); }
.section-head h2,
.about__copy h2,
.quality__grid h2,
.contact__grid h2 {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.25;
}
.section-head > p { max-width: 650px; margin-top: 12px; font-size: 15.5px; }
.eyebrow { margin-bottom: 12px; font-size: 12px; }
.eyebrow::before { width: 34px; }
html[lang="ar"] .eyebrow { font-size: 12.5px; }

.btn {
  min-height: 42px;
  gap: 7px;
  padding: 9px 20px;
  border-width: 1px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: none;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary,
.btn--primary:hover,
.btn--solid,
.btn--solid:hover { box-shadow: none; }

.hc__title { font-size: clamp(36px, 3.5vw, 46px); line-height: 1.08; }
html[lang="ar"] .hc__title { line-height: 1.18; }
.hc__lead { max-width: 560px; font-size: 15px; line-height: 1.72; }
.hc__eyebrow { font-size: 12px; }
.hc__proof { width: min(100%, 560px); }
.hc__proof b { font-size: clamp(17px, 1.35vw, 21px); }
.hc__arrow { width: 46px; height: 46px; }

.stats__grid > div { min-height: 112px; padding: 25px 22px 21px; }
.stats strong { font-size: clamp(26px, 2.5vw, 36px); }
.stats__grid > div > span { margin-top: 7px; font-size: 11.5px; }

.cards { gap: 14px; }
.card {
  min-height: 196px;
  padding: 24px 22px;
  border-radius: var(--r);
  box-shadow: none;
}
.card:hover { transform: translateY(-3px); }
.card h3 { font-size: clamp(19px, 1.7vw, 24px); }
.card p { font-size: 14.5px; line-height: 1.7; }
.card__num { font-size: 10px; }

.spec-ledger {
  margin-top: 18px;
  border-radius: var(--r-lg);
  box-shadow: none;
}
.spec-ledger__intro { padding: clamp(24px, 3vw, 38px); }
.spec-ledger__intro h3 { margin-top: 30px; font-size: clamp(24px, 2.5vw, 32px); }
.spec-ledger__intro p { margin-top: 12px; font-size: 14.5px; }
.spec-ledger__grid article { min-height: 132px; padding: 20px; }
.spec-ledger__grid b { font-size: clamp(18px, 1.65vw, 24px); }

.slider__frame,
.spots,
.prod,
.details-box,
.form,
.quality__item,
.cover,
.collapse { border-radius: var(--r-lg); }
.prod,
.quality__item,
.form,
.details-box { box-shadow: none; }
.prod:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(36,36,36,.08); }
.prod__body { padding: 14px 14px 16px; }
.prod__row h4 { font-size: 15px; }
.prod__cat,
.prod__cta { font-size: 13.5px; }
.quality__item { padding: 20px; }

.cta__inner { padding-block: clamp(42px, 5vw, 62px); }
.cta h2 { font-size: clamp(26px, 3vw, 36px); }
.footer { padding-block: 44px 24px; }
.footer__grid { gap: 34px; padding-bottom: 34px; }

:root[data-theme="light"] {
  --cotton: #FFFFFF;
  --cotton-2: #FBFAF7;
  --cotton-3: #F3F3F3;
  --line: #E8E5DF;
  --text: #242424;
  --text-2: #767676;
  --text-3: #969696;
  --white: #FFFFFF;
  --indigo: #242424;
  --indigo-2: #3E3E3E;
  --sh-1: 0 1px 2px rgba(36,36,36,.04), 0 6px 18px rgba(36,36,36,.045);
  --sh-2: 0 10px 28px rgba(36,36,36,.07);
  --sh-3: 0 20px 50px rgba(36,36,36,.1);
}
:root[data-theme="light"] body { background: #fff; }
:root[data-theme="light"] :is(.section, .section--white) { background: #fff; }
:root[data-theme="light"] .section--alt { background: #FBFAF7; }
:root[data-theme="light"] .header {
  background: rgba(251,250,247,.96);
  border-color: #E8E5DF;
  box-shadow: none;
}
:root[data-theme="light"] .header.is-stuck {
  background: rgba(251,250,247,.985);
  box-shadow: 0 8px 26px rgba(36,36,36,.07);
}
:root[data-theme="light"] .brand img { box-shadow: none; }
:root[data-theme="light"] .brand__name b { color: #242424; }
:root[data-theme="light"] .nav a { color: #515151; }
:root[data-theme="light"] .nav a:hover { color: #242424; background: rgba(36,36,36,.055); }
:root[data-theme="light"] .nav a.is-active { color: #242424; background: rgba(239,113,53,.12); }
:root[data-theme="light"] .lang,
:root[data-theme="light"] .theme-btn { background: #fff; border-color: #DEDAD3; }
:root[data-theme="light"] .lang button,
:root[data-theme="light"] .theme-btn { color: #515151; }
:root[data-theme="light"] .lang button.is-active { color: #fff; background: var(--signal); }

:root[data-theme="light"] :is(.section--dark, .cta, .stats, .footer) {
  background-color: #FBFAF7;
  background-image: none;
}
:root[data-theme="light"] :is(.section--dark, .cta)::before,
:root[data-theme="light"] :is(.section--dark, .cta)::after,
:root[data-theme="light"] .stats::before { display: none; }
:root[data-theme="light"] .proof-ticker {
  background: #F3F3F3;
  color: #3E3E3E;
  border-color: #E5E2DC;
}
:root[data-theme="light"] .proof-ticker__track span::before {
  content: "•";
  margin-inline-end: 14px;
  color: var(--signal);
}
:root[data-theme="light"] .stats__grid > div:hover { background: rgba(36,36,36,.035); }
:root[data-theme="light"] :is(.card, .spec-ledger, .spec-ledger__grid article) {
  background: #fff;
  border-color: #E8E5DF;
  box-shadow: none;
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .spec-ledger__grid article:hover { background: #FBFAF7; }
:root[data-theme="light"] .card h3 { color: #242424; }
:root[data-theme="light"] .card p { color: #767676; }
:root[data-theme="light"] .card__num { color: #A06A4E; }
:root[data-theme="light"] .spec-ledger__grid article > span { color: #A6A19A; }
:root[data-theme="light"] :is(.prod, .quality__item, .form, .details-box, .contact__row, .map-link, .contact__hours) {
  background: #fff;
  border-color: #E8E5DF;
}
:root[data-theme="light"] .footer__grid { border-color: #E8E5DF; }

@media (min-width: 861px) {
  .hc__title { font-size: clamp(36px, 3.5vw, 46px); }
  .hc__body { padding-block: 34px 44px; }
}

@media (min-width: 621px) and (max-width: 860px) {
  .hc__title { font-size: clamp(36px, 6.4vw, 48px); }
}

@media (max-width: 620px) {
  :root { --sec-y: 46px; }
  .hc__slide,
  .hc__body { min-height: 600px; }
  .hc__body { padding: 138px 20px 74px; }
  .hc__title { font-size: clamp(32px, 9.6vw, 42px); }
  .stats__grid > div { min-height: 108px; padding: 22px 15px 18px; }
  .card { min-height: 0; }
  .spec-ledger__grid article { min-height: 126px; }
}

/* Cairo draws several Arabic descenders below the nominal line box. The hero
   masks each line for its reveal animation, so reserve enough painted and
   clipped space for those strokes without changing the visual spacing. */
html[lang="ar"] .hc__title .ln {
  padding-bottom: .36em;
  margin-bottom: -.20em;
}


/* ========================================================================== 
   26. Hero phone repairs
   Keep the phone scrim and title scale aligned with the compact layout. The
   hero copy itself is controlled only by the `is-entering` timeline above.
   ========================================================================== */

/* ── 26a. Light mode needs the phone scrim, not the desktop one ────────────
   `:root[data-theme="light"] .hc__slide::before` (0,3,1) outranks the
   `@media (max-width: 860px)` scrim (0,1,1), so phones in light mode kept the
   90deg side-fade built for the desktop split layout: white under the right
   half, bare photograph under the left. The copy sits across the full width
   at the bottom on a phone, so the fade has to run bottom-to-top instead. */
@media (max-width: 860px) {
  :root[data-theme="light"] .hc__slide::before {
    background:
      linear-gradient(0deg,
        #fff 0%,
        rgba(255,255,255,.965) 42%,
        rgba(255,255,255,.86) 62%,
        rgba(255,255,255,.42) 84%,
        rgba(255,255,255,.10) 100%);
  }
  /* The blueprint grid is masked along the same axis, for the same reason. */
  :root[data-theme="light"] .hc__viewport::after {
    mask-image: linear-gradient(0deg, #000, transparent 72%);
  }
  /* With the copy now over a near-solid white ground, the photograph can go
     back to its full weight in the strip that stays visible above it. */
  :root[data-theme="light"] .hc__img {
    filter: brightness(.94) saturate(.88) contrast(1.08);
  }
}

/* ── 26b. Title scale on a phone ───────────────────────────────────────────
   At 9.6vw the second Arabic line ("على مساحة 2,000 م².") ran past the 20px
   gutters and broke, dropping "م²." onto a line of its own inside a `.ln`
   box that is sized and masked for exactly one line. Sized so each line fits
   its column down to a 320px viewport. */
@media (max-width: 620px) {
  .hc__title { font-size: clamp(26px, 7.9vw, 36px); }
  /* A line that still wraps on a very narrow phone stays readable rather
     than colliding with the one under it. */
  html[lang="ar"] .hc__title { line-height: 1.24; }
}


/* ==========================================================================
   27. Machine cards on a phone — a plain photo gallery
   The grid was `repeat(3, 1fr)` at every width, so on a 390px phone each card
   came out about 113px wide while still carrying 20px of padding, a 40px
   number badge and a 19px heading. That is why the labels spilled off the
   artwork. On a phone the photographs now carry the section on their own and
   open full screen; the labels stay from 621px up, where they fit.
   ========================================================================== */
@media (max-width: 620px) {
  .cover-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* The photographs are 16:9. A 4:3 card threw away a quarter of each one's
     width and enlarged what was left to fill the frame — machines came out
     cropped at the sides and softer than the file actually is. Matching the
     card to the source crops nothing and enlarges nothing. */
  .cover { aspect-ratio: 16 / 9; }
  .cover__body { display: none; }
  /* No copy left to keep legible, so the darkening scrim comes off. The
     hover pair is listed too — it is more specific and would otherwise put
     the scrim back on a narrow desktop window. */
  .cover::after,
  .cover:hover::after { opacity: 0; }
  /* Nothing un-zooms the photo on touch, so it would sit at the 1.1 hover-in
     scale permanently. `none` rather than `scale(1)`: the scroll parallax
     writes --py as an inline style, which no stylesheet rule can zero out,
     and at scale 1 there is no overflow left for it to travel into — the
     card's background would show along the top or bottom edge. */
  .cover img,
  .cover:hover img { transform: none; }

  /* ── The opened photo takes the whole screen ──────────────────────────── */
  .lightbox { padding: 0; }
  .lightbox img {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;          /* dvh where supported; vh is the fallback above */
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
  }
  /* The controls now sit over the photo instead of beside it. */
  .lightbox__close,
  .lightbox__nav { z-index: 2; }
  .lightbox__close {
    top: max(14px, env(safe-area-inset-top));
    inset-inline-end: 14px;
  }
}