/* ============================================================
   BlackOak — Section styles
   Desktop-first. Tablet <= 1023px, Mobile <= 767px.
   ============================================================ */

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color 0.35s var(--ease-out-quart),
    border-color 0.35s var(--ease-out-quart), transform 0.35s var(--ease-out-quart);
  border-bottom: var(--line-w) solid transparent;
}

.site-header--stuck {
  background-color: rgba(24, 26, 32, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.site-header--hidden {
  transform: translateY(-100%);
}

/* Full-bleed: gutter on the left only, because the CTA is meant to run into
   the right edge of the viewport with no gap. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--header-h);
  padding-left: var(--pad-x);
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand__logo {
  height: 32px;
  width: auto;
}

/* Wordmark fallback, shown by JS when the logo file is unavailable */
.brand__wordmark {
  display: flex;
  align-items: baseline;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--text-0);
  font-weight: 300;
}

.brand__wordmark b {
  font-weight: 500;
}

.brand__wordmark span {
  font-weight: 200;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav__link {
  position: relative;
  display: block;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.8;
  color: #e7e7e7;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out-quart);
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: var(--text-0);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out-quart);
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--text-0);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 20px;
  flex-shrink: 0;
}

/* Currency / language — minimal dropdowns, label + caret, no chrome */
.minidrops {
  display: flex;
  align-items: center;
  gap: 8px;
}

.minidrop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 2;
  font-weight: 400;
  color: #f6f8fa;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease-out-quart);
}

.minidrop:hover {
  opacity: 0.75;
}

.minidrop__flag {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Flush right and full nav height — the CTA is what sets --header-h */
.site-header__cta {
  align-self: stretch;
  padding-block: 0;
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
}

.burger__bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--text-0);
  transition: transform 0.3s var(--ease-out-quart);
}

.burger[aria-expanded='true'] .burger__bar:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__bar:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
}

@media (max-width: 1200px) {
  .site-header__inner {
    gap: 20px;
  }

  .site-nav__link {
    font-size: 13px;
    padding-inline: 6px;
  }

  .site-header__cta {
    padding-inline: 26px;
  }
}

@media (max-width: 1023px) {
  .site-nav,
  .site-header__cta,
  .site-header__actions > .minidrops {
    display: none;
  }

  /* Nothing runs to the edge any more, so the gutter comes back */
  .site-header__inner {
    padding-right: var(--pad-x);
  }

  .burger {
    display: flex;
  }
}

/* The header hides the pair, so the drawer shows it */
.drawer__minidrops {
  gap: 20px;
  margin-top: auto;
  padding-top: 8px;
}

/* ============================================================
   Mobile drawer
   ============================================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background-color: rgba(24, 26, 32, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-quart);
}

.drawer.is-open {
  opacity: 1;
}

.drawer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 100%;
  padding: calc(var(--header-h) + 40px) var(--pad-x) 48px;
  overflow-y: auto;
}

.drawer__list {
  display: flex;
  flex-direction: column;
}

.drawer__link {
  display: block;
  padding: 18px 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-50);
  border-bottom: var(--line-w) solid var(--line);
  transition: color 0.2s var(--ease-out-quart), padding-left 0.3s var(--ease-out-quart);
}

.drawer__link:hover {
  color: var(--text-0);
  padding-left: 8px;
}

/* ============================================================
   Hero
   ============================================================ */
/* The design frame hugs its content: nav (74) + 64 padding + 443 of copy + 64
   comes to 645px at 1440 wide. Height is left to the content rather than
   pinned to the viewport so it stays at that figure. */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-black);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

/* Full-bleed, like the nav above it: 80px of side padding, and the nav's own
   height added to the top so the fixed header clears the copy. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: calc(var(--header-h) + 64px) 80px 64px;
}

/* ----- Left column -----
   Both columns grow from a zero basis, but the aside is capped at 340px, so
   at 1440 the split lands on the designed 900 / 340. */
.hero__main {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding-left: 64px;
}

/* The hairline is drawn rather than bordered so the 64px indent is measured
   from the rule itself, not from the pixel after it. */
.hero__main::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--line);
}

.hero__eyebrow {
  width: 100%;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.56px;
  text-transform: uppercase;
  color: var(--text-50);
}

/* Serif display. The first line is uppercase and one value down from white;
   only "Real Estate" comes up to full white, which is the whole emphasis. */
.hero__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 60px;
  line-height: 1;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.hero__title-line {
  text-transform: uppercase;
  letter-spacing: -3.6px;
}

.hero__title-line--italic {
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -2.4px;
}

.hero__title .em {
  font-weight: 500;
  letter-spacing: -2.4px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.hero__note {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-top: 34px;
}

.hero__note-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--text-0);
}

.hero__note-copy {
  max-width: 400px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: #e7e7e7;
  opacity: 0.8;
}

/* ----- Right column ----- */
.hero__aside {
  flex: 1 0 0;
  min-width: 0;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 60px;
}

.hero__avatars {
  display: flex;
  align-items: center;
  padding-block: 20px;
}

/* 40px including the ring, so the portrait sits in a 36px well. The image
   keeps its full width and overflows the bottom of that well — the crop is
   what frames the head. */
.hero__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid #101828; /* Surface/950 — the ring that separates the stack */
  border-radius: 999px;
  background-color: var(--text-0);
}

.hero__avatar:not(:last-child) {
  margin-right: -6px;
}

.hero__avatar img {
  width: 100%;
  height: auto;
}

.hero__aside-lead {
  width: 100%;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
  color: var(--text-0);
}

.hero__aside-copy {
  width: 100%;
  font-size: 14px;
  line-height: 1.8;
  color: #e7e7e7;
}

/* Hero entrance */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow,
.hero__title-line,
.hero__actions,
.hero__note,
.hero__aside > * {
  animation: hero-rise 0.9s var(--ease-out-expo) both;
}

.hero__eyebrow                 { animation-delay: 0.06s; }
.hero__title-line:nth-child(1) { animation-delay: 0.14s; }
.hero__title-line:nth-child(2) { animation-delay: 0.22s; }
.hero__actions                 { animation-delay: 0.34s; }
.hero__note                    { animation-delay: 0.42s; }
.hero__aside > *               { animation-delay: 0.46s; }

/* Below 1200 the left column is too narrow to hold "Real Estate Advisory" on
   one line at 60px, so the display steps down before it can wrap. */
@media (max-width: 1200px) {
  .hero__title {
    font-size: 50px;
  }

  .hero__title-line {
    letter-spacing: -3px;
  }

  .hero__title-line--italic,
  .hero__title .em {
    letter-spacing: -2px;
  }
}

@media (max-width: 1023px) {
  .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    padding: calc(var(--header-h) + 56px) var(--pad-x) 64px;
  }

  .hero__main {
    padding-left: 32px;
  }

  .hero__aside {
    max-width: 520px;
    padding-top: 0;
    padding-left: 32px;
  }

  .hero__avatars {
    padding-block: 0;
  }
}

@media (max-width: 767px) {
  .hero__inner {
    gap: 40px;
    padding-block: calc(var(--header-h) + 40px) 56px;
  }

  .hero__main {
    gap: 28px;
    padding-left: 20px;
  }

  .hero__aside {
    padding-left: 20px;
  }

  .hero__title {
    font-size: 34px;
  }

  .hero__title-line {
    letter-spacing: -1.6px;
  }

  .hero__title-line--italic,
  .hero__title .em {
    letter-spacing: -1px;
  }

  .hero__eyebrow {
    font-size: 12px;
    letter-spacing: 0.48px;
  }

  .hero__actions {
    gap: 24px;
  }

  .hero__note {
    padding-top: 12px;
  }

  .hero__note-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero__actions .btn--fill {
    width: 100%;
  }
}

/* ============================================================
   Recognition
   ============================================================ */
.recognition__title {
  max-width: 16ch;
}

.recognition__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 80px;
  border-top: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
}

.recognition__cell {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 240px;
  padding: 44px var(--pad-x) 44px 0;
  transition: background-color 0.35s var(--ease-out-quart);
}

.recognition__grid > .recognition__cell:first-child {
  padding-left: var(--pad-x);
}

.recognition__cell + .recognition__cell {
  padding-left: 40px;
  border-left: var(--line-w) solid var(--line);
}

.recognition__cell:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Fixed band, bottom-aligned: the four marks have wildly different
   proportions (a wide wordmark, two medium wordmarks, one stacked lockup),
   so each is capped individually to land on a shared optical cap-height
   and a shared baseline. Sizes below are tuned by eye, not by geometry. */
.recognition__badge {
  display: flex;
  align-items: flex-end;
  height: 54px;
}

.recognition__logo {
  width: auto;
  object-fit: contain;
  object-position: left bottom;
  /* Normalise assorted source colours to the page's monochrome */
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 0.35s var(--ease-out-quart);
}

.recognition__cell:hover .recognition__logo {
  opacity: 1;
}

/* All-caps wordmark, no ascenders or descenders — reads large for its height */
.recognition__logo--reuters {
  height: 21px;
}

/* Tall display serif with fine hairlines — needs a little more height */
.recognition__logo--spears {
  height: 30px;
}

/* Mixed-case serif with ascenders and descenders */
.recognition__logo--ab {
  height: 27px;
  max-width: 190px;
}

/* Stacked lockup rather than a wordmark: a block of type always reads
   heavier than a single line, so it is matched on overall mass — noticeably
   shorter than the band it sits in. */
.recognition__logo--mdl {
  height: 44px;
  max-width: 100px;
}

.recognition__text {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-300);
  margin-top: auto;
}

/* Text fallback when a badge image is missing (added by JS) */
.recognition__badge-text {
  align-self: flex-end;
  font-size: 17px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-50);
}

.recognition__foot {
  margin-top: 56px;
}

@media (max-width: 1023px) {
  .recognition__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
  }

  .recognition__cell,
  .recognition__cell + .recognition__cell {
    min-height: 200px;
    padding: 36px var(--pad-x);
  }

  .recognition__cell:nth-child(odd) {
    border-left: none;
  }

  .recognition__cell:nth-child(n + 3) {
    border-top: var(--line-w) solid var(--line);
  }
}

@media (max-width: 600px) {
  .recognition__grid {
    grid-template-columns: 1fr;
  }

  .recognition__cell,
  .recognition__cell + .recognition__cell {
    min-height: 0;
    gap: 22px;
    padding: 32px var(--pad-x);
    border-left: none;
  }

  .recognition__cell + .recognition__cell {
    border-top: var(--line-w) solid var(--line);
  }
}

/* ============================================================
   Objective
   ============================================================ */
.objective__title {
  max-width: 20ch;
}

.objective__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 88px;
  border-top: var(--line-w) solid var(--line);
}

.objective__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  padding: 44px 40px 52px 0;
  transition: opacity 0.3s var(--ease-out-quart);
}

.objective__item + .objective__item {
  padding-left: 40px;
  border-left: var(--line-w) solid var(--line);
}

/* Hovering one item dims its siblings */
@media (hover: hover) {
  .objective__list:hover .objective__item {
    opacity: 0.45;
  }

  .objective__list:hover .objective__item:hover {
    opacity: 1;
  }
}

.objective__index {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text-500);
}

.objective__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.objective__heading {
  font-family: var(--font-serif);
  font-weight: 400;
}

.objective__body .link {
  margin-top: auto;
}

.objective__copy {
  margin-bottom: 10px;
}

@media (max-width: 1023px) {
  .objective__list {
    grid-template-columns: 1fr;
    margin-top: 56px;
  }

  .objective__item {
    flex-direction: row;
    gap: 28px;
    padding: 36px 0;
  }

  .objective__item + .objective__item {
    padding-left: 0;
    border-left: none;
    border-top: var(--line-w) solid var(--line);
  }

  .objective__index {
    flex-shrink: 0;
    padding-top: 6px;
  }
}

@media (max-width: 480px) {
  .objective__item {
    flex-direction: column;
    gap: 16px;
  }
}

/* ============================================================
   Mandate — full-bleed photographic band
   ============================================================ */
.mandate {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-black);
}

.mandate__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mandate__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stacked gradients multiply, so the vertical pass is kept fully
   transparent through the middle — it only softens the two section edges,
   leaving the horizontal pass in sole charge of legibility: heavy under
   the headline, light on the right so the image reads through the
   frosted steps panel. */
.mandate__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(24, 26, 32, 0.94) 0%,
      rgba(24, 26, 32, 0.86) 40%,
      rgba(24, 26, 32, 0.44) 100%
    ),
    linear-gradient(
      180deg,
      rgba(24, 26, 32, 0.92) 0%,
      rgba(24, 26, 32, 0) 18%,
      rgba(24, 26, 32, 0) 82%,
      rgba(24, 26, 32, 0.96) 100%
    );
}

.mandate__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.mandate__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: var(--section-pad-y) 64px var(--section-pad-y) var(--pad-x);
}

.mandate__title {
  max-width: 15ch;
}

.mandate__copy {
  max-width: 46ch;
}

.mandate__actions {
  margin-top: 16px;
}

/* Right-hand panel bleeds to the viewport edge */
.mandate__steps {
  position: relative;
  align-self: stretch;
  padding-block: var(--section-pad-y);
}

.mandate__steps::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: min(0px, calc((var(--content-max-width) - 100vw) / 2));
  background: rgba(24, 26, 32, 0.62);
  backdrop-filter: blur(14px) saturate(0.8);
  -webkit-backdrop-filter: blur(14px) saturate(0.8);
  border-left: var(--line-w) solid var(--line);
}

.mandate__step {
  display: flex;
  gap: 32px;
  padding: 36px 64px;
  transition: background-color 0.35s var(--ease-out-quart), opacity 0.3s var(--ease-out-quart);
}

.mandate__step + .mandate__step {
  border-top: var(--line-w) solid var(--line);
}

@media (hover: hover) {
  .mandate__steps:hover .mandate__step {
    opacity: 0.5;
  }

  .mandate__steps:hover .mandate__step:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.03);
  }
}

.mandate__step-num {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text-500);
  padding-top: 8px;
}

.mandate__step-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mandate__step-title {
  font-size: 22px;
  font-weight: 500;
}

@media (max-width: 1023px) {
  /* minmax(0, 1fr) — a bare 1fr floors the track at the item's min-content,
     which lets the long CTA labels push the column past the viewport. */
  .mandate__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mandate__text {
    padding: var(--section-pad-y) var(--pad-x) 56px;
  }

  .mandate__steps {
    padding-block: 0 var(--section-pad-y);
  }

  .mandate__steps::before {
    left: min(0px, calc((var(--content-max-width) - 100vw) / 2));
    border-left: none;
    border-top: var(--line-w) solid var(--line);
  }

  .mandate__step {
    padding: 32px var(--pad-x);
  }
}

@media (max-width: 480px) {
  .mandate__step {
    gap: 18px;
  }
}

/* ============================================================
   Listing grid — image-led, text overlaid, no card chrome
   Shared by Current Opportunities.
   ============================================================ */
.opportunities__title {
  max-width: 20ch;
}

.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 80px;
}

.listing {
  position: relative;
}

/* 4:3 to match the source photography (1312x894), which is landscape —
   a portrait card would throw away a third of every frame. */
.listing__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--surface-panel);
}

.listing__media {
  position: absolute;
  inset: 0;
}

.listing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out-expo);
}

.listing__link:hover .listing__media img {
  transform: scale(1.05);
}

/* Scrim carries the overlaid text. It must not lighten on hover — the
   detail line expands into it and needs the same contrast it had at rest. */
.listing__scrim {
  position: absolute;
  inset: 0;
  background: var(--image-scrim);
}

.listing__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 28px 30px;
}

.listing__meta {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-100);
  opacity: 0.85;
}

.listing__name {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.2;
  color: var(--text-0);
}

.listing__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.listing__price {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-0);
  white-space: nowrap;
}

/* Sized so the longest adviser name on the roster stays on one line —
   a wrap here would lift the price row and break alignment across the grid. */
.listing__adviser {
  font-size: 10px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-100);
  opacity: 0.8;
  text-align: right;
}

.listing__fact {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-100);
  /* Held back until hover on pointer devices so the resting card stays quiet */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-out-quart), opacity 0.35s var(--ease-out-quart),
    margin-top 0.45s var(--ease-out-quart);
}

@media (hover: hover) {
  .listing__link:hover .listing__fact {
    max-height: 6em;
    opacity: 1;
    margin-top: 2px;
  }
}

/* Touch devices get no hover, so show it outright */
@media (hover: none) {
  .listing__fact {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
}

.opportunities__foot {
  margin-top: 56px;
}

@media (max-width: 1023px) {
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 56px;
  }

  .listing__name {
    font-size: 22px;
  }

  .listing__body {
    padding: 26px 22px 24px;
  }
}

@media (max-width: 600px) {
  .listing-grid {
    grid-template-columns: 1fr;
  }

  .listing__link {
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================
   Leadership
   ============================================================ */
.leadership__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  margin-top: 88px;
}

.leader {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.leader__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--surface-panel);
  border: var(--line-w) solid var(--line);
}

/* The supplied portraits sit on near-white studio backdrops. Desaturating
   and pulling the exposure down keeps them from glaring against the dark
   page; colour returns on hover. */
.leader__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.04) brightness(0.86);
  transition: filter 0.5s var(--ease-out-quart), transform 0.7s var(--ease-out-expo);
}

.leader:hover .leader__media img {
  filter: grayscale(0) contrast(1.02) brightness(0.96);
  transform: scale(1.03);
}

.leader__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.leader__name {
  font-family: var(--font-serif);
  font-size: 30px;
}

.leader__role {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-50);
  max-width: 34ch;
}

.leader__body .link {
  margin-top: 8px;
}

.leadership__foot {
  margin-top: 72px;
  padding-top: 48px;
  border-top: var(--line-w) solid var(--line);
}

@media (max-width: 1023px) {
  .leadership__grid {
    grid-template-columns: 1fr;
    gap: 56px;
    margin-top: 56px;
  }
}

@media (max-width: 560px) {
  .leader {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .leader__media {
    max-width: 240px;
  }
}

/* ============================================================
   Private Office
   ============================================================ */
.private-office__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

.private-office__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--surface-panel);
}

/* Same tonal treatment as the leadership portraits, so the firm's own
   photography reads as one consistent language rather than a stock drop-in. */
.private-office__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(0.82);
  transition: filter 0.6s var(--ease-out-quart), transform 1s var(--ease-out-expo);
}

.private-office__media:hover img {
  filter: grayscale(0) contrast(1.02) brightness(0.94);
  transform: scale(1.03);
}

.private-office__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.private-office__content .h2 {
  max-width: 16ch;
}

.private-office__content .body {
  max-width: 52ch;
}

.private-office__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 14px;
  border-top: var(--line-w) solid var(--line);
}

.private-office__list li {
  position: relative;
  padding: 16px 0 16px 26px;
  font-size: var(--fs-body);
  color: var(--text-100);
  border-bottom: var(--line-w) solid var(--line);
}

.private-office__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 26px;
  width: 12px;
  height: 1px;
  background: var(--text-500);
}

@media (max-width: 1023px) {
  .private-office__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .private-office__media {
    aspect-ratio: 16 / 10;
    max-height: 400px;
  }
}

/* ============================================================
   Investments
   ============================================================ */
.investments__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 80px;
  border-top: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
}

.investments__cell {
  display: flex;
  gap: 28px;
  padding: 44px 48px 44px 0;
}

.investments__cell + .investments__cell {
  padding-left: 48px;
  border-left: var(--line-w) solid var(--line);
}

.investments__index {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text-500);
  padding-top: 5px;
}

.investments__cell .body {
  max-width: 46ch;
}

.investments__foot {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 56px;
}

.investments__disclaimer {
  max-width: 74ch;
  padding-top: 28px;
  border-top: var(--line-w) solid var(--line);
}

@media (max-width: 1023px) {
  .investments__grid {
    grid-template-columns: 1fr;
    margin-top: 56px;
  }

  .investments__cell {
    padding: 36px 0;
  }

  .investments__cell + .investments__cell {
    padding-left: 0;
    border-left: none;
    border-top: var(--line-w) solid var(--line);
  }
}

/* ============================================================
   Intelligence — same image-led card language as the listings
   ============================================================ */
.intelligence__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 80px;
}

.article__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--surface-panel);
}

.article__media {
  position: absolute;
  inset: 0;
}

.article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.72);
  transition: transform 0.9s var(--ease-out-expo), filter 0.5s var(--ease-out-quart);
}

.article__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--image-scrim);
}

.article__link:hover .article__media img {
  transform: scale(1.05);
  filter: grayscale(0) brightness(0.8);
}

.article__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 28px 30px;
}

.article__title {
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.22;
  max-width: 18ch;
}

.article__copy {
  color: var(--text-100);
  max-width: 40ch;
}

.intelligence__foot {
  margin-top: 56px;
}

@media (max-width: 1023px) {
  .intelligence__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 56px;
  }

  .article__link {
    aspect-ratio: 16 / 9;
  }

  .article__body {
    padding: 26px 22px 24px;
  }
}

/* ============================================================
   Million Dollar Listing UAE
   ============================================================ */
.mdl {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  background-color: var(--surface-black);
}

.mdl__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mdl__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mdl__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 26, 32, 0.95) 0%, rgba(24, 26, 32, 0.72) 48%, rgba(24, 26, 32, 0.28) 100%),
    linear-gradient(180deg, rgba(24, 26, 32, 0.6) 0%, rgba(24, 26, 32, 0.3) 50%, rgba(24, 26, 32, 0.88) 100%);
}

.mdl__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--section-pad-y);
}

.mdl__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 620px;
}

.mdl__badge img {
  max-height: 96px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.9;
}

.mdl__badge-text {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-50);
}

.mdl__play {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 0;
  color: var(--text-0);
}

.mdl__play-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.3s var(--ease-out-quart), border-color 0.3s var(--ease-out-quart),
    color 0.3s var(--ease-out-quart), transform 0.3s var(--ease-out-quart);
}

.mdl__play-icon svg {
  width: 20px;
  height: 20px;
  transform: translateX(1px);
}

.mdl__play:hover .mdl__play-icon {
  background-color: var(--text-0);
  border-color: var(--text-0);
  color: var(--text-ink);
  transform: scale(1.06);
}

/* Slow pulse ring, halted under reduced-motion by the global rule */
.mdl__play-icon::after {
  content: '';
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  animation: mdl-pulse 2.8s var(--ease-out-expo) infinite;
}

@keyframes mdl-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.mdl__play-label {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 600;
}

@media (max-width: 767px) {
  .mdl {
    min-height: 0;
  }
}

/* ============================================================
   International
   ============================================================ */
.international__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 80px;
  align-items: start;
}

.international__text {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.international__title {
  max-width: 14ch;
}

.international__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--surface-panel);
}

.international__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out-expo);
}

.international__media:hover img {
  transform: scale(1.04);
}

.international__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  /* Centres the short copy column against the taller title + image column */
  align-self: center;
}

.international__copy .lead {
  color: var(--text-50);
  padding-left: 20px;
  border-left: 1px solid var(--line-strong);
}

@media (max-width: 1023px) {
  .international__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================
   Careers
   ============================================================ */
.careers__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px 80px;
  align-items: center;
}

.careers__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.careers__copy .actions {
  margin-top: 12px;
}

@media (max-width: 1023px) {
  .careers__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================
   Contact
   ============================================================ */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px 80px;
  align-items: start;
}

.contact__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  position: sticky;
  top: calc(var(--header-h) + 48px);
}

.contact__direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin-top: 20px;
  padding-top: 32px;
  border-top: var(--line-w) solid var(--line);
}

.contact__direct-intro {
  font-size: var(--fs-body);
  color: var(--text-300);
}

.contact__direct-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-body);
  color: var(--text-50);
  transition: color 0.25s var(--ease-out-quart);
}

.contact__direct-link svg {
  width: 18px;
  height: 18px;
  color: var(--text-500);
  flex-shrink: 0;
  transition: color 0.25s var(--ease-out-quart);
}

.contact__direct-link:hover,
.contact__direct-link:hover svg {
  color: var(--text-0);
}

/* ----- Form ----- */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px;
  background-color: var(--surface-panel);
  border: var(--line-w) solid var(--line);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.field__input {
  width: 100%;
  padding: 14px 0;
  font-size: var(--fs-body);
  color: var(--text-0);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.25s var(--ease-out-quart);
}

.field__input::placeholder {
  color: var(--text-500);
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--text-0);
}

.field__input:focus-visible {
  outline: none;
}

.field__textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}

.field__select-wrap {
  position: relative;
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
}

.field__select option {
  background-color: var(--surface-panel);
  color: var(--text-0);
}

.field__select-wrap::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1px solid var(--text-500);
  border-bottom: 1px solid var(--text-500);
  transform: rotate(45deg);
  pointer-events: none;
}

.field.has-error .field__input {
  border-bottom-color: #c4614f;
}

.field__error {
  font-size: 12px;
  line-height: 1.4;
  color: #d9806f;
}

.contact__status {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-50);
}

.contact__status.is-error {
  color: #d9806f;
}

@media (max-width: 1023px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .contact__aside {
    position: static;
  }
}

@media (max-width: 560px) {
  .contact__form {
    padding: 30px 22px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding-block: 96px 36px;
  background-color: var(--surface-black);
  border-top: var(--line-w) solid var(--line);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  gap: 48px 64px;
  padding-bottom: 64px;
}

.site-footer__brand {
  align-self: start;
}

.site-footer__logo {
  height: 34px;
  width: auto;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__address {
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--text-300);
}

.site-footer__tel {
  font-size: var(--fs-body);
  color: var(--text-100);
  transition: color 0.25s var(--ease-out-quart);
}

.site-footer__tel:hover {
  color: var(--text-0);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  color: var(--text-100);
  transition: color 0.25s var(--ease-out-quart);
}

.site-footer__contact svg {
  width: 16px;
  height: 16px;
  color: var(--text-500);
  flex-shrink: 0;
  transition: color 0.25s var(--ease-out-quart);
}

.site-footer__contact a:hover,
.site-footer__contact a:hover svg {
  color: var(--text-0);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding-block: 32px;
  border-top: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
}

.site-footer__licence {
  color: var(--text-300);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-right: auto;
}

.site-footer__legal a {
  font-size: var(--fs-small);
  color: var(--text-500);
  transition: color 0.25s var(--ease-out-quart);
}

.site-footer__legal a:hover {
  color: var(--text-0);
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--text-100);
  border: var(--line-w) solid var(--line);
  transition: color 0.25s var(--ease-out-quart), border-color 0.25s var(--ease-out-quart),
    background-color 0.25s var(--ease-out-quart);
}

.site-footer__social svg {
  width: 17px;
  height: 17px;
}

.site-footer__social a:hover {
  color: var(--text-0);
  border-color: var(--line-strong);
  background-color: rgba(255, 255, 255, 0.06);
}

.site-footer__copy {
  padding-top: 32px;
}

@media (max-width: 1023px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
}

@media (max-width: 560px) {
  .site-footer__cols {
    grid-template-columns: 1fr;
  }

  .site-footer__legal {
    gap: 16px;
    margin-right: 0;
    width: 100%;
  }
}

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-quart);
}

/* `display: grid` above is an author declaration, so it beats the UA sheet's
   `[hidden] { display: none }`. Without this the closed lightbox stays a
   full-viewport, opacity-0, pointer-events-auto layer over the whole page —
   invisible, but it swallows every hover and click underneath it. */
.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lightbox__panel {
  position: relative;
  width: min(1080px, 100%);
}

.lightbox__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: var(--line-w) solid var(--line);
}

.lightbox__frame iframe,
.lightbox__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Message shown when no trailer source is configured */
.lightbox__empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 32px;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--text-300);
}

.lightbox__close {
  position: absolute;
  top: -46px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--text-0);
  border: var(--line-w) solid var(--line-strong);
  transition: color 0.25s var(--ease-out-quart), border-color 0.25s var(--ease-out-quart);
}

.lightbox__close svg {
  width: 18px;
  height: 18px;
}

.lightbox__close:hover {
  border-color: var(--text-0);
}