/* ethar-web/public/ethar-brand.css
 *
 * Ethar brand layer for the xwui style system. Section layout + brand-scoped
 * colour tokens only — text size/weight/line-height/font-family all flow from
 * <xwui-typography> / <xwui-hero> / <xwui-statistic> via xwui's typography
 * tokens (--font-family-base, --font-family-arabic, --font-headings-family,
 * --font-size-*, --font-weight-*).
 *
 * Specificity: where xwui's component CSS competes with a brand colour,
 * selectors are qualified by their parent section (e.g.
 * `.ethar-about-section .ethar-about__title`) to bump to 0,2,0 so they win
 * regardless of <link> load order.
 */

/* The Arabic faces (jAWAD Salma / Nassim) have a smaller effective glyph size
 * than Helvetica, so Arabic copy reads noticeably smaller than English at the
 * same px/rem. Bump the root ~12% in RTL: rem-based body copy (which dominates
 * at the small mobile sizes) grows, while vw-driven hero titles and px headings
 * are unaffected. */
html[dir='rtl'] {
  /* Single knob for the Arabic/English size gap (Arabic glyphs read smaller).
     Tune --ethar-rtl-scale (default 1.1 ≈ +10%) to rebalance both at once. */
  font-size: calc(100% * var(--ethar-rtl-scale, 1.1));
}

:root {
  --brand-name: 'Ethar';
  --brand-logo-url: '/ethar-logo.svg';
  --brand-icon-set: 'material-icons';

  /* Slightly above browser default: xwui components read this as their base. */
  --font-size-base: 1.125rem;

  /* Arabic/English size differential: Arabic renders ~10% larger for the same
     item (its glyphs run smaller). One knob, applied at the root in RTL only —
     raise or lower to rebalance both languages at once. */
  --ethar-rtl-scale: 1.1;

  /* ── Official brand palette (Brand Identity 2026, v02) ───────────────────
   * The client's visual identity. No teal/green appears in the brand — these
   * are the canonical values to recolour the site from. */
  --ethar-navy: #020917; /* Midnight Navy   — darkest, dark-theme base   */
  --ethar-mist: #e7eeec; /* Warm Mist       — light neutral / light bg   */
  --ethar-cocoa: #6f5649; /* Deep Cocoa Brown— warm secondary             */
  --ethar-gold: #de9d72; /* Antique Sand Gold / Champagne Beige — accent */

  /* PRIMARY text-accent — headings, links, section titles, fills. Per the 2026
   * brand identity this is Deep Cocoa Brown (readable on both light Mist and
   * dark Navy). The token keeps its historical `--ethar-teal` name to avoid a
   * 60-call rename, but it now holds COCOA, not teal — there is no teal/green in
   * the brand. Recolour the whole brand's primary from this one line. */
  --ethar-teal: var(--ethar-cocoa);
  /* DECORATIVE accent — eyebrows, section icons, chart's second series, hover
   * pops. Per the brand this is Antique Sand Gold. Historical `--ethar-amber`
   * name kept; it now holds GOLD. */
  --ethar-amber: var(--ethar-gold);

  /* Make the brand teal the "info/accent" colour everywhere — every accent in
   * this sheet reads var(--color-info, …), and so do xwui's link styles — so
   * one token kills the stock blue across the whole site. */
  --color-info: var(--ethar-teal);

  /* Reusable link colour for content / xwui-rendered links — replaces the stock
   * blue + underline with the brand teal (underline only on hover). Reference
   * these tokens everywhere instead of hard-coding a link colour. */
  --ethar-link: var(--ethar-teal);
  --ethar-link-hover: color-mix(in srgb, var(--ethar-teal) 78%, #000);

  --ethar-section-muted-bg: #f4f5f3;
  --ethar-section-muted-bg-dark: #2b2927;
  --ethar-arrow-chip-bg: #e9e9e9;
  --ethar-arrow-chip-bg-hover: #dedede;
  --ethar-arrow-chip-color: #b7b7b7;
  --ethar-news-inner-bg-image: url('/pictures/news-background.webp');
  --ethar-news-inner-bg-image-dark: url('/pictures/news-background-d.webp');
  --ethar-news-inner-bg-color: #f6eeee;
}

/* Dark theme: lighten the link so it reads on the dark surface. */
html[data-theme='ethar-dark'],
html[data-theme='dark'],
html[data-theme='night'] {
  /* Link reads as warm sand on dark Navy (the xwui ethar-dark theme owns the
   * Navy surfaces + gold accent; here we only tune the content link colour). */
  --ethar-link: color-mix(in srgb, var(--ethar-gold) 70%, #fff);
  --ethar-link-hover: #ffffff;
}

html {
  /* Override xwui font-family tokens with Ethar brand fonts. ZERO Arial — the
   * client mandates that only the supplied Arabic fonts render Arabic.
   *
   * CRITICAL ordering rule: the Arabic faces (jAWAD Salma / Nassim) come
   * BEFORE Helvetica. Why? On Windows the OS substitutes Arial for any
   * request for "Helvetica" (same metrics) — and that Arial substitute
   * carries Arabic glyphs. If Helvetica were listed first, the browser would
   * resolve an Arabic codepoint via the Arial substitute and never reach
   * jAWAD Salma. Putting jAWAD/Nassim first short-circuits the substitution.
   *
   * The Arabic @font-face declarations in public/fonts/fonts.css carry a
   * unicode-range that limits them to Arabic codepoints, so they will NOT be
   * used for Latin glyphs — Latin runs still resolve cleanly to Helvetica. */
  --font-family-base:
    'jAWAD Salma Arabic', 'Nassim Arabic', 'Parma W01 Display', 'Helvetica',
    'Helvetica Neue', sans-serif !important;
  --font-family-arabic:
    'jAWAD Salma Arabic', 'Nassim Arabic', sans-serif !important;

  /* xwui's typography.css uses --font-family-international on <body>. Its
   * default stack includes Tahoma/Arial-derivatives that carry Arabic. Hard
   * override so the international fallback never resolves Arabic anywhere
   * other than jAWAD Salma / Nassim, and so the Latin face is Parma (with
   * Helvetica as the safety fallback). */
  --font-family-international:
    'jAWAD Salma Arabic', 'Nassim Arabic', 'Parma W01 Display', 'Helvetica',
    'Helvetica Neue', sans-serif !important;

  /* xwui-typography variant tokens — what h1..h6, body, caption resolve to.
   *
   * Per the client direction: Parma W01 Display is THE English brand face —
   * it sits ahead of Helvetica in every stack so any Latin glyph resolves to
   * Parma. Helvetica stays as the safety fallback only. Arabic faces are
   * always FIRST so Arabic glyphs never reach the Helvetica→Arial
   * substitution path. */
  --font-headings-family:
    'jAWAD Salma Arabic', 'Nassim Arabic', 'Parma W01 Display', 'Helvetica',
    'Helvetica Neue', sans-serif !important;
  --font-body-family:
    'Nassim Arabic', 'jAWAD Salma Arabic', 'Parma W01 Display', 'Helvetica',
    'Helvetica Neue', sans-serif !important;
  --font-caption-family:
    'Nassim Arabic', 'jAWAD Salma Arabic', 'Parma W01 Display', 'Helvetica',
    'Helvetica Neue', sans-serif !important;
}

/* Defensive: any element whose computed font-family ends up reaching for
 * Arabic glyphs must walk our stacks first. xwui-statistic-title /
 * -content / -value / -suffix don't set font-family themselves (they
 * inherit), but be explicit so a future xwui CSS change can't break us. */
.xwui-statistic,
.xwui-statistic-title,
.xwui-statistic-content,
.xwui-statistic-value,
.xwui-statistic-suffix,
.xwui-statistic-prefix {
  font-family: var(--font-body-family) !important;
}

html[data-accent='amber'] {
  --accent-primary: #b45309 !important;
  --accent-hover: #92400e !important;
  --accent-light: #d97706 !important;
  --accent-primary-rgb: 180, 83, 9 !important;
  --accent-hover-rgb: 146, 64, 14 !important;
  --accent-light-rgb: 217, 119, 6 !important;
  --role-primary-bg: #b45309 !important;
  --role-primary-fg: #ffffff !important;
  --color-primary: #b45309 !important;
  --accent-primary-light: color-mix(
    in srgb,
    #b45309 24%,
    transparent
  ) !important;
  --accent-primary-soft: color-mix(
    in srgb,
    #b45309 12%,
    transparent
  ) !important;
}

:root {
  --ethar-page-gradient:
    radial-gradient(
      1100px 560px at 100% -10%,
      var(--accent-primary-light) 0%,
      transparent 60%
    ),
    radial-gradient(
      900px 480px at -10% 10%,
      var(--accent-primary-soft) 0%,
      transparent 55%
    ),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent-primary) 8%, var(--bg-app)) 0%,
      var(--bg-app) 45%,
      var(--bg-primary) 100%
    );

  /* Reading width for CMS-backed content pages (about/services/contact/blog). */
  --ethar-doc-max-width: 56rem;
}

/* ── CMS content pages (xwui-page) ─────────────────────────────────────────
 * about / services / contact / blog render their authored blocks through
 * <xwui-page>. The section centres a readable column on the warm page
 * gradient; the page component owns block typography (we only set rhythm +
 * brand colour accents). */
.ethar-doc-section {
  padding-block: clamp(var(--space-12, 3.5rem), 8vw, var(--space-20, 6rem));
  padding-inline: clamp(1.25rem, 6vw, 6rem);
}

.ethar-doc {
  max-width: var(--ethar-doc-max-width);
  margin-inline: auto;
}

/* Cascade the page direction into the doc + the xwui-page block renderer.
 * `direction` (not just text-align) is what flips list bullets, padding and
 * block layout to the correct side — text-align alone left the bullets on the
 * wrong edge. xwui-page may stamp its own dir on inner nodes, so we force
 * direction on the element and its descendants in RTL. */
html[dir='rtl'] .ethar-doc,
html[dir='rtl'] .ethar-doc xwui-page,
html[dir='rtl'] .ethar-doc .xwui-page,
html[dir='rtl'] .ethar-doc .xwui-page * {
  direction: rtl;
}
html[dir='rtl'] .ethar-doc {
  text-align: right;
}
html[dir='ltr'] .ethar-doc,
html[dir='ltr'] .ethar-doc xwui-page,
html[dir='ltr'] .ethar-doc .xwui-page {
  direction: ltr;
}
html[dir='ltr'] .ethar-doc {
  text-align: left;
}
/* Lists: bullets/numbers on the reading-start side. */
html[dir='rtl'] .ethar-doc .xwui-page ul,
html[dir='rtl'] .ethar-doc .xwui-page ol {
  padding-inline-start: 1.4em;
  padding-inline-end: 0;
}

/* xwui-page headings pick up the brand teal so the docs match the home
 * sections; body copy uses the inherited token. */
.ethar-doc .xwui-page h1,
.ethar-doc .xwui-page h2,
.ethar-doc .xwui-page h3 {
  color: var(--color-info, var(--ethar-teal));
}

/* The info/callout block was hugging the block beneath it (e.g. the image on
 * the About page). Give it clear breathing room underneath. */
.ethar-doc .xwui-page-mode-callout {
  margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.ethar-doc__error {
  color: var(--text-secondary);
  text-align: center;
  padding-block: 3rem;
}

/* ── News / Blog list + article (markdown content) ──────────────────────────
 * List view: a responsive card grid from the per-locale manifest. Article view:
 * a back/date meta line above the <xwui-page> markdown body. */
.ethar-list-section {
  padding-block: clamp(var(--space-12, 3.5rem), 8vw, var(--space-20, 6rem));
  padding-inline: clamp(1.25rem, 6vw, 6rem);
}
.ethar-list {
  max-width: 1100px;
  margin-inline: auto;
}
.ethar-list__head {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.ethar-list__title {
  color: var(--color-info, var(--ethar-teal));
  margin: 0 0 0.5rem;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
}
.ethar-list__lead {
  color: var(--text-secondary);
  margin: 0;
}

/* News & Insights hero — references/news-1.png. Full white page, physical
   image-left/text-right layout, independent from the dark locked theme. */
.ethar-news-page-hero {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 66.5vw) minmax(22rem, 1fr);
  column-gap: clamp(3.25rem, 4.55vw, 7rem);
  align-items: start;
  min-height: clamp(48rem, 63.2vw, 105rem);
  padding-block: clamp(4.25rem, 5vw, 8.125rem) clamp(1.5rem, 2vw, 2rem);
  padding-inline: 0 clamp(3rem, 7.3vw, 9.5rem);
  background: #ffffff !important;
  color: #060a13 !important;
  direction: ltr;
}

.ethar-news-page-hero__media {
  width: 100%;
  margin-block-start: clamp(4.5rem, 5.7vw, 6.5rem);
  aspect-ratio: 1402 / 1122;
  overflow: hidden;
  background: #ffffff;
}

.ethar-news-page-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0 !important;
  border-radius: 0 !important;
}

.ethar-news-page-hero__copy {
  justify-self: stretch;
  max-width: clamp(28rem, 30vw, 43rem);
  color: #060a13 !important;
}

.ethar-news-page-hero__copy[dir='rtl'] {
  text-align: right;
}

.ethar-news-page-hero__copy[dir='ltr'] {
  text-align: left;
}

.ethar-news-page-hero__title {
  margin: 0 !important;
  color: #050914 !important;
  font-family: var(--font-headings-family, var(--font-family-base)) !important;
  font-size: clamp(4rem, 4.05vw, 7rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

.ethar-news-page-hero__date {
  display: block;
  margin-block-start: clamp(4.6rem, 5.6vw, 8rem);
  color: #b7b7bd !important;
  /* Was clamp(0.78rem…1.13rem) → rendered 12.5px EN / 14.4px AR — too small for
     a dateline. Lift to a legible floor in both locales. */
  font-size: clamp(1rem, 1.05vw, 1.25rem) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ethar-news-page-hero__body {
  margin: clamp(1.75rem, 2vw, 2.45rem) 0 0 !important;
  color: #070b14 !important;
  font-size: clamp(1rem, 1.04vw, 1.62rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 70rem) {
  .ethar-news-page-hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2rem, 6vw, 3.5rem);
    min-height: 0;
    padding: clamp(3rem, 8vw, 4.5rem) clamp(1.25rem, 5vw, 2.25rem);
  }

  .ethar-news-page-hero__copy {
    order: 1;
    max-width: 44rem;
    justify-self: end;
  }

  .ethar-news-page-hero__media {
    order: 2;
    margin-block-start: 0;
  }

  .ethar-news-page-hero__date {
    margin-block-start: clamp(2rem, 7vw, 3.5rem);
  }
}

@media (max-width: 40rem) {
  .ethar-news-page-hero__title {
    font-size: clamp(3.1rem, 15vw, 4.25rem) !important;
  }

  .ethar-news-page-hero__body {
    font-size: clamp(1rem, 4.5vw, 1.2rem) !important;
    line-height: 1.7 !important;
  }
}

/* News & Insights cards section — references/news-2.png. This is a bespoke
   dark/brown band and must not inherit the locked dark-theme card styles. */
.ethar-news-cards-section {
  box-sizing: border-box;
  position: relative;
  min-height: clamp(58rem, 65vw, 108rem);
  padding-block: clamp(4.9rem, 5.1vw, 7rem) clamp(6rem, 8vw, 11rem);
  padding-inline: clamp(3.5rem, 3.7vw, 5rem);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #020916 0%,
    #030915 36%,
    #151821 65%,
    #4f3930 100%
  ) !important;
  color: #f5f1ec !important;
  direction: ltr;
}

.ethar-news-cards__controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 8rem);
  width: 100%;
}

.ethar-news-cards__filters {
  display: flex;
  gap: clamp(1.5rem, 1.05vw, 1.8rem);
}

.ethar-news-cards__dropdown,
.ethar-news-cards__search {
  box-sizing: border-box;
  height: clamp(4rem, 4.45vw, 7rem);
  border: 1px solid rgb(238 238 238 / 0.75) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f6f2ed !important;
}

.ethar-news-cards__dropdown {
  position: relative;
  width: clamp(18rem, 16vw, 26.75rem);
  font-size: clamp(1.45rem, 1.38vw, 2.3rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1;
}

.ethar-news-cards__dropdown-summary {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.8rem, 1vw, 1.5rem);
  padding: 0 clamp(1.6rem, 1.6vw, 2.65rem);
  color: #f6f2ed !important;
  cursor: pointer;
  direction: rtl;
  list-style: none;
  text-align: right;
  user-select: none;
}

/* Hide the native disclosure triangle — we draw our own chevron below. */
.ethar-news-cards__dropdown-summary::marker,
.ethar-news-cards__dropdown-summary::-webkit-details-marker {
  content: '';
  display: none;
}

/* \/ chevron on the inline-end side (left in RTL); points down by default. */
.ethar-news-cards__dropdown-summary::after {
  content: '';
  flex: 0 0 auto;
  width: clamp(0.55rem, 0.62vw, 0.95rem);
  height: clamp(0.55rem, 0.62vw, 0.95rem);
  border-right: 2px solid rgb(238 238 238 / 0.8);
  border-bottom: 2px solid rgb(238 238 238 / 0.8);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}

/* Flip to /\ when the dropdown is open. */
.ethar-news-cards__dropdown[open] .ethar-news-cards__dropdown-summary::after {
  transform: translateY(25%) rotate(225deg);
}

.ethar-news-cards__dropdown-menu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 0.45rem);
  inset-inline: 0;
  display: grid;
  border: 1px solid rgb(238 238 238 / 0.75);
  background: #030915;
}

.ethar-news-cards__dropdown:not([open]) .ethar-news-cards__dropdown-menu {
  display: none;
}

.ethar-news-cards__dropdown-menu button {
  min-height: 3rem;
  padding: 0.75rem clamp(1.4rem, 1.4vw, 2.25rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f6f2ed;
  font: inherit;
  font-size: 0.8em;
  text-align: right;
  cursor: pointer;
}

.ethar-news-cards__dropdown-menu button:hover,
.ethar-news-cards__dropdown-menu button:focus-visible {
  background: rgb(255 255 255 / 0.08);
  outline: none;
}

.ethar-news-cards__search {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1vw, 1.4rem);
  width: clamp(32rem, 27.5vw, 45rem);
  padding: 0 clamp(1.6rem, 1.8vw, 3rem);
  box-shadow: none !important;
}

/* Clickable magnifier button on the inline-end side (left in RTL) —
   references/news-2.png. Inert for now: it does nothing on click. */
.ethar-news-cards__search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: rgb(238 238 238 / 0.85);
  box-shadow: none !important;
  cursor: pointer;
  line-height: 1;
}
.ethar-news-cards__search-btn .material-icons {
  font-size: clamp(1.5rem, 1.55vw, 2.4rem);
  line-height: 1;
}

.ethar-news-cards__search-input {
  flex: 1 1 auto;
  width: auto;
  height: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #f6f2ed !important;
  box-shadow: none !important;
  caret-color: #f6f2ed;
  font-family: inherit !important;
  font-size: clamp(1.55rem, 1.42vw, 2.4rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1;
  text-align: right;
  direction: rtl;
}

/* High-specificity override so no background/border leaks onto the input from a
   competing rule — only the outer search box keeps its border. */
.ethar-news-cards-section input.ethar-news-cards__search-input,
.ethar-news-cards-section input.ethar-news-cards__search-input:hover,
.ethar-news-cards-section input.ethar-news-cards__search-input:active,
.ethar-news-cards-section input.ethar-news-cards__search-input:focus,
.ethar-news-cards-section input.ethar-news-cards__search-input:focus-visible {
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ethar-news-cards-section .ethar-news-cards__search-btn,
.ethar-news-cards-section .ethar-news-cards__search-btn:hover,
.ethar-news-cards-section .ethar-news-cards__search-btn:active,
.ethar-news-cards-section .ethar-news-cards__search-btn:focus,
.ethar-news-cards-section .ethar-news-cards__search-btn:focus-visible {
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ethar-news-cards-section .ethar-news-cards__search-btn .material-icons {
  border: none !important;
  outline: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-style='glass']
  .ethar-news-cards-section
  input.ethar-news-cards__search-input:not([class*='xwui-']),
:root[data-style='glass']
  .ethar-news-cards-section
  input.ethar-news-cards__search-input:not([class*='xwui-']):hover,
:root[data-style='glass']
  .ethar-news-cards-section
  input.ethar-news-cards__search-input:not([class*='xwui-']):active,
:root[data-style='glass']
  .ethar-news-cards-section
  input.ethar-news-cards__search-input:not([class*='xwui-']):focus,
:root[data-style='glass']
  .ethar-news-cards-section
  input.ethar-news-cards__search-input:not([class*='xwui-']):focus-visible,
:root[data-style='glass']
  .ethar-news-cards-section
  button.ethar-news-cards__search-btn:not([class*='xwui-']),
:root[data-style='glass']
  .ethar-news-cards-section
  button.ethar-news-cards__search-btn:not([class*='xwui-']):hover,
:root[data-style='glass']
  .ethar-news-cards-section
  button.ethar-news-cards__search-btn:not([class*='xwui-']):active,
:root[data-style='glass']
  .ethar-news-cards-section
  button.ethar-news-cards__search-btn:not([class*='xwui-']):focus,
:root[data-style='glass']
  .ethar-news-cards-section
  button.ethar-news-cards__search-btn:not([class*='xwui-']):focus-visible {
  border: none !important;
  outline: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ethar-news-cards__search-input::placeholder {
  color: #f6f2ed;
  opacity: 1;
}

.ethar-news-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4rem, 4.15vw, 7rem);
  width: min(100%, 126.5rem);
  margin: clamp(10rem, 11.6vw, 18.5rem) auto 0;
}

.ethar-news-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: #f5f1ec !important;
}

.ethar-news-card__media {
  position: relative;
  width: 100%;
  background: #151821;
  overflow: hidden;
}

.ethar-news-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.03;
  object-fit: cover;
  object-position: center;
  border: 0 !important;
  border-radius: 0 !important;
}

.ethar-news-card__date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: clamp(3.2rem, 3.45vw, 5rem);
  padding-inline: clamp(1.25rem, 1.45vw, 2.4rem);
  background: linear-gradient(
    90deg,
    #d39a70 0%,
    #7c5646 43%,
    #171922 100%
  ) !important;
  color: rgb(245 241 236 / 0.76) !important;
  font-size: clamp(0.82rem, 0.78vw, 1.25rem) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ethar-news-card__title {
  max-width: 36rem;
  margin: clamp(2.2rem, 2.3vw, 3.75rem) 0 0 auto !important;
  color: #f5f1ec !important;
  font-size: clamp(1.55rem, 1.38vw, 2.25rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
  text-align: right;
}

.ethar-news-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(10.5rem, 9.8vw, 16.5rem);
  min-height: clamp(3.1rem, 3.25vw, 4.95rem);
  margin-block-start: clamp(1.5rem, 1.6vw, 2.5rem);
  padding: 0 clamp(1.5rem, 1.7vw, 2.75rem);
  border-radius: clamp(0.3rem, 0.4vw, 0.65rem);
  background: #75513f !important;
  color: #f5f1ec !important;
  font-size: clamp(1.25rem, 1.25vw, 2rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1;
  text-decoration: none !important;
  align-self: flex-end;
}

.ethar-news-cards__arrow {
  position: absolute;
  z-index: 1;
  top: clamp(34rem, 48vw, 59rem);
  width: clamp(3.25rem, 3.45vw, 5rem);
  height: clamp(3.25rem, 3.45vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 50%;
  background: #9b7052 !important;
  color: #ffffff !important;
  cursor: pointer;
}

.ethar-news-cards__arrow--left {
  left: clamp(2rem, 5.2vw, 8.6rem);
}

.ethar-news-cards__arrow--right {
  right: clamp(2rem, 5.2vw, 8.6rem);
}

.ethar-news-cards__arrow span {
  width: clamp(0.75rem, 0.8vw, 1.2rem);
  height: clamp(0.75rem, 0.8vw, 1.2rem);
  border-block-start: clamp(0.2rem, 0.2vw, 0.32rem) solid currentColor;
  border-inline-start: clamp(0.2rem, 0.2vw, 0.32rem) solid currentColor;
}

.ethar-news-cards__arrow--left span {
  transform: rotate(-45deg) translate(0.1rem, 0.1rem);
}

.ethar-news-cards__arrow--right span {
  transform: rotate(135deg) translate(0.1rem, 0.1rem);
}

@media (max-width: 70rem) {
  .ethar-news-cards-section {
    min-height: 0;
    padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 2rem);
  }

  .ethar-news-cards__controls {
    flex-direction: column-reverse;
    gap: 1rem;
  }

  .ethar-news-cards__filters,
  .ethar-news-cards__search {
    width: 100%;
  }

  .ethar-news-cards__dropdown {
    flex: 1 1 0;
    width: auto;
  }

  .ethar-news-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 34rem);
    margin-block-start: clamp(3rem, 10vw, 5rem);
  }

  .ethar-news-cards__arrow {
    display: none;
  }
}

@media (max-width: 40rem) {
  .ethar-news-cards__filters {
    flex-direction: column;
  }

  .ethar-news-cards__dropdown,
  .ethar-news-cards__search {
    height: 3.75rem;
  }

  .ethar-news-cards__dropdown,
  .ethar-news-cards__search-input {
    font-size: 1.25rem !important;
  }

  .ethar-news-cards__dropdown-summary {
    line-height: 3.75rem;
  }
}

/* News & Insights article feature — references/news-3.png. White editorial
   section after the card rail, with a physical image-left/text-right layout. */
.ethar-news-article-section {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: clamp(30rem, 32.25vw, 54rem) minmax(0, 1fr);
  column-gap: clamp(5rem, 10vw, 17rem);
  align-items: start;
  min-height: clamp(48rem, 48.9vw, 81.5rem);
  padding-block: clamp(3.25rem, 2.85vw, 4.75rem) clamp(4rem, 5vw, 8rem);
  padding-inline: clamp(3rem, 2.55vw, 4.25rem) clamp(4rem, 6.6vw, 11rem);
  background: #ffffff !important;
  color: #060a13 !important;
  direction: ltr;
}

.ethar-news-article__media {
  min-width: 0;
}

.ethar-news-article__img {
  display: block;
  width: 100%;
  aspect-ratio: 1856 / 2304;
  object-fit: cover;
  object-position: center center;
  border: 0 !important;
  border-radius: 0 !important;
}
/* The Mark release article reuses this layout; its photo is a wide sunset
 * render, so give it a landscape frame (not the portrait one). */
.ethar-news-article-section--mark .ethar-news-article__img {
  aspect-ratio: 4 / 3;
}

/* "--rev" flips the article so the image sits on the RIGHT and the copy on the
   LEFT. direction:rtl reverses the grid's column order (narrow image column →
   right, wide copy column → left) in BOTH locales; the copy keeps its own dir
   attribute so its text alignment is unaffected. */
.ethar-news-article-section--rev {
  direction: rtl;
}

.ethar-news-article__copy {
  min-width: 0;
  padding-block-start: clamp(4rem, 5vw, 8.3rem);
  color: #060a13 !important;
}

.ethar-news-article__copy[dir='rtl'] {
  text-align: right;
}

.ethar-news-article__copy[dir='ltr'] {
  text-align: left;
}

.ethar-news-article__title {
  margin: 0 !important;
  color: #050914 !important;
  font-size: clamp(3rem, 2.55vw, 4.25rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
}

.ethar-news-article__lead {
  margin: clamp(3.8rem, 4.35vw, 7.25rem) 0 0 !important;
  color: #735649 !important;
  font-size: clamp(1.25rem, 1.1vw, 1.85rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
}

.ethar-news-article__body {
  margin: clamp(1.8rem, 2.1vw, 3.4rem) 0 0 !important;
  color: #b3b0ae !important;
  font-size: clamp(1rem, 0.86vw, 1.43rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
}

.ethar-news-article__more {
  float: inline-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(11rem, 10.2vw, 17rem);
  min-height: clamp(3.2rem, 3.45vw, 5.3rem);
  margin-block-start: clamp(3rem, 3.8vw, 6rem);
  padding: 0 clamp(1.75rem, 2vw, 3.25rem);
  border-radius: clamp(0.32rem, 0.45vw, 0.7rem);
  background: #75513f !important;
  color: #f5f1ec !important;
  font-size: clamp(1.35rem, 1.35vw, 2.2rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1;
  text-decoration: none !important;
}

.ethar-news-article__copy[dir='rtl'] .ethar-news-article__more {
  float: right !important;
}

@media (max-width: 78rem) {
  .ethar-news-article-section {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(3rem, 8vw, 5rem);
    min-height: 0;
    padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 2rem);
  }

  .ethar-news-article__media {
    width: min(100%, 34rem);
    margin-inline: auto;
  }

  .ethar-news-article__copy {
    padding-block-start: 0;
  }
}

@media (max-width: 40rem) {
  .ethar-news-article__title {
    font-size: clamp(2.15rem, 10vw, 3.2rem) !important;
  }

  .ethar-news-article__lead {
    margin-block-start: 2.25rem !important;
    font-size: clamp(1.05rem, 4.8vw, 1.35rem) !important;
  }

  .ethar-news-article__body {
    font-size: clamp(0.95rem, 4.2vw, 1.15rem) !important;
  }
}

/* News & Insights feed — a single 6-col <xwui-grid> carrying three display
   modes (feature span 6, 2-up cards span 3, 3-up cards span 2). Every item is
   an <a> for hash navigation. The accent chip + brand colours are shared. */
.ethar-feed-item {
  display: flex;
  text-decoration: none;
  color: inherit;
}
.ethar-news-chip {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.66rem;
  border-radius: 999px;
  color: var(--color-info, var(--ethar-teal));
  background: color-mix(
    in srgb,
    var(--color-info, var(--ethar-teal)) 14%,
    transparent
  );
}
.ethar-news-when {
  font-size: 0.82rem;
  color: var(--text-tertiary, var(--text-secondary));
}

/* ── Mode CARD: native xwui-card. Items 1–2 span 3/6 cols (2-up); items 3+
   span 2/6 (3-up). Shared card styling targets both spans. ─────────────────── */
.ethar-news-half {
  grid-column: span 3;
}
.ethar-news-third {
  grid-column: span 2;
}
.ethar-news-half > xwui-card,
.ethar-news-third > xwui-card {
  width: 100%;
}
.ethar-news-half .xwui-image-container,
.ethar-news-third .xwui-image-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.ethar-news-half .xwui-image-container img,
.ethar-news-third .xwui-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ethar-news-half .xwui-tag,
.ethar-news-third .xwui-tag {
  background: color-mix(
    in srgb,
    var(--color-info, var(--ethar-teal)) 14%,
    transparent
  ) !important;
  color: var(--color-info, var(--ethar-teal)) !important;
  border-color: transparent !important;
}

/* ── Mode FEATURE (item 0): full-bleed image, text overlaid ──────────────── */
.ethar-news-feature {
  grid-column: 1 / -1; /* span all six columns — a hero row */
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  min-height: clamp(320px, 42vw, 520px);
}
/* Media + image are xwui components now: the media is an <xwui-box> (it slots
   the image + scrim), the image an <xwui-image>. Both components OVERWRITE the
   host `class`, so the brand classes are passed via conf-comp.className and land
   on each component's INNER element (e.g. .xwui-box.ethar-news-feature__media).
   We therefore position the media HOST — the only direct <xwui-box> child of the
   feature — as the full-bleed overlay layer (replacing the old absolute media
   <div>), then fill the inner media box and the xwui-image internals. */
.ethar-news-feature > xwui-box {
  position: absolute;
  inset: 0;
}
.ethar-news-feature__media {
  width: 100%;
  height: 100%;
}
/* xwui-image renders host > container > wrapper > img; fill + cover so the photo
   behaves like the old full-bleed <img object-fit:cover>. */
.ethar-news-feature__media xwui-image {
  display: block;
}
.ethar-news-feature__media xwui-image,
.ethar-news-feature__media .xwui-image-container,
.ethar-news-feature__media .xwui-image-wrapper,
.ethar-news-feature__media .xwui-image,
.ethar-news-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ethar-news-feature__scrim {
  position: absolute;
  inset: 0;
  /* Dark wash, heaviest at the bottom where the text sits. */
  background: linear-gradient(
    to top,
    rgba(2, 9, 23, 0.92) 0%,
    rgba(2, 9, 23, 0.55) 32%,
    rgba(2, 9, 23, 0.1) 60%,
    transparent 100%
  );
}
.ethar-news-feature__copy {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  color: #fff;
}
.ethar-news-feature__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.ethar-news-feature__excerpt {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.ethar-news-feature .ethar-news-when {
  color: rgba(255, 255, 255, 0.7);
}
.ethar-news-feature .ethar-news-chip {
  color: #fff;
  background: color-mix(
    in srgb,
    var(--color-info, var(--ethar-teal)) 75%,
    transparent
  );
}

/* Responsive spans (the grid stays 6-col; only the per-item spans change).
   Tablet: 3-up cards become 2-up. Phone: everything full width. */
@media (max-width: 960px) {
  .ethar-news-third {
    grid-column: span 3;
  }
}
@media (max-width: 600px) {
  .ethar-news-half,
  .ethar-news-third {
    grid-column: 1 / -1;
  }
}

.ethar-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
.ethar-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 16px;
  /* Transparent fill — the border delineates the card over the page. */
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.ethar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: color-mix(
    in srgb,
    var(--color-info, var(--ethar-teal)) 40%,
    transparent
  );
}
.ethar-card__cat {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-info, var(--ethar-teal));
  background: color-mix(
    in srgb,
    var(--color-info, var(--ethar-teal)) 12%,
    transparent
  );
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.ethar-card__title {
  color: var(--text-primary);
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.4;
}
.ethar-card__excerpt {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.7;
  flex: 1;
}
.ethar-card__date {
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

.ethar-article {
  max-width: var(--ethar-doc-max-width);
  margin-inline: auto;
}
.ethar-article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
  color: var(--text-tertiary);
  font-size: 0.9rem;
}
.ethar-article__back {
  color: var(--color-info, var(--ethar-teal));
  text-decoration: none;
  font-weight: 600;
}
.ethar-article__back:hover {
  text-decoration: underline;
}

/* ── Content links ─────────────────────────────────────────────────────────
 * Links inside xwui-rendered content (markdown viewer, CMS docs, article
 * bodies) default to a stock blue + permanent underline. Recolour them with the
 * reusable brand link token and drop the underline (show it only on hover).
 * !important defeats xwui's own anchor rule; linked images (e.g. gov badges)
 * stay undecorated. */
.xwui-markdown-display a,
.xwui-md-link,
.ethar-article a,
.ethar-doc a {
  color: var(--ethar-link) !important;
  text-decoration: none !important;
}
.xwui-markdown-display a:hover,
.xwui-md-link:hover,
.ethar-article a:hover,
.ethar-doc a:hover {
  color: var(--ethar-link-hover) !important;
  text-decoration: underline !important;
}
.ethar-article a:has(> img),
.ethar-article a:has(> img):hover {
  text-decoration: none !important;
}
/* The home "Latest" cards are whole-card links: keep their content in the
 * normal text/accent colours, never the link blue/underline. */
a.ethar-news-item,
a.ethar-news-item:visited,
a.ethar-news-item:hover {
  color: inherit;
  text-decoration: none;
}

/* ── Article body media (rendered by the xwui markdown viewer) ──────────────
 * Images are distinguished by their media subfolder so photos, data charts and
 * government logo badges each get the right treatment. */
.ethar-article img {
  max-width: 100%;
  height: auto;
}
/* Hero + inline photos: full-width, rounded, soft shadow. */
.ethar-article img[src*='/media/photos/'] {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg, 14px);
  margin: 1.6rem 0 0.4rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
/* ── Article charts — native <xwui-chart> cards ────────────────────────────
 * Each chart is its own themed card (XWUIChart paints --bg-primary + border +
 * --text-primary, so it reads in both light and dark). We only recolour the
 * palette: XWUIChart's getPaletteColor() resolves these --accent-* vars, so
 * scoping them here turns every line/bar/slice brand teal + amber. */
.ethar-chart-card {
  /* Brand palette for chart series/slices. Explicit hex so they match the donut
   * legend's SLICE_COLORS (src/app/charts.ts): Cocoa, Gold, deep Cocoa, warm
   * tan, sand. No teal/green — aligned to the 2026 brand identity. */
  --accent-primary: #6f5649; /* Cocoa — primary series / first slice */
  --accent-secondary: var(--ethar-amber); /* Gold — second series / slice */
  --accent-success: #3a2e26; /* deep cocoa — third slice */
  --accent-warning: var(--ethar-amber);
  --accent-danger: #b98c63; /* warm tan — fourth slice */
  margin: 1.9rem 0 0.8rem;
  padding: 1.4rem 1.3rem 1.1rem;
  /* Subtle themed card surface (light panel in light, raised dark panel in dark)
   * so the chart reads as a self-contained card in both themes. */
  background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-app));
  border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(8, 24, 22, 0.07);
}
.ethar-chart-card xwui-chart,
.ethar-chart-card .xwui-chart {
  display: block;
  width: 100%;
}
/* viewBox is set on the SVG, so width:100% scales it to the article column. */
.ethar-chart-card .xwui-chart-svg-container svg {
  width: 100%;
  height: auto;
}
.ethar-chart-card .xwui-chart-title {
  text-align: start;
}
.ethar-chart-card__cap {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary, #7c8c8a);
  text-align: start;
}
/* External legend for donut charts (xwui's pie legend only echoes the series
 * name) — swatch + label + percentage. */
.ethar-chart-card__legend {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  justify-content: center;
}
.ethar-chart-card__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
}
.ethar-chart-card__dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  flex: 0 0 auto;
}
.ethar-chart-card__lbl {
  color: var(--text-primary);
}
.ethar-chart-card__pct {
  color: var(--text-secondary);
  font-weight: 700;
}
/* Government logo badges: a centered, wrapping row of linked cards. */
.ethar-article p:has(> a > img[src*='/media/gov/']) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1.25rem 0;
}
.ethar-article a:has(> img[src*='/media/gov/']) {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}
.ethar-article img[src*='/media/gov/'] {
  width: clamp(220px, 31%, 280px);
  margin: 0;
  border-radius: 14px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.ethar-article a:has(> img[src*='/media/gov/']):hover img {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
/* Image captions: the italic-only paragraph immediately under a figure. */
.ethar-article p:has(> em:only-child) {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  margin: 0.3rem 0 1.3rem;
}
/* Data tables. */
.ethar-article table,
.ethar-article .xwui-md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  /* 15.2px → 16px floor: data tables carry figures readers parse cell-by-cell. */
  font-size: 1rem;
}
.ethar-article th,
.ethar-article td {
  border: 1px solid var(--border-color);
  padding: 0.6rem 0.85rem;
  text-align: start;
}
.ethar-article thead th,
.ethar-article .xwui-md-table th {
  background: color-mix(in srgb, var(--ethar-teal) 12%, transparent);
  font-weight: 700;
  color: var(--text-primary);
}
.ethar-article tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ethar-teal) 4%, transparent);
}
/* Branded blockquote (article lead + closing pull-quote). */
.ethar-article blockquote {
  margin: 1.3rem 0;
  padding: 0.8rem 1.15rem;
  border-inline-start: 4px solid var(--ethar-teal);
  background: color-mix(in srgb, var(--ethar-teal) 7%, transparent);
  border-radius: 0 10px 10px 0;
  font-size: 1.06rem;
  color: var(--text-secondary);
}
[dir='rtl'] .ethar-article blockquote {
  border-radius: 10px 0 0 10px;
}

/* Contact page map (xwui-map / Leaflet). Fixed height so the map tiles have a
 * box to fill; rounded to match the brand surfaces. */
/* Contact = a full-bleed map STAGE; the contact info floats over the right
 * (inline-start in RTL) in a semi-transparent panel, with the pin panned to the
 * left so it stays clear of the panel. */
.ethar-contact-stage {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(480px, 74vh, 700px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Small inline inset → the panel hugs the right (inline-start in RTL) edge. */
  padding-inline: clamp(0.75rem, 1.6vw, 1.5rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}
.ethar-contact-stage .ethar-contact-map:not(.ethar-map-static) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}
.ethar-contact-panel {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
}
.ethar-contact-panel__inner {
  background: color-mix(in srgb, var(--bg-app) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ethar-teal) 18%, transparent);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(1.6rem, 3.2vw, 2.4rem) clamp(1.6rem, 3.2vw, 2.6rem);
  box-shadow: 0 14px 44px rgba(8, 24, 22, 0.2);
  /* Bigger contact text. */
  font-size: 1.12rem;
}
/* Scale up the CMS doc text inside the panel. */
.ethar-contact-panel .xwui-markdown-display,
.ethar-contact-panel .xwui-page p,
.ethar-contact-panel .xwui-doc-block {
  font-size: 1.12rem;
  line-height: 1.9;
}
.ethar-contact-panel .xwui-page h1,
.ethar-contact-panel .xwui-page h2,
.ethar-contact-panel .xwui-page h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}
/* The CMS doc inside the panel must not keep its own page max-width/centering. */
.ethar-contact-panel .ethar-doc,
.ethar-contact-panel xwui-page,
.ethar-contact-panel .xwui-page {
  max-width: none;
  margin: 0;
}
@media (max-width: 760px) {
  .ethar-contact-stage {
    justify-content: center;
  }
  .ethar-contact-panel {
    width: min(520px, 100%);
  }
}

/* ── 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: var(--font-weight-bold, 700) !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);
  }
}

/* ── 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: var(--font-weight-bold, 700);
  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: #12131b !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);
  }
}

/* ── 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 "our partners" logo strip — references/3-projects.png ───────────
 * A white surface (forced over the locked dark theme) carrying six clickable
 * brand logos in one row, separated by thin bronze→dark gradient dividers. */
.ethar-brands-section {
  background: #ffffff !important;
  padding-block: clamp(3.5rem, 7vw, 7rem);
  padding-inline: clamp(1.25rem, 5vw, 5rem);
}
html[data-theme='ethar-dark'] .ethar-brands-section,
html[data-theme='dark'] .ethar-brands-section,
html[data-theme='night'] .ethar-brands-section {
  background: #ffffff !important;
}

.ethar-brands {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 110rem;
  margin-inline: auto;
}

.ethar-brands__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-inline: clamp(0.75rem, 1.8vw, 2.25rem);
  text-decoration: none;
}

/* Thin bronze→dark gradient divider between adjacent logos (not before #1). */
.ethar-brands__item + .ethar-brands__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: clamp(3.25rem, 5vw, 4.5rem);
  background: linear-gradient(to bottom, #ac7b5d, #070c19);
}

.ethar-brands__logo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(2.5rem, 4.2vw, 3.5rem);
  object-fit: contain;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}
.ethar-brands__item:hover .ethar-brands__logo,
.ethar-brands__item:focus-visible .ethar-brands__logo {
  transform: scale(1.05);
  opacity: 0.85;
}

/* Wrap to a grid on narrow viewports; the vertical dividers don't survive a
 * wrap, so hide them there. */
@media (max-width: 60rem) {
  .ethar-brands {
    flex-wrap: wrap;
    row-gap: clamp(1.5rem, 5vw, 3rem);
  }
  .ethar-brands__item {
    flex: 0 0 33.333%;
    padding-block: clamp(0.75rem, 3vw, 1.5rem);
  }
  .ethar-brands__item + .ethar-brands__item::before {
    display: none;
  }
}
@media (max-width: 36rem) {
  .ethar-brands__item {
    flex: 0 0 50%;
  }
}

/* ── Projects expertise section — references/4-projects.png ──────────────── */
.ethar-projects-expertise {
  position: relative;
  display: grid;
  /* Reversed columns: copy on the LEFT (1fr), image stage on the RIGHT (48vw). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 48vw);
  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: 2;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.ethar-projects-expertise__img {
  position: absolute;
  top: auto;
  /* Reversed: image anchors to the RIGHT of its (now right-hand) column. */
  right: clamp(-5rem, -3.5vw, -3rem);
  left: auto;
  bottom: 0;
  display: block;
  width: clamp(50rem, 62vw, 74rem);
  max-width: none;
  height: auto;
  max-height: none;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
}

.ethar-projects-expertise__copy {
  position: relative;
  z-index: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  width: min(47rem, 44vw);
  justify-self: start;
  padding-block: clamp(2.5rem, 5vh, 4.5rem);
  padding-left: clamp(5rem, 7.3vw, 11rem);
  padding-right: clamp(2rem, 5vw, 6rem);
  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(4rem, 5vh, 6rem);
  height: auto;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-block-end: clamp(2rem, 5vh, 4rem);
  color: #d4c1ad !important;
}

.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: var(--font-weight-semibold, 600) !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, 1fr) minmax(0, 42vw);
    height: 80vh;
  }

  .ethar-projects-expertise__img {
    right: -8rem;
    left: auto;
    width: clamp(48rem, 78vw, 60rem);
    height: auto;
  }

  .ethar-projects-expertise__copy {
    width: min(38rem, 52vw);
    padding-left: 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: #3f2b25 !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(3.5rem, 16vw, 5rem);
    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);
  }
}

.ethar-contact-map xwui-map,
.ethar-contact-map .xwui-map {
  display: block;
  width: 100%;
  height: 100%;
}

/* xwui-map's Leaflet canvas does NOT stretch to fill the <xwui-map> host on its
 * own, so it collapses to height:0 and the map renders blank (tiles load but
 * are never visible). Force it to fill its host everywhere we place a map. The
 * host must have a definite height — contact via .ethar-contact-map, the
 * project detail map via .ethar-pp__map. */
xwui-map .xwui-map-canvas,
xwui-map .leaflet-container,
.xwui-map .leaflet-container {
  height: 100%;
}

/* Standalone news index reuses the home news rhythm but stacks single-column. */
.ethar-news-section--page .ethar-news__list {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.ethar-news-section--page .ethar-news-item__date {
  display: block;
  margin-top: var(--space-2, 0.5rem);
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

html[data-theme='dark'],
html[data-theme='night'] {
  --ethar-page-gradient:
    radial-gradient(
      1100px 580px at 100% -10%,
      color-mix(in srgb, var(--accent-primary) 22%, transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      900px 520px at -10% 6%,
      color-mix(in srgb, var(--accent-primary) 12%, transparent) 0%,
      transparent 55%
    ),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent-primary) 12%, #05080b) 0%,
      var(--bg-app) 46%,
      var(--bg-secondary) 100%
    );
}

html,
body {
  /* xwui's runtime CSS loads after this file and sets body { padding: 20px };
   * override it so the full-bleed footer reaches the window edges. */
  margin: 0 !important;
  padding: 0 !important;
  /* --ethar-page-gradient is only defined for the stock dark/night themes; for
   * the branded ethar-light/ethar-dark it's unset, so fall back to the solid
   * app bg (otherwise transparent gaps under section-less bands read green). */
  background: var(--ethar-page-gradient, var(--bg-app));
  /* The `background` shorthand above leaves background-color transparent, so the
   * scroll-bounce region at the very top/bottom flashed the white canvas. Set a
   * solid themed base AND kill the rubber-band so there's no overscroll gap. */
  background-color: var(--bg-app);
  overscroll-behavior: none;
  min-height: 100%;
}

.ethar-page {
  width: 100%;
  margin: 0;
  padding: 0;
  /* Full-bleed maps use width:100vw + negative inline margins; clip the tiny
   * scrollbar-width overflow so they never trigger a horizontal scrollbar.
   * `clip` (not `hidden`) avoids creating a scroll container. */
  overflow-x: clip;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#ethar-content {
  flex: 1 0 auto;
}

/* ── Hero (xwui-hero) ───────────────────────────────────────────────────── */
.ethar-hero-section {
  --ethar-hero-edge: 5vw;
  --ethar-hero-marker-width: clamp(2.75rem, 4.2vw, 3.75rem);
  --ethar-hero-marker-gap: var(--space-1, 0.25rem);

  position: relative;
  overflow: hidden;
  /* Community-poster fallback (theme-aware): an image we already ship, shown
   * instantly before any video loads AND behind the slides during cross-fades,
   * so the hero never reveals the previous warm photo as an orange/amber flash.
   * Posters are lightweight images — the hero never waits on a video. */
  background-color: var(--bg-app);
  background-image: url('/media/community-loops/v01_boulevard/photo.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
html[data-theme='ethar-dark'] .ethar-hero-section {
  background-image: url('/media/community-loops/v02_cinema/photo.webp');
}

/* Cross-fading video carousel behind the hero copy. Light cut (V01) in the
 * light theme, dark cut (V02) in the dark theme — sourced by heroCarousel.ts. */
.ethar-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ethar-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ethar-hero__slide[data-active] {
  opacity: 1;
}
.ethar-hero__video,
.ethar-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  background-color: color-mix(in srgb, var(--ethar-teal, #0f3b38) 22%, #000);
}

.ethar-hero {
  /* xwui-hero design tokens (see XWUIHero.css) — white type on the photo. */
  --xwui-color-text-primary: #fff;
  --xwui-color-text-secondary: rgba(255, 255, 255, 0.92);
  --xwui-layout-max-width: none;

  background: transparent;
  position: relative;
  z-index: 2; /* above the video + amber wash */
}

.ethar-hero .xwui-hero__inner {
  min-height: clamp(360px, 52vh, 500px);
  grid-template-columns: 1fr;
  padding-left: var(--ethar-hero-edge);
  padding-right: var(--ethar-hero-edge);
}

.ethar-hero .xwui-hero__text {
  /* Pin the copy to the PHYSICAL right — the empty-sky safe box — in BOTH
   * languages. `end` flipped it to the left (onto the towers) in Arabic; `right`
   * is direction-independent so RTL and LTR both sit in the clear zone. */
  justify-self: right;
  align-items: flex-end;
  max-width: min(46vw, 40rem);
  text-align: right;
  direction: rtl;
}

/* Larger hero subtitle — the lead line under the headline. */
.ethar-hero .xwui-hero__subtitle {
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.9;
}

html[dir='rtl'] .ethar-hero .xwui-hero__title {
  width: 100%;
  text-align: right;
}

html[dir='ltr'] .ethar-hero .xwui-hero__text {
  direction: ltr;
  text-align: left;
}

html[dir='ltr'] .ethar-hero .xwui-hero__title {
  width: 100%;
  text-align: left;
}

/* Desktop: a tall, full-viewport-ish hero. The section is fixed to 80vh and the
 * xwui-hero fills it so the (now vertically centred) copy centres within the
 * whole banner rather than just its min-height box. */
@media (min-width: 961px) {
  .ethar-hero-section {
    height: 80vh;
  }
  .ethar-hero,
  .ethar-hero .xwui-hero__inner {
    height: 100%;
  }
}

@media (max-width: 60rem) {
  .ethar-hero-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: #050b17;
    background-image: none !important;
  }
  .ethar-hero__slides {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    aspect-ratio: 1512 / 958;
    overflow: hidden;
  }
  .ethar-hero__slides picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .ethar-hero__img {
    object-fit: cover !important;
    object-position: left center !important;
  }
  .ethar-hero {
    order: 1;
    width: 100%;
    background: #050b17;
  }
  .ethar-hero,
  .ethar-hero .xwui-hero__inner {
    min-height: 0;
  }
  .ethar-hero .xwui-hero__inner {
    display: flex;
    align-items: flex-start;
    padding: clamp(6rem, 18vw, 8rem) clamp(1.25rem, 6vw, 2rem)
      clamp(2rem, 9vw, 3rem);
  }
  .ethar-hero .xwui-hero__text {
    width: 100%;
    max-width: min(100%, 34rem);
  }
  .ethar-hero .xwui-hero__title {
    max-width: 100%;
    font-size: clamp(2.6rem, 12vw, 4.4rem) !important;
    line-height: 1.05 !important;
  }
  .ethar-hero .xwui-hero__subtitle {
    max-width: 100%;
    font-size: clamp(1rem, 4.5vw, 1.35rem) !important;
    line-height: 1.65;
  }
}

@media (max-width: 40rem) {
  .ethar-hero-section {
    min-height: 0;
  }
  .ethar-hero,
  .ethar-hero .xwui-hero__inner {
    min-height: 0;
  }
}

.ethar-hero-markers {
  position: absolute;
  left: var(--ethar-hero-edge);
  bottom: clamp(var(--space-5, 1.25rem), 4vw, var(--space-10, 3rem));
  display: inline-flex;
  gap: var(--ethar-hero-marker-gap);
  z-index: 2; /* above the video + amber wash */
  /* white dashes over the video; sizing inherited by the generic dot */
  color: #fff;
  --ethar-dot-width: var(--ethar-hero-marker-width);
}

/* ── Carousel dots (src/app/carousel.ts) ────────────────────────────────────
 * Low-profile dash that is ALSO the click target and the progress "play line".
 * A <span> (not <button>) so the global glass-button styling never touches it;
 * role=button + tabindex keep it keyboard-operable. Colour comes from the
 * container via currentColor, so the same dot reads on the hero video (white)
 * and the about section (accent). Padding gives a taller hit area than the 2px
 * bar. */
.ethar-carousel-dot {
  display: inline-flex;
  align-items: center;
  width: var(--ethar-dot-width, 2.75rem);
  padding: 8px 0;
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0;
}
.ethar-carousel-dot__track {
  position: relative;
  width: 100%;
  height: 2px;
  background: color-mix(in srgb, currentColor 38%, transparent);
  overflow: hidden;
}
.ethar-carousel-dot[data-active] .ethar-carousel-dot__track {
  background: color-mix(in srgb, currentColor 28%, transparent);
}
.ethar-carousel-dot:hover .ethar-carousel-dot__track,
.ethar-carousel-dot:focus-visible .ethar-carousel-dot__track {
  background: color-mix(in srgb, currentColor 60%, transparent);
}
.ethar-carousel-dot:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 60%, transparent);
  outline-offset: 4px;
}
.ethar-carousel-dot__fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
html[dir='rtl'] .ethar-carousel-dot__fill {
  transform-origin: right center;
}

/* ── Page loader ──────────────────────────────────────────────────────────── */
.ethar-loader {
  --ethar-loader-bg: #07101d;
  --ethar-loader-panel: rgb(255 248 242 / 0.07);
  --ethar-loader-line: rgb(212 193 173 / 0.3);
  --ethar-loader-accent: #d4c1ad;

  display: grid;
  place-items: center;
  min-height: 68vh;
  padding: clamp(3rem, 8vw, 6rem) var(--space-5, 1.25rem);
  background:
    linear-gradient(180deg, rgb(7 16 29 / 0.98) 0%, rgb(52 36 31 / 0.96) 100%);
  color: #fff8f2;
}

.ethar-loader__panel {
  width: min(100%, 21rem);
  min-height: 18rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.25rem;
  padding: 2rem;
  border: 1px solid rgb(255 248 242 / 0.12);
  border-radius: 0;
  background: var(--ethar-loader-panel);
  box-shadow: 0 1.6rem 4rem rgb(0 0 0 / 0.24);
}

.ethar-loader__logo {
  width: min(12rem, 64vw);
  height: auto;
  filter: invert(1) brightness(1.08);
}

.ethar-loader__ring {
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--ethar-loader-line);
  border-top-color: var(--ethar-loader-accent);
  border-radius: 50%;
  animation: ethar-loader-spin 0.9s linear infinite;
}

.ethar-loader__label {
  color: rgb(255 248 242 / 0.9);
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

.ethar-loader__bar {
  position: relative;
  width: min(11rem, 64vw);
  height: 2px;
  overflow: hidden;
  background: rgb(255 248 242 / 0.16);
}

.ethar-loader__bar span {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 42%;
  background: var(--ethar-loader-accent);
  animation: ethar-loader-bar 1.35s ease-in-out infinite;
}

html[dir='rtl'] .ethar-loader__bar span {
  left: auto;
  right: 0;
}

@keyframes ethar-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ethar-loader-bar {
  0% {
    transform: translateX(-110%);
  }
  50% {
    transform: translateX(65%);
  }
  100% {
    transform: translateX(250%);
  }
}

html[dir='rtl'] .ethar-loader__bar span {
  animation-name: ethar-loader-bar-rtl;
}

@keyframes ethar-loader-bar-rtl {
  0% {
    transform: translateX(110%);
  }
  50% {
    transform: translateX(-65%);
  }
  100% {
    transform: translateX(-250%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ethar-loader__ring,
  .ethar-loader__bar span {
    animation: none !important;
  }
}

/* ── Background media (see src/app/videos.ts) ───────────────────────────────
 * The looping community/project videos and their still-photo counterparts.
 * `.ethar-vid` / `.ethar-img` are the shared hooks the runtime uses to source
 * the right light/dark cut (and, for videos, play/pause on scroll). Both cover
 * their slot; each slot carries its own aspect-ratio. */
.ethar-vid,
.ethar-img {
  display: block;
  width: 100%;
  object-fit: cover;
  /* Tinted placeholder while the poster / first frame / image loads. */
  background-color: color-mix(in srgb, var(--ethar-teal, #0f3b38) 22%, #000);
}

/* Small slots that show an optimized still (WebP) instead of a video. */
.ethar-project-card__img {
  aspect-ratio: 7 / 8;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}
.ethar-news-item__img {
  aspect-ratio: 3 / 2;
}

/* ── About intro (xwui-grid) ──────────────────────────────────────────────
 * Two-column content/media. xwui-grid owns the layout; this layer scopes
 * spacing, brand colours, and the image's full-bleed treatment. */
.ethar-about-section {
  /* 5% | 35% media | 10% gap | 40% copy | 10%. */
  --ethar-about-column-gap: clamp(3rem, 9vw, 7rem);
  /* Cool light gradient: flat top half, fading into a warm grey toward the
     bottom — sampled from the mockup (references/home2.png). */
  --ethar-about-bg: linear-gradient(
    180deg,
    #e7eeec 0%,
    #e7eeec 50%,
    #b4ada7 100%
  );
  /* Light-theme brand colours sampled from the mockup: near-black heading +
     body, warm bronze for the tagline and the bold intro. Dark-theme values
     are overridden below. */
  --ethar-about-title-color: #0d121b;
  --ethar-about-lead-color: #5f4338;
  --ethar-about-intro-color: #5f4338;
  --ethar-about-copy-color: #1e232d;
  --ethar-about-dot-muted: #cdc7bf;
  --ethar-about-dot-active: #5f4338;

  background: var(--ethar-about-bg);
  padding-block: clamp(2.75rem, 7vw, 6.25rem);
  /* Logical insets so the gutters mirror with the language: in RTL the copy
   * (inline-start) side gets the larger 10% gutter; in LTR it flips. */
  padding-inline: clamp(1.5rem, 7vw, 7rem);

  /* Copy type scale — bumped so the about block reads larger overall. */
  --ethar-about-title-size: clamp(2.25rem, 6vw, 4.75rem);
  --ethar-about-lead-size: clamp(1.05rem, 2vw, 1.55rem);
  --ethar-about-intro-size: clamp(1rem, 1.8vw, 1.4rem);
  --ethar-about-body-size: clamp(1rem, 1.3vw, 1.25rem);
  /* Large enough to FILL the (now wider) media column — max-width:100% on the
   * element clamps it to the column, so the carousel reads as the big visual. */
  --ethar-about-media-size: min(52vw, 44rem);
}

/* No dark variant on purpose. The site is locked to the ethar-dark theme, but
   the about block is a permanent LIGHT surface to match the mockup
   (references/home2.png): white-to-warm-grey gradient with black + bronze text.
   This rule overrides the dark theme so the light palette wins in every theme. */
html[data-theme='ethar-dark'] .ethar-about-section,
html[data-theme='dark'] .ethar-about-section,
html[data-theme='night'] .ethar-about-section {
  --ethar-about-bg: linear-gradient(
    180deg,
    #e7eeec 0%,
    #e7eeec 50%,
    #b4ada7 100%
  );
  --ethar-about-title-color: #0d121b;
  --ethar-about-lead-color: #5f4338;
  --ethar-about-intro-color: #5f4338;
  --ethar-about-copy-color: #1e232d;
  --ethar-about-dot-muted: #cdc7bf;
  --ethar-about-dot-active: #5f4338;
}

.ethar-about {
  width: 100%;
  margin: 0;
}

/* The <xwui-grid> custom-element host stamps dir="ltr" on itself, which the
 * inner grid div would otherwise inherit — pinning the columns to LTR in both
 * languages. Set the grid container's own direction per page direction (same
 * approach as the projects/stats/news sections) so the copy/media columns
 * swap sides with the language: copy on the reading-start side in both. */
html[dir='rtl'] .ethar-about {
  direction: rtl;
}
html[dir='ltr'] .ethar-about {
  direction: ltr;
}

.ethar-about__media {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: var(--ethar-about-media-size);
  max-width: 100%;
  justify-self: start;
}
html[dir='ltr'] .ethar-about__media {
  justify-self: end;
}

/* Cross-fading carousel slides (square). The container owns the 1:1 box; each
 * slide stacks absolutely and fades between unique clips. */
.ethar-about__slides {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
}
.ethar-about__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ethar-about__slide[data-active] {
  opacity: 1;
}
.ethar-about__video,
.ethar-about__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--ethar-teal, #0f3b38) 22%, #000);
}

.ethar-about__markers {
  display: inline-flex;
  gap: var(--space-1, 0.25rem);
  /* Controls sit on the inline-END side (opposite the image's start edge), so
     they mirror with the language along with everything else. */
  justify-self: end;
  /* accent dashes read on both the light and dark about surface */
  color: var(--ethar-about-dot-active);
  --ethar-dot-width: clamp(2.5rem, 4vw, 3rem);
}

.ethar-about__markers .ethar-carousel-dot__track {
  background: var(--ethar-about-dot-muted);
}
.ethar-about__markers
  .ethar-carousel-dot[data-active]
  .ethar-carousel-dot__track,
.ethar-about__markers .ethar-carousel-dot:hover .ethar-carousel-dot__track,
.ethar-about__markers
  .ethar-carousel-dot:focus-visible
  .ethar-carousel-dot__track {
  background: var(--ethar-about-dot-muted);
}
.ethar-about__markers .ethar-carousel-dot__fill {
  background: var(--ethar-about-dot-active);
}

.ethar-about__copy {
  /* Text direction + alignment follow the page direction (no hard-coding), so
   * the column mirrors when the language switches. */
  text-align: start;
  max-width: 48rem;
  justify-self: end;
}
html[dir='rtl'] .ethar-about__copy {
  direction: rtl;
  text-align: right;
}
html[dir='ltr'] .ethar-about__copy {
  direction: ltr;
  text-align: left;
  justify-self: start;
}

/* Typography family flows from <xwui-typography>'s variant; this layer sets
 * brand colour, spacing, and the bumped brand size scale. Parent-section
 * selectors bump specificity to 0,2,0 so these win over the component classes. */
.ethar-about-section .ethar-about__title {
  color: var(--ethar-about-title-color);
  font-size: var(--ethar-about-title-size);
  line-height: 1.05;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}

.ethar-about-section .ethar-about__lead {
  color: var(--ethar-about-lead-color);
  font-size: var(--ethar-about-lead-size);
  line-height: 1.65;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

/* Bold lead paragraph (bronze, like the tagline above it) — generous gap below
   so it separates clearly from the lighter body paragraphs. */
.ethar-about-section .ethar-about__intro {
  color: var(--ethar-about-intro-color);
  font-size: var(--ethar-about-intro-size);
  line-height: 1.8;
  margin: 0 0 clamp(2.25rem, 5vw, 3.75rem);
}

/* Two body paragraphs with a large gap between them; the last sits flush. */
.ethar-about-section .ethar-about__body {
  color: var(--ethar-about-copy-color);
  /* !important so xwui-typography-body can't pull this below the token size. */
  font-size: var(--ethar-about-body-size) !important;
  line-height: 1.9;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.ethar-about-section .ethar-about__body:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 60rem) {
  .ethar-about-section {
    --ethar-about-column-gap: clamp(2rem, 7vw, 3.5rem);
    --ethar-about-title-size: clamp(2.35rem, 10vw, 3.8rem);
    --ethar-about-lead-size: clamp(1rem, 4.6vw, 1.35rem);
    --ethar-about-intro-size: clamp(0.98rem, 4.3vw, 1.25rem);
    --ethar-about-body-size: clamp(0.95rem, 4vw, 1.12rem);
    --ethar-about-media-size: min(100%, 38rem);
    padding-block: clamp(2.75rem, 10vw, 5rem);
    padding-inline: clamp(1.25rem, 6vw, 2.5rem);
  }
  .ethar-about {
    grid-template-columns: 1fr !important;
    row-gap: clamp(2rem, 7vw, 3.5rem) !important;
  }
  .ethar-about__copy,
  html[dir='ltr'] .ethar-about__copy {
    width: min(100%, 42rem);
    max-width: 100%;
    justify-self: center;
  }
  html[dir='rtl'] .ethar-about__copy {
    justify-self: center;
  }
  .ethar-about__media,
  html[dir='ltr'] .ethar-about__media {
    width: var(--ethar-about-media-size);
    justify-self: center;
  }
  .ethar-about__slides {
    aspect-ratio: 4 / 3;
  }
  .ethar-about-section .ethar-about__title {
    margin-bottom: clamp(1.2rem, 5vw, 2rem);
  }
  .ethar-about-section .ethar-about__lead {
    margin-bottom: clamp(1rem, 4.5vw, 1.75rem);
  }
  .ethar-about-section .ethar-about__intro {
    margin-bottom: clamp(1.5rem, 6vw, 2.5rem);
  }
}

@media (max-width: 40rem) {
  .ethar-about-section {
    --ethar-about-media-size: 100%;
  }
  .ethar-about__slides {
    aspect-ratio: 1 / 1;
  }
  .ethar-about-section .ethar-about__body {
    line-height: 1.75;
  }
}

/* ── Statistics band ──────────────────────────────────────────────────────
 * Static gradient composition from references/home3.png: copy | figure | title
 * on desktop, then a centered stack on narrow screens. */
.ethar-stats-section {
  --ethar-stats-ink: #f7f5f2;
  --ethar-stats-title-size: clamp(2.79rem, 4.43vw, 5rem);
  --ethar-stats-value-size: clamp(3.57rem, 5.43vw, 6.71rem);
  --ethar-stats-copy-size: clamp(1.04rem, 1.46vw, 1.82rem);
  --ethar-stats-side-gap: clamp(3rem, 7.5vw, 8.75rem);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(13.5rem, 13.7vw, 17.5rem);
  padding-block: clamp(2.1rem, 3.2vw, 3.8rem);
  padding-inline: clamp(2rem, 8vw, 11.5rem);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #050b17 0%,
    #0a0d18 46%,
    #17151c 72%,
    #392a28 100%
  );
  color: var(--ethar-stats-ink);
}

.ethar-stats__panel {
  width: 100%;
  max-width: 104rem;
  margin-inline: auto;
}

.ethar-stats {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto minmax(18rem, 1fr);
  grid-template-areas: 'copy value title';
  align-items: center;
  justify-items: center;
  column-gap: var(--ethar-stats-side-gap);
  direction: ltr;
}

html[dir='ltr'] .ethar-stats {
  grid-template-areas: 'title value copy';
}

.ethar-stats__copy {
  grid-area: copy;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(0.35rem, 0.65vw, 0.7rem);
  text-align: right;
  color: var(--ethar-stats-ink);
}

html[dir='ltr'] .ethar-stats__copy {
  align-items: flex-start;
  text-align: left;
  direction: ltr;
}

html[dir='ltr'] .ethar-stats-section {
  --ethar-stats-copy-size: clamp(0.9rem, 1.1vw, 1.3rem);
}

.ethar-stats-section .ethar-stats__label,
.ethar-stats-section .ethar-stats__detail {
  margin: 0;
  color: var(--ethar-stats-ink);
  font-size: var(--ethar-stats-copy-size);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
}

html[dir='ltr'] .ethar-stats-section .ethar-stats__label,
html[dir='ltr'] .ethar-stats-section .ethar-stats__detail {
  max-width: clamp(18rem, 26vw, 32rem);
  white-space: normal;
}

.ethar-stats__value-wrap {
  grid-area: value;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ethar-stats-section .ethar-stats__value {
  margin: 0;
  color: var(--ethar-stats-ink);
  font-family:
    'Parma W01 Display', 'Helvetica', 'Helvetica Neue', sans-serif !important;
  font-size: var(--ethar-stats-value-size);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* KPI numbers are rendered as <xwui-statistic> figures so they count up from 0
 * when their band scrolls into view (driven by app/countup.ts). Make the figure's
 * value + affix elements INHERIT the surrounding heading styling so the animated
 * figure is visually identical to the static number it replaced. */
.ethar-stats-section .ethar-stats__value .xwui-statistic-value,
.ethar-stats-section .ethar-stats__value .xwui-statistic-suffix,
.ethar-stats-section .ethar-stats__value .xwui-statistic-prefix,
.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-stats-section .ethar-stats__value .xwui-statistic-content,
.ethar-projects-hero__metric .xwui-statistic-content {
  justify-content: center;
  gap: 0.04em;
}

.ethar-stats__title-wrap {
  grid-area: title;
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  direction: rtl;
}

.ethar-stats-section .ethar-stats__title {
  margin: 0;
  color: var(--ethar-stats-ink);
  font-size: var(--ethar-stats-title-size);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: right;
}

html[dir='ltr'] .ethar-stats__title-wrap {
  justify-self: start;
  justify-content: flex-start;
  direction: ltr;
}

html[dir='ltr'] .ethar-stats-section .ethar-stats__title {
  text-align: left;
}

@media (max-width: 76rem) {
  .ethar-stats-section {
    min-height: 0;
    padding-block: clamp(3rem, 7vw, 5rem);
  }

  .ethar-stats {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'title'
      'value'
      'copy';
    row-gap: clamp(1.25rem, 3vw, 2rem);
  }

  html[dir='ltr'] .ethar-stats {
    grid-template-areas:
      'title'
      'value'
      'copy';
  }

  .ethar-stats__copy,
  html[dir='ltr'] .ethar-stats__copy,
  .ethar-stats__title-wrap,
  html[dir='ltr'] .ethar-stats__title-wrap {
    justify-self: center;
    align-items: center;
    justify-content: center;
  }

  .ethar-stats__copy,
  html[dir='ltr'] .ethar-stats__copy,
  .ethar-stats-section .ethar-stats__title,
  html[dir='ltr'] .ethar-stats-section .ethar-stats__title {
    text-align: center;
  }
}

@media (max-width: 40rem) {
  .ethar-stats-section {
    --ethar-stats-title-size: clamp(2.14rem, 10vw, 3.39rem);
    --ethar-stats-value-size: clamp(2.71rem, 12.86vw, 3.86rem);
    --ethar-stats-copy-size: clamp(0.82rem, 3.71vw, 1.11rem);
    padding-inline: clamp(1.25rem, 6vw, 2rem);
  }

  .ethar-stats-section .ethar-stats__label,
  .ethar-stats-section .ethar-stats__detail {
    white-space: normal;
  }
}

/* ── Mock video image band ──────────────────────────────────────────────── */
.ethar-mock-video-section {
  position: relative;
  width: 100%;
  /* Match the 16:9 source so the WHOLE frame — both towers — shows uncropped on
     every screen. (Was height:100svh + object-fit:cover, which sliced the sides
     off the towers inside a tall portrait phone viewport.) max-height keeps the
     band from dominating very tall desktop viewports. */
  aspect-ratio: 16 / 9;
  max-height: 100svh;
  line-height: 0;
  overflow: hidden;
  background: #050b17;
}

.ethar-mock-video__img,
.ethar-mock-video__video {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, never cover: letterbox before cropping a tower out of frame. */
  object-fit: contain;
  object-position: center center;
  border: 0;
  border-radius: 0;
}

/* ── Full-bleed photo band (xwui-image) ────────────────────────────────── */
.ethar-media-section {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

.ethar-media__image,
.ethar-media-section xwui-image {
  display: block;
  width: 100%;
}

.ethar-media__image,
.ethar-media__image .xwui-image,
.ethar-media__image .xwui-image-loaded {
  border-radius: 0;
}

/* Play button overlay — translucent teal disc with a white triangle, centred
 * on the photo. Decorative by default; wire data-act="media-play" up to a
 * video lightbox when one ships.
 *
 * !important on background / border / backdrop-filter is unavoidable here:
 * the glass style ships a global rule
 *   :root[data-style="glass"] button:not([class*="glass"]):not([class*="xwui-"])
 * that overrides plain <button>s with a frosted background via !important.
 * Our brand class is neither glass- nor xwui-prefixed, so we win by matching
 * the same priority. */
.ethar-media__play {
  --ethar-play-size: clamp(64px, 8vw, 120px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--ethar-play-size);
  height: var(--ethar-play-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid color-mix(in srgb, #fff 70%, transparent) !important;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ethar-teal) 78%, transparent) !important;
  backdrop-filter: none !important;
  color: #fff;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
  line-height: 0;
}
.ethar-media__play:hover,
.ethar-media__play:focus-visible {
  background: var(--ethar-teal) !important;
  transform: translate(-50%, -50%) scale(1.06);
  outline: none;
}
.ethar-media__play svg {
  width: 38%;
  height: 38%;
  fill: currentColor;
  /* Optical centring — the triangle's mass sits slightly right of geometric
   * centre; nudge left so the visual centre lines up with the disc. In RTL
   * the triangle's tip still points right (forward play), so don't flip. */
  margin-inline-start: 4%;
}

/* ── 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;
}

a.ethar-news__more-btn,
.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: var(--ethar-news-cta-bg, #090b14) !important;
  color: var(--ethar-news-cta-fg, #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__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;
}

a.ethar-news__more-btn:hover,
.ethar-projects__read-more:hover,
.ethar-projects__read-more:focus-visible {
  transform: translateY(-2px);
  background: var(--ethar-news-cta-bg-hover, #161822) !important;
  color: var(--ethar-news-cta-fg, #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;
  }
}

/* ── News / "stay informed" (xwui-grid + xwui-image + xwui-button) ────────
 * Intro block, then a two-column area: the sand "latest" label at the
 * inline-start edge (right in AR, left in EN) and the news list beside it.
 * Rows are thumbnail | copy | chevron chip, separated by hairline rules.
 */
.ethar-news-section {
  --ethar-news-columns: minmax(0, 26fr) minmax(0, 74fr);
  --ethar-news-gap: clamp(1.375rem, 2.5vw, 3rem);
  --ethar-news-edge: clamp(2rem, 4vw, 4.5rem);
  --ethar-news-accent: #5b4036;
  --ethar-news-latest-color: #5b4036;
  --ethar-news-rule: #8b7a72;
  --ethar-news-bg: #fbfbfb;
  --ethar-news-inner-bg-color: #f2f2f1;
  --ethar-news-title-color: #5b4036;
  --ethar-news-lead-color: #a9a9a9;
  --ethar-news-body-color: #07101d;
  --ethar-news-section-padding-block: clamp(2.5rem, 3.5vw, 4.25rem);
  --ethar-news-text-align: left;
  --ethar-news-block-margin-inline: 0 auto;
  --ethar-news-copy-justify: start;
  --ethar-news-latest-justify: start;
  --ethar-news-thumb-w: clamp(20rem, 27vw, 31rem);
  --ethar-news-thumb-ratio: 448 / 272;
  --ethar-news-arrow-size: clamp(2rem, 2.3vw, 2.45rem);
  --ethar-news-arrow-bg: #dedede;
  --ethar-news-arrow-bg-hover: #d4d4d4;
  --ethar-news-arrow-color: #aeb0b0;
  --ethar-news-cta-bg: #090b14;
  --ethar-news-cta-bg-hover: #161822;
  --ethar-news-cta-fg: #ffffff;

  background: var(--ethar-news-bg) !important;
  padding-block: 0;
  padding-inline: clamp(1.25rem, 1.5vw, 1.75rem);
}

html[data-theme='ethar-dark'] .ethar-news-section,
html[data-theme='dark'] .ethar-news-section,
html[data-theme='night'] .ethar-news-section {
  --ethar-news-bg: #fbfbfb;
  --ethar-news-inner-bg-color: #f2f2f1;
  --ethar-news-title-color: #5b4036;
  --ethar-news-lead-color: #a9a9a9;
  --ethar-news-latest-color: #5b4036;
  --ethar-news-accent: #07101d;
  --ethar-news-body-color: #07101d;
  --ethar-news-rule: #8b7a72;
  --ethar-news-arrow-bg: #dedede;
  --ethar-news-arrow-bg-hover: #d4d4d4;
  --ethar-news-arrow-color: #aeb0b0;
  --ethar-news-cta-bg: #10111a;
  --ethar-news-cta-bg-hover: #1a1b24;
  --ethar-news-cta-fg: #ffffff;
}

.ethar-news-section__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 106rem;
  margin-inline: auto;
  background: var(--ethar-news-inner-bg-color) !important;
  padding-block: var(--ethar-news-section-padding-block);
  padding-inline: var(--ethar-news-edge);
}

html[dir='rtl'] .ethar-news {
  direction: rtl;
}
html[dir='rtl'] .ethar-news-section {
  --ethar-news-text-align: right;
  --ethar-news-copy-justify: end;
  --ethar-news-latest-justify: end;
}
html[dir='ltr'] .ethar-news {
  direction: ltr;
}
html[dir='ltr'] .ethar-news-section {
  --ethar-news-text-align: left;
  --ethar-news-copy-justify: start;
  --ethar-news-latest-justify: start;
}

.ethar-news > xwui-typography:has(.ethar-news__latest) {
  justify-self: end !important;
  margin-inline-start: auto !important;
}

.ethar-news__intro {
  margin-bottom: clamp(2.25rem, 3.5vw, 3.5rem);
  text-align: var(--ethar-news-text-align);
}

.ethar-news__intro::after {
  content: none;
}

.ethar-news-section .ethar-news__title {
  color: var(--ethar-news-title-color) !important;
  font-size: clamp(2.93rem, 3.86vw, 4.57rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.05;
  margin: 0 0 clamp(1rem, 1.5vw, 1.5rem);
  text-align: var(--ethar-news-text-align);
}

.ethar-news-section .ethar-news__lead {
  color: var(--ethar-news-lead-color) !important;
  font-size: 18px !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.75;
  max-width: 72rem;
  margin-block: 0;
  margin-inline: var(--ethar-news-block-margin-inline);
  text-align: var(--ethar-news-text-align);
}

.ethar-news-section .ethar-news__latest {
  color: var(--ethar-news-latest-color) !important;
  font-size: clamp(2.29rem, 3.29vw, 4rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  justify-self: end !important;
  line-height: 1.05;
  margin: 0;
  text-align: right !important;
}

.ethar-news__list {
  width: 100%;
}

/* Row: thumbnail at the inline-start, copy, chevron chip at the inline-end.
   Each row is a translucent-gold "card"; hover deepens the gold. */
/* v2 design: clean rows (image inline-end, copy, circular chevron inline-start)
   separated by hairline dividers — no card fill. */
.ethar-news-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 2.4vw, 2.875rem);
  align-items: center;
  padding: clamp(1.325rem, 2.05vw, 2.25rem) 0;
  border-radius: 0;
  background: transparent !important;
  transition: opacity 0.2s ease;
}
.ethar-news-item + .ethar-news-item {
  border-top: 1px solid var(--ethar-news-rule);
  text-decoration: none;
  color: inherit;
}
.ethar-news-item:last-of-type {
  border-bottom: 1px solid var(--ethar-news-rule);
}
a.ethar-news-item:hover {
  opacity: 0.92;
}
a.ethar-news-item:hover .ethar-news-item__arrow {
  background: color-mix(
    in srgb,
    var(--ethar-news-accent) 18%,
    var(--bg-primary)
  );
  color: var(--ethar-news-accent);
}
.ethar-news-item__cat {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ethar-news-accent);
  margin-bottom: 0.4rem;
}

.ethar-news-item__copy {
  justify-self: stretch;
  align-self: center;
  max-width: 38rem;
  text-align: var(--ethar-news-text-align);
  padding-inline: 0;
}

.ethar-news-item__media {
  width: var(--ethar-news-thumb-w);
  padding-bottom: 0;
  border-radius: 0;
  overflow: hidden;
}

.ethar-news-item__img,
.ethar-news-item__media xwui-image {
  display: block;
  width: 100%;
  aspect-ratio: var(--ethar-news-thumb-ratio);
  overflow: hidden;
  border-radius: 0 !important;
}
.ethar-news-item__img.xwui-image,
.ethar-news-item__img.xwui-image-loaded,
.ethar-news-item__img .xwui-image,
.ethar-news-item__img .xwui-image-loaded,
.ethar-news-item__media xwui-image,
.ethar-news-item__media .xwui-image-container,
.ethar-news-item__media .xwui-image-wrapper,
.ethar-news-item__media .xwui-image,
.ethar-news-item__media .xwui-image-loaded,
.ethar-news-item__media img {
  border-radius: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

.ethar-news-item .ethar-news-item__title {
  color: #07101d !important;
  font-size: clamp(1.5rem, 2.05vw, 2.1rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.35;
  margin-block: 0 clamp(0.625rem, 0.9vw, 0.85rem);
  margin-inline: 0;
  text-align: var(--ethar-news-text-align);
}

.ethar-news-item .ethar-news-item__body {
  color: var(--ethar-news-body-color) !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.75;
  max-width: 35rem;
  margin-block: 0;
  margin-inline: 0;
  text-align: var(--ethar-news-text-align);
}

/* Chevron chip — current markup uses a Material-icons span; keep the old
 * xwui-button selectors below for compatibility with older generated rows. */
.ethar-news-item .material-icons.ethar-news-item__arrow {
  --icon-size-md: clamp(1.4rem, 1.8vw, 1.8rem);
  width: var(--ethar-news-arrow-size);
  height: var(--ethar-news-arrow-size);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ethar-news-arrow-bg) !important;
  color: var(--ethar-news-arrow-color) !important;
  font-size: var(--icon-size-md);
  line-height: 1;
}
a.ethar-news-item:hover .material-icons.ethar-news-item__arrow {
  background: var(--ethar-news-arrow-bg-hover) !important;
  color: var(--ethar-news-arrow-color) !important;
}

/* Chevron chip — gray circular button with the custom V icon. */
.ethar-news-item .xwui-button.ethar-news-item__arrow {
  width: var(--ethar-news-arrow-size);
  height: var(--ethar-news-arrow-size);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ethar-news-arrow-color) !important;
}
.ethar-news-item .xwui-button.ethar-news-item__arrow:hover:not(:disabled) {
  background: transparent;
}
.ethar-news-item .ethar-news-item__arrow .xwui-item-standard-layout,
.ethar-news-item .ethar-news-item__arrow .xwui-item-primary-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ethar-news-item .ethar-news-item__arrow .xwui-item-primary-content {
  flex: 0 0 auto;
  width: var(--ethar-news-arrow-size);
  min-width: var(--ethar-news-arrow-size);
  height: var(--ethar-news-arrow-size);
  border-radius: 50%;
  background: var(--ethar-news-arrow-bg);
}
.ethar-news-item .ethar-news-item__arrow:hover .xwui-item-primary-content {
  background: var(--ethar-news-arrow-bg-hover);
}
.ethar-news-item .ethar-news-item__arrow .xwui-item-content-block {
  display: none;
}
.ethar-news-item .ethar-news-item__arrow .xwui-item-primary-content::before {
  content: '';
  display: block;
  width: clamp(15px, 1.55vw, 20px);
  height: clamp(15px, 1.55vw, 20px);
  border-right: 1.5px solid var(--ethar-news-arrow-color);
  border-bottom: 1.5px solid var(--ethar-news-arrow-color);
  transform: rotate(45deg) translate(-2px, -3px);
}

/* "See all" pill — links to the full news index. */
a.ethar-news__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(18rem, 24vw, 25rem);
  min-height: clamp(4.2rem, 5vw, 5.4rem);
  background: var(--ethar-news-cta-bg) !important;
  color: var(--ethar-news-cta-fg) !important;
  padding: 0.85rem 2.5rem;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: clamp(1.04rem, 1.5vw, 1.5rem) !important;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
a.ethar-news__more-btn:hover {
  transform: translateY(-2px);
  background: var(--ethar-news-cta-bg-hover) !important;
  color: var(--ethar-news-cta-fg) !important;
}

/* CTA — teal via scoped accent tokens (the primary variant reads them). */
.ethar-news__more {
  --accent-primary: var(--ethar-news-cta-bg);
  --accent-hover: var(--ethar-news-cta-bg-hover);
  --role-primary-bg: var(--ethar-news-cta-bg);
  --role-primary-bg-hover: var(--ethar-news-cta-bg-hover);
  --role-primary-fg: var(--ethar-news-cta-fg);

  display: flex;
  font-size: clamp(1.04rem, 1.5vw, 1.5rem) !important;
  justify-content: flex-start !important;
  margin-top: clamp(1.2rem, 2vw, 2.125rem);
}

.ethar-news__more .xwui-button.ethar-news__more-btn {
  border-right: none;
  border-inline-end: none;
  border-radius: 0;
  padding: 10px 50px;
}

.ethar-news {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.ethar-news-item--feature {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-areas: 'copy media';
  gap: clamp(1.5rem, 4vw, 4rem) !important;
  align-items: stretch !important;
  direction: ltr;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
}

html[dir='rtl'] .ethar-news-item--feature {
  grid-template-areas: 'media copy';
}

.ethar-news-item--feature + .ethar-news-item--feature,
.ethar-news-item--feature:last-of-type {
  border-top: none !important;
  border-bottom: none !important;
}

.ethar-news-item--feature .ethar-news-item__media {
  grid-area: media;
  width: 100% !important;
  height: 100%;
  min-height: clamp(24rem, 31vw, 38rem);
}

.ethar-news-item--feature .ethar-news-item__img,
.ethar-news-item--feature .ethar-news-item__media xwui-image {
  height: 100%;
  aspect-ratio: auto;
}

.ethar-news-item--feature .ethar-news-item__copy {
  grid-area: copy;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none !important;
  width: 100%;
  padding: clamp(2rem, 4vw, 4rem);
}

html[dir='rtl'] .ethar-news-item--feature .ethar-news-item__copy {
  direction: rtl;
  align-items: flex-end;
  text-align: right;
}

html[dir='ltr'] .ethar-news-item--feature .ethar-news-item__copy {
  direction: ltr;
  align-items: flex-start;
  text-align: left;
}

.ethar-news-item--feature .ethar-news-item__title,
.ethar-news-item--feature .ethar-news-item__body {
  width: 100%;
  max-width: 36rem;
  text-align: inherit !important;
}

.ethar-news-item--feature .ethar-news-item__body {
  margin-top: clamp(1rem, 2vw, 1.5rem) !important;
}

@media (max-width: 860px) {
  .ethar-news-section {
    --ethar-news-columns: minmax(0, 1fr);
    --ethar-news-gap: clamp(1.25rem, 5vw, 2rem);
    --ethar-news-edge: clamp(1rem, 5vw, 1.75rem);
    --ethar-news-section-padding-block: clamp(2rem, 8vw, 3rem);
    --ethar-news-thumb-w: 100%;
    --ethar-news-text-align: center;
    --ethar-news-latest-justify: center;
    --ethar-news-block-margin-inline: auto;
    padding-inline: 0;
  }

  .ethar-news > xwui-typography:has(.ethar-news__latest) {
    justify-self: end !important;
    margin-inline-start: auto !important;
  }

  .ethar-news-section .ethar-news__latest {
    text-align: right !important;
  }

  .ethar-news-section__inner {
    max-width: none;
  }

  .ethar-news-item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: clamp(0.9rem, 4vw, 1.4rem);
  }

  .ethar-news-item__media,
  .ethar-news-item__copy,
  .ethar-news-item .ethar-news-item__title,
  .ethar-news-item .ethar-news-item__body {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  a.ethar-news__more-btn {
    width: min(100%, 12.5rem);
  }

  .ethar-news__more {
    justify-content: flex-start !important;
  }

  .ethar-news-item--feature {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      'media'
      'copy';
    gap: 0 !important;
  }

  .ethar-news-item--feature .ethar-news-item__media {
    min-height: 0;
  }

  .ethar-news-item--feature .ethar-news-item__img,
  .ethar-news-item--feature .ethar-news-item__media xwui-image {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .ethar-news-item--feature .ethar-news-item__copy {
    padding: clamp(1.5rem, 6vw, 2rem);
  }
}

@media (max-width: 40rem) {
  .ethar-news-section__inner {
    padding-inline: clamp(1rem, 5vw, 1.5rem);
  }

  .ethar-news-section .ethar-news__lead,
  .ethar-news-item .ethar-news-item__body {
    line-height: 1.6;
  }
}

/* ── Site header ──────────────────────────────────────────────────────── */
/* The header's `position: sticky` lives on the inner .xwui-bar-site-header,
   but its custom-element HOST (<xwui-bar-site-header>) was a static ~90px box —
   so the sticky was trapped inside that short host and scrolled away after
   ~90px. Make the HOST itself sticky so the bar pins to the viewport top for
   the entire scroll. */
xwui-bar-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.xwui-bar-site-header {
  /* Pull the bar up 30px so it sits flush against the very top of the page
   * (otherwise html/body's default margin leaves a hairline gap above it). */
  margin-top: -30px;

  --xwui-bar-site-header-max-width: none;
  --xwui-bar-site-header-px: clamp(1.25rem, 4vw, 3rem);
  --ethar-header-stops: #02100e 0%, #0a2e29 38%, #335c52 72%, #8aa39b 100%;
  --bg-app: linear-gradient(to left, var(--ethar-header-stops));
  --text-primary: #fff;
  --text-secondary: color-mix(in srgb, #fff 88%, transparent);
  --role-surface-fg: #fff;
  --bg-hover: color-mix(in srgb, #fff 12%, transparent);
  --border-light: transparent;
  --bg-elevated: var(--bg-app);
}
html[dir='ltr'] .xwui-bar-site-header {
  --bg-app: linear-gradient(to right, var(--ethar-header-stops));
}

html[data-theme='ethar-dark'] .xwui-bar-site-header,
html[data-theme='dark'] .xwui-bar-site-header,
html[data-theme='night'] .xwui-bar-site-header {
  --ethar-header-ink: #040918;
  --ethar-header-warm: #d8a16d;
  --ethar-header-stops:
    var(--ethar-header-ink) 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%,
    var(--ethar-header-warm) 100%;
}

html[dir='rtl'] .xwui-bar-site-header,
html[dir='rtl'] .xwui-bar-site-header__inner {
  direction: rtl;
}

/* Bar inset: 20px above, 0px below — overrides the component's symmetric
 * padding so the brand wordmark sits with breathing room at the top while
 * the bar's bottom edge sits flush against the page content beneath it. */
.xwui-bar-site-header .xwui-bar-site-header__inner {
  padding-top: 20px;
  padding-bottom: 0;
}

.xwui-bar-site-header .xwui-bar-site-header__link {
  font-weight: 600;
  /* Larger nav labels in both languages, per brand direction. */
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
}
/* English (LTR) labels are uppercase + longer, so they read bigger than the
 * Arabic ones — dial them down a notch so the bar stays balanced. */
html[dir='ltr'] .xwui-bar-site-header .xwui-bar-site-header__link {
  font-size: clamp(0.9rem, 1.05vw, 1.12rem);
}
.xwui-bar-site-header .xwui-bar-site-header__link:hover,
.xwui-bar-site-header .xwui-bar-site-header__link.is-active {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 0.55em;
  text-decoration-thickness: 1px;
}

.xwui-bar-site-header .xwui-bar-site-header__drawer,
.xwui-bar-site-header .xwui-bar-site-header__dropdown {
  background: var(--bg-app);
}

.xwui-bar-site-header .xwui-bar-site-header__scrim {
  background: color-mix(in srgb, #02100e 55%, transparent);
}

/* ── Site footer ──────────────────────────────────────────────────────── */
.xwui-bar-site-footer {
  --xwui-bar-site-footer-max-width: none;
  --xwui-bar-site-footer-px: 0;
  --ethar-footer-cols: 1.6fr 0.9fr 1.15fr;
  --ethar-footer-gap: clamp(2rem, 5vw, 5rem);
  --ethar-footer-inset: 50px;
  --bg-secondary:
    radial-gradient(
      115% 140% at -8% 30%,
      color-mix(in srgb, var(--ethar-teal) 92%, #000) 0%,
      color-mix(in srgb, var(--ethar-teal) 62%, #000) 24%,
      color-mix(in srgb, #0e2722 78%, #000) 42%,
      transparent 62%
    ),
    linear-gradient(90deg, #05201d 0%, #020806 44%, #020806 100%);
  --text-primary: #fff;
  --text-secondary: #fff;
  --text-tertiary: #fff;
  --accent-primary: #fff;
  --border-light: transparent;
}

html[data-theme='ethar-dark'] .xwui-bar-site-footer,
html[data-theme='dark'] .xwui-bar-site-footer,
html[data-theme='night'] .xwui-bar-site-footer {
  --bg-secondary: linear-gradient(
    180deg,
    #060c1a 0%,
    #0b1222 49%,
    #1c171b 73%,
    #402d27 100%
  );
}

html[dir='rtl'] .xwui-bar-site-footer {
  direction: rtl;
}

.xwui-bar-site-footer .xwui-bar-site-footer__inner {
  grid-template-columns: var(--ethar-footer-cols);
  column-gap: var(--ethar-footer-gap);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}

.xwui-bar-site-footer .xwui-bar-site-footer__col-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 1.4rem;
}
.xwui-bar-site-footer .xwui-bar-site-footer__col-list {
  gap: 1rem;
}
.xwui-bar-site-footer .xwui-bar-site-footer__col-link {
  font-size: 1rem;
}
.xwui-bar-site-footer__col-link[href*='maps.google'] {
  margin-top: 1.5rem;
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xwui-bar-site-footer .xwui-bar-site-footer__bottom {
  display: grid;
  grid-template-columns: var(--ethar-footer-cols);
  column-gap: var(--ethar-footer-gap);
  align-items: center;
  padding-bottom: var(--ethar-footer-inset);
}
.xwui-bar-site-footer .xwui-bar-site-footer__bottom-left {
  grid-column: 1;
  padding-inline-start: var(--ethar-footer-inset);
}
.xwui-bar-site-footer .xwui-bar-site-footer__bottom-right {
  grid-column: 3;
}

/* Legal links in the footer bottom row (FAQ · Privacy/Terms). White to match
 * the footer type; underline on hover. */
.ethar-footer-legal-link {
  color: inherit;
  text-decoration: none;
}
/* Footer fine print (copyright + legal links) rendered 13.6px EN / 15.6px AR —
   too small. Lift both locales to a comfortable floor. */
.xwui-bar-site-footer .xwui-bar-site-footer__bottom-left,
.xwui-bar-site-footer .xwui-bar-site-footer__bottom-right,
.ethar-footer-legal-link {
  font-size: clamp(0.95rem, 0.92vw, 1.05rem) !important;
}
.ethar-footer-legal-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ethar-footer-legal-sep {
  opacity: 0.5;
  margin-inline: 0.4rem;
}

/* Brand block: logo at top, social row pushed to the bottom. */
.xwui-bar-site-footer .xwui-bar-site-footer__brand {
  display: flex;
  flex-direction: column;
  padding-inline-start: var(--ethar-footer-inset);
}
.xwui-bar-site-footer .xwui-bar-site-footer__brand-desc {
  max-width: none;
  margin-top: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Ethar logo — rendered via <xwui-logo>. Brand decision: the wordmark is
 * ALWAYS white, regardless of page theme or surface, so we force-invert the
 * source SVG (which ships black/monochrome) unconditionally. This wins over
 * any conditional invert the component might apply for data-theme="dark". */
.ethar-logo {
  display: inline-flex;
  align-items: center;
}

.ethar-logo .xwui-logo-svg-host,
.ethar-logo .xwui-logo-img {
  filter: invert(1) brightness(1.05) !important;
}

.ethar-footer-social {
  display: inline-flex;
  direction: ltr;
  gap: 1.1rem;
  margin-top: auto;
  align-self: flex-start;
}
.ethar-footer-social a {
  display: inline-flex;
  transition: opacity 0.15s ease;
}
.ethar-footer-social svg {
  width: 40px;
  height: 40px;
}
.ethar-footer-social a:hover {
  opacity: 0.8;
}

@media (max-width: 56rem) {
  .xwui-bar-site-footer {
    --ethar-footer-cols: 1fr;
    --ethar-footer-gap: clamp(1.75rem, 7vw, 2.75rem);
    --ethar-footer-inset: clamp(1.25rem, 6vw, 2rem);
    padding-inline: 0 !important;
    overflow: hidden;
  }

  .xwui-bar-site-footer
    .xwui-bar-site-footer__inner:not(.xwui-bar-site-footer__inner--bottom) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: var(--ethar-footer-gap) !important;
    column-gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    justify-items: center !important;
    text-align: center !important;
    padding: clamp(2.25rem, 9vw, 3.5rem) var(--ethar-footer-inset)
      clamp(1.75rem, 7vw, 2.5rem) !important;
    box-sizing: border-box;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__brand {
    padding-inline-start: 0 !important;
    min-width: 0;
    align-items: center !important;
    text-align: center !important;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__brand-desc {
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    gap: clamp(1.5rem, 6vw, 2.25rem);
  }

  html[dir='rtl'] .xwui-bar-site-footer .xwui-bar-site-footer__brand-desc {
    align-items: center !important;
  }

  .xwui-bar-site-footer .ethar-logo {
    max-width: min(100%, 14rem);
    margin-inline: auto !important;
  }

  .xwui-bar-site-footer .ethar-logo .xwui-logo-svg-host,
  .xwui-bar-site-footer .ethar-logo .xwui-logo-img {
    max-width: 100%;
    height: auto;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__col {
    min-width: 0;
    justify-self: center !important;
    text-align: center !important;
  }

  html[dir='rtl'] .xwui-bar-site-footer .xwui-bar-site-footer__col {
    text-align: center !important;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__col-title {
    margin-bottom: 0.85rem !important;
    font-size: 1rem;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__col-list {
    align-items: center !important;
    justify-items: center !important;
    gap: 0.7rem !important;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__col-link {
    overflow-wrap: anywhere;
    text-align: center !important;
  }

  .xwui-bar-site-footer__col-link[href*='maps.google'] {
    margin-top: 0.75rem !important;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 1rem !important;
    column-gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 1.5rem var(--ethar-footer-inset) clamp(2rem, 8vw, 3rem) !important;
    box-sizing: border-box;
    text-align: center !important;
    justify-items: center !important;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__bottom-left,
  .xwui-bar-site-footer .xwui-bar-site-footer__bottom-right {
    grid-column: auto !important;
    padding-inline-start: 0 !important;
    min-width: 0;
    text-align: center !important;
    justify-self: center !important;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__bottom-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem;
    align-items: center;
    justify-content: center !important;
  }

  html[dir='rtl'] .xwui-bar-site-footer .xwui-bar-site-footer__bottom {
    text-align: center !important;
  }

  html[dir='rtl'] .xwui-bar-site-footer .xwui-bar-site-footer__bottom-right {
    justify-content: center !important;
  }

  .ethar-footer-social {
    margin-top: 0 !important;
    align-self: center !important;
    justify-content: center !important;
    gap: 0.85rem;
  }

  html[dir='rtl'] .ethar-footer-social {
    align-self: center !important;
  }

  .ethar-footer-social svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 36rem) {
  .xwui-bar-site-footer {
    --ethar-footer-inset: clamp(1rem, 5vw, 1.35rem);
  }

  .xwui-bar-site-footer
    .xwui-bar-site-footer__inner:not(.xwui-bar-site-footer__inner--bottom) {
    padding-inline: var(--ethar-footer-inset) !important;
  }

  .xwui-bar-site-footer .xwui-bar-site-footer__col-link,
  .xwui-bar-site-footer .xwui-bar-site-footer__bottom {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .ethar-footer-social svg {
    width: 28px;
    height: 28px;
  }

  .ethar-footer-legal-sep {
    display: none;
  }

  .ethar-footer-legal-link {
    display: inline-flex;
    margin-inline-end: 0.8rem;
  }
}

/* Static location card — offline export fallback for the Leaflet map (which
 * needs online tiles). */
.ethar-map-static {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 200px;
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--ethar-teal, #0f3b38) 10%,
    var(--bg-primary)
  );
  border: 1px solid
    color-mix(in srgb, var(--ethar-teal, #0f3b38) 22%, transparent);
  color: var(--text-primary);
  font-weight: 600;
  text-align: center;
  padding: 1.5rem;
}
.ethar-map-static__pin {
  font-size: 1.6rem;
}

/* ── Project detail page (src/views/project.ts) ─────────────────────────────
 * Theme-aware (light/dark) marketing layout. Section-scoped tokens keep it on
 * brand; logical properties + dir on .ethar-pp mirror it with the language. */
.ethar-pp {
  --ethar-pp-edge: clamp(1.25rem, 6vw, 6rem);
  --ethar-pp-teal: var(--color-info, var(--ethar-teal));
  width: 100%;
  background: var(--bg-app);
}

/* Hero: looping project loop + scrim + white logo + meta. */
.ethar-pp__hero {
  position: relative;
  min-height: clamp(420px, 64vh, 680px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #000;
}
.ethar-pp__hero-video,
.ethar-pp__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Hero background video carousel (cross-fading project loops, wired by carousel.ts). */
.ethar-pp__hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ethar-pp__hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ethar-pp__hero-slide[data-active] {
  opacity: 1;
}
.ethar-pp__hero-markers {
  position: absolute;
  z-index: 3;
  top: clamp(1rem, 3vw, 2rem);
  inset-inline-end: var(--ethar-pp-edge);
  display: inline-flex;
  gap: var(--space-1, 0.25rem);
  color: #fff;
  --ethar-dot-width: clamp(2.5rem, 4vw, 3.25rem);
}
.ethar-pp__hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      120% 90% at 50% 30%,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.55)
    ),
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 55%);
  pointer-events: none;
}
.ethar-pp__hero-logo {
  position: absolute;
  inset: 0 0 18%;
  z-index: 2;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: min(46%, 360px) auto;
  mask-size: min(46%, 360px) auto;
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.ethar-pp__hero-meta {
  position: relative;
  z-index: 3;
  padding: var(--ethar-pp-edge);
  padding-block-start: 0;
  text-align: start;
  color: #fff;
}
.ethar-pp__hero-meta .ethar-pp__hero-name {
  color: #fff;
  margin: 0 0 0.6rem;
  font-size: clamp(2.6rem, 5vw, 4.75rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.05;
}
.ethar-pp__hero-meta .ethar-pp__hero-tagline {
  color: #fff;
  margin: 0 0 0.4rem;
}
.ethar-pp__hero-meta .ethar-pp__hero-loc {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.ethar-pp__hero-status {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ethar-pp-teal) 85%, transparent);
  color: #fff;
  font-size: 0.85rem;
}

/* Animated KPI band. */
.ethar-pp__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--ethar-pp-edge);
  background: var(--bg-primary);
}
.ethar-pp__stat.xwui-statistic {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.ethar-pp__stat .xwui-statistic-title {
  color: var(--text-secondary);
  /* Was clamp(0.85rem…) → 13.6px EN on phones. Lift these KPI labels. */
  font-size: clamp(1rem, 1.2vw, 1.2rem);
}
.ethar-pp__stat .xwui-statistic-value {
  color: var(--ethar-pp-teal);
  font-family:
    'Nassim Arabic', 'Helvetica', 'Helvetica Neue', sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Sections. */
.ethar-pp__section {
  padding: clamp(2.5rem, 6vw, 5rem) var(--ethar-pp-edge);
}
.ethar-pp .ethar-pp__h2 {
  color: var(--ethar-pp-teal);
  margin: 0 0 clamp(1rem, 2.5vw, 2rem);
}
.ethar-pp__lead {
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 0 1rem;
  line-height: 1.9;
}
.ethar-pp__note {
  color: var(--text-tertiary);
  margin: 0;
}

/* Overview: copy + facts table. */
.ethar-pp__overview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.ethar-pp__facts {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.ethar-pp__fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid
    color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.ethar-pp__fact dt {
  color: var(--text-secondary);
}
.ethar-pp__fact dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
  text-align: end;
}

/* Masterplan + gallery images. */
.ethar-pp__masterplan-fig {
  margin: 0;
}
.ethar-pp__masterplan-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.ethar-pp__gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.ethar-pp__shot {
  margin: 0;
}
.ethar-pp__shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Amenities pills. */
.ethar-pp__amenities-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(220px, 26vw, 300px), 1fr)
  );
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.ethar-pp__amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ethar-pp-teal) 9%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--ethar-pp-teal) 20%, transparent);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.ethar-pp__amenity:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px
    color-mix(in srgb, var(--ethar-pp-teal) 18%, transparent);
}
.ethar-pp__amenity-icon {
  color: var(--ethar-pp-teal);
  font-size: clamp(2.6rem, 5vw, 3.6rem) !important;
  line-height: 1;
}
.ethar-pp__amenity .ethar-pp__amenity-label {
  color: var(--text-primary);
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

/* Location. */
/* Location headline — city · district, large and centred. */
.ethar-pp__loc-headline {
  color: var(--ethar-pp-teal);
  text-align: center;
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  line-height: 1.2;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
}

/* Nearby landmarks as stat figures: icon + (count-up) travel time + name. */
.ethar-pp__near-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 3vw, 2.5rem);
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}
.ethar-pp__near {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
}
.ethar-pp__near-icon {
  color: var(--ethar-pp-teal);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;
  line-height: 1;
}
.ethar-pp__near-fig.xwui-statistic {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}
.ethar-pp__near-fig .xwui-statistic-title {
  color: var(--text-secondary);
  /* Was clamp(0.8rem…1rem) → 12.8px EN on phones. Lift landmark-name labels. */
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  max-width: 20ch;
}
.ethar-pp__near-fig .xwui-statistic-value {
  color: var(--ethar-pp-teal);
  font-family:
    'Nassim Arabic', 'Helvetica', 'Helvetica Neue', sans-serif !important;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}
.ethar-pp__near-fig .xwui-statistic-suffix {
  color: var(--ethar-pp-teal);
  font-size: clamp(0.85rem, 1.3vw, 1.1rem);
  font-weight: 700;
  margin-inline-start: 0.25rem;
}
/* Non-numeric entries (e.g. "on site" / "adjacent") — smaller, wraps. */
.ethar-pp__near--text .xwui-statistic-value {
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  font-weight: 600;
  white-space: normal;
}

/* ── Project gallery (xwui-gallery-viewer) ──────────────────────────────────
 * Small thumbnails in a centred horizontal row; click opens xwui's full-screen
 * lightbox (prev/next, scroll-locked, close on X/Esc/outside). The lightbox
 * backdrop is blurred + darkened, and a bottom filmstrip is added by
 * src/app/gallery-lightbox.ts. */
.ethar-pp__gallery-viewer {
  /* Configurable thumbnail size — bump this var to make the gallery bigger. */
  --ethar-gallery-thumb: clamp(240px, 28vw, 380px);
}
.ethar-pp__gallery-viewer .xwui-gallery-grid-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--ethar-gallery-thumb), 1fr)
  );
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  justify-content: center;
}
.ethar-pp__gallery-viewer .xwui-gallery-grid-container > * {
  width: auto;
  min-width: 0;
}
/* The gallery viewer renders a vestigial, empty .xwui-gallery-grid div as the
 * FIRST child of the container (the real thumbnails render as its siblings), so
 * it occupied an empty grid cell — that was the blank "first box". Hide the
 * empty grid so the photos fill the row cleanly. */
.ethar-pp__gallery-viewer
  .xwui-gallery-grid-container
  > .xwui-gallery-grid:not(:has(img)) {
  display: none !important; /* beats the element's inline display:grid */
}
.ethar-pp__gallery-viewer .xwui-gallery-card-wrapper {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}
.ethar-pp__gallery-viewer .xwui-gallery-thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.ethar-pp__gallery-viewer
  .xwui-gallery-card-wrapper:hover
  .xwui-gallery-thumbnail {
  transform: scale(1.05);
}

/* Blur + darken the page behind the lightbox (xwui-dialog overlay). Ethar's
 * only dialog is this lightbox, so the dialog overrides below are safe. */
.xwui-dialog-overlay {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--bg-overlay-blur, rgba(0, 0, 0, 0.72));
  align-items: center;
  padding: clamp(0.5rem, 2vw, 1.5rem);
}
/* Near-fullscreen lightbox so the image is as large as possible. */
.xwui-dialog {
  max-width: min(1320px, 96vw) !important;
  width: min(1320px, 96vw);
  max-height: 96vh;
}
.xwui-dialog-body {
  padding: 0.4rem !important;
  display: flex;
}
/* Lay the lightbox out as image (fills) + bottom filmstrip. */
.xwui-gallery-lightbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}
.xwui-gallery-lightbox-image-container {
  flex: 1 1 auto;
  min-height: 0;
}
.xwui-gallery-lightbox-image {
  max-height: 84vh;
  width: 100%;
  object-fit: contain;
}

/* Bottom filmstrip injected into the lightbox (gallery-lightbox.ts). */
.ethar-lightbox-strip {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0.75rem 0 0.25rem;
  margin-top: 0.75rem;
}
.ethar-lightbox-strip__thumb {
  width: clamp(48px, 9vw, 84px);
  height: clamp(36px, 6.5vw, 60px);
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition:
    opacity 0.18s ease,
    border-color 0.18s ease;
}
.ethar-lightbox-strip__thumb:hover {
  opacity: 0.85;
}
.ethar-lightbox-strip__thumb.is-active {
  opacity: 1;
  border-color: var(--accent-primary, var(--ethar-pp-teal, #0f766e));
}
/* Location = a full-bleed map STAGE; the heading + city + figures float over the
 * top of the map in a semi-transparent panel (the map "expands up" behind them
 * and runs flush to the footer below). */
.ethar-pp__location {
  padding: 0;
}
.ethar-pp__loc-stage {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(560px, 82vh, 800px);
  overflow: hidden;
}
.ethar-pp__loc-stage .ethar-pp__map:not(.ethar-map-static) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  z-index: 0;
}
.ethar-pp__loc-panel {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 6vw, 4rem)
    clamp(2.25rem, 5vw, 3.5rem);
  /* Start from the SAME solid colour as the section above it (the CTA uses
   * --bg-primary, i.e. white in light / dark surface in dark) and fade to
   * transparent so it blends seamlessly into the live map below — while staying
   * opaque enough behind the figures for contrast. */
  background: linear-gradient(
    to bottom,
    var(--bg-primary) 0%,
    color-mix(in srgb, var(--bg-primary) 85%, transparent) 72%,
    transparent 100%
  );
}
.ethar-pp__map xwui-map,
.ethar-pp__map .xwui-map {
  display: block;
  width: 100%;
  height: 100%;
}
/* The static (offline) card shouldn't be forced to the tall map height. */
.ethar-pp__map.ethar-map-static {
  height: auto;
}

/* CTA. */
.ethar-pp__cta {
  text-align: center;
  padding: clamp(3rem, 7vw, 6rem) var(--ethar-pp-edge);
  background: var(--bg-primary);
}
.ethar-pp__cta-title {
  color: var(--ethar-pp-teal);
  margin: 0 0 1.5rem;
}
.ethar-pp__cta-row {
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ethar-pp__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--text-primary) 24%, transparent);
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.ethar-pp__btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.ethar-pp__btn--primary {
  background: var(--ethar-pp-teal);
  border-color: var(--ethar-pp-teal);
  color: #fff;
}
.ethar-pp__btn--primary:hover {
  background: color-mix(in srgb, var(--ethar-pp-teal) 86%, #000);
}

@media (max-width: 860px) {
  .ethar-pp__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
  .ethar-pp__overview {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Services page (bespoke alternating feature rows) ─────────────────────── */
.ethar-svc {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) 1.25rem clamp(3rem, 6vw, 5rem);
}
.ethar-svc__head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}
.ethar-svc__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ethar-teal);
  margin: 0 0 0.6rem;
}
.ethar-svc__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin: 0 0 0.8rem;
  color: var(--text-primary);
}
.ethar-svc__lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.7;
}
.ethar-svc__list {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
.ethar-svc-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.ethar-svc-row:nth-child(even) .ethar-svc-row__media {
  order: 2;
} /* alternate image side */
.ethar-svc-row__media {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
  aspect-ratio: 4 / 3;
}
.ethar-svc-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.ethar-svc-row__media:hover img {
  transform: scale(1.05);
}
.ethar-svc-row__num {
  position: absolute;
  top: 0.5rem;
  inset-inline-start: 0.9rem;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  line-height: 1;
}
.ethar-svc-row .ethar-svc-row__icon {
  --icon-size-md: 2.8rem;
  font-size: 2.8rem;
  line-height: 1;
  width: auto;
  height: auto;
  color: var(--ethar-teal);
  margin-bottom: 0.7rem;
  display: block;
}
.ethar-svc-row__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  margin: 0 0 0.8rem;
  color: var(--text-primary);
}
.ethar-svc-row__desc {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0 0 1.1rem;
}
.ethar-svc-row__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.2rem;
}
.ethar-svc-row__points li {
  position: relative;
  padding-inline-start: 1.5rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.ethar-svc-row__points li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--ethar-teal);
  font-weight: 800;
}
.ethar-svc__cta {
  margin-top: clamp(3rem, 6vw, 5rem);
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius-lg, 18px);
  background: linear-gradient(
    135deg,
    var(--ethar-teal),
    color-mix(in srgb, var(--ethar-teal) 55%, #0a3a36)
  );
  color: #fff;
}
.ethar-svc__cta h3 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  margin: 0 0 0.5rem;
}
.ethar-svc__cta p {
  margin: 0 0 1.4rem;
  opacity: 0.92;
  font-size: 1.05rem;
}
.ethar-svc__cta-btn {
  display: inline-block;
  background: #fff;
  /* Deep teal on the white pill (the brand teal was too light here → ~2.96
   * contrast). !important so it isn't pulled to the lighter content-link teal. */
  color: #0a3a36 !important;
  padding: 0.7rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.ethar-svc__cta-btn:hover {
  transform: translateY(-2px);
}
@media (max-width: 760px) {
  .ethar-svc-row {
    grid-template-columns: 1fr;
  }
  .ethar-svc-row:nth-child(even) .ethar-svc-row__media {
    order: 0;
  }
  .ethar-svc-row__points {
    grid-template-columns: 1fr;
  }
}

/* ── About page (XWUI-composed, screenshot-matched dark layout) ────────── */
.ethar-ab {
  --ab-max: 64.5rem;
  --ethar-ab-readable: 50rem;
  --ethar-ab-edge: clamp(var(--space-5, 1.25rem), 4.4vw, var(--space-12, 3rem));
  --ethar-ab-section-gap: clamp(
    var(--space-16, 4rem),
    8vw,
    var(--space-24, 7rem)
  );
  --ethar-ab-grid-gap: clamp(
    var(--space-7, 1.75rem),
    4vw,
    var(--space-12, 3rem)
  );
  --ethar-ab-radius: var(--radius-md, 0.625rem);
  --ethar-ab-navy: var(--ethar-navy);
  --ethar-ab-mist: var(--ethar-mist);
  --ethar-ab-cocoa: var(--ethar-cocoa);
  --ethar-ab-gold: var(--ethar-gold);
  --ethar-ab-page: color-mix(
    in srgb,
    var(--ethar-ab-navy) 76%,
    var(--ethar-ab-cocoa)
  );
  --ethar-ab-card: color-mix(
    in srgb,
    var(--ethar-ab-page) 86%,
    var(--ethar-ab-cocoa)
  );
  --ethar-ab-line: color-mix(in srgb, var(--ethar-ab-cocoa) 30%, transparent);
  --ethar-ab-text: color-mix(in srgb, var(--ethar-ab-mist) 94%, transparent);
  --ethar-ab-muted: color-mix(in srgb, var(--ethar-ab-mist) 80%, transparent);
  --ethar-ab-hero-image: url('/pictures/about-us/hero-bg-new.jpg');
  position: relative;
  overflow: hidden;
  color: var(--ethar-ab-text);
  background: var(--ethar-ab-page);
}
.ethar-ab__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ethar-ab-gold);
  margin-block: 0 var(--space-3, 0.75rem);
}
.ethar-ab-section__title {
  max-width: var(--ethar-ab-readable);
  color: var(--ethar-ab-mist);
  margin: 0 auto var(--space-7, 1.75rem);
}
/* Align Our values / Strategic land portfolio / Team expertise / Strategic
 * presence on one centred axis (matches about-us-old.png). */
.ethar-ab-values .ethar-ab__eyebrow,
.ethar-ab-portfolio .ethar-ab__eyebrow,
.ethar-ab-team .ethar-ab__eyebrow,
.ethar-ab-presence .ethar-ab__eyebrow,
.ethar-ab-values .ethar-ab-section__title,
.ethar-ab-portfolio .ethar-ab-section__title,
.ethar-ab-team .ethar-ab-section__title,
.ethar-ab-presence .ethar-ab-section__title,
.ethar-ab-services__lead,
.ethar-ab-portfolio__lead,
.ethar-ab-team__lead {
  text-align: center;
  margin-inline: auto;
}
/* Stacked, no overlay: the heading + intro paragraph sit ABOVE, the photo
 * BELOW — text never overlaps the image (per client feedback). */
.ethar-ab-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ethar-ab-navy);
}
.ethar-ab-hero xwui-hero {
  position: relative;
  width: 100%;
}
.ethar-ab-hero__media {
  width: 100%;
  display: block;
  line-height: 0;
}
.ethar-ab-hero__img,
.ethar-ab-hero__img .xwui-image-container,
.ethar-ab-hero__img .xwui-image-wrapper,
.ethar-ab-hero__img .xwui-image,
.ethar-ab-hero__img .xwui-image-loaded {
  display: block;
  width: 100%;
}
.ethar-ab-hero__img .xwui-image-container {
  /* ≈ the 1.6:1 source — a full-bleed banner showing the whole scene. */
  aspect-ratio: 16 / 10;
}
.ethar-ab-hero__img .xwui-image,
.ethar-ab-hero__img .xwui-image-loaded {
  object-fit: cover;
  object-position: center;
}
.ethar-ab-hero__xwui {
  --xwui-layout-max-width: none;
  --xwui-color-brand-500: var(--ethar-ab-gold);
  --xwui-color-text-primary: var(--ethar-ab-mist);
  --xwui-color-text-secondary: var(--ethar-ab-text);
  --xwui-color-surface-1: transparent;
  --xwui-color-border-default: transparent;
  padding-block: clamp(3.5rem, 6vw, 8rem) clamp(2.5rem, 4vw, 5rem);
  padding-inline: clamp(4rem, 7.4vw, 13rem)
    clamp(var(--space-5, 1.25rem), 4vw, 5rem);
}
.ethar-ab-hero__xwui .xwui-hero__text {
  align-items: flex-start;
  max-width: min(92vw, 55rem);
  text-align: right;
}
html[dir='ltr'] .ethar-ab-hero__xwui .xwui-hero__text {
  align-items: flex-end;
  text-align: right;
}
.ethar-ab-hero__xwui .xwui-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
/* Position the heading + intro on the physical RIGHT in English too (it is
 * already right in Arabic/RTL), per client feedback. */
html[dir='ltr'] .ethar-ab-hero__xwui .xwui-hero__inner {
  justify-content: flex-end;
}
.ethar-ab-hero__xwui .xwui-hero__eyebrow {
  display: none;
}
.ethar-ab-hero__xwui .xwui-hero__eyebrow-dot {
  display: none;
}
.ethar-ab-hero__xwui .xwui-hero__title {
  width: 100%;
  max-width: none;
  color: var(--ethar-ab-mist);
  font-size: clamp(4.5rem, 6.4vw, 10.5rem);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0;
  line-height: 1.04;
  text-align: right;
  text-shadow: 0 0.15rem 1.35rem rgb(2 9 23 / 0.72);
}
html[dir='ltr'] .ethar-ab-hero__xwui .xwui-hero__title {
  text-align: right;
}
.ethar-ab-hero__xwui .xwui-hero__subtitle {
  width: 100%;
  max-width: 39ch;
  color: var(--ethar-ab-mist);
  font-size: clamp(1.45rem, 2.05vw, 3.25rem);
  line-height: 1.72;
  text-align: right;
  text-shadow: 0 0.1rem 1rem rgb(2 9 23 / 0.7);
}
html[dir='ltr'] .ethar-ab-hero__xwui .xwui-hero__subtitle {
  text-align: right;
}
/* ≥48rem: overlay the copy on the photo, anchored to the BOTTOM — the clean
 * reflective-floor band, clear of the two men (left) and the Riyadh skyline
 * (right) — with a bottom scrim for legibility. ≤48rem keeps the stacked split. */
@media (min-width: 48rem) {
  .ethar-ab-hero {
    display: grid;
    position: relative;
    min-height: clamp(32rem, 46vw, 60rem);
    padding-block-end: 0;
  }
  .ethar-ab-hero > *,
  .ethar-ab-hero::after {
    grid-area: 1 / 1;
  }
  .ethar-ab-hero__media {
    align-self: stretch;
    height: 100%;
  }
  .ethar-ab-hero__img,
  .ethar-ab-hero__img .xwui-image-container,
  .ethar-ab-hero__img .xwui-image,
  .ethar-ab-hero__img .xwui-image-loaded {
    height: 100% !important;
  }
  .ethar-ab-hero__img .xwui-image-container {
    aspect-ratio: auto;
  }
  .ethar-ab-hero__img .xwui-image,
  .ethar-ab-hero__img .xwui-image-loaded {
    object-fit: cover;
    object-position: center;
  }
  .ethar-ab-hero::after {
    content: '';
    align-self: stretch;
    /* Light diagonal wash behind the copy (top-right) so the dark text reads over
       the bright sunset — a clean triangle that starts at 50% and fades to 0
       toward the bottom-left. */
    background: linear-gradient(to bottom left, rgb(245 241 236 / 0.5) 0%, rgb(245 241 236 / 0.32) 30%, rgb(245 241 236 / 0) 62%);
    pointer-events: none;
  }
  .ethar-ab-hero xwui-hero {
    align-self: start;
    z-index: 1;
  }
  /* Dark text on the light wash (overlay mode only — the ≤48rem split keeps the
     light-on-navy treatment). */
  .ethar-ab-hero__xwui .xwui-hero__title,
  .ethar-ab-hero__xwui .xwui-hero__subtitle {
    color: var(--ethar-ab-navy) !important;
    text-shadow: 0 1px 10px rgb(245 241 236 / 0.6), 0 0 2px rgb(245 241 236 / 0.55);
  }
  .ethar-ab-hero__xwui {
    padding-block: clamp(5rem, 9vw, 10rem) clamp(2.5rem, 4vw, 5rem);
    /* Keep a consistent right margin so the big right-aligned title never clips
       against the viewport edge at narrower widths (e.g. DevTools docked). */
    padding-inline-end: clamp(2rem, 3.5vw, 5rem);
  }
}
.ethar-ab-intro,
.ethar-ab-vm,
.ethar-ab-simple,
.ethar-ab-values-carousel {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  background: var(--ethar-ab-mist);
  color: var(--ethar-ab-navy);
  /* Shared so the vm card gap, the gap below the cards, and the futuristic
   * banner's height all stay EXACTLY in sync. */
  --ethar-ab-vm-gap: clamp(1.5rem, 1.4vw, 1.75rem);
  --ethar-ab-vm-card-h: clamp(11rem, 15vw, 16rem);
}
.ethar-ab-intro {
  padding: clamp(3rem, 3.1vw, 4rem) var(--ethar-ab-edge)
    clamp(5.25rem, 5vw, 6.5rem);
}
.ethar-ab-intro__inner {
  width: 100%;
  margin-inline: auto;
  display: grid;
  /* Image column = half the screen width (per mockup); copy takes the rest. */
  grid-template-columns: minmax(0, 50vw) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  direction: ltr;
}
.ethar-ab-intro__media {
  width: 100%;
}
.ethar-ab-intro__media xwui-carousel {
  display: block;
}
.ethar-ab-intro__carousel {
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  background: transparent;
}
.ethar-ab-intro__carousel .xwui-carousel-track {
  overflow: hidden;
  border-radius: 0;
}
.ethar-ab-intro__carousel .xwui-carousel-slide {
  line-height: 0;
}
.ethar-ab-intro__image,
.ethar-ab-intro__image .xwui-image-container,
.ethar-ab-intro__image .xwui-image-wrapper,
.ethar-ab-intro__image .xwui-image,
.ethar-ab-intro__image .xwui-image-loaded {
  display: block;
  width: 100%;
  height: 100%;
}
.ethar-ab-intro__image .xwui-image-container {
  /* Match the 1.25:1 source (was 88/100 portrait + cover, which sliced the side
   * towers off). contain guarantees the whole tower image shows, centered. */
  aspect-ratio: 5 / 4;
  background: transparent;
}
.ethar-ab-intro__image .xwui-image,
.ethar-ab-intro__image .xwui-image-loaded {
  object-fit: contain;
  object-position: center;
}
/* Intro media is now a cinematic 3-view carousel (app/carousel.ts): portrait
 * slides that cross-fade, each holding a silent looping video cover-fitted with
 * the building centred. The poster (still first frame) paints until the active
 * slide's clip can play. */
.ethar-ab-intro__slides {
  position: relative;
  width: 100%;
  aspect-ratio: 88 / 100;
  overflow: hidden;
  background: #0b1220;
}
.ethar-ab-intro__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ethar-ab-intro__slide[data-active] {
  opacity: 1;
}
.ethar-ab-intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: #0b1220;
}
.ethar-ab-intro__controls {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.7vw, 0.75rem);
  margin-block-start: clamp(1.5rem, 2.2vw, 2.5rem);
  /* The generic carousel dots (carousel.ts) take their colour from here via
   * currentColor — dark charcoal so the dashes and the active progress fill
   * read on the light mist intro band. */
  color: #15110f;
  --ethar-dot-width: clamp(2.75rem, 3.4vw, 3.5rem);
}
.ethar-ab-intro__control {
  width: clamp(2.75rem, 3.4vw, 3.5rem);
  height: 0.1875rem;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #3b302b;
  cursor: default;
}
.ethar-ab-intro__control.is-active {
  width: clamp(3.25rem, 3.8vw, 4rem);
  background: #15110f;
}
.ethar-ab-intro__control:disabled {
  opacity: 1;
}
.ethar-ab-intro__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  direction: rtl;
  text-align: right;
}
html[dir='ltr'] .ethar-ab-intro__copy {
  align-items: flex-start;
  direction: ltr;
  text-align: left;
}
.ethar-ab-intro__title {
  max-width: 14ch;
  margin: 0;
  /* Heading: dark charcoal (per mockup). */
  color: #2b2825;
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0;
  line-height: 1.12;
}
.ethar-ab-intro__title--bottom {
  margin-block-end: clamp(1.25rem, 2vw, 2rem);
}
.ethar-ab-intro__lead {
  margin: 0 0 clamp(1.25rem, 1.8vw, 1.75rem);
  /* Lead: cocoa brown (per mockup). */
  color: var(--ethar-ab-cocoa);
  font-size: 60px !important;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.5;
}
.ethar-ab-intro__body {
  max-width: 46rem;
  margin: 0 0 clamp(2rem, 2.8vw, 3rem);
  /* Body: neutral warm gray (per mockup — NOT brown). */
  color: #6b6660;
  font-size: 25px !important;
  line-height: 2.5;
}
html[dir='rtl']
  .ethar-ab-intro__copy
  xwui-typography:has(.ethar-ab-intro__body) {
  display: flex;
  justify-content: end;
}
.ethar-ab-intro xwui-button {
  align-self: flex-end;
}
html[dir='ltr'] .ethar-ab-intro xwui-button {
  align-self: flex-start;
}
.ethar-ab-intro .xwui-button.ethar-ab-intro__button {
  /* Brown via TOKENS — the primary variant paints background with !important
   * from --accent-primary, so set the token (no !important needed). */
  --accent-primary: var(--ethar-ab-cocoa);
  --accent-hover: color-mix(in srgb, var(--ethar-ab-cocoa) 82%, #000);
  --role-primary-bg: var(--ethar-ab-cocoa);
  --role-primary-bg-hover: color-mix(in srgb, var(--ethar-ab-cocoa) 82%, #000);
  --role-primary-fg: var(--ethar-ab-mist);
  min-height: clamp(3.75rem, 4.1vw, 5.25rem);
  padding-inline: clamp(1.35rem, 2.2vw, 2.4rem);
  border-radius: 0.42rem;
  color: var(--ethar-ab-mist);
  font-size: clamp(1.15rem, 1.45vw, 1.85rem);
  font-weight: var(--font-weight-semibold, 600);
}
.ethar-ab-intro xwui-button,
.ethar-ab-intro .xwui-button-container,
.ethar-ab-intro .xwui-button-full-width {
  display: inline-flex;
  width: auto;
}
html[dir='rtl'] .ethar-ab-intro__copy xwui-button {
  width: 100%;
  justify-content: flex-end;
  direction: ltr;
}
html[dir='rtl'] .ethar-ab-intro__copy .xwui-button-container {
  margin-left: auto;
  margin-right: 0;
}
.ethar-ab-vm {
  display: flex;
  flex-direction: column;
  gap: var(--ethar-ab-vm-gap);
  /* Bottom padding == the inter-card gap, so the space before the futuristic
   * banner equals the gap between the two cards (banner section adds 0 on top). */
  padding: clamp(1.5rem, 1.7vw, 2.1rem) var(--ethar-ab-edge)
    var(--ethar-ab-vm-gap);
}
.ethar-ab-vm__card {
  width: min(100%, 116.875rem);
  /* Narrow band (per mockup) — short height with large type. */
  min-height: var(--ethar-ab-vm-card-h);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 5.5rem);
  overflow: hidden;
  padding: clamp(2rem, 3.5vw, 3.25rem) clamp(2.5rem, 5.5vw, 6.5rem);
  /* Near-black charcoal fading to dark cocoa-brown at the bottom (per mockup). */
  background: linear-gradient(180deg, #0c0a0d 0%, #171113 52%, #33251f 100%);
  color: var(--ethar-ab-mist);
}
.ethar-ab-vm__icon {
  justify-self: center;
  /* Shrink to the icon — not a giant container. */
  width: clamp(5.5rem, 8vw, 8.5rem);
  max-width: 100%;
}
.ethar-ab-vm__icon,
.ethar-ab-vm__icon .xwui-image-container,
.ethar-ab-vm__icon .xwui-image-wrapper,
.ethar-ab-vm__icon .xwui-image,
.ethar-ab-vm__icon .xwui-image-loaded {
  display: block;
  background: transparent;
}
.ethar-ab-vm__icon .xwui-image,
.ethar-ab-vm__icon .xwui-image-loaded {
  object-fit: contain;
}
/* The icon PNGs are dark line-art on a WHITE background (no alpha). invert()
 * turns the white field near-black (≈ the block) and the lines light; screen
 * then drops that dark field entirely so the icon reads as warm line-art on the
 * brown block with no visible box. */
.ethar-ab-vm__icon img,
.ethar-ab-vm__icon .xwui-image,
.ethar-ab-vm__icon .xwui-image-loaded {
  filter: invert(1) sepia(0.5) saturate(1.4) brightness(1.05);
  mix-blend-mode: screen;
}
.ethar-ab-vm__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  direction: rtl;
  text-align: right;
}
html[dir='ltr'] .ethar-ab-vm__copy {
  align-items: flex-start;
  direction: ltr;
  text-align: left;
}
.ethar-ab-vm__title {
  margin: 0 0 clamp(0.85rem, 1.6vw, 1.4rem);
  /* Warm champagne/cream heading (per mockup). */
  color: color-mix(in srgb, var(--ethar-ab-gold) 42%, var(--ethar-ab-mist));
  font-size: 50px !important;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0;
  line-height: 1.06;
}
html[dir='rtl'] .ethar-ab-vm__title {
  width: 100%;
  align-self: flex-end;
  text-align: right;
}
html[dir='rtl'] .ethar-ab-vm__copy {
  width: 100%;
  justify-self: stretch;
  align-items: stretch;
  text-align: right;
}
html[dir='rtl'] .ethar-ab-vm__copy xwui-typography,
html[dir='rtl'] .ethar-ab-vm__copy .xwui-typography {
  width: 100%;
  text-align: right;
  display: flex !important;
  justify-content: end !important;
}
.ethar-ab-vm__body {
  max-width: 64rem;
  margin: 0;
  color: color-mix(in srgb, var(--ethar-ab-mist) 88%, transparent);
  /* ~⅓ of the heading. !important so xwui-typography-body doesn't override it
     down to the base size (it was rendering at 16px EN / 18.4px AR). */
  font-size: clamp(1.1rem, 1.4vw, 1.5rem) !important;
  line-height: 1.8;
}

.ethar-ab-vm__copy,
html[dir='ltr'] .ethar-ab-vm__copy,
html[dir='rtl'] .ethar-ab-vm__copy {
  align-items: center !important;
  text-align: center !important;
}

.ethar-ab-vm__title,
html[dir='rtl'] .ethar-ab-vm__title,
.ethar-ab-vm__body {
  width: 100%;
  align-self: center !important;
  margin-inline: auto;
  text-align: center !important;
}

.ethar-ab-vm__copy xwui-typography,
.ethar-ab-vm__copy .xwui-typography,
html[dir='rtl'] .ethar-ab-vm__copy xwui-typography,
html[dir='rtl'] .ethar-ab-vm__copy .xwui-typography {
  text-align: center !important;
  justify-content: center !important;
}

/* ── 4. Simple banner image ─────────────────────────────────────────────────
 * Same width + side insets as the brown vm cards; wide-banner proportions
 * (per references/4-simple-img.png), softly rounded. */
.ethar-ab-simple {
  display: none !important;
  /* Top padding 0: the gap above the banner comes entirely from the vm section's
   * bottom padding (== inter-card gap). */
  padding: 0 var(--ethar-ab-edge) clamp(2.5rem, 4vw, 4.5rem);
}
.ethar-ab-simple__media,
.ethar-ab-simple__media .xwui-image-container,
.ethar-ab-simple__media .xwui-image-wrapper,
.ethar-ab-simple__media .xwui-image,
.ethar-ab-simple__media .xwui-image-loaded {
  display: block;
  width: 100%;
  height: 100%;
}
.ethar-ab-simple__media {
  width: min(100%, 116.875rem);
  /* Height == the brown vm cards (shared var); was driven by aspect-ratio. */
  height: var(--ethar-ab-vm-card-h);
  margin-inline: auto;
  border-radius: var(--ethar-ab-radius, 0.625rem);
  overflow: hidden;
}
.ethar-ab-simple__media .xwui-image-container {
  /* Fill the fixed-height media instead of imposing the banner aspect-ratio. */
  aspect-ratio: auto;
  height: 100%;
}
.ethar-ab-simple__media img,
.ethar-ab-simple__media .xwui-image,
.ethar-ab-simple__media .xwui-image-loaded {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* ── 5. Values carousel — dark cards on the light band ──────────────────────── */
.ethar-ab-values-carousel {
  padding: clamp(2rem, 3vw, 3.5rem) var(--ethar-ab-edge) clamp(4rem, 6vw, 7rem);
}
.ethar-ab-vcar__title {
  width: min(100%, 116.875rem);
  margin: 0 auto clamp(1.75rem, 3.5vw, 3.5rem);
  color: #2b2825;
  font-size: clamp(2.75rem, 4.6vw, 4.75rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.1;
  text-align: right;
}
html[dir='ltr'] .ethar-ab-vcar__title {
  text-align: left;
}
/* Row: arrows pinned to the physical edges (direction:ltr), card strip between
 * them scrolls; the strip itself stays RTL so the cards read right-to-left. */
.ethar-ab-vcar {
  direction: ltr;
  width: min(100%, 116.875rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
.ethar-ab-vcar__strip {
  direction: rtl;
  flex: 1;
  min-width: 0;
  display: flex;
  /* `safe center` centers the cards when they fit, but falls back to start-
   * alignment when they overflow — without `safe`, an overflowing flex row
   * clips its first cards and they become unreachable by scroll (so the strip
   * looked cropped and the arrows appeared broken). */
  justify-content: safe center;
  gap: clamp(0.85rem, 1.5vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: clamp(0.75rem, 1.2vw, 1.25rem);
  scrollbar-width: none;
}
.ethar-ab-vcar__strip::-webkit-scrollbar {
  display: none;
}
.ethar-ab-vcard {
  flex: 0 0 clamp(9rem, 15vw, 12.5rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
  aspect-ratio: 5 / 6;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(0.75rem, 1.4vw, 1.25rem);
  /* Dark card: subtle charcoal top → near-black bottom. */
  background: linear-gradient(180deg, #3a3540 0%, #15110f 62%, #0c0a0d 100%);
  color: color-mix(in srgb, var(--ethar-ab-gold) 38%, var(--ethar-ab-mist));
}
/* Active (right-most) card sits raised with a soft frame, per the mockup. */
.ethar-ab-vcard.is-active {
  outline: 1px solid color-mix(in srgb, var(--ethar-ab-mist) 35%, transparent);
  outline-offset: clamp(0.4rem, 0.8vw, 0.7rem);
  box-shadow: 0 1.25rem 2.75rem color-mix(in srgb, #000 45%, transparent);
}
.ethar-ab-vcard__icon-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ethar-ab-vcard__icon,
.ethar-ab-vcard__icon .xwui-image-container,
.ethar-ab-vcard__icon .xwui-image-wrapper,
.ethar-ab-vcard__icon .xwui-image,
.ethar-ab-vcard__icon .xwui-image-loaded {
  display: block;
  background: transparent;
}
.ethar-ab-vcard__icon {
  width: clamp(3.5rem, 5vw, 4.75rem);
}
.ethar-ab-vcard__icon .xwui-image-container {
  aspect-ratio: 1 / 1;
}
.ethar-ab-vcard__icon .xwui-image,
.ethar-ab-vcard__icon .xwui-image-loaded {
  object-fit: contain;
}
.ethar-ab-vcard .ethar-ab-vcard__label {
  margin: 0;
  color: inherit;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.2;
  text-align: center;
}
/* Round ghost arrow chips — used both flanking the strip (desktop) and in the
 * header next to the title (small screens). */
.xwui-button.ethar-ab-vcar__arrow {
  flex: 0 0 auto;
  width: clamp(2.5rem, 3.2vw, 3.25rem);
  height: clamp(2.5rem, 3.2vw, 3.25rem);
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  /* Was a transparent chip with a cream outline+chevron — invisible on the light
     values section. Solid navy fill + mist chevron reads clearly on the light
     page AND on the dark cards it sits beside. */
  /* !important — xwui injects its ghost button styles AFTER ours, so a plain
     declaration loses the cascade (the chip stayed transparent). */
  border: 1px solid var(--ethar-ab-navy) !important;
  background: var(--ethar-ab-navy) !important;
  color: var(--ethar-ab-mist) !important;
  box-shadow: 0 3px 12px rgb(7 13 24 / 0.22);
}
/* Chevron is a stroke-based feather SVG — force stroke/colour to mist so it
   reads on the navy fill. */
.xwui-button.ethar-ab-vcar__arrow svg,
.xwui-button.ethar-ab-vcar__arrow .feather,
.xwui-button.ethar-ab-vcar__arrow .xwui-icon {
  color: var(--ethar-ab-mist) !important;
  stroke: var(--ethar-ab-mist) !important;
}
.xwui-button.ethar-ab-vcar__arrow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ethar-ab-navy) 86%, #000) !important;
}

/* Values header: the title and (small-screen) nav arrows share one row. On
 * desktop the nav is hidden and the strip-flanking arrows are used instead. */
.ethar-ab-vcar__head {
  width: min(100%, 116.875rem);
  margin: 0 auto clamp(1.75rem, 3.5vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
}
.ethar-ab-vcar__head .ethar-ab-vcar__title {
  width: auto;
  margin: 0;
}
.ethar-ab-vcar__nav {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
}

/* Language switcher (EN / عربي) — bigger + more tappable (per client). */
.xwui-button.ethar-locale-btn {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  min-width: clamp(2.9rem, 4vw, 3.6rem);
  min-height: clamp(2.4rem, 3.4vw, 3rem);
  padding-inline: clamp(0.9rem, 1.7vw, 1.3rem);
  letter-spacing: 0.01em;
}

/* Interactive value cards: click / Enter / Space (or the arrows) to select. The
 * active card lifts + warms toward gold, and the panel below updates. */
.ethar-ab-vcard {
  cursor: pointer;
  border: 0;
  font: inherit;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    outline-color 0.25s ease;
}
.ethar-ab-vcard:hover {
  transform: translateY(-0.3rem);
}
.ethar-ab-vcard:focus-visible {
  outline: 2px solid var(--ethar-ab-gold);
  outline-offset: clamp(0.4rem, 0.8vw, 0.7rem);
}
.ethar-ab-vcard.is-active {
  /* Raised + gold-warmed so the selected value reads as "expanded". */
  transform: translateY(-0.45rem);
  background: linear-gradient(180deg, #4b4034 0%, #1b1410 60%, #0c0a0d 100%);
  color: color-mix(in srgb, var(--ethar-ab-gold) 72%, var(--ethar-ab-mist));
}

/* Selected-value description panel on the mist band. */
.ethar-ab-vcar__desc {
  width: min(100%, 72rem);
  margin: clamp(1.75rem, 3vw, 3rem) auto 0;
  text-align: center;
  direction: rtl;
}
html[dir='ltr'] .ethar-ab-vcar__desc {
  direction: ltr;
}
.ethar-ab-vcar__desc-title {
  margin: 0 0 clamp(0.5rem, 1vw, 0.9rem);
  color: var(--ethar-ab-cocoa);
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.2;
}
.ethar-ab-vcar__desc-body {
  margin: 0 auto;
  max-width: 58rem;
  color: #6b6660;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  line-height: 1.95;
}

/* ── 6. Presence map ───────────────────────────────────────────────────────── */
.ethar-ab-map {
  position: relative;
  isolation: isolate;
  display: flex !important;
  align-items: center;
  width: 100vw;
  min-height: clamp(620px, 57.5vw, 980px);
  margin-inline: calc(50% - 50vw);
  padding: clamp(48px, 5.6vw, 96px) var(--ethar-ab-edge);
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, #e8ece9 0%, #e2e2dd 55%, #cbc9c5 100%);
  color: #07101d;
  line-height: normal;
}
.ethar-ab-map__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: center;
  gap: clamp(48px, 6vw, 112px);
  width: min(100%, 1460px);
  margin-inline: auto;
  direction: ltr;
}
.ethar-ab-map__visual {
  position: relative;
  display: block;
  justify-self: start;
  width: min(100%, 850px);
  aspect-ratio: 1536 / 1024;
  /* Lets the hover ripple be sized relative to the map width (cqi), so it stays
     proportional and never grows over the baked-in city labels. */
  container-type: inline-size;
}
.ethar-ab-map__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ethar-ab-map__pins {
  position: absolute;
  inset: 0;
}
.ethar-ab-map__pin {
  position: absolute !important;
  left: var(--pin-x);
  top: var(--pin-y);
  z-index: 2;
  width: clamp(24px, 2.1vw, 36px) !important;
  height: clamp(24px, 2.1vw, 36px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%);
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none;
  cursor: pointer;
}
.ethar-ab-map__pin::before,
.ethar-ab-map__pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.25cqi;
  height: 1.25cqi;
  border: 2px solid rgb(169 115 50 / 0.58);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.62);
  pointer-events: none;
}
.ethar-ab-map__pin:hover::before,
.ethar-ab-map__pin:focus-visible::before {
  animation: ethar-ab-map-ripple 1.45s ease-out infinite;
}
.ethar-ab-map__pin:hover::after,
.ethar-ab-map__pin:focus-visible::after {
  animation: ethar-ab-map-ripple 1.45s ease-out 0.36s infinite;
}
@keyframes ethar-ab-map-ripple {
  0% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(0.62);
  }
  72% {
    opacity: 0.12;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4);
  }
}
.ethar-ab-map__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  width: min(100%, 520px);
  min-height: clamp(430px, 40vw, 620px);
  padding-block: clamp(10px, 2vw, 34px) clamp(8px, 1.8vw, 28px);
  box-sizing: border-box;
  direction: rtl;
  text-align: right;
}
.ethar-ab-map__title {
  margin: 0 0 clamp(28px, 3.8vw, 58px) !important;
  color: #07101d !important;
  font-size: clamp(58px, 5.4vw, 96px) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}
.ethar-ab-map__body {
  max-width: 510px;
  margin: 0 !important;
  color: #5b453c !important;
  font-size: clamp(25px, 2.2vw, 38px) !important;
  font-weight: var(--font-weight-normal, 400) !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
}
.ethar-ab-map xwui-button {
  display: inline-flex !important;
  align-self: flex-end;
  width: auto !important;
  margin-top: auto;
}
.ethar-ab-map .xwui-button-container,
.ethar-ab-map .xwui-button-full-width {
  display: inline-flex !important;
  width: auto !important;
}
.ethar-ab-map .xwui-button.ethar-ab-map__button {
  --accent-primary: #62453b;
  --accent-hover: #4e352c;
  --role-primary-bg: #62453b;
  --role-primary-bg-hover: #4e352c;
  --role-primary-fg: #fff8f2;
  min-height: clamp(54px, 4.1vw, 70px) !important;
  padding-inline: clamp(22px, 2.6vw, 42px) !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #62453b !important;
  color: #fff8f2 !important;
  box-shadow: 0 14px 26px rgb(75 49 38 / 0.16);
  font-size: clamp(20px, 1.55vw, 29px) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: 1.15 !important;
}
html[dir='ltr'] .ethar-ab-map__copy {
  direction: ltr;
  text-align: left;
  align-items: flex-start;
}
html[dir='ltr'] .ethar-ab-map xwui-button {
  align-self: flex-start;
}

/* ── 7. Chairman quote ─────────────────────────────────────────────────────── */
.ethar-ab-chairman {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: #070d18;
  padding-block-start: 80px;
  padding-block-end: 120px;
}
.ethar-ab-chairman__title {
  width: min(calc(100% - 18.4vw), 137.5rem);
  margin-inline: auto;
  /* Title sits on the physical LEFT, above the panel (was pushed right). */
  padding-inline-end: 0;
  box-sizing: border-box;
  text-align: left;
  direction: rtl;
}
.ethar-ab-chairman__title-line {
  display: block;
  margin: 0;
  color: #070d18;
  font-size: 50px !important;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.28;
  letter-spacing: 0;
}
.ethar-ab-chairman__stage {
  position: relative;
  width: min(calc(100% - 18.4vw), 137.5rem);
  margin: clamp(3rem, 4.8vw, 8rem) auto 0;
}
.ethar-ab-chairman__panel {
  position: relative;
  /* Sit flush on the physical LEFT: the photo-wrap is absolutely pinned to the
   * physical right (`right:0`), so the panel must take the left. A physical
   * `margin-right:auto` does this in BOTH directions (RTL over-constrained
   * margins would otherwise force the panel flush-right, hiding it entirely
   * behind the photo — the "chairman card not visible" bug). Width is a touch
   * over half so the photo bleeds in over the panel's right padding, matching
   * the designer concept's overlap. z-index keeps the card body above nothing
   * but documents intent: only its padded right edge tucks under the photo. */
  width: min(52%, 68rem);
  margin-right: auto;
  z-index: 1;
  box-sizing: border-box;
  padding-block: clamp(6rem, 6.2vw, 10.35rem) clamp(4rem, 5.4vw, 9rem);
  padding-inline: clamp(3.75rem, 4vw, 6.7rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  direction: rtl;
  text-align: right;
  /* Kept the navy→cocoa warmth but darkened the lower stops: the old gradient
   * faded to light tan (#93654c), so the white message text lost contrast at the
   * bottom and read as unreadable. Now it stays dark enough for white throughout. */
  background: linear-gradient(
    180deg,
    #090e1a 0%,
    #1a151f 28%,
    #2a201c 58%,
    #382923 84%,
    #453026 100%
  );
}
/* Large decorative quotation marks at the top-left and bottom-right corners of
 * the message panel (per client request). */
.ethar-ab-chairman__panel::before,
.ethar-ab-chairman__panel::after {
  position: absolute;
  z-index: 2;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(4.5rem, 7vw, 8rem);
  line-height: 1;
  color: color-mix(in srgb, var(--ethar-ab-gold) 60%, transparent);
  pointer-events: none;
}
.ethar-ab-chairman__panel::before {
  content: '\201C';
  top: clamp(0.4rem, 1.4vw, 1.4rem);
  left: clamp(0.75rem, 1.8vw, 2rem);
}
.ethar-ab-chairman__panel::after {
  content: '\201D';
  bottom: clamp(-0.4rem, 0.6vw, 0.6rem);
  right: clamp(0.75rem, 1.8vw, 2rem);
}
.ethar-ab-chairman__photo-wrap {
  position: absolute;
  right: 0;
  top: calc(-1 * clamp(3rem, 4vw, 6.7rem));
  width: 50%;
  height: 100%;
  /* Cap height so a longer/larger message can't drag the height:100% photo into
     an oversized portrait crop (the "chairman photo too big" regression). */
  max-height: min(84vh, 48rem);
  display: block;
  overflow: hidden;
  background: #090e1a;
  /* Sharp corners — !important to beat the xwui-image component's own radius. */
  border-radius: 0 !important;
}
.ethar-ab-chairman__photo-wrap xwui-image,
.ethar-ab-chairman__photo {
  display: block;
  width: 100%;
  height: 100% !important;
  border-radius: 0 !important;
}
.ethar-ab-chairman__photo .xwui-image-container,
.ethar-ab-chairman__photo .xwui-image-wrapper,
.ethar-ab-chairman__photo .xwui-image,
.ethar-ab-chairman__photo .xwui-image-loaded {
  display: block;
  width: 100%;
  height: 100% !important;
  border-radius: 0 !important;
}
.ethar-ab-chairman__photo .xwui-image,
.ethar-ab-chairman__photo .xwui-image-loaded {
  object-fit: cover !important;
  object-position: center;
}
.ethar-ab-chairman__message {
  margin: 0 0 clamp(1.1rem, 1.5vw, 1.9rem);
  color: #fff;
  /* Without !important, xwui-typography-body wins the cascade and pins this to
     the base size — the quote read tiny. Keep it readable but not so large that
     the height:100% photo beside it grows into an oversized portrait crop. */
  font-size: clamp(1.25rem, 1.2vw, 1.6rem) !important;
  font-weight: var(--font-weight-normal, 400);
  line-height: 1.95;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
.ethar-ab-chairman__name {
  margin: clamp(2.25rem, 2.8vw, 3.75rem) 0 0;
  color: #fff;
  font-size: clamp(1.8rem, 1.85vw, 2.8rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.3;
  letter-spacing: 0;
}
.ethar-ab-chairman__role {
  margin: clamp(0.4rem, 0.7vw, 0.9rem) 0 0;
  color: color-mix(in srgb, #fff 82%, transparent);
  font-size: clamp(1.35rem, 1.4vw, 2rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.3;
  letter-spacing: 0;
}

.ethar-ab-story,
.ethar-ab-values,
.ethar-ab-focus,
.ethar-ab-portfolio,
.ethar-ab-team,
.ethar-ab-presence,
.ethar-ab-stats {
  box-sizing: border-box;
  width: min(100%, var(--ab-max));
  margin-inline: auto;
  margin-block: var(--ethar-ab-section-gap);
  padding-inline: var(--ethar-ab-edge);
}
.ethar-ab-founder,
.ethar-ab-cta {
  box-sizing: border-box;
  width: min(calc(100% - var(--ethar-ab-edge) - var(--ethar-ab-edge)), 56rem);
  margin-inline: auto;
  margin-block: var(--ethar-ab-section-gap);
}
.ethar-ab-story {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
}
.ethar-ab-story xwui-image {
  display: block;
}
.ethar-ab-story__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--ethar-ab-radius);
  border: 0;
  background: var(--ethar-ab-card);
  box-shadow: 0 var(--space-6, 1.5rem) var(--space-16, 4rem)
    color-mix(in srgb, var(--ethar-ab-navy) 58%, transparent);
}
.ethar-ab-story__media .xwui-image-wrapper,
.ethar-ab-story__media .xwui-image,
.ethar-ab-story__media .xwui-image-loaded {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The text column fills the image's height (equal-row-height grid) and the copy
   is distributed through it with generous type + spacing. */
.ethar-ab-story > xwui-box {
  display: flex;
  flex-direction: column;
}
.ethar-ab-story__body {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Distribute the copy across the full image height (eyebrow at the top,
   * last paragraph at the bottom) so the text column reads as height X. */
  justify-content: space-between;
  padding-block: var(--space-6, 1.5rem);
}
.ethar-ab-story__body .ethar-ab__eyebrow {
  text-align: start;
}
.ethar-ab-story__title {
  max-width: 20ch;
  color: var(--ethar-ab-mist);
  font-weight: var(--font-weight-normal, 400);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.25;
  margin-block: 0 var(--space-7, 1.75rem);
}
.ethar-ab-story__copy {
  color: var(--ethar-ab-text);
  font-size: clamp(1.15rem, 1.4vw, 1.45rem);
  line-height: 2.4;
  margin-block: 0 var(--space-10, 2.5rem);
}
.ethar-ab-story__copy:last-child {
  margin-block-end: 0;
}
.ethar-ab-founder,
.ethar-ab-cta {
  overflow: hidden;
  border-radius: var(--ethar-ab-radius);
  background: var(--ethar-ab-card);
  border-color: var(--ethar-ab-line);
  color: var(--ethar-ab-text);
}
/* Founder card: drop the outlined border (keep the surface). */
.ethar-ab-founder.xwui-card {
  border: 0;
}
.ethar-ab-founder .xwui-card-body,
.ethar-ab-cta .xwui-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ethar-ab-founder .xwui-card-body {
  background: color-mix(
    in srgb,
    var(--ethar-ab-card) 78%,
    var(--ethar-ab-cocoa)
  );
  padding: clamp(var(--space-12, 3rem), 7vw, var(--space-18, 5rem))
    var(--ethar-ab-edge);
}
.ethar-ab-founder__avatar {
  margin-block-end: var(--space-5, 1.25rem);
}
.ethar-ab-founder__avatar.xwui-avatar,
.ethar-ab-founder__avatar .xwui-avatar {
  background: color-mix(
    in srgb,
    var(--ethar-ab-cocoa) 62%,
    var(--ethar-ab-mist)
  );
  color: var(--ethar-ab-mist);
  box-shadow: 0 var(--space-3, 0.75rem) var(--space-8, 2rem)
    color-mix(in srgb, var(--ethar-ab-navy) 56%, transparent);
}
.ethar-ab-founder__avatar .xwui-avatar-fallback {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ethar-ab-cocoa) 88%, var(--ethar-ab-navy)),
    color-mix(in srgb, var(--ethar-ab-cocoa) 62%, var(--ethar-ab-mist))
  ) !important;
  color: var(--ethar-ab-mist);
}
.ethar-ab-founder__quote {
  max-width: 46rem;
  color: var(--ethar-ab-mist);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.8;
  margin-block: 0 var(--space-8, 2rem);
}
.ethar-ab-founder__quote.xwui-typography {
  margin-block-end: var(--space-8, 2rem) !important;
}
.ethar-ab-founder__name {
  color: var(--ethar-ab-cocoa);
  margin-block: 0;
}
.ethar-ab-founder__role {
  /* !important to beat xwui's .xwui-typography-tertiary colour class. */
  color: var(--ethar-ab-mist) !important;
  margin-block: var(--space-1, 0.25rem) 0;
}
.ethar-ab-value {
  height: 100%;
}
.ethar-ab-services .ethar-ab-values__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.ethar-ab-values__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ethar-ab-value.xwui-card-feature {
  overflow: visible;
  border-radius: 0;
  background: transparent;
  border-color: transparent;
  color: var(--ethar-ab-text);
  box-shadow: none;
}
.ethar-ab-value.xwui-card-feature:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.ethar-ab-value .xwui-card-feature__body {
  align-items: center;
  text-align: center;
}
.ethar-ab-value .xwui-card-feature__title {
  color: var(--ethar-ab-mist);
  letter-spacing: 0;
  font-weight: var(--font-weight-semibold, 600);
}
.ethar-ab-value .xwui-card-feature__description {
  color: var(--ethar-ab-text);
  line-height: 1.5;
}
.ethar-ab-value .xwui-card-feature__icon,
.ethar-ab-focus__card .xwui-card-feature__icon {
  width: var(--space-12, 3rem);
  height: var(--space-12, 3rem);
  color: var(--ethar-ab-cocoa);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Services & values cards: centre the icon over the centred title/text
 * (matches services-values.png). The icon is a fixed-width flex child of the
 * card, so the article's default align-items:stretch left-anchors it. */
.ethar-ab-value .xwui-card-feature__icon {
  align-self: center;
}
.ethar-ab-feature-icon {
  color: currentColor;
}
.ethar-ab-feature-icon.xwui-icon,
.ethar-ab-chip__xicon.xwui-icon {
  width: 1.5em;
  height: 1.5em;
}
.ethar-ab-focus {
  max-width: 62rem;
  padding-block: 0;
  border-block: 0;
}
.ethar-ab-focus__card.xwui-card-feature {
  align-items: center;
  text-align: center;
  background: transparent;
  border-color: transparent;
}
.ethar-ab-focus__card .xwui-card-feature__body {
  align-items: center;
}
.ethar-ab-focus__card .xwui-card-feature__title {
  color: var(--ethar-ab-mist);
  font-weight: var(--font-weight-normal, 400);
  letter-spacing: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}
.ethar-ab-focus__card .xwui-card-feature__description {
  max-width: 45rem;
  color: var(--ethar-ab-text);
  line-height: 1.8;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
.ethar-ab-focus__card .xwui-card-feature__tag {
  position: static;
  order: 3;
  margin-block-start: var(--space-3, 0.75rem);
  padding: 0;
  color: var(--ethar-ab-cocoa);
  background: transparent;
  border: 0;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}
.ethar-ab-services {
  scroll-margin-top: var(--space-24, 6rem);
  /* Drop the section width cap so the services grid spans its parent. */
  width: auto;
  min-width: 0;
}
.ethar-ab-services__lead,
.ethar-ab-portfolio__lead,
.ethar-ab-team__lead {
  max-width: 48rem;
  color: var(--ethar-ab-text);
  margin: 0 auto var(--space-7, 1.75rem);
  line-height: 1.75;
  /* Keep the lead centred at every width (beats any inline text-align). */
  text-align: center !important;
}
/* Per-lead block centring (manual, as requested). 20px = var(--space-5). */
.ethar-ab-services__lead {
  display: block;
  margin: 0 auto !important;
}
.ethar-ab-portfolio__lead {
  display: block;
  margin: 0 auto var(--space-5, 1.25rem) auto !important;
}
.ethar-ab-team__lead {
  display: block;
  margin: 0 auto var(--space-5, 1.25rem) auto !important;
}
.ethar-ab-chips,
.ethar-ab-partners {
  justify-content: center;
  justify-items: center;
}
/* Strategic land portfolio & Team expertise: let the chips wrap into centred
 * rows with clear spacing between rows. The fixed 6-column grid never wrapped
 * (it overflowed), so switch to flex — overriding the component's inline
 * display:grid and gap. Row gap > column gap for the requested vertical air. */
.ethar-ab-chips:not(.ethar-ab-chips--cities),
.ethar-ab-partners {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6, 1.5rem) var(--space-4, 1rem) !important;
}
.ethar-ab-chips--cities {
  grid-template-columns: repeat(4, max-content) !important;
}
.ethar-ab-chip.xwui-chip,
.ethar-ab-partner.xwui-chip {
  justify-content: center;
  border-color: transparent;
}
.ethar-ab-chip.xwui-chip {
  background: transparent;
  color: var(--ethar-ab-text);
}
.ethar-ab-chip.xwui-chip .xwui-chip-icon {
  color: var(--ethar-ab-cocoa);
}
/* Inline city icon (bootstrap "building") inside the chip-icon span. */
.ethar-ab-chip__svg {
  width: 1.1em;
  height: 1.1em;
  display: block;
  flex: none;
}
.ethar-ab-chip--city.xwui-chip {
  border-radius: var(--radius-full);
  background: color-mix(
    in srgb,
    var(--ethar-ab-card) 86%,
    var(--ethar-ab-cocoa)
  );
  border-color: transparent;
  color: var(--ethar-ab-mist);
  padding: 8px 10px;
}
/* "Present across the Kingdom's key cities" title: 20px gap before the chips. */
.ethar-ab-presence .ethar-ab-section__title {
  margin-bottom: var(--space-5, 1.25rem);
}
.ethar-ab-partner.xwui-chip {
  min-width: 9rem;
  min-height: auto;
  background: transparent;
  color: var(--ethar-ab-text);
  font-weight: var(--font-weight-normal, 400);
}
.ethar-ab-stats {
  width: 100%;
  max-width: none;
  /* The XWUI grid applies its base `columns` inline and its responsive
   * breakpoints as non-!important #id rules, so inline always wins and the
   * band never goes multi-column. Force the three stats into a row. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-block: var(--ethar-ab-section-gap) var(--space-16, 4rem);
  padding: var(--space-10, 2.5rem) var(--ethar-ab-edge);
  border-radius: var(--ethar-ab-radius);
  border: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ethar-ab-cocoa) 84%, var(--ethar-ab-mist)),
    color-mix(in srgb, var(--ethar-ab-cocoa) 48%, var(--ethar-ab-navy))
  );
}
.ethar-ab-stats .xwui-statistic {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* The value sits in a flex row (.xwui-statistic-content) that defaults to
 * justify-content:flex-start, so the number was left-anchored — centre it. */
.ethar-ab-stats .xwui-statistic-content {
  justify-content: center;
}
.ethar-ab-stats .xwui-statistic-title,
.ethar-ab-stats .xwui-statistic-value {
  color: var(--ethar-ab-mist);
}
.ethar-ab-stats .xwui-statistic-title {
  color: color-mix(in srgb, var(--ethar-ab-mist) 78%, transparent);
}
.ethar-ab-stats .xwui-statistic-value {
  color: var(--ethar-ab-mist);
  font-size: var(--font-size-5xl, 3rem);
  font-weight: var(--font-weight-normal, 400);
}
.ethar-ab-cta.xwui-card {
  width: min(
    calc(100% - var(--ethar-ab-edge) - var(--ethar-ab-edge)),
    var(--ethar-ab-readable)
  );
  background: transparent;
  border: 0;
  border-radius: 0;
}
.ethar-ab-cta .xwui-card-body {
  padding-block: var(--space-12, 3rem);
  padding-inline: 0;
}
.ethar-ab-cta__title {
  color: var(--ethar-ab-mist);
  margin-block: 0 var(--space-2, 0.5rem);
}
.ethar-ab-cta__copy {
  /* !important to beat xwui's .xwui-typography-secondary colour class. */
  color: var(--ethar-ab-mist) !important;
  margin-block: 0 var(--space-5, 1.25rem) !important;
}
.ethar-ab-cta__row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
}
.ethar-ab-cta .xwui-button.ethar-ab-cta__btn {
  border-radius: var(--radius-full);
  width: auto !important;
}
.ethar-ab-cta .xwui-button.ethar-ab-cta__btn--primary {
  background: var(--ethar-ab-cocoa) !important;
  border-color: var(--ethar-ab-cocoa);
  color: var(--ethar-ab-mist) !important;
}
.ethar-ab-cta .xwui-button.ethar-ab-cta__btn:not(.ethar-ab-cta__btn--primary) {
  background: transparent;
  border-color: var(--ethar-ab-cocoa);
  color: var(--ethar-ab-cocoa);
}
/* Drop the button full-width (.xwui-button-container.xwui-button-full-width
 * sets width:100%) so the two CTAs sit inline, side by side. */
.ethar-ab-cta xwui-button,
.ethar-ab-cta .xwui-button-container,
.ethar-ab-cta .xwui-button-full-width {
  display: inline-flex;
  width: auto !important;
}

/* Services cards reflow to the next line as the viewport narrows: 4 → 2 → 1.
 * Placed before the 45rem rule so mobile (1 column) still wins. */
@media (max-width: 60rem) {
  .ethar-ab-intro__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 7vw, 4rem);
  }
  .ethar-ab-intro__media {
    width: min(100%, 42rem);
    margin-inline: auto;
  }
  .ethar-ab-intro__copy,
  html[dir='ltr'] .ethar-ab-intro__copy {
    width: min(100%, 42rem);
    margin-inline: auto;
  }
  .ethar-ab-values-carousel {
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
  }
  .ethar-ab-vcar {
    gap: clamp(0.5rem, 2vw, 1rem);
  }
  .ethar-ab-vcar__strip {
    justify-content: flex-start !important;
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
  }
  .ethar-ab-vm__card {
    grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  }
  .ethar-ab-services .ethar-ab-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ethar-ab-map {
    min-height: 0;
    padding-block: clamp(48px, 9vw, 78px);
  }
  .ethar-ab-map__inner {
    grid-template-columns: 1fr;
    gap: clamp(34px, 8vw, 64px);
  }
  .ethar-ab-map__copy {
    order: 1;
    justify-self: center;
    width: min(100%, 560px);
    min-height: 0;
    padding-block: 0;
  }
  .ethar-ab-map__visual {
    order: 2;
    justify-self: center;
    width: min(100%, 720px);
  }
  .ethar-ab-map xwui-button {
    margin-top: clamp(32px, 8vw, 56px);
  }
  .ethar-ab-chairman {
    padding: clamp(3rem, 8vw, 5rem) var(--ethar-ab-edge);
    overflow: visible;
  }
  .ethar-ab-chairman__title {
    width: 100%;
    margin: 0 0 clamp(1.75rem, 5vw, 3rem);
    text-align: center;
    direction: inherit;
  }
  .ethar-ab-chairman__stage {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .ethar-ab-chairman__photo-wrap,
  .ethar-ab-chairman__panel {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .ethar-ab-chairman__photo-wrap {
    order: 1;
    height: auto;
    aspect-ratio: 1500 / 863;
  }
  .ethar-ab-chairman__panel {
    order: 2;
    min-height: 0;
    margin: 0;
    padding: clamp(2rem, 6vw, 3.25rem) clamp(1.35rem, 5vw, 2.5rem);
    text-align: right;
    overflow-wrap: anywhere;
  }
  html[dir='ltr'] .ethar-ab-chairman__panel {
    direction: ltr;
    text-align: left;
  }
  .ethar-ab-chairman__message,
  .ethar-ab-chairman__name,
  .ethar-ab-chairman__role {
    max-width: 100%;
    text-wrap: pretty;
  }
}

@media (max-width: 45rem) {
  .ethar-ab {
    --ethar-ab-edge: var(--space-4, 1rem);
    --ethar-ab-section-gap: var(--space-12, 3rem);
  }
  .ethar-ab-hero {
    min-height: 34rem;
    background-position: center;
  }
  .ethar-ab-hero__xwui .xwui-hero__inner {
    display: flex;
  }
  .ethar-ab-hero__xwui .xwui-hero__title {
    max-width: none;
    font-size: clamp(3.25rem, 14vw, 4.75rem);
  }
  .ethar-ab-hero__xwui .xwui-hero__subtitle {
    font-size: clamp(1.1rem, 5vw, 1.45rem);
  }
  .ethar-ab-hero__xwui {
    padding-block-end: clamp(3.5rem, 14vw, 5.5rem);
    padding-inline: clamp(1.25rem, 6vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
  }
  .ethar-ab-story,
  .ethar-ab-services .ethar-ab-values__grid,
  .ethar-ab-values__grid--three,
  .ethar-ab-chips,
  .ethar-ab-partners,
  .ethar-ab-stats {
    grid-template-columns: 1fr !important;
  }
  .ethar-ab-story__title {
    max-width: 100%;
  }
  .ethar-ab-intro {
    padding: clamp(2.25rem, 8vw, 3.25rem) var(--ethar-ab-edge)
      clamp(3rem, 10vw, 4.5rem);
  }
  .ethar-ab-intro__inner {
    gap: clamp(1.75rem, 7vw, 2.75rem);
  }
  .ethar-ab-intro__media {
    width: min(100%, 30rem);
  }
  .ethar-ab-intro__image .xwui-image-container,
  .ethar-ab-intro__slides {
    aspect-ratio: 4 / 3;
  }
  .ethar-ab-intro__copy,
  html[dir='ltr'] .ethar-ab-intro__copy {
    gap: clamp(0.9rem, 4vw, 1.35rem);
    align-items: stretch;
  }
  html[dir='rtl'] .ethar-ab-intro__copy {
    text-align: right;
  }
  html[dir='ltr'] .ethar-ab-intro__copy {
    text-align: left;
  }
  .ethar-ab-intro__title {
    max-width: 100%;
    font-size: clamp(2.25rem, 10vw, 3.4rem);
    line-height: 1.12;
  }
  .ethar-ab-intro__title--bottom {
    margin-block-end: clamp(0.5rem, 3vw, 1rem);
  }
  .ethar-ab-intro__lead {
    margin: 0;
    font-size: clamp(1.2rem, 6vw, 1.85rem) !important;
    line-height: 1.45;
  }
  .ethar-ab-intro__body {
    max-width: none;
    margin-bottom: clamp(1.25rem, 5vw, 2rem);
    font-size: clamp(1rem, 4.3vw, 1.22rem) !important;
    line-height: 1.85;
  }
  .ethar-ab-intro__controls {
    margin-block-start: clamp(1rem, 5vw, 1.75rem);
  }
  .ethar-ab-intro__control {
    width: 2.4rem;
  }
  .ethar-ab-intro__control.is-active {
    width: 2.9rem;
  }
  .ethar-ab-intro xwui-button,
  html[dir='rtl'] .ethar-ab-intro__copy xwui-button {
    width: auto;
    justify-content: flex-start;
  }
  html[dir='rtl'] .ethar-ab-intro__copy xwui-button {
    justify-content: flex-end;
  }
  .ethar-ab-intro .xwui-button.ethar-ab-intro__button {
    min-height: 3.25rem;
    padding-inline: 1.2rem;
    font-size: 1rem;
  }
  .ethar-ab-values-carousel {
    padding: clamp(2.25rem, 8vw, 3rem) var(--ethar-ab-edge)
      clamp(3rem, 10vw, 4.25rem);
  }
  .ethar-ab-vcar__title {
    width: 100%;
    margin-bottom: clamp(1.25rem, 6vw, 2rem);
    font-size: clamp(2.1rem, 10vw, 3.25rem);
    text-align: right;
  }
  html[dir='ltr'] .ethar-ab-vcar__title {
    text-align: left;
  }
  .ethar-ab-vcar {
    width: 100%;
    align-items: stretch;
    gap: 0;
  }
  .ethar-ab-vcar xwui-button,
  .ethar-ab-vcar .xwui-button-container {
    display: none !important;
  }
  /* Move the arrows up next to the title on small screens (per client). */
  .ethar-ab-vcar__nav {
    display: flex;
  }
  .ethar-ab-vcar__strip {
    gap: clamp(0.75rem, 3.5vw, 1rem);
    margin-inline: calc(-1 * var(--ethar-ab-edge));
    padding: 0 var(--ethar-ab-edge) 1rem;
    scroll-padding-inline: var(--ethar-ab-edge);
  }
  .ethar-ab-vcard {
    flex-basis: clamp(8rem, 42vw, 10.25rem);
    padding: clamp(1.1rem, 5vw, 1.5rem) clamp(0.7rem, 3vw, 1rem);
    gap: clamp(0.65rem, 3vw, 0.9rem);
  }
  .ethar-ab-vcard__icon {
    width: clamp(3rem, 15vw, 4rem);
  }
  .ethar-ab-vcard .ethar-ab-vcard__label {
    font-size: clamp(0.9rem, 4vw, 1.05rem);
  }
  .ethar-ab-vcar__desc {
    width: 100%;
    margin-top: clamp(1.25rem, 6vw, 2rem);
    text-align: right;
  }
  html[dir='ltr'] .ethar-ab-vcar__desc {
    text-align: left;
  }
  .ethar-ab-vcar__desc-title {
    font-size: clamp(1.35rem, 6vw, 1.8rem);
  }
  .ethar-ab-vcar__desc-body {
    font-size: clamp(0.98rem, 4.4vw, 1.18rem);
    line-height: 1.75;
  }
  .ethar-ab-vm {
    gap: var(--space-5, 1.25rem);
    padding-block: var(--space-5, 1.25rem) var(--space-10, 2.5rem);
  }
  .ethar-ab-vm__card {
    min-height: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-5, 1.25rem);
    padding: var(--space-8, 2rem) var(--space-5, 1.25rem);
  }
  .ethar-ab-vm__card > xwui-image {
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    margin-inline: auto !important;
  }
  .ethar-ab-vm__icon {
    width: clamp(7.5rem, 36vw, 11.5rem);
    justify-self: center !important;
    align-self: center !important;
    margin-inline: auto !important;
  }
  .ethar-ab-vm__icon.xwui-image-container,
  .xwui-image-container.ethar-ab-vm__icon,
  .xwui-box.xwui-image-container.ethar-ab-vm__icon {
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    margin-inline: auto !important;
  }
  .ethar-ab-vm__icon .xwui-image-container,
  .ethar-ab-vm__icon .xwui-image-wrapper,
  .ethar-ab-vm__icon img,
  .ethar-ab-vm__icon .xwui-image,
  .ethar-ab-vm__icon .xwui-image-loaded {
    margin-inline: auto !important;
  }
  .ethar-ab-vm__copy,
  html[dir='ltr'] .ethar-ab-vm__copy {
    align-items: center;
    text-align: center;
  }
  .ethar-ab-vm__title {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
  .ethar-ab-vm__body {
    font-size: clamp(1.1rem, 4.4vw, 1.45rem) !important;
    line-height: 1.9;
  }
  .ethar-ab-map__title {
    font-size: clamp(42px, 14vw, 60px) !important;
    margin-bottom: 24px !important;
  }
  .ethar-ab-map__body {
    font-size: clamp(19px, 6.2vw, 25px) !important;
    line-height: 1.75 !important;
  }
  .ethar-ab-map .xwui-button.ethar-ab-map__button {
    min-height: 50px !important;
    padding-inline: 22px !important;
    font-size: 18px !important;
  }
  .ethar-ab-map__pin {
    width: 21px !important;
    height: 21px !important;
  }
  .ethar-ab-map__pin::before,
  .ethar-ab-map__pin::after {
    width: 12px;
    height: 12px;
  }
  .ethar-ab-chairman__title-line {
    font-size: clamp(2.35rem, 11vw, 3.75rem) !important;
    line-height: 1.16;
  }
  .ethar-ab-chairman__name {
    margin-top: clamp(1.6rem, 5vw, 2.3rem);
    font-size: clamp(1.7rem, 6.4vw, 2.25rem);
    line-height: 1.35;
  }
  .ethar-ab-chairman__role {
    font-size: clamp(1.35rem, 5.2vw, 1.75rem);
    line-height: 1.35;
  }
  .ethar-ab-chairman__message {
    margin-bottom: clamp(1rem, 4vw, 1.4rem);
    /* Was 0.98rem (smaller than the base) — bumped up so the message reads
     * comfortably on phones, per client. !important so xwui-typography-body
     * can't pull it back down to the base size. */
    font-size: clamp(1.3rem, 4.6vw, 1.7rem) !important;
    line-height: 1.85;
  }
  /* Story stacks image-over-text on mobile: cap the media so it reads as a
   * banner instead of a full-height cell stretched by equal-row-heights. */
  .ethar-ab-story__media {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .ethar-ab-story__body .xwui-box {
    padding-block: 0;
  }
  .ethar-ab-founder,
  .ethar-ab-cta {
    width: min(calc(100% - var(--ethar-ab-edge) - var(--ethar-ab-edge)), 56rem);
  }
}

/* ── Buttons: never a contrasting (amber) border ────────────────────────────
 * Filled/primary xwui buttons take their shape from the fill alone — the stock
 * component paints a 1.5px accent border which, when the fill is recoloured per
 * section, shows as a stray amber edge (esp. the inline-end / "border-right").
 * Zero the border width on primary buttons brand-wide (hover only swaps the
 * border COLOUR, so width:0 holds across states). Specificity 0,3,0 beats the
 * component's 0,2,0 with no !important. Outline/ghost buttons keep their border.
 * RULE: do not add a one-sided button border anywhere. */
.ethar-page .xwui-button.xwui-button-primary {
  border-width: 0;
}

/* ── Contact Us page (ethar-ct) ─────────────────────────────────────────────
 * Laid out 1:1 to references/1.png · 2.png · 3.png. Every XWUI component is
 * themed through design TOKENS scoped to these brand wrappers. Narrow internal
 * selectors are used only where XWUI exposes no token for the mockup requirement
 * (hero placement/type and Contact input heights); no !important here.
 *
 *   1. ethar-ct-hero  — static building photo, copy pinned bottom-start
 *   2. ethar-ct-form  — dark cocoa→navy band: intro + two-panel card + ribbon
 *   3. ethar-ct-join  — light mist band: team photo + copy + CTA
 */
.ethar-ct {
  --ethar-ct-edge: clamp(var(--space-5, 1.25rem), 4.4vw, 7rem);
  --ethar-ct-navy: var(--ethar-navy);
  --ethar-ct-mist: var(--ethar-mist);
  --ethar-ct-cocoa: var(--ethar-cocoa);
  --ethar-ct-gold: var(--ethar-gold);
  --ethar-ct-text: color-mix(in srgb, var(--ethar-ct-mist) 94%, transparent);
  --ethar-ct-hero-image: url('/pictures/contact-us/header-img.webp');

  position: relative;
  overflow: hidden;
  color: var(--ethar-ct-text);
  background: var(--ethar-ct-navy);
}

/* ── 1. Hero ──────────────────────────────────────────────────────────────────
 * Static building render (no carousel). Copy pinned to the BOTTOM + inline-start
 * (right in Arabic, left in English) with a soft corner wash for legibility.
 *
 * NOTE: xwui-hero renders its own title/subtitle internally and exposes no prop
 * for bottom placement or per-element size, so the rules below reach its
 * .xwui-hero__* nodes (no !important). This mirrors the existing About hero. */
/* Stacked: readable copy ABOVE, a vertical (portrait) photo BELOW — the text
 * never overlaps the image (per client feedback). Was a full-height building
 * photo with the copy overlaid on it. */
.ethar-ct-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ethar-ct-navy);
  padding-block-end: clamp(2.5rem, 5vw, 5rem);
}

.ethar-ct-hero xwui-hero {
  position: relative;
  width: 100%;
}

.ethar-ct-hero__media {
  width: 100%;
  max-width: min(100%, 34rem);
  margin-inline: auto;
  padding-inline: var(--ethar-ct-edge);
  box-sizing: border-box;
  line-height: 0;
}
.ethar-ct-hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: 0.625rem;
}

.ethar-ct-hero__xwui {
  --xwui-layout-max-width: none;
  --xwui-color-brand-500: var(--ethar-ct-gold);
  --xwui-color-text-primary: var(--ethar-ct-mist);
  --xwui-color-text-secondary: var(--ethar-ct-mist);
  --xwui-color-surface-1: transparent;
  --xwui-color-border-default: transparent;
  /* Extra inline-START padding = breathing room on the text side (right in AR). */
  padding-block: clamp(3rem, 5vw, 6rem) clamp(2rem, 4vw, 4rem);
  padding-inline: clamp(4rem, 7.6vw, 13rem)
    clamp(var(--space-5, 1.25rem), 4vw, 5rem);
}

/* Flex (not grid) so justify-content:flex-start reliably pins the copy to the
 * inline-start edge = RIGHT in Arabic (RTL), LEFT in English (LTR). */
.ethar-ct-hero__xwui .xwui-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.ethar-ct-hero__xwui .xwui-hero__text {
  max-width: min(92vw, 50rem);
  text-align: right;
}
html[dir='ltr'] .ethar-ct-hero__xwui .xwui-hero__text {
  text-align: left;
}

.ethar-ct-hero__xwui .xwui-hero__title {
  width: 100%;
  color: var(--ethar-ct-mist);
  font-size: clamp(4rem, 5.35vw, 8.75rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.05;
  text-align: right;
  text-shadow: 0 0.15rem 1.4rem
    color-mix(in srgb, var(--ethar-ct-navy) 62%, transparent);
}
html[dir='ltr'] .ethar-ct-hero__xwui .xwui-hero__title {
  text-align: left;
}

.ethar-ct-hero__xwui .xwui-hero__subtitle {
  width: 100%;
  max-width: 34ch;
  color: var(--ethar-ct-mist);
  font-size: clamp(1.45rem, 2.05vw, 3.25rem);
  line-height: 1.72;
  text-align: right;
  text-shadow: 0 0.1rem 1rem
    color-mix(in srgb, var(--ethar-ct-navy) 62%, transparent);
}
html[dir='ltr'] .ethar-ct-hero__xwui .xwui-hero__subtitle {
  text-align: left;
}
/* ≥48rem: overlay the copy on the photo, anchored to the TOP — over the clean
 * blue sky, clear of the louvered building below — with a top scrim. ≤48rem
 * keeps the stacked split (readable copy + vertical photo). */
@media (min-width: 48rem) {
  .ethar-ct-hero {
    display: grid;
    position: relative;
    min-height: clamp(32rem, 44vw, 56rem);
    padding-block-end: 0;
  }
  .ethar-ct-hero > *,
  .ethar-ct-hero::after {
    grid-area: 1 / 1;
  }
  .ethar-ct-hero__media {
    align-self: stretch;
    height: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
  }
  .ethar-ct-hero__img {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
  }
  .ethar-ct-hero::after {
    content: '';
    align-self: stretch;
    background: linear-gradient(180deg, rgb(2 9 23 / 0.72) 0%, rgb(2 9 23 / 0.34) 36%, transparent 62%);
    pointer-events: none;
  }
  .ethar-ct-hero xwui-hero {
    align-self: start;
    z-index: 1;
  }
  .ethar-ct-hero__xwui {
    padding-block: clamp(3rem, 5vw, 6rem) clamp(6rem, 12vw, 14rem);
  }
}

/* ── 2. Form band ─────────────────────────────────────────────────────────────
 * Dark warm cocoa at the top fading to navy at the bottom (matches the macet). */
.ethar-ct-form {
  box-sizing: border-box;
  position: relative;
  padding-block: clamp(7rem, 8.7vw, 14.5rem) clamp(5.5rem, 6.6vw, 10rem);
  padding-inline: var(--ethar-ct-edge);
  background:
    radial-gradient(
      110% 78% at 82% 7%,
      color-mix(in srgb, var(--ethar-ct-cocoa) 46%, transparent) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, #372625 0%, #1a1722 48%, var(--ethar-ct-navy) 100%);
}

/* Intro: copy on the inline-start (right in AR), chat icon on the opposite side.
 * direction is forced per page-dir so the flex order is correct even though the
 * parent <xwui-box> stamps dir=ltr on itself: AR → copy RIGHT + icon LEFT. */
.ethar-ct-form__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(3rem, 8vw, 15rem);
  width: min(100%, 92vw, 150rem);
  margin-inline: auto;
  margin-block-end: clamp(5.5rem, 8vw, 13rem);
}
html[dir='rtl'] .ethar-ct-form__intro {
  direction: rtl;
}
html[dir='ltr'] .ethar-ct-form__intro {
  direction: ltr;
}

.ethar-ct-form__intro-copy {
  max-width: min(52rem, 54vw);
  text-align: right;
}
html[dir='ltr'] .ethar-ct-form__intro-copy {
  text-align: left;
}

.ethar-ct-form__heading {
  color: var(--ethar-ct-mist);
  font-weight: var(--font-weight-semibold, 600);
  font-size: clamp(2.7rem, 4.25vw, 6.2rem);
  line-height: 1.18;
  margin: 0 0 clamp(1.7rem, 3vw, 4.5rem);
}

.ethar-ct-form__subheading {
  color: var(--ethar-ct-mist);
  font-size: clamp(1.4rem, 1.85vw, 3rem);
  line-height: 1.72;
  margin: 0;
}

.ethar-ct-form__intro-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ethar-ct-form__chat {
  color: var(--ethar-ct-gold);
  width: clamp(8.5rem, 12vw, 20rem);
  height: clamp(8.5rem, 12vw, 20rem);
  opacity: 0.72;
}

/* The two-panel card. direction:ltr fixes the visual order (form left, info
 * right) in BOTH languages so the ribbon always drapes the same way; the inner
 * panel copy follows the page direction. */
.ethar-ct-card {
  position: relative;
  direction: ltr;
  display: grid;
  grid-template-columns: 1.72fr 1fr;
  width: min(100%, 92vw, 150rem);
  min-height: clamp(44rem, 51.5vw, 86rem);
  margin-inline: auto;
  border-radius: 0;
  box-shadow: 0 1.6rem 4rem
    color-mix(in srgb, var(--ethar-ct-navy) 62%, transparent);
}

.ethar-ct-card__form,
.ethar-ct-card__info {
  min-width: 0;
}
html[dir='rtl'] .ethar-ct-card__form,
html[dir='rtl'] .ethar-ct-card__info {
  direction: rtl;
  text-align: right;
}
html[dir='ltr'] .ethar-ct-card__form,
html[dir='ltr'] .ethar-ct-card__info {
  direction: ltr;
  text-align: left;
}

/* White form panel — scopes the input tokens so XWUI inputs render as light
 * fields on the white surface. Exact field height is a narrow override below
 * because the component size scale tops out before the mockup height. */
.ethar-ct-card__form {
  --bg-primary: #f4f4f6;
  --text-primary: #2e2723;
  --text-secondary: #6f655f;
  --text-tertiary: #9b9b9d;
  --border-color: transparent;
  --border-input-color: transparent;
  --border-input-width: 0;
  --border-strong: transparent;
  --accent-primary: var(--ethar-ct-cocoa);
  --radius-input: 0.85rem;
  /* Bigger field + placeholder text (the xwui inputs read --font-size-base for
   * the lg size; bumping it here enlarges every field's text token-only). */
  --font-size-base: clamp(1.35rem, 1.7vw, 2.6rem);
  --font-size-lg: clamp(1.35rem, 1.7vw, 2.6rem);
  --font-size-sm: clamp(1.05rem, 1.25vw, 1.8rem);

  background: #ffffff;
  padding: clamp(10rem, 13.2vw, 21.5rem) clamp(3.8rem, 6.6vw, 10.5rem)
    clamp(4rem, 6vw, 9rem);
}

.ethar-ct-form__fields {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.25vw, 2rem);
}

.ethar-ct-card__form .xwui-input-text-container {
  min-height: clamp(5.25rem, 6.9vw, 11.25rem);
  padding-inline: clamp(2rem, 3.4vw, 5.5rem);
  background: #f4f4f6;
}
.ethar-ct-card__form .xwui-input,
.ethar-ct-card__form .xwui-textarea {
  text-align: right;
}
html[dir='ltr'] .ethar-ct-card__form .xwui-input,
html[dir='ltr'] .ethar-ct-card__form .xwui-textarea {
  text-align: left;
}
.ethar-ct-card__form .xwui-textarea {
  min-height: clamp(15rem, 16.8vw, 26.5rem);
  padding: clamp(2rem, 3vw, 5rem) clamp(2rem, 3.4vw, 5.5rem);
  border-width: 0;
  background: #f4f4f6;
  resize: none;
  /* xwui's textarea size class doesn't apply the field font-size (it falls back
   * to a tiny default), so the message text/placeholder rendered far smaller
   * than the name/email inputs. Pin it to the same token the inputs use. */
  font-size: var(--font-size-base);
  line-height: 1.5;
}
.ethar-ct-card__form .xwui-textarea::placeholder {
  font-size: var(--font-size-base);
}

.ethar-ct-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-block-start: clamp(1.25rem, 2.25vw, 3.6rem);
}

/* Submit button (cocoa) — token-scoped. */
.ethar-ct-form__submit {
  --accent-primary: var(--ethar-ct-cocoa);
  --accent-hover: color-mix(in srgb, var(--ethar-ct-cocoa) 82%, #000);
  --role-primary-bg: var(--ethar-ct-cocoa);
  --role-primary-bg-hover: color-mix(in srgb, var(--ethar-ct-cocoa) 82%, #000);
  --role-primary-fg: var(--ethar-ct-mist);
  --radius-button: 0.6rem;
  min-width: clamp(7.5rem, 7.5vw, 13rem);
}

/* Dark info panel — warm golden glow up top fading to deep cocoa/navy. */
.ethar-ct-card__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(0.65rem, 1.4vw, 2rem);
  padding: clamp(5rem, 7vw, 12rem) clamp(3rem, 4.2vw, 7.25rem)
    clamp(4.2rem, 6vw, 10rem);
  background:
    radial-gradient(
      125% 72% at 76% 0%,
      #9f8d7d 0%,
      color-mix(in srgb, var(--ethar-ct-cocoa) 72%, #050812) 42%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ethar-ct-cocoa) 58%, #11131b) 0%,
      color-mix(in srgb, var(--ethar-ct-cocoa) 30%, #090a12) 58%,
      #111017 100%
    );
}

.ethar-ct-info__title {
  color: var(--ethar-ct-mist);
  font-weight: var(--font-weight-semibold, 600);
  font-size: clamp(3rem, 4.8vw, 7.25rem);
  line-height: 1.08;
  margin: 0 0 clamp(1.25rem, 2.6vw, 4.5rem);
}

.ethar-ct-info__lines {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.2vw, 0.7rem);
}

.ethar-ct-info__line {
  color: var(--ethar-ct-mist);
  font-size: clamp(1.05rem, 1.35vw, 2.2rem);
  line-height: 1.75;
  margin: 0;
  text-decoration: none;
}
a.ethar-ct-info__line:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ethar-ct-info__map {
  align-self: flex-start;
  margin-block-start: clamp(2.5rem, 4vw, 6.5rem);
  color: var(--ethar-ct-mist);
  font-size: clamp(1.1rem, 1.45vw, 2.35rem);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ethar-ct-info__map:hover {
  color: color-mix(in srgb, var(--ethar-ct-mist) 70%, #fff);
}

/* Metallic ribbon — decorative, draped over the top seam between the panels.
 * The asset already flows from the info (right) panel toward the form (left). */
.ethar-ct-card__ribbon {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 8.8%;
  width: min(58%, 82rem);
  height: auto;
  transform: translateY(-9%);
  pointer-events: none;
  filter: drop-shadow(
    0 1rem 1.75rem color-mix(in srgb, var(--ethar-ct-navy) 55%, transparent)
  );
}

/* ── 3. Join band (mist) ────────────────────────────────────────────────────── */
.ethar-ct-join {
  box-sizing: border-box;
  padding-block: clamp(6rem, 7.6vw, 12.5rem);
  padding-inline: var(--ethar-ct-edge);
  background: var(--ethar-ct-mist);
}

/* direction:ltr → photo always on the left, copy on the right; inner copy
 * follows the page direction. align-items:stretch + a flex copy column let the
 * text fill the FULL height (heading at top, CTA pinned to the bottom) — no
 * vertical centring. */
.ethar-ct-join__grid {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(24rem, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(4rem, 11.5vw, 26rem);
  align-items: stretch;
  width: min(100%, 92vw, 150rem);
  margin-inline: auto;
}

.ethar-ct-join__media {
  align-self: stretch;
  aspect-ratio: 919 / 1067;
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: none;
}

.ethar-ct-join__photo {
  display: block;
  width: 100%;
  height: 100%;
}

.ethar-ct-join__copy {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: clamp(2.4rem, 4vw, 7rem);
}
html[dir='rtl'] .ethar-ct-join__copy {
  direction: rtl;
  text-align: right;
}
html[dir='ltr'] .ethar-ct-join__copy {
  direction: ltr;
  text-align: left;
}

.ethar-ct-join__title {
  color: #1c1b22;
  font-weight: var(--font-weight-bold, 700);
  font-size: 40px !important;
  line-height: 1.08;
  margin: 0 0 20px !important;
}

.ethar-ct-join__lead {
  color: #2a2832;
  font-weight: var(--font-weight-semibold, 600);
  font-size: 30px !important;
  line-height: 1.65;
  margin: 0 0 20px !important;
}

.ethar-ct-join__copy-body {
  color: var(--ethar-ct-cocoa);
  font-size: 25px !important;
  line-height: 1.8;
  margin: 0 0 20px !important;
}

/* margin-top:auto pins the CTA to the bottom so the copy spans the full height. */
.ethar-ct-join__actions {
  display: flex;
  margin-top: auto;
}

.ethar-ct-join__cta {
  --accent-primary: var(--ethar-ct-cocoa);
  --accent-hover: color-mix(in srgb, var(--ethar-ct-cocoa) 82%, #000);
  --role-primary-bg: var(--ethar-ct-cocoa);
  --role-primary-bg-hover: color-mix(in srgb, var(--ethar-ct-cocoa) 82%, #000);
  --role-primary-fg: var(--ethar-ct-mist);
  --radius-button: 0.6rem;
  min-width: min(100%, clamp(31rem, 34vw, 56rem));
  min-height: clamp(4.4rem, 5.2vw, 8.5rem);
  font-size: clamp(1.35rem, 1.85vw, 3rem);
}

/* The "join" band stays MIST in every theme (per design) — its copy is dark
 * charcoal/cocoa, which reads on the light surface regardless of active theme. */

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .ethar-ct-hero {
    min-height: 0;
  }
  .ethar-ct-form__intro {
    width: min(100%, 44rem);
  }
  .ethar-ct-form__intro-copy {
    max-width: none;
  }
  .ethar-ct-card {
    grid-template-columns: 1fr;
    width: min(100%, 44rem);
    min-height: 0;
  }
  .ethar-ct-card__form {
    padding: clamp(8rem, 18vw, 12rem) clamp(1.5rem, 6vw, 3.5rem)
      clamp(2.5rem, 8vw, 4rem);
  }
  .ethar-ct-card__info {
    min-height: clamp(24rem, 60vw, 34rem);
  }
  /* Stacked: ribbon would float awkwardly over the seam — tuck it to the top
   * of the form panel and shrink it. */
  .ethar-ct-card__ribbon {
    width: min(76%, 32rem);
    right: 6%;
    transform: translateY(-18%);
  }
  .ethar-ct-join__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 7vw, 4rem);
    width: min(100%, 44rem);
  }
  .ethar-ct-join__media {
    max-width: 34rem;
    margin-inline: auto;
  }
  .ethar-ct-join__copy {
    padding-block: 0;
    align-items: center !important;
    text-align: center !important;
  }
  html[dir='rtl'] .ethar-ct-join__copy,
  html[dir='ltr'] .ethar-ct-join__copy {
    text-align: center !important;
  }
  .ethar-ct-join__title,
  .ethar-ct-join__lead,
  .ethar-ct-join__copy-body {
    width: 100%;
    text-align: center !important;
  }
  .ethar-ct-join__copy xwui-typography,
  .ethar-ct-join__copy .xwui-typography {
    text-align: center !important;
    justify-content: center !important;
  }
  .ethar-ct-join__actions {
    width: 100%;
    justify-content: center !important;
  }
  .ethar-ct-join__actions xwui-button,
  .ethar-ct-join__actions .xwui-button-container,
  .ethar-ct-join__actions .xwui-button-full-width {
    display: inline-flex !important;
    justify-content: center !important;
    width: auto !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 40rem) {
  .ethar-ct-hero {
    min-height: 0;
  }
  .ethar-ct-hero__xwui .xwui-hero__title {
    font-size: clamp(3.2rem, 14vw, 4.25rem);
  }
  .ethar-ct-hero__xwui .xwui-hero__subtitle {
    font-size: clamp(1.15rem, 5.5vw, 1.55rem);
  }
  .ethar-ct-form__intro {
    flex-direction: column-reverse;
    align-items: flex-end;
    text-align: right;
  }
  html[dir='ltr'] .ethar-ct-form__intro {
    align-items: flex-start;
  }
  .ethar-ct-card__ribbon {
    display: none;
  }
  .ethar-ct-hero__xwui {
    padding-block-end: clamp(3rem, 14vw, 5rem);
    padding-inline: clamp(1.25rem, 6vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
  }
  .ethar-ct-form__heading {
    font-size: clamp(2.6rem, 12vw, 3.6rem);
  }
  .ethar-ct-form__subheading {
    font-size: clamp(1.2rem, 5.5vw, 1.65rem);
  }
}