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

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

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

html[dir="ltr"] .ethar-ct-form__actions .xwui-button.ethar-ct-form__submit,
html[dir="ltr"] .ethar-ct-form__actions .ethar-ct-form__submit,
html[dir="ltr"] .ethar-ct-join__actions .xwui-button.ethar-ct-join__cta,
html[dir="ltr"] .ethar-ct-join__actions .ethar-ct-join__cta {
  background: linear-gradient(to right, #15161f, #aa7a5d) !important;
  background-image: linear-gradient(to right, #15161f, #aa7a5d) !important;
}

.ethar-ct-form__actions .xwui-button.ethar-ct-form__submit:hover,
.ethar-ct-form__actions .xwui-button.ethar-ct-form__submit:focus-visible,
.ethar-ct-join__actions .xwui-button.ethar-ct-join__cta:hover,
.ethar-ct-join__actions .xwui-button.ethar-ct-join__cta:focus-visible {
  background: linear-gradient(to right, #aa7a5d, #15161f) !important;
  background-image: linear-gradient(to right, #aa7a5d, #15161f) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  outline: none;
}

html[dir="ltr"] .ethar-ct-form__actions .xwui-button.ethar-ct-form__submit:hover,
html[dir="ltr"] .ethar-ct-form__actions .xwui-button.ethar-ct-form__submit:focus-visible,
html[dir="ltr"] .ethar-ct-join__actions .xwui-button.ethar-ct-join__cta:hover,
html[dir="ltr"] .ethar-ct-join__actions .xwui-button.ethar-ct-join__cta:focus-visible {
  background: linear-gradient(to right, #15161f, #aa7a5d) !important;
  background-image: linear-gradient(to right, #15161f, #aa7a5d) !important;
}

/* ── 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.png");

  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%;
  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: 400;
  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(
      0deg,
      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: end;
    z-index: 1;
  }
  .ethar-ct-hero__xwui {
    padding-block: clamp(3rem, 5vw, 6rem) clamp(6rem, 12vw, 14rem);
  }
  .ethar-ct-hero__xwui .xwui-hero__inner {
    justify-content: flex-end !important;
  }
  html[dir="ltr"] .ethar-ct-hero__xwui .xwui-hero__inner {
    justify-content: flex-start !important;
  }
  .ethar-ct-hero__xwui .xwui-hero__text,
  .ethar-ct-hero__xwui .xwui-hero__title,
  .ethar-ct-hero__xwui .xwui-hero__subtitle {
    text-align: right !important;
  }
  html[dir="ltr"] .ethar-ct-hero__xwui .xwui-hero__text,
  html[dir="ltr"] .ethar-ct-hero__xwui .xwui-hero__title,
  html[dir="ltr"] .ethar-ct-hero__xwui .xwui-hero__subtitle {
    text-align: left !important;
  }
}

/* Mobile (stacked, < 48rem): photo first, then the copy block on the SAME dark
   cocoa→navy gradient as .ethar-ct-form. Text stays light (mist). */
@media (max-width: 47.99rem) {
  .ethar-ct-hero {
    padding-block-end: 0 !important;
  }

  .ethar-ct-hero__media {
    order: -1;
    max-width: none !important;
  }

  .ethar-ct-hero__xwui,
  .ethar-ct-hero__xwui .xwui-hero {
    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%) !important;
  }
}

/* ── 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-block-start: 70px !important;
  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: 400;
  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);
  padding-block-start: 100px !important;
}

.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;
  direction: ltr;
  justify-content: flex-start;
  margin-block-start: clamp(1.25rem, 2.25vw, 3.6rem);
}

.ethar-ct-form__actions xwui-button {
  margin-left: 0;
  margin-right: auto;
}

/* 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: 400;
  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: 400;
  font-size: 40px !important;
  line-height: 1.08;
  margin: 0 0 20px !important;
}

.ethar-ct-join__lead {
  color: #2a2832;
  font-weight: 400;
  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-hero__media {
    padding-inline: 0 !important;
  }
  .ethar-ct-hero__img {
    border-radius: 0 !important;
  }
  .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);
  }
}

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

html[dir="ltr"] .ethar-ct-form__actions .xwui-button.ethar-ct-form__submit,
html[dir="ltr"] .ethar-ct-join__actions .xwui-button.ethar-ct-join__cta {
  background: linear-gradient(to right, #15161f, #aa7a5d) !important;
  background-image: linear-gradient(to right, #15161f, #aa7a5d) !important;
}

.ethar-ct-form__actions .xwui-button.ethar-ct-form__submit:hover,
.ethar-ct-form__actions .xwui-button.ethar-ct-form__submit:focus-visible,
.ethar-ct-join__actions .xwui-button.ethar-ct-join__cta:hover,
.ethar-ct-join__actions .xwui-button.ethar-ct-join__cta:focus-visible {
  background: linear-gradient(to right, #aa7a5d, #15161f) !important;
  background-image: linear-gradient(to right, #aa7a5d, #15161f) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  outline: none;
}

html[dir="ltr"] .ethar-ct-form__actions .xwui-button.ethar-ct-form__submit:hover,
html[dir="ltr"] .ethar-ct-form__actions .xwui-button.ethar-ct-form__submit:focus-visible,
html[dir="ltr"] .ethar-ct-join__actions .xwui-button.ethar-ct-join__cta:hover,
html[dir="ltr"] .ethar-ct-join__actions .xwui-button.ethar-ct-join__cta:focus-visible {
  background: linear-gradient(to right, #15161f, #aa7a5d) !important;
  background-image: linear-gradient(to right, #15161f, #aa7a5d) !important;
}