/* ==========================================================================
   SECTIONS — header, hero, named homepage blocks, footer.
   ========================================================================== */


/* ==========================================================================
   SITE HEADER
   Figure/ground: transparent over the hero, then it acquires a ground and a
   hairline once the page scrolls, so it separates from the content beneath.
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out);
}
.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}

/* Compression order, so a longer name can never cost a link: the brand is the
   only group allowed to give, and the nav and the actions hold their size.
   min-width:0 is the part that actually lets a flex item shrink below its
   content. */
.brand { flex: 0 0 auto; min-width: 0; }
.brand__mark { min-width: 0; }
.nav, .header-actions { flex: none; }

/* The transparent over-hero header cannot depend on the photograph being dark
   in the right places. Measured on the placeholder hero, the nav sat over a
   light passage and white type fell to 1.3:1. This scrim guarantees the top
   band whatever image Mikel supplies, and it fades out on the same curve as
   the header's own background when the solid state takes over. */
.site-header--over-hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(var(--header-height) * 1.7);
  background: linear-gradient(
    to bottom,
    rgba(20, 18, 15, .62) 0%,
    rgba(20, 18, 15, .40) 52%,
    rgba(20, 18, 15, 0) 100%
  );
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.site-header--over-hero.is-scrolled::before { opacity: 0; }

.site-header.is-scrolled,
.site-header.is-solid {
  height: var(--header-height-scrolled);
  background: color-mix(in srgb, var(--bone-100) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-block-end-color: var(--color-line);
}

/* Over-hero state: light type on photography. */
.site-header--over-hero:not(.is-scrolled) { --color-text-strong: #FFF; --color-text: #FFF; --color-text-muted: rgba(255,255,255,.78); }
.site-header--over-hero:not(.is-scrolled) .brand__mark { color: #FFF; }
.site-header--over-hero:not(.is-scrolled) .nav__link { color: rgba(255,255,255,.86); }
.site-header--over-hero:not(.is-scrolled) .nav__link:hover,
.site-header--over-hero:not(.is-scrolled) .nav__link[aria-current="page"] { color: #FFF; }
.site-header--over-hero:not(.is-scrolled) .btn--outline { --btn-fg: #FFF; --btn-border: rgba(255,255,255,.5); }
.site-header--over-hero:not(.is-scrolled) .btn--outline:hover { --btn-bg: #FFF; --btn-fg: var(--ink-900); --btn-border: #FFF; }
.site-header--over-hero:not(.is-scrolled) .nav-toggle__bar { background: #FFF; }

/* --- Brand ---------------------------------------------------------------- */

.brand { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target); }
.brand__logo { max-height: 2.5rem; width: auto; }
.brand__mark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--color-text-strong);
}
.brand__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
/* The sub-line carries the brokerage name, and a brokerage name can be long:
   "@properties Christie's International Real Estate" set on one nowrap line at
   widest tracking measures 425px, which pushed the nav and the contact button
   clean off the row — invisibly, because the body clips horizontal overflow, so
   scrollWidth still reported no overflow. It wraps instead, to a measure that
   breaks after "Christie's", and takes the tracking a long uppercase string
   wants anyway. Two short lines under the name is also how brokerage headers
   are normally set. */
.brand__sub {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
  /* Sized so the longest word group — INTERNATIONAL REAL ESTATE — fits one
     line, which puts the break after "Christie's" and holds the mark to two
     lines inside the 64px scrolled header. balance is deliberately not used:
     it evens the lines by narrowing them, which took this to four. */
  max-width: 15rem;
  line-height: 1.3;
}
/* Below the nav breakpoint the subline is redundant with the page itself. */
@media (max-width: 30rem) {
  .brand__sub { display: none; }
}

/* --- Primary nav ---------------------------------------------------------- */

.nav { display: none; }
@media (min-width: 72rem) {
  .nav { display: block; }
  .nav__list { display: flex; align-items: center; gap: var(--space-5); list-style: none; }
  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 1.05rem;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-text-strong); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  /* Submenu — progressive disclosure at the nav level. */
  .nav__item--has-children { position: relative; }
  .nav__submenu {
    position: absolute;
    top: 100%;
    left: calc(var(--space-4) * -1);
    min-width: 15rem;
    padding: var(--space-3);
    margin: 0;
    list-style: none;
    background: var(--color-surface);
    border: var(--border-hair);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--space-2));
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .nav__item--has-children:hover > .nav__submenu,
  .nav__item--has-children:focus-within > .nav__submenu {
    opacity: 1; visibility: visible; transform: none;
  }
  .nav__submenu .nav__link {
    display: flex;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    min-height: var(--tap-target);
    color: var(--ink-500);
    text-transform: none;
    letter-spacing: var(--ls-normal);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
  }
  .nav__submenu .nav__link::after { display: none; }
  .nav__submenu .nav__link:hover { background: var(--color-ground-alt); color: var(--ink-900); }
}

.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.header-actions__phone { display: none; }
@media (min-width: 78rem) {
  .header-actions__phone {
    display: inline-flex;
    align-items: center;
    /* It is a phone number on a phone-first site — it gets a full target, not
       the height its 12px type happens to occupy. */
    min-height: var(--tap-target);
    gap: var(--space-2);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-strong);
  }
}
.header-actions .btn { display: none; }
@media (min-width: 72rem) { .header-actions .btn { display: inline-flex; } }

/* --- Nav toggle + drawer -------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0 calc(var(--tap-target) / 4);
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 72rem) { .nav-toggle { display: none; } }
.nav-toggle__bar {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--color-text-strong);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-height) + var(--space-6)) var(--grid-pad) var(--space-8);
  background: var(--color-ground);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 72rem) { .drawer { display: none; } }

.drawer__list { list-style: none; }
.drawer__item { border-block-end: var(--border-hair); }
.drawer__link {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  color: var(--color-text-strong);
}
.drawer__sublist { list-style: none; padding-block-end: var(--space-4); }
.drawer__sublink {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline-start: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.drawer__foot { margin-block-start: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(34rem, 88svh, 54rem);
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-9);
  color: #FFF;
  overflow: hidden;
  background: var(--ink-900);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Mobile first: the type runs the full width here, so the plate is flat and
     even. Measured against a near-white hero, this is what holds the eyebrow —
     which reaches the right edge — above 4.5:1. */
  background: linear-gradient(
    to top,
    rgba(20,18,15,.76) 0%, rgba(20,18,15,.62) 45%, rgba(20,18,15,.58) 75%, rgba(20,18,15,.66) 100%
  );
}
/* From the point the headline stops filling the width, the plate becomes
   directional: heavy on the left where the type lives, clearing to almost
   nothing on the right so the photograph is actually visible. Two layers —
   horizontal for the headline block, vertical for the fact strip. */
@media (min-width: 48rem) {
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(20,18,15,.78) 0%, rgba(20,18,15,.70) 34%, rgba(20,18,15,.55) 56%, rgba(20,18,15,.14) 80%, rgba(20,18,15,.04) 100%),
      linear-gradient(to top,   rgba(20,18,15,.74) 0%, rgba(20,18,15,.30) 46%, rgba(20,18,15,.14) 74%, rgba(20,18,15,.22) 100%);
  }
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
/* Type over photography is opaque. Translucent white reads as softness on a
   mockup and as a contrast failure on a real listing photo: at 86% over the
   scrim the lede measured 4.0:1 against a bright hero. Hierarchy here comes
   from size, weight and tracking, not from fading the ink. */
.hero__eyebrow { color: #FFF; }
.hero__title { color: #FFF; max-width: 18ch; }
.hero__lede { color: #FFF; max-width: 46ch; font-size: var(--fs-md); }
.hero__actions { margin-block-start: var(--space-6); }

/* Hero footer strip: three quick facts, hairline-separated. */
.hero__facts {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(255,255,255,.22);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.hero__fact-figure { font-size: var(--fs-md); font-weight: var(--fw-medium); color: #FFF; line-height: 1.2; }
.hero__fact-label { font-size: var(--fs-2xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: rgba(255,255,255,.88); margin-block-start: var(--space-1); }

/* Page hero (interior pages) — shorter, on the light plane. */
.page-hero {
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-8);
  background: var(--color-ground-alt);
  border-block-end: var(--border-hair);
}
.page-hero__title { margin-block: var(--space-3) var(--space-4); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); list-style: none; }
/* Small type does not excuse a small target. The link keeps its 12px size and
   gains a 24px hit area around it. */
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap-target-min); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--color-line-strong); }
.breadcrumb a:hover { color: var(--color-text-strong); }


/* ==========================================================================
   INTRO / POSITIONING
   ========================================================================== */

.intro__signature {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  color: var(--color-text-strong);
  letter-spacing: var(--ls-tight);
}
.intro__pull {
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--color-line-strong);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-strong);
}


/* ==========================================================================
   APPROACH — numbered process steps.
   CONTINUITY: a single hairline runs behind the row and the numerals sit on
   it, so the three steps read as one sequence rather than three cards.
   ========================================================================== */

.steps { position: relative; display: grid; gap: var(--space-7); }
@media (min-width: 60rem) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
  .steps::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    inset-inline: 0;
    height: 1px;
    background: var(--color-line);
  }
}
.step { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--color-ground);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}
.section--alt .step__num { background: var(--color-ground-alt); }
.step__title { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.step__body { color: var(--color-text-muted); font-size: var(--fs-sm); }


/* ==========================================================================
   AREAS — service-area list with progressive disclosure.
   ========================================================================== */

.areas__list {
  display: grid;
  gap: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  border-block-start: var(--border-hair);
}
.areas__item {
  border-block-end: var(--border-hair);
  border-inline-end: var(--border-hair);
}
.areas__item:last-child { border-inline-end: var(--border-hair); }
.areas__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-strong);
  transition: background-color var(--dur-fast) var(--ease-out), padding-inline-start var(--dur-base) var(--ease-out);
}
.areas__link:hover { background: var(--color-surface); padding-inline-start: var(--space-6); }
.areas__link .icon { color: var(--color-accent); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.areas__link:hover .icon { opacity: 1; }

/* Overflow set, revealed on demand. */
.areas__more[hidden] { display: none; }
.areas__toggle { margin-block-start: var(--space-6); }


/* ==========================================================================
   CTA BAND
   ========================================================================== */

.cta-band { position: relative; overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; opacity: .38; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
/* Without this the photograph lifts the plane and the white type loses its
   contrast ratio. The scrim is what keeps the inverse section inverse. */
.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,18,15,.94) 0%, rgba(20,18,15,.86) 45%, rgba(20,18,15,.72) 100%);
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band__title { color: var(--color-text-strong); max-width: 20ch; }
.cta-band__contacts {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-hair-dark);
}
.contact-item { display: flex; flex-direction: column; gap: var(--space-1); }
.contact-item__label { font-size: var(--fs-2xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-text-muted); }
.contact-item__value { font-size: var(--fs-md); font-weight: var(--fw-light); color: var(--color-text-strong); }
a.contact-item__value:hover { color: var(--brass-400); }


/* ==========================================================================
   SITE FOOTER
   PROGRESSIVE DISCLOSURE: on mobile every column group is a <details> that
   starts closed. On desktop the same markup opens and the summary marker is
   suppressed, so one structure serves both without duplicated markup.
   ========================================================================== */

.site-footer { background: var(--color-inverse); color: var(--color-text-on-dark); }
.site-footer__top { padding-block: var(--space-9) var(--space-8); }

.footer-brand__name { font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; color: #FFF; }
.footer-brand__line { color: var(--bone-400); font-size: var(--fs-sm); max-width: 34ch; }

.footer-group { border-block-end: var(--border-hair-dark); }
.footer-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-target);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--bone-400);
}
.footer-group__summary::-webkit-details-marker { display: none; }
.footer-group__list { list-style: none; padding-block-end: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.footer-group__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  font-size: var(--fs-sm);
  color: var(--bone-100);
  opacity: .78;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.footer-group__link:hover { opacity: 1; color: var(--brass-400); }

@media (min-width: 48rem) {
  .footer-group { border-block-end: 0; }
  .footer-group__summary { cursor: default; pointer-events: none; padding-block: 0 var(--space-4); min-height: 0; }
  .footer-group__icon { display: none; }
  .footer-group__list { padding-block-end: 0; }
  .footer-group__link { min-height: 0; padding-block: var(--space-1); }
}

.site-footer__bottom {
  padding-block: var(--space-5);
  border-block-start: var(--border-hair-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--bone-500);
}
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; }
.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline: var(--space-1);
}
.legal-nav a:hover { color: var(--bone-100); }

.social { display: flex; gap: var(--space-2); }
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border: var(--border-hair-dark);
  border-radius: var(--radius-pill);
  color: var(--bone-100);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.social__link:hover { background: var(--bone-100); border-color: var(--bone-100); color: var(--ink-900); }

/* Fine print, disclosed on demand — keeps the footer calm. */
.fineprint { margin-block-start: var(--space-5); }
.fineprint__summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--bone-500);
  text-decoration: underline;
  text-underline-offset: .2em;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
}
.fineprint__summary::-webkit-details-marker { display: none; }
.fineprint__body {
  margin-block-start: var(--space-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--bone-500);
  max-width: var(--measure);
}


/* ==========================================================================
   EDITORIAL / POST CONTENT
   ========================================================================== */

.entry-content { max-width: var(--measure); font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.entry-content > * + * { margin-block-start: var(--space-5); }
.entry-content h2 { margin-block-start: var(--space-8); }
.entry-content h3 { margin-block-start: var(--space-7); }
.entry-content blockquote {
  margin: var(--space-7) 0;
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid var(--color-line-strong);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-strong);
}
.entry-content img { border-radius: var(--radius-md); }

.post-card__meta { margin-block-end: var(--space-2); }
.post-card__title { font-size: var(--fs-lg); }
.pagination { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding-inline: var(--space-3);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.pagination .page-numbers.current { background: var(--color-inverse); color: var(--color-text-on-dark); border-color: var(--color-inverse); }