/* Projects page typography */
.ethar-projects-hero__title {
  font-family: var(--font-headings-family) !important;
}

/* ── Projects page hero — references/1-projects.png ──────────────────────── */
.ethar-projects-hero {
  position: relative;
  width: 100vw;
  height: 90vh;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background: #f4f2ec !important;
  color: #030914 !important;
  isolation: isolate;
}

.ethar-projects-hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0 !important;
  border-radius: 0 !important;
}

.ethar-projects-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block: 0;
  right: 0;
  width: min(62rem, 55vw);
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0.13) 0%,
    rgb(255 255 255 / 0.37) 42%,
    rgb(255 255 255 / 0.48) 100%
  );
  clip-path: polygon(44% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.ethar-projects-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 83% 72%,
      rgb(255 255 255 / 0.49) 0%,
      rgb(255 255 255 / 0.45) 23%,
      rgb(255 255 255 / 0.21) 43%,
      transparent 62%
    ),
    linear-gradient(0deg, rgb(255 255 255 / 0.13) 0%, transparent 35%);
  pointer-events: none;
}

.ethar-projects-hero__copy {
  position: absolute;
  z-index: 2;
  right: clamp(1.75rem, 4vw, 5rem);
  bottom: clamp(1.5rem, 3.1vw, 4rem);
  width: min(40rem, 38vw);
  color: #030914 !important;
  text-align: end;
}

.ethar-projects-hero__copy[dir="rtl"] {
  text-align: right !important;
}

.ethar-projects-hero__copy[dir="ltr"] {
  text-align: left;
}

.ethar-projects-hero__title,
.ethar-projects-hero__metric,
.ethar-projects-hero__label,
.ethar-projects-hero__detail {
  margin: 0 !important;
  color: #030914 !important;
  letter-spacing: 0 !important;
}

.ethar-projects-hero__title {
  font-size: 45px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}

.ethar-projects-hero__metric {
  margin-block-start: clamp(1.8rem, 2.25vw, 3.4rem) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 90px !important;
  font-weight: 400 !important;
  line-height: 0.86 !important;
}

.ethar-projects-hero__label,
.ethar-projects-hero__detail {
  font-size: clamp(1.45rem, 1.62vw, 2.6rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1.58 !important;
}

.ethar-projects-hero__label {
  margin-block-start: clamp(2.25rem, 3.1vw, 4.6rem) !important;
}

@media (max-width: 78rem) {
  .ethar-projects-hero {
    height: 90vh;
  }

  .ethar-projects-hero::before {
    width: min(48rem, 68vw);
  }

  .ethar-projects-hero__copy {
    right: clamp(1.25rem, 4vw, 2.5rem);
    bottom: clamp(1.25rem, 4vw, 2.5rem);
    width: min(31rem, 52vw);
  }

  .ethar-projects-hero__title {
    font-size: 45px !important;
  }

  .ethar-projects-hero__metric {
    font-size: 90px !important;
  }
}

@media (max-width: 46rem) {
  .ethar-projects-hero {
    height: 90vh;
  }

  .ethar-projects-hero__img {
    /* Centre the (mobile) tower photo — was pushed off-centre at 43%. */
    object-position: center center;
  }

  /* Stronger white scrim on mobile so the dark copy stays readable over the
   * tower photo (the old 0.29–0.48 wash left the text fighting the image). */
  .ethar-projects-hero::before {
    width: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgb(255 255 255 / 0.55) 42%,
      rgb(255 255 255 / 0.82) 100%
    );
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 6% 100%);
  }

  .ethar-projects-hero::after {
    background: radial-gradient(
      ellipse at 74% 74%,
      rgb(255 255 255 / 0.82) 0%,
      rgb(255 255 255 / 0.7) 30%,
      rgb(255 255 255 / 0.25) 60%,
      transparent 80%
    );
  }

  .ethar-projects-hero__copy {
    right: 1rem;
    bottom: 1rem;
    width: min(22rem, 68vw);
  }

  .ethar-projects-hero__title {
    font-size: clamp(2.35rem, 10vw, 45px) !important;
  }

  .ethar-projects-hero__metric {
    margin-block-start: 1rem !important;
    font-size: clamp(3.35rem, 14vw, 90px) !important;
  }

  .ethar-projects-hero__label,
  .ethar-projects-hero__detail {
    font-size: clamp(1rem, 4.2vw, 1.35rem) !important;
    line-height: 1.5 !important;
  }

  .ethar-projects-hero__label {
    margin-block-start: 1.25rem !important;
  }
}

/* ≤48rem: SPLIT — tower photo as a banner ABOVE, copy block BELOW on the light
 * surface (dark text, no scrim). Overrides the desktop overlay above. */
@media (max-width: 48rem) {
  .ethar-projects-hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .ethar-projects-hero picture {
    display: block;
    width: 100%;
  }
  .ethar-projects-hero__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
  }
  .ethar-projects-hero::before,
  .ethar-projects-hero::after {
    display: none;
  }
  .ethar-projects-hero__copy {
    position: static;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(1.75rem, 7vw, 2.75rem) clamp(1.25rem, 5vw, 2rem) clamp(2.25rem, 9vw, 3.25rem);
  }
  .ethar-projects-hero__copy h1,
  .ethar-projects-hero__copy p {
    text-align: center !important;
  }
}

/* ── Projects "our focus" band — references/2-projects.png ────────────────────
 * Full-bleed dark photo (twin towers at dusk) with a copy column on the
 * reading-start side: white title + body, muted-bronze tagline lines. The image
 * already darkens toward the text side; a soft gradient overlay keeps the copy
 * legible. Independent of the locked theme (explicit colours + !important). */
.ethar-projfocus-section {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(32rem, 46vw, 50rem);
  padding-block: clamp(2.5rem, 5vw, 5rem);
  padding-inline: clamp(1.5rem, 6vw, 7rem);
  background: #12131b !important;
}

.ethar-projfocus__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Mirror the photo in LTR so the dark sky lands under the (left) copy. */
html[dir="ltr"] .ethar-projfocus__img {
  transform: scaleX(-1);
}

/* Soft gradient darkening the reading-start (copy) side for legibility. */
.ethar-projfocus-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(10, 11, 18, 0.62) 0%,
    rgba(10, 11, 18, 0.2) 52%,
    rgba(10, 11, 18, 0) 80%
  );
}
html[dir="ltr"] .ethar-projfocus-section::after {
  background: linear-gradient(
    to right,
    rgba(10, 11, 18, 0.62) 0%,
    rgba(10, 11, 18, 0.2) 52%,
    rgba(10, 11, 18, 0) 80%
  );
}

.ethar-projfocus__copy {
  position: relative;
  z-index: 2;
  max-width: clamp(28rem, 42vw, 44rem);
  text-align: start;
}
html[dir="rtl"] .ethar-projfocus__copy {
  text-align: right;
}
html[dir="ltr"] .ethar-projfocus__copy {
  text-align: left;
}

.ethar-projfocus-section .ethar-projfocus__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  color: #ffffff !important;
  font-family: var(--font-headings-family, var(--font-family-base));
  font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
  font-weight: 400;
  line-height: 1.05;
}

.ethar-projfocus-section .ethar-projfocus__subtitle {
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  color: #8a6f5c !important;
  font-size: clamp(1.15rem, 2vw, 1.7rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
}

.ethar-projfocus-section .ethar-projfocus__body {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  max-width: 34rem;
  color: #ece8e6 !important;
  /* "تركيزنا / Our Focus" body — was clamp(0.95rem…1.15rem) → ~20px AR / 18px EN
     on desktop but only ~15px on phones. Lift so it reads on every width. */
  font-size: clamp(1.15rem, 1.45vw, 1.5rem) !important;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.95;
}

.ethar-projfocus-section .ethar-projfocus__tagline {
  margin: 0;
  color: #8a6f5c !important;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.55;
}

/* ≤48rem: SPLIT — the towers photo as a banner ABOVE, the copy BELOW on the dark
 * band (no scrim). Was hiding the image entirely on mobile; now it's shown. */
@media (max-width: 48rem) {
  .ethar-projfocus-section {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding-inline: 0;
    background: linear-gradient(
      180deg,
      #060c1a 0%,
      #0b1222 49%,
      #1c171b 73%,
      #402d27 100%
    ) !important;
  }
  .ethar-projfocus__img {
    position: static;
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    transform: none !important;
  }
  .ethar-projfocus-section::after,
  html[dir="ltr"] .ethar-projfocus-section::after {
    display: none !important;
  }
  .ethar-projfocus__copy {
    max-width: min(100%, 40rem);
    padding-inline: clamp(1.25rem, 5vw, 2rem);
    margin-block-start: clamp(1.75rem, 7vw, 2.75rem);
  }
}

@media (min-width: 48rem) {
  .ethar-projfocus__img .xwui-image-wrapper {
    height: 100% !important;
  }
  .ethar-projfocus__img .xwui-image {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ── Projects map page — full-bleed dark <xwui-map> with logo markers ─────── */
.ethar-projects-map {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* Definite height (not min-height) so Leaflet measures a real size at init —
     a 0-height-at-init container is what made the map render as a small box. */
  height: clamp(560px, 82vh, 920px);
  overflow: hidden;
}
.ethar-projects-map xwui-map {
  display: block;
  width: 100%;
  height: 100%;
}
/* Force the Leaflet canvas to fill the (definite-height) map element. */
.ethar-projects-map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}
.ethar-projects-map__intro {
  position: absolute;
  /* Above Leaflet's panes (which climb to ~700) so the title never hides. */
  z-index: 1000;
  /* Clear the sticky header (the map sits under it). */
  inset-block-start: clamp(5.5rem, 13vh, 8rem);
  inset-inline-start: clamp(1.2rem, 3vw, 2.4rem);
  max-width: min(420px, 78%);
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg, 16px);
  background: color-mix(in srgb, var(--ethar-navy) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--ethar-gold) 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Let map drags pass through the panel chrome (no interactive children). */
  pointer-events: none;
}
.ethar-projects-map__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ethar-gold);
}
.ethar-projects-map__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #fff;
}
.ethar-projects-map__lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* Clickable logo markers (xwui-map iconHtml). */
.xwui-map-html-marker {
  background: transparent;
  border: 0;
}
.ethar-map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.ethar-map-marker__logo {
  width: 100%;
  height: 100%;
  background: var(--ethar-gold);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.85));
  transition: transform 0.16s ease;
  cursor: pointer;
}
.ethar-map-marker:hover .ethar-map-marker__logo {
  transform: scale(1.14);
}

/* ── Projects expertise section — references/4-projects.png ──────────────── */
.ethar-projects-expertise {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 52vw) minmax(0, 1fr);
  align-items: stretch;
  direction: ltr;
  width: 100vw;
  height: 80vh;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 0% 55%,
      rgb(130 95 76 / 0.82) 0%,
      rgb(80 61 58 / 0.68) 28%,
      transparent 56%
    ),
    linear-gradient(112deg, #785b4d 0%, #2a2228 41%, #07101f 100%) !important;
  color: #f7f5f4 !important;
}

.ethar-projects-expertise__media {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-end !important;
  justify-content: center !important;
  min-width: 0;
  min-height: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: visible;
}

.ethar-projects-expertise__img {
  position: relative;
  z-index: 1;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  transform: none;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.ethar-projects-expertise__copy {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  width: min(47rem, 42vw);
  justify-self: end;
  padding-block: clamp(2.5rem, 5vh, 4.5rem);
  padding-left: clamp(2rem, 4vw, 5rem);
  padding-right: clamp(5rem, 7.3vw, 11rem);
  color: #f7f5f4 !important;
  text-align: right;
}

.ethar-projects-expertise__copy[dir="rtl"] {
  align-items: flex-end !important;
  text-align: right !important;
}

.ethar-projects-expertise__copy[dir="ltr"] {
  align-items: flex-start;
  text-align: left;
}

.ethar-projects-expertise__icon {
  align-self: flex-end !important;
  width: clamp(8rem, 10vh, 12rem);
  height: auto;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-block-end: clamp(2rem, 5vh, 4rem);
  color: #d4c1ad !important;
}

.ethar-projects-expertise__icon .xwui-image-container,
.ethar-projects-expertise__icon .xwui-image-wrapper,
.ethar-projects-expertise__icon .xwui-image,
.ethar-projects-expertise__icon .xwui-image-loaded {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

.ethar-projects-expertise__icon .xwui-image-container,
.ethar-projects-expertise__icon .xwui-image-wrapper {
  display: grid;
  place-items: center;
}

.ethar-projects-expertise__icon .xwui-image,
.ethar-projects-expertise__icon .xwui-image-loaded {
  object-fit: contain;
  object-position: center;
}

.ethar-projects-expertise__copy[dir="rtl"] .ethar-projects-expertise__icon {
  align-self: flex-end !important;
}

.ethar-projects-expertise__title,
.ethar-projects-expertise__lead,
.ethar-projects-expertise__body {
  width: 100%;
  margin: 0 !important;
  color: #f7f5f4 !important;
  letter-spacing: 0 !important;
}

.ethar-projects-expertise__title {
  font-size: clamp(3rem, 3.6vw, 5rem) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}

.ethar-projects-expertise__lead {
  margin-block-start: clamp(2.5rem, 6vh, 4.5rem) !important;
  font-size: clamp(1.5rem, 1.6vw, 2.2rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1.45 !important;
}

.ethar-projects-expertise__body {
  margin-block-start: clamp(2rem, 5vh, 3.5rem) !important;
  color: rgb(247 245 244 / 0.92) !important;
  font-size: clamp(1.15rem, 1.1vw, 1.55rem) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  line-height: 1.55 !important;
}

@media (max-width: 78rem) {
  .ethar-projects-expertise {
    grid-template-columns: minmax(0, 48vw) minmax(0, 1fr);
    height: 80vh;
  }

  .ethar-projects-expertise__img {
    right: auto;
    left: auto;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .ethar-projects-expertise__copy {
    width: min(38rem, 48vw);
    padding-right: clamp(2rem, 5vw, 4rem);
  }

  .ethar-projects-expertise__icon {
    margin-block-end: clamp(2.5rem, 5vw, 4rem);
  }

  .ethar-projects-expertise__lead {
    margin-block-start: clamp(2.75rem, 5vw, 4rem) !important;
  }
}

@media (max-width: 46rem) {
  .ethar-projects-expertise {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    padding-block: 0 clamp(3rem, 10vw, 5rem);
    background: linear-gradient(
      to left,
      #040918 0%,
      #050917 10%,
      #080c18 15%,
      #0c101c 20%,
      #10121c 25%,
      #17171f 30%,
      #1f1b22 35%,
      #282226 40%,
      #302829 45%,
      #3a2f2f 50%,
      #463833 55%,
      #534138 60%,
      #60493d 65%,
      #6f5443 70%,
      #7f5e49 75%,
      #8f6952 80%,
      #a27658 85%,
      #b58361 90%,
      #c99069 95%,
      #d8a16d 100%
    ) !important;
  }

  html[dir="ltr"] .ethar-projects-expertise {
    background: linear-gradient(
      to right,
      #040918 0%,
      #050917 10%,
      #080c18 15%,
      #0c101c 20%,
      #10121c 25%,
      #17171f 30%,
      #1f1b22 35%,
      #282226 40%,
      #302829 45%,
      #3a2f2f 50%,
      #463833 55%,
      #534138 60%,
      #60493d 65%,
      #6f5443 70%,
      #7f5e49 75%,
      #8f6952 80%,
      #a27658 85%,
      #b58361 90%,
      #c99069 95%,
      #d8a16d 100%
    ) !important;
  }

  .ethar-projects-expertise__media {
    display: none !important;
  }

  .ethar-projects-expertise__img {
    display: none !important;
  }

  .ethar-projects-expertise__copy {
    width: 100%;
    padding: clamp(1.5rem, 6vw, 2rem);
    align-items: flex-end;
    text-align: right;
  }

  .ethar-projects-expertise__copy[dir="ltr"] {
    align-items: flex-start;
    text-align: left;
  }

  .ethar-projects-expertise__icon {
    width: clamp(7rem, 32vw, 10rem);
    margin-block-end: clamp(1.5rem, 6vw, 2.5rem);
  }

  .ethar-projects-expertise__title {
    font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
    line-height: 1.05 !important;
  }

  .ethar-projects-expertise__lead {
    margin-block-start: clamp(1rem, 2vw, 1.6rem) !important;
    font-size: clamp(1.15rem, 2vw, 1.7rem) !important;
    line-height: 1.5 !important;
  }

  .ethar-projects-expertise__body {
    margin-block-start: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
    line-height: 1.95 !important;
  }
}

/* ── Projects location-map section — references/5-projects.png ────────────────
 * White surface (forced over the locked dark theme): a project map illustration
 * beside a copy column — near-black title, bronze tagline, grey body, and two
 * stat columns (bronze label over grey value). Sits last, before the footer. */
.ethar-projmap-section {
  background: #ffffff !important;
  padding-block: clamp(3rem, 6vw, 6.5rem);
  padding-inline: clamp(1.25rem, 5vw, 5.5rem);
}
html[data-theme="ethar-dark"] .ethar-projmap-section,
html[data-theme="dark"] .ethar-projmap-section,
html[data-theme="night"] .ethar-projmap-section {
  background: #ffffff !important;
}

.ethar-projmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  width: 100%;
  max-width: 100rem;
  margin-inline: auto;
}
html[dir="rtl"] .ethar-projmap {
  direction: rtl;
}
html[dir="ltr"] .ethar-projmap {
  direction: ltr;
}

.ethar-projmap__media {
  min-width: 0;
}
.ethar-projmap__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.ethar-projmap__copy {
  min-width: 0;
  text-align: start;
}
html[dir="rtl"] .ethar-projmap__copy {
  text-align: right;
}
html[dir="ltr"] .ethar-projmap__copy {
  text-align: left;
}

.ethar-projmap-section .ethar-projmap__title {
  margin: 0 0 clamp(1rem, 2vw, 1.75rem);
  /* Warm cocoa palette matched to the home "The Mark" spotlight (Screen 2). */
  color: #3c241e !important;
  font-family: var(--font-headings-family, var(--font-family-base));
  font-size: clamp(2.25rem, 4.2vw, 3.5rem) !important;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.1;
}

.ethar-projmap-section .ethar-projmap__subtitle {
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.85rem);
  color: #5d3a2b !important;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
}

.ethar-projmap-section .ethar-projmap__body {
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  max-width: 36rem;
  /* Was faint #a6a6a6 (unreadable on white) — match the spotlight body tone. */
  color: #4b2d18 !important;
  /* Was clamp(0.9rem…1.1rem) → 17.6px EN / 19.5px AR — gentle lift for parity. */
  font-size: clamp(1rem, 1.15vw, 1.28rem) !important;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.9;
}

.ethar-projmap__stats {
  display: flex;
  justify-content: flex-start;
  gap: clamp(2rem, 5vw, 5.5rem);
  margin: 0;
}
.ethar-projmap__stat {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 0.8vw, 0.7rem);
}
.ethar-projmap-section .ethar-projmap__stat-label {
  margin: 0;
  color: #5d3a2b !important;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
}
.ethar-projmap-section .ethar-projmap__stat-value {
  margin: 0;
  color: #4b2d18 !important;
  /* The data value should read at least as large as its own label — was
     clamp(0.9rem…1.05rem) (14.4px EN on phones). Lift it. */
  font-size: clamp(1.05rem, 1.3vw, 1.35rem) !important;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.3;
}

@media (max-width: 60rem) {
  .ethar-projmap {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 6vw, 3rem);
  }
}

/* Projects count-up figures inherit their surrounding heading styling. */
.ethar-projects-hero__metric .xwui-statistic-value,
.ethar-projects-hero__metric .xwui-statistic-suffix,
.ethar-projects-hero__metric .xwui-statistic-prefix,
.ethar-projmap-section .ethar-projmap__stat-value .xwui-statistic-value,
.ethar-projmap-section .ethar-projmap__stat-value .xwui-statistic-suffix {
  font: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}
.ethar-projects-hero__metric.xwui-statistic {
  display: block;
}
.ethar-projects-hero__metric .xwui-statistic-content {
  justify-content: center;
  gap: 0.04em;
}
@media (min-width: 48.01rem) {
  .ethar-projects-hero__copy[dir="ltr"] .ethar-projects-hero__metric,
  .ethar-projects-hero__copy[dir="ltr"] .ethar-projects-hero__metric .xwui-statistic-content {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .ethar-projects-hero__copy[dir="rtl"] .ethar-projects-hero__metric,
  .ethar-projects-hero__copy[dir="rtl"] .ethar-projects-hero__metric .xwui-statistic-content {
    text-align: right !important;
    justify-content: flex-end !important;
  }
}
@media (max-width: 48rem) {
  .ethar-projects-hero__metric,
  .ethar-projects-hero__metric .xwui-statistic-content {
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── Projects showcase (xwui-grid + xwui-scroll-area + xwui-image) ──────── */
.ethar-projects-section {
  /* Copy track first → lands at the inline-start edge (right in RTL). Roughly
     balanced columns per the mockup (references/home5.png): text on the
     reading-start side, a large photo on the reading-end side. */
  --ethar-projects-columns: minmax(0, 33fr) minmax(0, 63fr);
  --ethar-projects-gap: clamp(1.5rem, 4vw, 4.5rem);
  --ethar-projects-edge: clamp(1.25rem, 5vw, 5rem);
  --ethar-projects-bg: #ffffff;
  /* Warm brown palette sampled from the mockup. */
  --ethar-projects-title-color: #3c241e;
  --ethar-projects-title-size: clamp(2.25rem, 4.5vw, 3.5rem);
  --ethar-projects-subtitle-color: #5d3a2b;
  --ethar-projects-subtitle-size: clamp(1.1rem, 1.9vw, 1.55rem);
  --ethar-projects-body-color: #4b2d18;
  --ethar-projects-body-size: clamp(1.05rem, 1.3vw, 1.3rem);
  /* Light-grey arrow chips with a soft grey chevron (matches the mockup). */
  --ethar-projects-arrow-bg: #dddddd;
  --ethar-projects-arrow-bg-hover: #d2d2d2;
  --ethar-projects-arrow-color: #909090;
  --ethar-projects-chevron-size: clamp(13px, 1.6vw, 16px);
  --ethar-projects-chevron-stroke: 1.5px;
  --ethar-projects-chevron-edge: 20px;
  --ethar-projects-chevron-y: 0px;
  /* Caption gradient: dark behind the project name, bronze behind the city. */
  --ethar-projects-caption-name-bg: #15161f;
  --ethar-projects-caption-city-bg: #aa7a5d;
  --ethar-projects-caption-h: clamp(2.75rem, 4.5vw, 3.75rem);
  /* The banner is 4:3 and the mockup shows it uncropped at its natural ratio. */
  --ethar-projects-featured-ratio: 4 / 3;

  /* Permanent light surface: forced white over the locked dark theme. */
  background: var(--ethar-projects-bg) !important;
  padding-block: clamp(var(--space-12, 3.5rem), 7vw, var(--space-20, 6rem));
  padding-inline: var(--ethar-projects-edge);
}

/* The site is locked to ethar-dark; keep this block on the light mockup palette
   so the dark theme can't recolour it (dark styles win otherwise). */
html[data-theme="ethar-dark"] .ethar-projects-section,
html[data-theme="dark"] .ethar-projects-section,
html[data-theme="night"] .ethar-projects-section {
  --ethar-projects-bg: #ffffff;
  --ethar-projects-title-color: #3c241e;
  --ethar-projects-subtitle-color: #5d3a2b;
  --ethar-projects-body-color: #4b2d18;
  --ethar-projects-arrow-bg: #dddddd;
  --ethar-projects-arrow-bg-hover: #d2d2d2;
  --ethar-projects-arrow-color: #909090;
  --ethar-projects-caption-name-bg: #15161f;
  --ethar-projects-caption-city-bg: #aa7a5d;
}

.ethar-projects {
  width: 100%;
}
html[dir="rtl"] .ethar-projects {
  direction: rtl;
}
html[dir="ltr"] .ethar-projects {
  direction: ltr;
}

.ethar-projects__copy {
  max-width: 34rem;
  text-align: start;
}
html[dir="rtl"] .ethar-projects__copy {
  direction: rtl;
  text-align: right;
  justify-self: end;
}
html[dir="ltr"] .ethar-projects__copy {
  direction: ltr;
  text-align: left;
  justify-self: start;
}

.ethar-projects-section .ethar-projects__title {
  color: var(--ethar-projects-title-color);
  font-size: var(--ethar-projects-title-size);
  line-height: 1.1;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

.ethar-projects-section .ethar-projects__subtitle {
  color: var(--ethar-projects-subtitle-color);
  font-size: var(--ethar-projects-subtitle-size);
  line-height: 1.6;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

/* Two description paragraphs with a gap between them. */
.ethar-projects-section .ethar-projects__body {
  color: var(--ethar-projects-body-color);
  /* !important so xwui-typography can't pull this below the token size. */
  font-size: var(--ethar-projects-body-size) !important;
  line-height: 1.9;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

/* ‹ › arrows — round light-gray chips pinned to the page-edge side of the
 * copy column. */
.ethar-projects__nav {
  display: none !important;
  direction: ltr; /* keep ‹ › order in BOTH locales */
  justify-content: flex-start;
  gap: var(--space-3, 0.75rem);
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}
html[dir="rtl"] .ethar-projects__nav {
  justify-content: flex-end;
}

.ethar-projects__read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(18rem, 24vw, 25rem);
  min-height: clamp(4.2rem, 5vw, 5.4rem);
  padding: 0.85rem 2.5rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: #090b14 !important;
  color: #ffffff !important;
  font-size: clamp(1.04rem, 1.5vw, 1.5rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  text-decoration: none !important;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.ethar-projects__readmore {
  margin-top: clamp(1.1rem, 2vw, 1.75rem);
}

/* The toggle is a native <summary> (inline expand, no JS). Drop its default
   disclosure marker so only the brand pill shows. */
.ethar-projects__read-more {
  cursor: pointer;
  list-style: none;
  margin-top: 0;
}
#ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more,
#ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more:hover,
#ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more:focus-visible {
  background: linear-gradient(
    to right,
    var(--ethar-projects-caption-city-bg),
    var(--ethar-projects-caption-name-bg)
  ) !important;
  background-image: linear-gradient(
    to right,
    var(--ethar-projects-caption-city-bg),
    var(--ethar-projects-caption-name-bg)
  ) !important;
}
html[dir="ltr"] #ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more,
html[dir="ltr"] #ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more:hover,
html[dir="ltr"]
  #ethar-projects
  .ethar-projects__readmore
  > a.ethar-projects__read-more:focus-visible {
  background: linear-gradient(
    to right,
    var(--ethar-projects-caption-name-bg),
    var(--ethar-projects-caption-city-bg)
  ) !important;
  background-image: linear-gradient(
    to right,
    var(--ethar-projects-caption-name-bg),
    var(--ethar-projects-caption-city-bg)
  ) !important;
}

/* Shared project/contact CTA treatment: match the Home "Read more" pill. */
.ethar-projmap-section .ethar-projects__readmore > a.ethar-projects__read-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: clamp(18rem, 24vw, 25rem) !important;
  min-height: clamp(4.2rem, 5vw, 5.4rem) !important;
  padding: 0.85rem 2.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(to right, #aa7a5d, #15161f) !important;
  background-image: linear-gradient(to right, #aa7a5d, #15161f) !important;
  color: #ffffff !important;
  font-size: clamp(1.04rem, 1.5vw, 1.5rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html[dir="ltr"] .ethar-projmap-section .ethar-projects__readmore > a.ethar-projects__read-more {
  background: linear-gradient(to right, #15161f, #aa7a5d) !important;
  background-image: linear-gradient(to right, #15161f, #aa7a5d) !important;
}

.ethar-projmap-section .ethar-projects__readmore > a.ethar-projects__read-more:hover,
.ethar-projmap-section .ethar-projects__readmore > a.ethar-projects__read-more:focus-visible {
  background: linear-gradient(to right, #aa7a5d, #15161f) !important;
  background-image: linear-gradient(to right, #aa7a5d, #15161f) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  outline: none;
}

html[dir="ltr"]
  .ethar-projmap-section
  .ethar-projects__readmore
  > a.ethar-projects__read-more:hover,
html[dir="ltr"]
  .ethar-projmap-section
  .ethar-projects__readmore
  > a.ethar-projects__read-more:focus-visible {
  background: linear-gradient(to right, #15161f, #aa7a5d) !important;
  background-image: linear-gradient(to right, #15161f, #aa7a5d) !important;
}

.ethar-projects__read-more::-webkit-details-marker,
.ethar-projects__read-more::marker {
  display: none;
  content: "";
}

/* Collapsed by default; the extra "The Mark" copy reveals when the
   <details> is open. !important wins over the locked-theme / xwui base rules. */
.ethar-projects__more-copy {
  display: none !important;
}
.ethar-projects__readmore[open] .ethar-projects__more-copy {
  display: grid !important;
  gap: clamp(0.9rem, 1.5vw, 1.25rem);
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
}

.ethar-projects-section .ethar-projects__more-body {
  margin: 0 0 clamp(0.9rem, 1.5vw, 1.25rem);
  color: var(--ethar-projects-body-color, #4b2d18) !important;
  font-size: var(--ethar-projects-body-size, 0.98rem) !important;
  line-height: 1.9;
}
.ethar-projects-section .ethar-projects__more-body:last-child {
  margin-bottom: 0;
}

.ethar-projects__read-more:hover,
.ethar-projects__read-more:focus-visible {
  transform: translateY(-2px);
  background: #161822 !important;
  color: #ffffff !important;
  outline: none;
}

.ethar-projects__nav xwui-button,
.ethar-projects__nav .xwui-button-container,
.ethar-projects__nav .xwui-button-item-wrapper {
  display: inline-flex;
}

.ethar-projects__nav .xwui-button.ethar-projects__arrow {
  --ethar-projects-arrow-size: clamp(48px, 4.5vw, 60px);
  width: var(--ethar-projects-arrow-size);
  height: var(--ethar-projects-arrow-size);
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  position: relative;
  background: var(--ethar-projects-arrow-bg);
  color: var(--ethar-projects-arrow-color);
  --role-surface-fg: var(--ethar-projects-arrow-color);
}
.ethar-projects__nav .xwui-button.ethar-projects__arrow:hover:not(:disabled) {
  background: var(--ethar-projects-arrow-bg-hover);
}
.ethar-projects__nav .ethar-projects__arrow .xwui-item-standard-layout {
  display: none;
}
.ethar-projects__nav .ethar-projects__arrow .xwui-item-content-block,
.ethar-projects__nav .ethar-projects__arrow .xwui-button-icon,
.ethar-projects__nav .ethar-projects__arrow .material-icons {
  display: none;
}
.ethar-projects__nav .xwui-button.ethar-projects__arrow::before {
  content: "";
  position: absolute;
  top: calc(50% + var(--ethar-projects-chevron-y));
  width: var(--ethar-projects-chevron-size);
  height: var(--ethar-projects-chevron-size);
  border-color: currentColor;
  border-style: solid;
  border-width: 0;
}
xwui-button[data-act="projects-left"] .xwui-button.ethar-projects__arrow::before {
  left: var(--ethar-projects-chevron-edge);
  border-left-width: var(--ethar-projects-chevron-stroke);
  border-bottom-width: var(--ethar-projects-chevron-stroke);
  transform: translateY(-50%) rotate(45deg);
}
xwui-button[data-act="projects-right"] .xwui-button.ethar-projects__arrow::before {
  right: var(--ethar-projects-chevron-edge);
  border-right-width: var(--ethar-projects-chevron-stroke);
  border-top-width: var(--ethar-projects-chevron-stroke);
  transform: translateY(-50%) rotate(45deg);
}
.ethar-projects__nav .ethar-projects__arrow .xwui-button-icon,
.ethar-projects__nav .ethar-projects__arrow .material-icons {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}

/* Featured-project photo + caption bar (reading-end column). Sharp corners. */
.ethar-projects__featured {
  width: 100%;
  justify-self: stretch;
}

.ethar-projects__media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ethar-projects-featured-ratio);
  overflow: hidden;
  border-radius: 0;
}

.ethar-projects__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Caption bar — gradient dark (project-name side) → bronze (city side). Sharp
 * corners; both labels white, name at the reading-start edge, city at the end. */
.ethar-projects__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  min-height: var(--ethar-projects-caption-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding-inline: clamp(1rem, 2vw, 1.75rem);
  border-radius: 0;
}
html[dir="rtl"] .ethar-projects__caption {
  background: linear-gradient(
    to right,
    var(--ethar-projects-caption-city-bg),
    var(--ethar-projects-caption-name-bg)
  );
}
html[dir="ltr"] .ethar-projects__caption {
  background: linear-gradient(
    to right,
    var(--ethar-projects-caption-name-bg),
    var(--ethar-projects-caption-city-bg)
  );
}

.ethar-projects-section .ethar-projects__caption-name,
.ethar-projects-section .ethar-projects__caption-city {
  color: #fff;
  margin: 0;
}
.ethar-projects-section .ethar-projects__caption-name {
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
}
.ethar-projects-section .ethar-projects__caption-city {
  font-size: clamp(0.82rem, 1.15vw, 1.05rem);
}

@media (max-width: 960px) {
  .ethar-projects-section {
    --ethar-projects-columns: minmax(0, 1fr);
  }
  .ethar-projects__copy {
    max-width: none;
  }
}

/* Final Projects CTA override: keep Projects buttons visually identical to the Home "Read more" button. */
#ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more,
.ethar-projmap-section .ethar-projects__readmore > a.ethar-projects__read-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: clamp(18rem, 24vw, 25rem) !important;
  min-height: clamp(4.2rem, 5vw, 5.4rem) !important;
  padding: 0.85rem 2.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(to right, #aa7a5d, #15161f) !important;
  background-image: linear-gradient(to right, #aa7a5d, #15161f) !important;
  color: #ffffff !important;
  font-size: clamp(1.04rem, 1.5vw, 1.5rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html[dir="ltr"] #ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more,
html[dir="ltr"] .ethar-projmap-section .ethar-projects__readmore > a.ethar-projects__read-more {
  background: linear-gradient(to right, #15161f, #aa7a5d) !important;
  background-image: linear-gradient(to right, #15161f, #aa7a5d) !important;
}

#ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more:hover,
#ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more:focus-visible,
.ethar-projmap-section .ethar-projects__readmore > a.ethar-projects__read-more:hover,
.ethar-projmap-section .ethar-projects__readmore > a.ethar-projects__read-more:focus-visible {
  background: linear-gradient(to right, #aa7a5d, #15161f) !important;
  background-image: linear-gradient(to right, #aa7a5d, #15161f) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  outline: none;
}

html[dir="ltr"] #ethar-projects .ethar-projects__readmore > a.ethar-projects__read-more:hover,
html[dir="ltr"]
  #ethar-projects
  .ethar-projects__readmore
  > a.ethar-projects__read-more:focus-visible,
html[dir="ltr"]
  .ethar-projmap-section
  .ethar-projects__readmore
  > a.ethar-projects__read-more:hover,
html[dir="ltr"]
  .ethar-projmap-section
  .ethar-projects__readmore
  > a.ethar-projects__read-more:focus-visible {
  background: linear-gradient(to right, #15161f, #aa7a5d) !important;
  background-image: linear-gradient(to right, #15161f, #aa7a5d) !important;
}