/* ============================================================================
   EGAC CONSTRUCTION — MAIN STYLESHEET
   1.  Tokens
   2.  Reset & base
   3.  Typography & utilities
   4.  Buttons & links
   5.  Loader
   6.  Header / navigation / mega menu / mobile menu
   7.  Hero
   8.  Introduction
   9.  Statistics
   10. Solutions
   11. Projects
   12. Materials
   13. Why EGAC
   14. Market strength
   15. Clients
   16. Advertising
   17. Contact CTA
   18. Footer
   19. Floating actions
   20. Inquiry modal & form
   21. Lightbox
   22. Custom cursor
   23. Project detail page
   24. 404
   ========================================================================== */

/* ------------------------------------------------------------------ 1. TOKENS */
:root {
  /* --- official EGAC identity, sampled from the supplied logo ----------- */
  --egac-navy:  #0B1C30;
  --egac-gold:  #BF882C;
  --egac-white: #FFFFFF;
  --egac-black: #111111;
  --egac-gray-dark:  #242424;
  --egac-gray-light: #E8E7E3;

  /* --- working aliases used throughout the stylesheet ------------------- */
  --ink:        var(--egac-navy);        /* dark surfaces + body text */
  --ink-soft:   #16283F;                 /* navy, one step lighter */
  --paper:      #F6F6F4;                 /* light surfaces */
  --line:       var(--egac-gray-light);
  --accent:     var(--egac-gold);        /* accent only - never a background */
  --accent-dim: rgba(191, 136, 44, 0.28);

  --ink-60: rgba(11, 28, 48, 0.62);
  --ink-45: rgba(11, 28, 48, 0.46);
  --ink-12: rgba(11, 28, 48, 0.13);
  --paper-70: rgba(246, 246, 244, 0.70);
  --paper-40: rgba(246, 246, 244, 0.42);
  --paper-14: rgba(246, 246, 244, 0.16);

  --hero-overlay-opacity: 0.68;

  /* --- theme layer -------------------------------------------------------
     Rules paint with these tokens rather than the raw brand colours, so the
     dark theme is one block of overrides instead of a second stylesheet.
     --egac-*, --ink and --paper never change: they stay available for the
     surfaces that are deliberately dark in both themes (hero, footer,
     lightbox, floating buttons).
     ---------------------------------------------------------------------- */
  --bg:             var(--paper);          /* page background             */
  --surface:        var(--paper);          /* modal + mega menu panels    */
  --fg:             var(--ink);            /* body text                   */
  --fg-60:          var(--ink-60);
  --fg-45:          var(--ink-45);
  --fg-12:          var(--ink-12);

  --band:           var(--ink);            /* deliberately dark sections  */
  --band-fg:        var(--paper);

  --btn-solid-bg:   var(--ink);            /* the default filled button   */
  --btn-solid-fg:   var(--paper);

  --nav-solid-bg:   rgba(246, 246, 244, 0.90);
  --shadow-soft:    0 18px 36px -18px rgba(11, 28, 48, 0.38);

  --font-en: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font: var(--font-en);

  --fs-hero:    clamp(2.9rem, 7.6vw, 7.4rem);
  --fs-display: clamp(2.1rem, 4.8vw, 4.4rem);
  --fs-section: clamp(1.8rem, 3.4vw, 3.2rem);
  --fs-lead:    clamp(1.02rem, 1.35vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   0.82rem;
  --fs-micro:   0.7rem;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1440px;
  --section-y: clamp(84px, 10vw, 168px);

  --nav-h: 96px;
  --nav-h-scrolled: 68px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 260ms;
  --t-mid: 460ms;
  --t-slow: 760ms;
}

/* ---------------------------------------------------------------- DARK THEME
   Applied by the inline script in each page's <head> before first paint, and
   toggled at runtime by js/theme.js. Navy becomes the page surface, the dark
   bands drop a step deeper so they still read as separate planes, and gold
   stays an accent rather than becoming a background.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;                      /* native selects and scrollbars */

  --bg:           #0B1C30;                 /* EGAC navy                     */
  --surface:      #13253A;
  --fg:           #EDF1F5;
  --fg-60:        rgba(237, 241, 245, 0.66);
  --fg-45:        rgba(237, 241, 245, 0.48);
  --fg-12:        rgba(237, 241, 245, 0.16);
  --line:         rgba(237, 241, 245, 0.16);

  --band:         #06111D;                 /* one step below the page       */
  --band-fg:      #EDF1F5;

  --btn-solid-bg: #EDF1F5;
  --btn-solid-fg: #0B1C30;

  --nav-solid-bg: rgba(6, 17, 29, 0.88);
  --shadow-soft:  0 18px 40px -18px rgba(0, 0, 0, 0.75);

  --hero-overlay-opacity: 0.74;            /* a touch deeper over the video */
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h-scrolled);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.is-rtl body { font-family: var(--font-ar); letter-spacing: 0; }
html.is-lang-switching body { opacity: 0.22; }
body { transition: opacity 240ms var(--ease); }

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; top: 8px; left: 8px;
  transform: translateY(-160%);
  z-index: 400;
  background: var(--band); color: var(--band-fg);
  padding: 12px 20px; font-size: var(--fs-small);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

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

/* ------------------------------------------- 3. TYPOGRAPHY & LAYOUT HELPERS */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1760px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--dark { background: var(--band); color: var(--band-fg); }
.section--flush { padding-block: 0; }

.kicker {
  display: inline-block;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-45);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fg-12);
}
.section--dark .kicker { color: var(--paper-40); border-color: var(--paper-14); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head__title {
  font-size: var(--fs-display);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.03em;
  margin-top: 22px;
  max-width: 16ch;
}
html.is-rtl .section-head__title { letter-spacing: 0; font-weight: 500; }
.section-head__sub {
  font-size: var(--fs-lead);
  color: var(--fg-60);
  max-width: 46ch;
  padding-bottom: 6px;
}
.section--dark .section-head__sub { color: var(--paper-70); }

.rule { height: 1px; background: var(--fg-12); border: 0; margin: 0; }

/* ---------------------------------------------------- 4. BUTTONS AND LINKS */
.btn {
  --btn-bg: var(--btn-solid-bg);
  --btn-fg: var(--btn-solid-fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              padding var(--t-fast) var(--ease);
}
html.is-rtl .btn { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }

/* Inline SVG arrow: a hairline shaft with a symmetrical 45-degree head.
   It inherits the button's colour through currentColor, so it is correct in
   every button variant and in both themes without a second rule. The hover
   nudge is a transform, so it can never shift the layout. */
.btn .btn__arrow {
  width: 26px; height: 10px;
  flex: none;
  overflow: visible;
  transition: transform var(--t-fast) var(--ease);
}
/* Mirrored for Arabic, where the arrow points the other way. */
html.is-rtl .btn .btn__arrow { transform: scaleX(-1); }

.btn:hover { --btn-bg: var(--accent); border-color: var(--accent); padding-inline: 34px; }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }
html.is-rtl .btn:hover .btn__arrow,
html.is-rtl .btn:focus-visible .btn__arrow { transform: scaleX(-1) translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border-color: currentColor; }
.btn--ghost:hover { --btn-bg: var(--btn-solid-bg); --btn-fg: var(--btn-solid-fg); border-color: var(--btn-solid-bg); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta .btn--ghost:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); border-color: var(--paper); }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--accent); --btn-fg: var(--paper); }

.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  font-weight: 600;
}
.link-underline::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-mid) var(--ease);
}
html.is-rtl .link-underline::after { transform-origin: right center; }
.link-underline:hover::after { transform: scaleX(1); }

/* ----------------------------------------------------------------- 5. LOADER */
.loader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--band); color: var(--band-fg);
  display: grid; place-content: center; gap: 26px;
  transition: opacity 520ms var(--ease), visibility 520ms;
}
.loader__mark { display: grid; place-items: center; }
.loader__mark img { width: min(240px, 54vw); height: auto; }
.loader__track { width: min(260px, 52vw); height: 1px; background: var(--paper-14); }
.loader__bar { width: 0; height: 100%; background: var(--accent); transition: width 240ms linear; }
.loader.is-done { opacity: 0; visibility: hidden; }

/* ------------------------------------------------------------- 6. NAVIGATION */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 120;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: height 520ms var(--ease),
              background-color 520ms var(--ease),
              color 520ms var(--ease),
              border-color 520ms var(--ease),
              backdrop-filter 520ms var(--ease),
              box-shadow 520ms var(--ease),
              transform 520ms var(--ease);
}
.header.is-solid,
.header.is-forced {
  height: var(--nav-h-scrolled);
  background: var(--nav-solid-bg);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: var(--fg);
  border-bottom-color: var(--fg-12);
  box-shadow: 0 10px 40px -28px rgba(11, 28, 48, 0.7);
}
.header.is-hidden { transform: translateY(-102%); }

/* Subtle scrim so the white logo and navigation stay legible over bright
   frames of the hero video. Never applied once the navbar is solid. */
.header::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; height: 190%;
  background: linear-gradient(to bottom, rgba(8, 20, 34, 0.62), rgba(8, 20, 34, 0));
  opacity: 1; pointer-events: none;
  transition: opacity 420ms var(--ease);
}
.header.is-solid::before, .header.is-forced::before { opacity: 0; }
.header__inner { position: relative; z-index: 1; }

.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 46px);
}

/* brand lock-up -----------------------------------------------------------
   The two official logo files are stacked in the same grid cell, so swapping
   between them costs nothing in layout and cannot shift the navbar.
   WHITE shows over the hero, NAVY once the navbar turns solid.
   ------------------------------------------------------------------------ */
.brand {
  display: grid; align-items: center;
  margin-inline-end: auto;
  flex: none;
}
.brand__logo {
  grid-area: 1 / 1;
  height: clamp(40px, 4.2vw, 58px);
  width: auto;
  transition: opacity 520ms var(--ease), height 520ms var(--ease);
}
.brand__logo--dark { opacity: 0; }
.header.is-solid .brand__logo--light,
.header.is-forced .brand__logo--light { opacity: 0; }
.header.is-solid .brand__logo--dark,
.header.is-forced .brand__logo--dark { opacity: 1; }
.header.is-solid .brand__logo,
.header.is-forced .brand__logo { height: clamp(32px, 3vw, 42px); }
/* In the dark theme the solid navbar is navy, so the WHITE file stays on:
   the two official assets are swapped, never recoloured. Both occupy the
   same grid cell, so switching theme cannot shift the layout by a pixel. */
html[data-theme="dark"] .header.is-solid .brand__logo--light,
html[data-theme="dark"] .header.is-forced .brand__logo--light { opacity: 1; }
html[data-theme="dark"] .header.is-solid .brand__logo--dark,
html[data-theme="dark"] .header.is-forced .brand__logo--dark { opacity: 0; }

.brand:hover .brand__logo { opacity: 0.86; }
.brand:hover .brand__logo--dark { opacity: 0; }
.header.is-solid .brand:hover .brand__logo--dark,
.header.is-forced .brand:hover .brand__logo--dark { opacity: 0.86; }
.header.is-solid .brand:hover .brand__logo--light,
.header.is-forced .brand:hover .brand__logo--light { opacity: 0; }
html[data-theme="dark"] .header.is-solid .brand:hover .brand__logo--light,
html[data-theme="dark"] .header.is-forced .brand:hover .brand__logo--light { opacity: 0.86; }
html[data-theme="dark"] .header.is-solid .brand:hover .brand__logo--dark,
html[data-theme="dark"] .header.is-forced .brand:hover .brand__logo--dark { opacity: 0; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.nav__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 2px;
  white-space: nowrap;
}
html.is-rtl .nav__link { letter-spacing: 0; text-transform: none; font-size: 0.94rem; }
.nav__link::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 4px;
  height: 1px; width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ease);
}
html.is-rtl .nav__link::after { transform-origin: right center; }
.nav__link:hover::after,
.nav__link[aria-expanded="true"]::after,
.nav__link.is-current::after { transform: scaleX(1); }

.nav__item--has-menu > .nav__link { display: inline-flex; align-items: center; gap: 8px; }
.nav__caret {
  width: 5px; height: 5px; border-inline-end: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast) var(--ease);
}
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(-135deg) translateY(-2px); }

.header__actions { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }

.lang {
  display: flex; align-items: center; gap: 2px;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em;
}
.lang__btn { padding: 6px 4px; opacity: 0.5; transition: opacity var(--t-fast) var(--ease); }
.lang__btn:hover { opacity: 0.85; }
.lang__btn.is-active { opacity: 1; color: var(--accent); }
.lang__sep { opacity: 0.35; }

.header .btn { padding: 13px 22px; font-size: var(--fs-micro); }
.header:not(.is-solid):not(.is-forced) .btn--nav {
  --btn-bg: transparent; --btn-fg: var(--paper); border-color: var(--paper-40);
}
.header:not(.is-solid):not(.is-forced) .btn--nav:hover {
  --btn-bg: var(--paper); --btn-fg: var(--ink); border-color: var(--paper);
}

/* burger ------------------------------------------------------------------ */
.burger {
  display: none; width: 34px; height: 34px;
  position: relative; flex: none;
}
.burger span {
  position: absolute; inset-inline: 4px; height: 1.5px; background: currentColor;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { top: 20px; }
.burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* mega menu --------------------------------------------------------------- */
.mega {
  position: fixed; inset-inline: 0; top: var(--nav-h-scrolled);
  z-index: 110;
  background: var(--surface);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--fg-12);
  color: var(--fg);
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity 300ms var(--ease), transform 380ms var(--ease), visibility 380ms;
}
.header:not(.is-solid):not(.is-forced) ~ .mega { top: var(--nav-h); }
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__inner {
  max-width: var(--maxw); margin-inline: auto; padding: clamp(30px, 4vw, 56px) var(--gutter);
  display: grid; grid-template-columns: 0.6fr 2.4fr; gap: clamp(24px, 4vw, 64px);
}
.mega__aside p { color: var(--fg-60); max-width: 26ch; margin-top: 16px; font-size: 0.94rem; }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 0; }
.mega__item {
  display: block; padding: 20px 24px;
  border-top: 1px solid transparent;
  opacity: 0; transform: translateY(12px);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mega.is-open .mega__item { opacity: 1; transform: none; transition: opacity 420ms var(--ease), transform 420ms var(--ease), background var(--t-fast) var(--ease); }
.mega__item:hover { background: rgba(11, 28, 48, 0.045); border-top-color: var(--accent); }
.mega__name {
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: 10px;
}
html.is-rtl .mega__name { letter-spacing: 0; text-transform: none; font-size: 1.05rem; }
.mega__num { font-size: 0.64rem; color: var(--accent); letter-spacing: 0.1em; }
.mega__desc { margin-top: 8px; font-size: 0.86rem; color: var(--fg-60); max-width: 34ch; }

/* mobile menu ------------------------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 115;
  background: var(--ink); color: var(--paper);
  padding: calc(var(--nav-h-scrolled) + 24px) var(--gutter) 40px;
  display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 620ms var(--ease), visibility 620ms;
  overflow-y: auto;
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.mobile-menu__list { margin-top: auto; }
.mobile-menu__list li { border-bottom: 1px solid var(--paper-14); }
.mobile-menu__link {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 0;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 300; letter-spacing: -0.02em;
  opacity: 0; transform: translateY(24px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu__link .num { font-size: 0.6rem; color: var(--accent); letter-spacing: 0.2em; flex: none; }
.mobile-menu__foot { margin-top: auto; padding-top: 34px; display: grid; gap: 16px; }
.mobile-menu__foot a { color: var(--paper-70); font-size: 0.92rem; }

/* -------------------------------------------------------------------- 7. HERO */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  color: var(--paper);
  padding-bottom: clamp(24px, 4vw, 48px);
}
/* The media layer is its own stacking context at the bottom of the hero and
   takes no pointer events, so the video can never sit over the buttons. */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; background: var(--ink);
  pointer-events: none;
}
.hero__media img, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* fills the hero, never stretches the frame */
  object-position: center;
  transform: scale(1.06);
}
/* The poster sits under the video and fades out once the video is playing,
   so there is no black flash and no layout shift while it loads. */
.hero__fallback { z-index: 0; }
.hero__video { z-index: 1; opacity: 0; transition: opacity 900ms var(--ease); }
.hero__media.is-playing .hero__video { opacity: 1; }
.hero__media.is-playing .hero__fallback { opacity: 0; transition: opacity 900ms var(--ease); }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(8, 20, 34, 0.96) 0%,
      rgba(8, 20, 34, 0.55) 44%,
      rgba(8, 20, 34, 0.62) 100%),
    linear-gradient(to right,
      rgba(8, 20, 34, 0.86) 0%,
      rgba(8, 20, 34, 0.34) 62%,
      rgba(8, 20, 34, 0.58) 100%);
  opacity: 0;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
/* A whisper of shadow keeps the copy readable over the brightest frames of
   the video without visibly darkening the footage. */
.hero__title, .hero__sub, .hero__stat, .hero__scroll {
  text-shadow: 0 1px 24px rgba(8, 20, 34, 0.45);
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 60px); align-items: end;
  padding-top: calc(var(--nav-h) + 40px);
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.94;
  font-weight: 200;
  letter-spacing: -0.045em;
  text-transform: none;
  max-width: 14ch;
}
html.is-rtl .hero__title { letter-spacing: 0; font-weight: 400; line-height: 1.12; }
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; will-change: transform; }
.hero__line:nth-child(2) { padding-inline-start: clamp(0px, 6vw, 120px); }
.hero__line:nth-child(3) { color: var(--paper); }

.hero__sub {
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 44ch;
  font-size: var(--fs-lead);
  color: var(--paper-70);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3vw, 40px); }

.hero__meta {
  display: flex; gap: clamp(20px, 3vw, 54px);
  padding-bottom: 6px;
}
.hero__stat { border-top: 1px solid var(--paper-14); padding-top: 14px; min-width: 96px; }
.hero__stat b { display: block; font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 300; letter-spacing: -0.02em; }
.hero__stat span { font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-40); }
html.is-rtl .hero__stat span { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }

.hero__scroll {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(30px, 4vw, 52px);
  font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--paper-70);
}
html.is-rtl .hero__scroll { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }
.hero__scroll-line { position: relative; width: 64px; height: 1px; background: var(--paper-14); overflow: hidden; }
.hero__scroll-line::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 30%;
  background: var(--accent);
  animation: scroll-hint 2.6s var(--ease-inout) infinite;
}
.hero__scroll:hover { color: var(--paper); }

/* ------------------------------------------------------------ 8. INTRODUCTION */
.intro__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}
.intro__figure { position: relative; }
.intro__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.intro__badge {
  position: absolute; inset-block-end: -1px; inset-inline-start: -1px;
  background: var(--bg); padding: 22px 28px 18px;
  border-top: 1px solid var(--line); border-inline-end: 1px solid var(--line);
}
.intro__badge b { display: block; font-size: 2rem; font-weight: 300; letter-spacing: -0.03em; }
.intro__badge span { font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-45); }
html.is-rtl .intro__badge span { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }

.intro__title {
  font-size: var(--fs-display);
  line-height: 1.03; font-weight: 300; letter-spacing: -0.035em;
  margin: 24px 0 26px; max-width: 15ch;
}
html.is-rtl .intro__title { letter-spacing: 0; font-weight: 500; }
.intro__body p { color: var(--fg-60); max-width: 52ch; }
.intro__body p + p { margin-top: 18px; }
.intro__cta { margin-top: 34px; display: inline-flex; }

/* ------------------------------------------------------------- 9. STATISTICS */
.stats { border-top: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat {
  padding: clamp(30px, 4vw, 54px) clamp(14px, 2vw, 30px);
  border-inline-end: 1px solid var(--line);
}
.stat:last-child { border-inline-end: 0; }
.stat__value {
  font-size: clamp(1.55rem, 2.7vw, 2.6rem);
  font-weight: 200; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 12px; font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-45); max-width: 16ch;
}
html.is-rtl .stat__label { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }

/* --------------------------------------------------------------- 10. SOLUTIONS */
.solutions { position: relative; overflow: hidden; transition: color 620ms var(--ease); }
.solutions__media { position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity 620ms var(--ease); }
.solutions__media::after { content: ''; position: absolute; inset: 0; background: rgba(8, 20, 34, 0.66); }
.solutions__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 720ms var(--ease), transform 2400ms var(--ease);
}
.solutions__media img.is-active { opacity: 1; transform: scale(1); }
.solutions.is-active { color: var(--paper); }
.solutions.is-active .solutions__media { opacity: 1; }
.solutions.is-active .kicker { color: var(--paper-40); border-color: var(--paper-14); }
.solutions.is-active .section-head__sub { color: var(--paper-70); }
.solutions__inner { position: relative; }

.solution {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1.1fr) 54px;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--fg-12);
  width: 100%; text-align: start;
  transition: opacity 460ms var(--ease), border-color 620ms var(--ease), padding 460ms var(--ease);
}
.solution:last-child { border-bottom: 1px solid var(--fg-12); }
.solutions.is-active .solution { border-color: var(--paper-14); }
.solutions.is-active .solution:not(.is-hovered) { opacity: 0.38; }
.solution.is-hovered { padding-block: clamp(28px, 3.2vw, 44px); }

.solution__num { font-size: var(--fs-micro); letter-spacing: 0.18em; color: var(--accent); transition: transform 460ms var(--ease); }
.solution.is-hovered .solution__num { transform: translateY(-6px); }
.solution__name {
  font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05;
}
html.is-rtl .solution__name { letter-spacing: 0; font-weight: 500; }
.solution__desc {
  font-size: 0.95rem; color: inherit; opacity: 0; max-width: 46ch;
  transform: translateY(8px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.solution.is-hovered .solution__desc { opacity: 0.78; transform: none; }
.solution__go {
  width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%;
  display: grid; place-items: center; opacity: 0; transform: scale(0.8);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  justify-self: end;
}
.solution.is-hovered .solution__go { opacity: 1; transform: none; }
.solution__go::after {
  content: ''; width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-inline-end: 1px solid currentColor;
  transform: rotate(45deg); margin-inline-start: -3px;
}
html.is-rtl .solution__go::after { transform: rotate(-135deg); margin-inline-start: 0; margin-inline-end: -3px; }
.solution__thumb { display: none; }

/* ---------------------------------------------------------------- 11. PROJECTS */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
.filter {
  padding: 10px 18px; border: 1px solid var(--fg-12);
  font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-60);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
html.is-rtl .filter { letter-spacing: 0; text-transform: none; font-size: 0.84rem; }
.filter:hover { color: var(--fg); border-color: var(--fg); }
.filter.is-active { background: var(--btn-solid-bg); border-color: var(--btn-solid-bg); color: var(--btn-solid-fg); }

.projects__featured { margin-bottom: 22px; }
.projects__masonry { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 22px; }
.projects__empty { padding: 60px 0; color: var(--fg-45); text-align: center; display: none; }
.projects__empty.is-visible { display: block; }

.project { position: relative; display: block; overflow: hidden; background: var(--ink); }
.project__media { position: relative; overflow: hidden; }
.project__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform 1100ms var(--ease), opacity 700ms var(--ease);
}
.project--featured .project__media img { aspect-ratio: 21 / 9; }
.project:hover .project__media img { transform: scale(1.06); }
.project__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 20, 34, 0.88), rgba(8, 20, 34, 0.10) 62%);
  opacity: 0; transition: opacity 520ms var(--ease);
}
.project:hover .project__shade, .project:focus-visible .project__shade { opacity: 1; }

.project__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: clamp(18px, 2.2vw, 32px);
  color: var(--paper);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.project__text { overflow: hidden; }
.project__name {
  font-size: clamp(1.05rem, 1.7vw, 1.55rem); font-weight: 400; letter-spacing: -0.02em;
  transform: translateY(110%); opacity: 0;
  transition: transform 560ms var(--ease), opacity 560ms var(--ease);
}
.project__meta {
  margin-top: 6px; font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-70); opacity: 0; transform: translateY(14px);
  transition: transform 560ms 80ms var(--ease), opacity 560ms 80ms var(--ease);
}
html.is-rtl .project__meta { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
.project:hover .project__name, .project:focus-visible .project__name,
.project:hover .project__meta, .project:focus-visible .project__meta { transform: none; opacity: 1; }

.project__badge {
  flex: none; width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid var(--paper-40); color: var(--paper);
  display: grid; place-items: center; text-align: center;
  font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5;
  opacity: 0; transform: scale(0.72); backdrop-filter: blur(4px);
  transition: opacity 520ms var(--ease), transform 620ms var(--ease), background 300ms var(--ease);
}
html.is-rtl .project__badge { letter-spacing: 0; text-transform: none; font-size: 0.72rem; }
.project:hover .project__badge, .project:focus-visible .project__badge { opacity: 1; transform: none; }
.project:hover .project__badge { background: rgba(169,134,80,0.9); border-color: transparent; }

.projects__note { margin-top: 30px; font-size: var(--fs-small); color: var(--fg-45); }

/* --------------------------------------------------------------- 12. MATERIALS */
.materials__strip { display: flex; gap: 4px; height: clamp(360px, 46vw, 560px); }
.material {
  position: relative; flex: 1 1 0; overflow: hidden; background: var(--ink);
  transition: flex-grow 760ms var(--ease);
  text-align: start;
}
.material img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.82; transform: scale(1.04);
  transition: transform 1200ms var(--ease), opacity 620ms var(--ease);
}
.material__body {
  position: absolute; inset-inline: 0; bottom: 0; padding: clamp(18px, 2vw, 30px);
  color: var(--paper);
  background: linear-gradient(to top, rgba(9,9,10,0.92), rgba(9,9,10,0.55) 58%, rgba(9,9,10,0));
}
.material__body > * { display: block; }
.material__name {
  font-size: clamp(1rem, 1.5vw, 1.4rem); font-weight: 400; letter-spacing: -0.01em;
}
.material__spec {
  margin-top: 8px; font-size: 0.78rem; color: var(--paper-70);
  max-width: 34ch; opacity: 0; transform: translateY(10px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.material__note { margin-top: 6px; font-size: 0.86rem; color: var(--paper-70); max-width: 36ch; opacity: 0; transform: translateY(10px); transition: opacity 520ms 60ms var(--ease), transform 520ms 60ms var(--ease); }
.materials__strip:hover .material { flex-grow: 0.7; }
.materials__strip .material:hover,
.materials__strip .material:focus-visible { flex-grow: 2.8; }
.material:hover img, .material:focus-visible img { transform: scale(1); opacity: 1; }
.material:hover .material__spec, .material:hover .material__note,
.material:focus-visible .material__spec, .material:focus-visible .material__note { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 13. WHY EGAC */
.why__list { border-top: 1px solid var(--fg-12); }
.why__item {
  display: grid; grid-template-columns: 90px minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(14px, 3vw, 48px);
  padding: clamp(26px, 3vw, 46px) 0;
  border-bottom: 1px solid var(--fg-12);
  align-items: start;
  transition: background 420ms var(--ease);
}
.why__item:hover { background: rgba(17,17,17,0.025); }
.why__num { font-size: var(--fs-micro); letter-spacing: 0.18em; color: var(--accent); padding-top: 8px; }
.why__title { font-size: clamp(1.25rem, 2.2vw, 1.9rem); font-weight: 300; letter-spacing: -0.02em; }
html.is-rtl .why__title { letter-spacing: 0; font-weight: 500; }
.why__text { color: var(--fg-60); max-width: 52ch; padding-top: 6px; }

/* ----------------------------------------------------------- 14. MARKET STRENGTH */
.strength { position: relative; overflow: hidden; }
.strength__bg { position: absolute; inset: -12% 0; }
.strength__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.26; }
.strength__inner { position: relative; }
.strength__title {
  font-size: var(--fs-display); font-weight: 200; letter-spacing: -0.04em; line-height: 1.02;
  max-width: 18ch;
}
html.is-rtl .strength__title { letter-spacing: 0; font-weight: 400; }
.strength__title span { display: block; }
.strength__title span:nth-child(2) { color: var(--accent); }
.strength__grid {
  margin-top: clamp(44px, 6vw, 88px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--paper-14);
  border: 1px solid rgba(245,244,240,0.14);
}
.strength__cell { background: var(--band); padding: clamp(24px, 3vw, 44px) clamp(14px, 2vw, 28px); }
.strength__value {
  font-size: clamp(1.6rem, 3.1vw, 3rem); font-weight: 200; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.strength__label { margin-top: 14px; font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-40); }
html.is-rtl .strength__label { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
.strength__note { margin-top: 26px; font-size: var(--fs-small); color: var(--paper-40); }

/* ----------------------------------------------------------------- 15. CLIENTS */
.clients__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line);
}
.client {
  display: grid; place-items: center; padding: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line);
}
.client img {
  width: min(190px, 100%); filter: grayscale(1); opacity: 0.42;
  transition: filter 460ms var(--ease), opacity 460ms var(--ease), transform 460ms var(--ease);
}
.client:hover img { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
/* Placeholder client marks are drawn in a neutral grey that reads on either
   theme. Real client artwork is usually dark: supply a light version for the
   dark theme, or drop the section — see README §6. */
html[data-theme="dark"] .client img { opacity: 0.55; }
.clients__note { margin-top: 22px; font-size: var(--fs-small); color: var(--fg-45); }

/* ------------------------------------------------------------- 16. ADVERTISING */
.advertising { background: var(--band); color: var(--band-fg); }
.advertising__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.advertising__title { font-size: var(--fs-display); font-weight: 200; letter-spacing: -0.04em; line-height: 1.04; margin: 22px 0 24px; }
html.is-rtl .advertising__title { letter-spacing: 0; font-weight: 400; }
.advertising__text { color: var(--paper-70); max-width: 46ch; }
.advertising__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.ad-item { position: relative; overflow: hidden; background: #0d0d0e; }
.ad-item img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; opacity: 0.6; transition: opacity 620ms var(--ease), transform 1200ms var(--ease); }
.ad-item:hover img { opacity: 0.85; transform: scale(1.04); }
.ad-item__body { position: absolute; inset-inline: 0; bottom: 0; padding: clamp(16px, 2vw, 26px); }
.ad-item__title { font-size: 1.02rem; font-weight: 500; }
.ad-item__text { margin-top: 6px; font-size: 0.84rem; color: var(--paper-70); max-width: 32ch; }

/* --------------------------------------------------------------- 17. CONTACT CTA */
.cta { position: relative; overflow: hidden; color: var(--paper); text-align: start; }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after { content: ''; position: absolute; inset: 0; background: rgba(8, 20, 34, 0.70); }
.cta__inner { position: relative; padding-block: clamp(110px, 14vw, 220px); }
.cta__title {
  font-size: clamp(2.4rem, 6.4vw, 6rem); font-weight: 200; letter-spacing: -0.05em; line-height: 0.98;
}
html.is-rtl .cta__title { letter-spacing: 0; font-weight: 400; line-height: 1.15; }
.cta__title span { display: block; overflow: hidden; }
.cta__text { margin-top: 26px; font-size: var(--fs-lead); color: var(--paper-70); max-width: 42ch; }
.cta__actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------------------------------------------ 18. FOOTER */
.footer { background: var(--band); color: var(--band-fg); padding-top: clamp(60px, 7vw, 104px); }
.footer__top {
  display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 56px);
  padding-bottom: clamp(44px, 6vw, 80px);
}
.footer__logo { width: min(260px, 70%); height: auto; display: block; }
.footer__desc { margin-top: 16px; color: var(--paper-40); max-width: 28ch; font-size: 0.92rem; }
.footer__col h3 {
  font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper-40); font-weight: 600; margin-bottom: 20px;
}
html.is-rtl .footer__col h3 { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
.footer__col li + li { margin-top: 12px; }
.footer__col a, .footer__col span { color: var(--paper-70); font-size: 0.94rem; transition: color var(--t-fast) var(--ease); }
.footer__col a:hover { color: var(--paper); }

/* Social icons live inside the Contact column, between the e-mail and the
   working hours — the list resets the inherited li+li spacing and lays the
   icons out as a row instead. */
.footer__social-list {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;
  list-style: none; margin: 4px 0 0; padding: 0;
}
.footer__social-list li,
.footer__social-list li + li { margin-top: 0; }
.footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--paper-14); color: var(--paper-70);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.footer__social-link:hover, .footer__social-link:focus-visible { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  padding-block: 26px; border-top: 1px solid var(--paper-14);
  font-size: var(--fs-small); color: var(--paper-40);
}

.has-overlay .header,
.has-overlay .floats,
.is-mega-open .floats {
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease);
}

/* -------------------------------------------------------- 19. FLOATING ACTIONS */
.floats {
  position: fixed; z-index: 105;
  inset-inline-end: clamp(14px, 2vw, 26px);
  bottom: clamp(18px, 4vh, 40px);
  display: flex; flex-direction: column; gap: 12px;
}
.float {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--btn-solid-bg); color: var(--btn-solid-fg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.float:hover { transform: scale(1.08); background: var(--accent); }
.float--whatsapp { background: #1FA855; }
.float--whatsapp:hover { background: #159945; }
.float svg { width: 24px; height: 24px; fill: currentColor; }
.float__tip {
  position: absolute; inset-inline-end: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--btn-solid-bg); color: var(--btn-solid-fg);
  padding: 8px 14px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
html.is-rtl .float__tip { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
.float:hover .float__tip, .float:focus-visible .float__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ------------------------------------------------------- 20. MODAL & FORM */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(12px, 3vw, 40px);
  visibility: hidden;
}
.modal.is-open { visibility: visible; }
.modal__backdrop {
  position: absolute; inset: 0; background: rgba(8, 20, 34, 0.74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 380ms var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__panel {
  position: relative; width: min(760px, 100%);
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--surface); color: var(--fg);
  padding: clamp(26px, 4vw, 54px);
  opacity: 0; transform: scale(0.96) translateY(10px);
  transition: opacity 420ms var(--ease), transform 520ms var(--ease);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close {
  position: absolute; top: 16px; inset-inline-end: 16px;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--fg-12); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.modal__close:hover { background: var(--fg); color: var(--bg); }
.modal__close::before, .modal__close::after {
  content: ''; position: absolute; width: 15px; height: 1px; background: currentColor;
}
.modal__close::before { transform: rotate(45deg); }
.modal__close::after { transform: rotate(-45deg); }
.modal__title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -0.03em; }
html.is-rtl .modal__title { letter-spacing: 0; font-weight: 500; }
.modal__sub { margin-top: 10px; color: var(--fg-60); font-size: 0.94rem; }

.form { margin-top: 30px; display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 8px; position: relative; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-45);
}
html.is-rtl .field label { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 2px; background: transparent;
  border: 0; border-bottom: 1px solid var(--fg-12);
  transition: border-color var(--t-fast) var(--ease);
  border-radius: 0;
}
.field select { appearance: none; cursor: pointer; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field__error { font-size: 0.76rem; color: #B4432F; min-height: 0; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: #B4432F; }
.field.has-error .field__error { display: block; }
.field__hint { font-size: 0.74rem; color: var(--fg-45); }
.field--file input { padding: 10px 0; font-size: 0.86rem; }

.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between; }
.form__note { font-size: 0.76rem; color: var(--fg-45); max-width: 44ch; }
.submit { position: relative; }
.submit.is-loading { pointer-events: none; opacity: 0.7; }
.spinner {
  width: 14px; height: 14px; border: 1.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 720ms linear infinite; display: none;
}
.submit.is-loading .spinner { display: block; }
.submit.is-loading .btn__arrow { display: none; }

.form-state { display: none; padding-block: 22px; }
.form-state.is-visible { display: block; }
.form-state__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 300; letter-spacing: -0.03em; margin-bottom: 12px; }
.form-state__text { color: var(--fg-60); max-width: 44ch; }
.form-state__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.check { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--accent); display: grid; place-items: center; margin-bottom: 22px; }
.check svg { width: 24px; height: 24px; }
.check path { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36; }
.form-state.is-visible .check path { animation: draw 640ms var(--ease) 120ms forwards; }

/* -------------------------------------------------------------- 21. LIGHTBOX */
.lightbox {
  position: fixed; inset: 0; z-index: 230;
  background: rgba(8,8,9,0.975);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 380ms var(--ease), visibility 380ms;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { max-width: min(1200px, 92vw); max-height: 82vh; }
.lightbox__figure img {
  max-width: min(1200px, 92vw); max-height: 82vh; width: auto; object-fit: contain;
  transform: scale(0.94); opacity: 0;
  transition: transform 560ms var(--ease), opacity 420ms var(--ease);
}
.lightbox.is-open .lightbox__figure img { transform: none; opacity: 1; }
.lightbox__bar {
  position: absolute; inset-inline: 0; bottom: 26px;
  display: flex; justify-content: center; align-items: center; gap: 22px;
  color: var(--paper-70); font-size: var(--fs-small); letter-spacing: 0.12em;
}
.lightbox__nav, .lightbox__close {
  width: 48px; height: 48px; border: 1px solid var(--paper-14); color: var(--paper);
  display: grid; place-items: center; border-radius: 50%;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lightbox__nav:hover, .lightbox__close:hover { background: var(--paper); color: var(--ink); }
.lightbox__close { position: absolute; top: 22px; inset-inline-end: 22px; }
.lightbox__close::before, .lightbox__close::after {
  content: ''; position: absolute; width: 16px; height: 1px; background: currentColor;
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after { transform: rotate(-45deg); }
.lightbox__nav::after {
  content: ''; width: 9px; height: 9px;
  border-top: 1px solid currentColor; border-inline-end: 1px solid currentColor;
}
.lightbox__nav--next::after { transform: rotate(45deg); margin-inline-start: -3px; }
.lightbox__nav--prev::after { transform: rotate(-135deg); margin-inline-end: -3px; }

/* --------------------------------------------------------- 22. CUSTOM CURSOR */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 250;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
  transition: width 380ms var(--ease), height 380ms var(--ease), background 380ms var(--ease), opacity 260ms var(--ease);
  display: grid; place-items: center;
  mix-blend-mode: normal;
}
.cursor span {
  font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
  opacity: 0; transition: opacity 240ms var(--ease); white-space: nowrap;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-link { width: 44px; height: 44px; background: rgba(169,134,80,0.28); }
.cursor.is-media { width: 96px; height: 96px; background: rgba(169,134,80,0.92); }
.cursor.is-media span { opacity: 1; }

/* --------------------------------------------------- 23. PROJECT DETAIL PAGE */
.page-hero { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 92px)); }
.page-hero__back {
  font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-45);
  display: inline-flex; align-items: center; gap: 10px;
}
html.is-rtl .page-hero__back { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
.page-hero__back:hover { color: var(--fg); }
.page-hero__title {
  font-size: clamp(2.2rem, 5.6vw, 5rem); font-weight: 200; letter-spacing: -0.045em; line-height: 1;
  margin: 22px 0 34px; max-width: 18ch;
}
html.is-rtl .page-hero__title { letter-spacing: 0; font-weight: 400; }
.page-hero__facts {
  display: grid;
  grid-template-columns: repeat(var(--fact-count, 3), minmax(0, 1fr));
  border-top: 1px solid var(--fg-12); gap: 0;
}
.page-hero__facts[hidden] { display: none; }
.fact { padding: 22px 0; border-inline-end: 1px solid var(--fg-12); padding-inline-end: 24px; }
.fact:last-child { border-inline-end: 0; }
.fact dt { font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-45); }
html.is-rtl .fact dt { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
.fact dd { margin: 10px 0 0; font-size: 1.05rem; }

.project-hero-img { margin-top: clamp(34px, 5vw, 64px); }
.project-hero-img img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

.project-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(26px, 4vw, 60px); align-items: start; }
.project-body h2 {
  font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-45); margin-bottom: 16px; font-weight: 600;
}
html.is-rtl .project-body h2 { letter-spacing: 0; text-transform: none; font-size: 0.84rem; }
.project-body p { color: var(--fg-60); }

/* Vertical scroll of large images. No forced crop: each photo keeps its own
   aspect ratio, so portrait and landscape shots both sit correctly. */
.gallery { display: grid; gap: clamp(14px, 2.4vw, 32px); }
.gallery__item {
  position: relative; display: block; width: 100%;
  overflow: hidden; background: var(--ink-soft);
  padding: 0; border: 0; text-align: start;
}
.gallery__item img {
  display: block; width: 100%; height: auto;
  transition: transform 1100ms var(--ease), opacity 420ms var(--ease);
}
.gallery__item:hover img { transform: scale(1.03); opacity: 0.9; }

.project-materials { display: grid; gap: 10px; }
.project-materials li {
  color: var(--fg-60); padding-inline-start: 18px; position: relative;
}
.project-materials li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 7px; height: 1px; background: var(--accent);
}

.project-video { background: var(--ink); }
.project-video video { display: block; width: 100%; height: auto; }

.next-project { border-top: 1px solid var(--fg-12); }
.next-project__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 48px);
}
.next-project__link { display: block; padding-block: clamp(30px, 4vw, 52px); }
.next-project__link--next { text-align: end; border-inline-start: 1px solid var(--fg-12); padding-inline-start: clamp(16px, 3vw, 48px); }
.next-project__link:hover .next-project__name { color: var(--accent); }
.next-project__name { transition: color var(--t-fast) var(--ease); }
.next-project__label { display: block; font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-45); }
html.is-rtl .next-project__label { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
.next-project__name { display: block; font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 300; letter-spacing: -0.03em; margin-top: 10px; }

/* ------------------------------------------------------------------- 24. 404 */
.error-page {
  min-height: 100vh; display: grid; align-content: center;
  padding-block: calc(var(--nav-h) + 60px) 80px;
}
.error-page__code { font-size: var(--fs-micro); letter-spacing: 0.24em; color: var(--accent); }
.error-page__title { font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 200; letter-spacing: -0.05em; margin: 20px 0 18px; }
html.is-rtl .error-page__title { letter-spacing: 0; font-weight: 400; }
.error-page__text { color: var(--fg-60); max-width: 40ch; margin-bottom: 34px; }

/* ------------------------------------------------------------------ keyframes */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes scroll-hint {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(330%); }
  100% { transform: translateX(330%); }
}
html.is-rtl .hero__scroll-line::after { animation-direction: reverse; }


/* ------------------------------------------ 25. PROJECT COVER PLACEHOLDERS */
/* Shown only until real photography is dropped into /assets/projects/. */
.project--placeholder .project__media img { object-fit: cover; opacity: 0.85; }

/* ------------------------------------------------- 26. FORM — ADDED FIELDS */
/* honeypot: present in the DOM, invisible and unreachable by keyboard */
.field--trap {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.submit .submit__busy { display: none; }
.submit.is-loading .submit__idle { display: none; }
.submit.is-loading .submit__busy { display: inline; }
.submit[disabled] { cursor: progress; opacity: 0.9; }

.form__note { color: var(--fg-45); font-size: 0.8rem; max-width: 46ch; }


/* --------------------------------------- 27. NUMERALS IN THE ARABIC LAYOUT */
/* Figures stay left-to-right so "150+" never renders as "+150", while the
   block itself keeps following the right-to-left flow of the page. */
html.is-rtl .hero__stat b,
html.is-rtl .stat__value,
html.is-rtl .strength__value,
html.is-rtl .fact dd,
html.is-rtl #lightboxCount {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}


/* ------------------------------------------------------ 28. THEME TOGGLE */
.theme-toggle {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  opacity: 0.72;
  flex: none;
  transition: opacity var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.theme-toggle:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { opacity: 1; }

/* Both icons live in the same cell and cross-fade, so the button never
   changes size and nothing around it moves. */
.theme-toggle__icon { display: grid; place-items: center; width: 18px; height: 18px; }
.theme-toggle__icon svg {
  grid-area: 1 / 1;
  transition: opacity 320ms var(--ease), transform 420ms var(--ease);
}
.theme-toggle__moon { opacity: 0; transform: rotate(-35deg) scale(0.82); }
.theme-toggle__sun  { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle__sun  { opacity: 0; transform: rotate(35deg) scale(0.82); }

/* While the theme is switching, surfaces cross-fade instead of snapping.
   The hint is removed 460ms later so it never slows anything else down. */
html.is-theming body,
html.is-theming .header,
html.is-theming .mega,
html.is-theming .modal__panel,
html.is-theming .section--dark,
html.is-theming .footer,
html.is-theming .advertising,
html.is-theming .strength__cell,
html.is-theming .btn,
html.is-theming .filter,
html.is-theming .float,
html.is-theming .field input,
html.is-theming .field select,
html.is-theming .field textarea {
  transition: background-color 420ms var(--ease),
              color 420ms var(--ease),
              border-color 420ms var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon svg { transition: none; }
}