/* ==========================================================================
   Homino homepage - rebuilt to the approved reference design.

   Everything is namespaced hm2- and scoped under .hm2-page so it cannot reach
   the shared site shell (layout.css) used by ~30 other site13 pages.

   The palette below replaces the previous brand values on the client's
   instruction; the reference design is now the source of truth.
   ========================================================================== */

/* The global stylesheet forces Arial with !important, which flattens the type
   hierarchy. Restore a stack that actually ships semibold/bold weights. */
.hm2-page,
.hm2-page h1,
.hm2-page h2,
.hm2-page h3,
.hm2-page h4,
.hm2-page b,
.hm2-page strong,
.hm2-page button,
.hm2-page input,
.hm2-page select {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.hm2-page {
  /* ---- palette from the reference ---- */
  --t: #0DA9A5;            /* primary teal       */
  --t-dark: #0B8F8C;
  --t-soft: #E6F7F6;
  --navy: #08283D;         /* dark navy / footer */
  --ink: #102A43;          /* body text          */
  --muted: #62778C;
  --line: #E8EEF3;
  --bg: #FFFFFF;
  --bg-soft: #F7FAFC;
  --blue: #2F80ED;
  --purple: #8B5CF6;
  --orange: #F59E0B;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pill: 999px;

  --sh-sm: 0 2px 10px rgba(16, 42, 67, .05);
  --sh: 0 10px 30px rgba(16, 42, 67, .08);
  --sh-lg: 0 20px 55px rgba(16, 42, 67, .13);

  --max: 1240px;
  --gut: 24px;
  --head-h: 76px;

  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.hm2-page *,
.hm2-page *::before,
.hm2-page *::after { box-sizing: border-box; }

.hm2-page img { max-width: 100%; }

.hm2-container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* padding-block and not the `56px 0` shorthand: most sections carry both
   .hm2-container and .hm2-section, and the shorthand reset the side gutter
   .hm2-container had just set. Every such section ran flush to the screen edge
   on a phone, and the full-bleed carousels below then had no gutter to pull
   back from and hung 16px past the viewport. */
.hm2-section { padding-block: 56px; }
.hm2-section--tight { padding-block: 34px; }

/* section heading row --------------------------------------------------- */
.hm2-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.hm2-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.hm2-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--t);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.hm2-more:hover { color: var(--t-dark); }
.hm2-more i { font-size: 12px; transition: transform .2s ease; }
.hm2-more:hover i { transform: translateX(3px); }

/* buttons --------------------------------------------------------------- */
.hm2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.hm2-btn--primary { color: #fff; background: var(--t); box-shadow: 0 8px 20px rgba(13, 169, 165, .28); }
.hm2-btn--primary:hover { color: #fff; background: var(--t-dark); transform: translateY(-1px); }

.hm2-btn--white { color: var(--ink); background: #fff; box-shadow: var(--sh-sm); }
.hm2-btn--white:hover { color: var(--t); transform: translateY(-1px); }

.hm2-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.hm2-btn--ghost:hover { color: var(--navy); background: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.hm2-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.hm2-header__in {
  display: flex;
  align-items: center;
  gap: 26px;
  height: var(--head-h);
}

.hm2-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.hm2-logo__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--t), #17C5A8);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.hm2-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.hm2-logo__text b { color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.hm2-logo__text span { color: var(--muted); font-size: 8.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.hm2-nav { display: flex; align-items: center; gap: 26px; margin: 0 auto; }

.hm2-nav a {
  position: relative;
  padding: 6px 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.hm2-nav a:hover { color: var(--t); }
.hm2-nav a.is-active { color: var(--t); font-weight: 600; }

.hm2-nav a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--t);
}

.hm2-header__side { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.hm2-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hm2-tel i { color: var(--t); }
.hm2-tel:hover { color: var(--t); }

.hm2-iconbtn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.hm2-iconbtn:hover { color: var(--t); background: var(--bg-soft); }
.hm2-burger { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hm2-hero {
  position: relative;
  padding: 58px 0 130px;
  overflow: hidden;
  background: #cfe4ef center/cover no-repeat;
  isolation: isolate;
}

.hm2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .70) 26%, rgba(255, 255, 255, .10) 48%, rgba(255, 255, 255, 0) 62%);
}

.hm2-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 40px;
}

.hm2-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--t);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hm2-hero h1 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.hm2-hero h1 em { color: var(--t); font-style: normal; }

.hm2-hero p {
  max-width: 430px;
  margin: 0 0 26px;
  color: #3D5568;
  font-size: 15.5px;
  line-height: 1.6;
}

.hm2-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* trust card ------------------------------------------------------------ */
.hm2-trust {
  justify-self: end;
  width: 100%;
  max-width: 262px;
  padding: 20px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-lg);
}

.hm2-trust__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.hm2-trust__top i { color: var(--t); }

.hm2-trust strong {
  display: block;
  color: var(--ink);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.hm2-trust__label { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }

.hm2-trust__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.hm2-avatars { display: flex; }

.hm2-avatars img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--bg-soft);
}

.hm2-avatars img + img { margin-inline-start: -10px; }

.hm2-rating { text-align: end; }
.hm2-rating__stars { color: var(--orange); font-size: 11px; letter-spacing: 1px; }
.hm2-rating__stars b { margin-inline-start: 4px; color: var(--ink); font-size: 12px; }
.hm2-rating small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; }

/* ==========================================================================
   Search panel
   ========================================================================== */
.hm2-searchwrap { position: relative; z-index: 5; margin-top: -96px; }

.hm2-search {
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-lg);
}

.hm2-search__tabs { display: flex; gap: 4px; padding: 10px 10px 0; }

.hm2-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 20px;
  color: var(--muted);
  border: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.hm2-tab i { font-size: 14px; }
.hm2-tab:hover { color: var(--ink); }
.hm2-tab.is-active { color: var(--t); background: var(--t-soft); }

.hm2-search__body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
}

.hm2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm2-field > span { color: var(--muted); font-size: 12px; font-weight: 600; }

.hm2-field select,
.hm2-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 34px 0 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362778C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}

.hm2-field input { padding-inline-end: 14px; background-image: none; }
.hm2-field select:focus,
.hm2-field input:focus { border-color: var(--t); outline: 0; }

.hm2-search__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 30px;
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--t);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.hm2-search__go:hover { background: var(--t-dark); }

.hm2-search__foot { display: flex; justify-content: flex-end; padding: 0 16px 13px; }

.hm2-advanced {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.hm2-advanced:hover { color: var(--t); }

/* ==========================================================================
   Features row
   ========================================================================== */
.hm2-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.hm2-feature { display: flex; align-items: flex-start; gap: 13px; transition: transform .2s ease; }
.hm2-feature:hover { transform: translateY(-2px); }

.hm2-feature__ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 17px;
}

.hm2-feature__ico--teal   { color: var(--t);      background: rgba(13, 169, 165, .12); }
.hm2-feature__ico--purple { color: var(--purple); background: rgba(139, 92, 246, .12); }
.hm2-feature__ico--blue   { color: var(--blue);   background: rgba(47, 128, 237, .12); }
.hm2-feature__ico--orange { color: var(--orange); background: rgba(245, 158, 11, .14); }

.hm2-feature b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 14.5px; font-weight: 700; }
.hm2-feature span { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ==========================================================================
   Property cards
   ========================================================================== */
.hm2-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.hm2-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh);
  transition: transform .22s ease, box-shadow .22s ease;
}

.hm2-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.hm2-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
}

.hm2-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hm2-card:hover .hm2-card__media img { transform: scale(1.06); }

.hm2-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 5px 11px;
  color: #fff;
  border-radius: var(--pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hm2-badge--teal   { background: var(--t); }
.hm2-badge--purple { background: var(--purple); }
.hm2-badge--blue   { background: var(--blue); }
.hm2-badge--orange { background: var(--orange); }

.hm2-fav {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  font-size: 13px;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}

.hm2-fav:hover { color: #E5484D; transform: scale(1.08); }

.hm2-card__body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; }

.hm2-card__area {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hm2-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hm2-card__title a { color: inherit; text-decoration: none; }
.hm2-card__title a:hover { color: var(--t); }

.hm2-card__price { margin-bottom: 12px; color: var(--t); font-size: 17px; font-weight: 700; }

.hm2-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.hm2-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.hm2-card__meta i { color: #9AAFC0; font-size: 12px; }

/* ==========================================================================
   Investment opportunities
   ========================================================================== */
.hm2-invest {
  position: relative;
  padding: 34px;
  border-radius: var(--r-xl);
  background: linear-gradient(112deg, #0B6E77 0%, #128C86 42%, #3FBF8A 78%, #63D389 100%);
}

.hm2-invest__in {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
}

.hm2-invest .hm2-eyebrow { color: #9FF3D8; }

.hm2-invest h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.hm2-invest p { margin: 0 0 20px; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.6; }

.hm2-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.hm2-project {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 14px;
  color: #fff;
  border-radius: var(--r);
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 12px 28px rgba(4, 40, 44, .28);
}

.hm2-project img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.hm2-project::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 30, 40, .05) 34%, rgba(6, 30, 40, .84) 100%);
}

.hm2-project:hover img { transform: scale(1.07); }

.hm2-project__tag {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 4px 10px;
  color: var(--navy);
  border-radius: var(--pill);
  background: #fff;
  font-size: 9.5px;
  box-shadow: 0 2px 8px rgba(4, 30, 40, .22);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Each line is addressed by its own class. A generic `.hm2-project span`
   rule used to sit here and, being one specificity point heavier than
   `.hm2-project__tag`, painted the OFF PLAN badge white on a white pill. */
.hm2-project__dev {
  display: block;
  color: #7DE8C8;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hm2-project__name {
  display: block;
  margin: 3px 0 2px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.hm2-project__area { display: block; color: rgba(255, 255, 255, .78); font-size: 11px; }

.hm2-project__price {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.hm2-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--navy);
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: var(--sh);
}

.hm2-arrow:hover { color: var(--t); }
.hm2-arrow--prev { left: -18px; }
.hm2-arrow--next { right: -18px; }

/* ==========================================================================
   Advisors
   ========================================================================== */
.hm2-advisors-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.hm2-advisor {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}

.hm2-advisor:hover { transform: translateY(-3px); box-shadow: var(--sh); }

.hm2-advisor > img {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  background: var(--bg-soft);
}

.hm2-advisor__info { min-width: 0; }
.hm2-advisor__info b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 700; }
.hm2-advisor__info > span { display: block; margin: 2px 0 7px; color: var(--muted); font-size: 12px; }

.hm2-advisor__tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--t);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.hm2-advisor__acts { display: flex; gap: 7px; margin-top: 10px; }

.hm2-advisor__acts a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--t);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  text-decoration: none;
}

.hm2-advisor__acts a:hover { color: #fff; border-color: var(--t); background: var(--t); }

/* ==========================================================================
   Popular areas
   ========================================================================== */
.hm2-areas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; }

.hm2-area {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 12px;
  color: #fff;
  border-radius: var(--r);
  text-decoration: none;
  isolation: isolate;
  box-shadow: var(--sh-sm);
}

.hm2-area img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.hm2-area::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 40, 61, 0) 38%, rgba(8, 40, 61, .55) 68%, rgba(8, 40, 61, .90) 100%);
}

.hm2-area:hover img { transform: scale(1.08); }

.hm2-area__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
}

.hm2-area__name i { color: var(--t); font-size: 12px; }

/* ==========================================================================
   Statistics
   ========================================================================== */
.hm2-stats-band { background: linear-gradient(90deg, #EAF7F6 0%, #F1F6FF 48%, #FDF3E8 100%); }

.hm2-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 30px 0;
}

.hm2-stat { display: flex; align-items: center; gap: 14px; }

.hm2-stat__ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fff;
  font-size: 18px;
  box-shadow: var(--sh-sm);
}

.hm2-stat__ico--teal   { color: var(--t); }
.hm2-stat__ico--purple { color: var(--purple); }
.hm2-stat__ico--blue   { color: var(--blue); }
.hm2-stat__ico--orange { color: var(--orange); }

.hm2-stat b { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.hm2-stat--teal b   { color: var(--t); }
.hm2-stat--purple b { color: var(--purple); }
.hm2-stat--blue b   { color: var(--blue); }
.hm2-stat--orange b { color: var(--orange); }
.hm2-stat span { color: var(--muted); font-size: 12.5px; }

/* ==========================================================================
   Consultation banner
   ========================================================================== */
.hm2-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #0E6FA8 0%, #0F8FA6 52%, #12A9A0 100%);
}

.hm2-cta__art {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  width: 42%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
  mask-image: linear-gradient(90deg, transparent, #000 38%);
}

.hm2-cta__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 38px 0;
}

.hm2-cta h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.hm2-cta p { max-width: 460px; margin: 0; color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 1.6; }
.hm2-cta__acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.hm2-footer { color: #B9CBD9; background: var(--navy); }

.hm2-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 30px;
  padding: 46px 0 34px;
}

.hm2-footer .hm2-logo__text b { color: #fff; }
.hm2-footer .hm2-logo__text span { color: #7E98AB; }

.hm2-footer__about { max-width: 270px; margin: 14px 0 16px; color: #93AABB; font-size: 13px; line-height: 1.65; }

.hm2-social { display: flex; gap: 9px; }

.hm2-social a {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  color: #C7D8E4;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  font-size: 13px;
  text-decoration: none;
}

.hm2-social a:hover { color: #fff; background: var(--t); }

.hm2-fcol h3 { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 700; }
.hm2-fcol ul { margin: 0; padding: 0; list-style: none; }
.hm2-fcol li + li { margin-top: 9px; }
.hm2-fcol a { color: #93AABB; font-size: 13px; text-decoration: none; }
.hm2-fcol a:hover { color: #fff; }

.hm2-fcol--contact li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #93AABB;
  font-size: 13px;
  line-height: 1.55;
}

.hm2-fcol--contact i { margin-top: 3px; color: var(--t); font-size: 12px; }

.hm2-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #7E98AB;
  font-size: 12.5px;
}

.hm2-footer__bar nav { display: flex; gap: 22px; }
.hm2-footer__bar a { color: #7E98AB; text-decoration: none; }
.hm2-footer__bar a:hover { color: #fff; }

/* mobile drawer --------------------------------------------------------- */
.hm2-drawer { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(8, 40, 61, .5); }
.hm2-drawer.is-open { display: block; }

.hm2-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  padding: 20px;
  overflow-y: auto;
  background: #fff;
}

.hm2-drawer__panel a {
  display: block;
  padding: 13px 4px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.hm2-drawer__panel a:hover { color: var(--t); }
.hm2-drawer__close { margin-bottom: 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .hm2-page { --max: 1040px; }
  .hm2-nav { gap: 18px; }
  /* Between 1024 and 1200 the nav, phone, CTA and sign-in links no longer fit
     on one row and the sign-in links were clipped. The number is still in the
     drawer and the footer. */
  .hm2-tel { display: none; }
  .hm2-nav a { font-size: 13.5px; }
  .hm2-hero h1 { font-size: 45px; }
  .hm2-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .hm2-page { --gut: 20px; }
  .hm2-nav, .hm2-tel { display: none; }
  .hm2-burger { display: grid; }
  .hm2-header__in { justify-content: space-between; }
  .hm2-hero { padding: 44px 0 120px; }
  .hm2-hero h1 { font-size: 40px; }
  .hm2-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm2-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .hm2-invest__in { grid-template-columns: minmax(0, 1fr); }
  .hm2-search__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm2-search__go { grid-column: 1 / -1; }
  .hm2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm2-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm2-arrow { display: none; }
  .hm2-advisors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hm2-hero__in { grid-template-columns: minmax(0, 1fr); }
  .hm2-trust { justify-self: start; max-width: 100%; }
  .hm2-cta__in { grid-template-columns: minmax(0, 1fr); }
  .hm2-cta__art { display: none; }
}

/* Below ~430px the "List Your Property" pill pushed the burger out of the
   header entirely, leaving no way to reach the nav. Drop the pill; the drawer
   still carries the same link. */
@media (max-width: 430px) {
  .hm2-header__side .hm2-btn--primary { display: none; }
  .hm2-header__in { gap: 12px; }
  .hm2-logo__text b { font-size: 19px; }
}

@media (max-width: 640px) {
  .hm2-page { --gut: 16px; }
  .hm2-section { padding-block: 38px; }
  .hm2-hero { padding: 34px 0 104px; }
  .hm2-hero h1 { font-size: 32px; }
  .hm2-hero p { font-size: 14.5px; }
  .hm2-head h2 { font-size: 21px; }
  .hm2-searchwrap { margin-top: -84px; }
  .hm2-search__tabs { overflow-x: auto; }
  .hm2-tab { padding: 0 14px; font-size: 13px; }
  .hm2-search__body { grid-template-columns: minmax(0, 1fr); }
  .hm2-grid4 { grid-template-columns: minmax(0, 1fr); }
  .hm2-features { grid-template-columns: minmax(0, 1fr); }
  .hm2-advisors-grid { grid-template-columns: minmax(0, 1fr); }
  .hm2-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm2-stats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hm2-invest { padding: 22px; }
  .hm2-invest h2 { font-size: 24px; }
  .hm2-footer__top { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  /* project cards scroll sideways instead of shrinking away */
  .hm2-projects {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .hm2-project { flex: 0 0 62%; scroll-snap-align: start; }

  /* keep tap targets reachable */
  .hm2-btn, .hm2-search__go, .hm2-tab { min-height: 46px; }
  .hm2-advisor__acts a { width: 40px; height: 40px; }
  .hm2-fav { width: 36px; height: 36px; }
}

/* ==========================================================================
   Photo credits page
   ========================================================================== */
.hm2-credits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.hm2-credit {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: 12.5px;
  line-height: 1.5;
}

/* `.hm2-credit span` outranks a bare `.hm2-credit__lic`, which is why this
   needed !important. Raising specificity instead keeps the sheet clean. */
.hm2-credit b { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.hm2-credit span { display: block; color: var(--muted); }
.hm2-credit .hm2-credit__lic { color: var(--t); font-weight: 600; }
.hm2-credit a { color: var(--t); font-weight: 600; text-decoration: none; }
.hm2-credit a:hover { text-decoration: underline; }

/* Outline button for the guest Login control (Register keeps --primary). */
.hm2-btn--outline {
  color: var(--ink);
  border-color: var(--line);
  background: #fff;
}

.hm2-btn--outline:hover { color: var(--t); border-color: var(--t); }

/* The account avatar/dropdown reuses .hm-user from layout.css; it just needs to
   sit correctly inside the new flex header. */
.hm2-header__side .hm-user { display: flex; align-items: center; }

/* Guest sign-in controls: text links, not pills, so the reference CTA and the
   phone number still fit on one row at 1280px. */
.hm2-signin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hm2-signin i { color: var(--t); }
.hm2-signin:hover { color: var(--t); }
.hm2-signin--strong { color: var(--t); }

/* ==========================================================================
   Mobile experience
   --------------------------------------------------------------------------
   Measured baseline at 390px: the page was 9,281px tall and the first property
   sat 1,560px down. The rules below turn vertical stacks into snap carousels,
   let the hero photograph actually be seen, and put the two things a visitor
   wants - search and phone - permanently within thumb reach.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- hero: let the photograph carry the page ------------------------- */
  .hm2-hero {
    /* Bounded, not raw vh: on an unusually tall viewport 76vh produced a
       multi-thousand-pixel hero. min() keeps it a sensible band on any screen. */
    min-height: min(620px, 82vh);
    padding: 26px 0 118px;
    display: flex;
    align-items: flex-end;
  }

  /* The desktop scrim is a left-to-right white wash so dark text reads. On a
     narrow screen that covers the whole frame and the picture disappears, so
     invert it: darken from the bottom and set the type in white. */
  .hm2-hero::after {
    background: linear-gradient(180deg, rgba(6, 26, 40, .34) 0%, rgba(6, 26, 40, .22) 22%, rgba(6, 26, 40, .58) 46%, rgba(6, 26, 40, .82) 72%, rgba(6, 26, 40, .92) 100%);
  }

  .hm2-hero__in { gap: 20px; width: 100%; }
  .hm2-hero h1 { color: #fff; font-size: 34px; letter-spacing: -.02em; }
  .hm2-hero h1 em { color: #5FE3D0; }
  .hm2-hero p { color: rgba(255, 255, 255, .88); font-size: 15px; margin-bottom: 20px; }
  .hm2-hero .hm2-eyebrow { color: #5FE3D0; }
  .hm2-hero__actions .hm2-btn { flex: 1 1 46%; }

  /* the trust card becomes a slim glass strip instead of a tall white block */
  .hm2-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(10px);
    box-shadow: none;
  }

  .hm2-trust__top { display: none; }
  .hm2-trust strong { color: #fff; font-size: 26px; }
  .hm2-trust__label { margin-top: 1px; color: rgba(255, 255, 255, .82); font-size: 11.5px; }
  .hm2-trust__row { margin-top: 0; margin-inline-start: auto; }
  .hm2-rating__stars b { color: #fff; }
  .hm2-rating small { color: rgba(255, 255, 255, .7); }
  .hm2-avatars img { border-color: rgba(255, 255, 255, .8); }

  /* ---- carousels ------------------------------------------------------- */
  /* A column of four full-width cards was 1,838px of scrolling. A snap rail
     showing 1.15 cards keeps the same content in roughly a fifth of the space
     and signals "there is more" by letting the next card peek. */
  .hm2-grid4,
  .hm2-advisors-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px calc(var(--gut)) 10px;
    margin: 0 calc(var(--gut) * -1);
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gut);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hm2-grid4::-webkit-scrollbar,
  .hm2-advisors-grid::-webkit-scrollbar,
  .hm2-projects::-webkit-scrollbar { display: none; }

  .hm2-grid4 > *,
  .hm2-advisors-grid > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .hm2-card { border-radius: 20px; }
  .hm2-card__media { aspect-ratio: 16 / 11; }

  /* ---- section heads --------------------------------------------------- */
  .hm2-head { align-items: center; gap: 8px; margin-bottom: 14px; }
  .hm2-head h2 { font-size: 20px; flex: 1 1 100%; }
  .hm2-more { font-size: 13px; }

  /* ---- features: colour, and one row instead of four ------------------- */
  .hm2-features {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px calc(var(--gut)) 8px;
    margin: 0 calc(var(--gut) * -1);
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gut);
    scrollbar-width: none;
  }

  .hm2-features::-webkit-scrollbar { display: none; }

  .hm2-feature {
    flex: 0 0 62%;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    scroll-snap-align: start;
  }

  .hm2-feature:nth-child(1) { background: rgba(13, 169, 165, .10); }
  .hm2-feature:nth-child(2) { background: rgba(139, 92, 246, .10); }
  .hm2-feature:nth-child(3) { background: rgba(47, 128, 237, .10); }
  .hm2-feature:nth-child(4) { background: rgba(245, 158, 11, .12); }
  .hm2-features .hm2-feature__ico { background: #fff; }

  /* ---- areas: keep two up but taller so they read ---------------------- */
  .hm2-area { aspect-ratio: 4 / 5; border-radius: 18px; }

  /* ---- footer: 1,069px was a quarter of the page ----------------------- */
  .hm2-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; padding: 32px 0 24px; }
  .hm2-footer__about { max-width: none; margin: 12px 0 14px; font-size: 12.5px; }
  .hm2-footer__top > div:first-child { grid-column: 1 / -1; }
  .hm2-fcol--contact { grid-column: 1 / -1; }
  .hm2-fcol h3 { margin-bottom: 10px; font-size: 13px; }
  .hm2-fcol li + li { margin-top: 7px; }
  .hm2-footer__bar { justify-content: center; text-align: center; padding-bottom: 84px; }

  /* ---- sticky action bar ----------------------------------------------- */
  .hm2-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: flex;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    box-shadow: 0 -6px 24px rgba(16, 42, 67, .10);
  }

  .hm2-dock a { flex: 1 1 50%; min-height: 48px; }
}

/* Phone affordance only. This must be a min-width query: a plain
   `.hm2-dock { display: none }` after the block above has equal specificity and,
   coming later, would win everywhere. */
@media (min-width: 641px) {
  .hm2-dock { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hm2-card__media img { will-change: transform; }
}

/* Smooth jump from the dock to the search panel, clear of the sticky header. */
html { scroll-behavior: smooth; }
.hm2-searchwrap { scroll-margin-top: calc(var(--head-h) + 12px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Collapsible secondary filters
   The checkbox is the state; no JS. On desktop the wrapper is display:contents
   so the three selects remain direct children of the search grid.
   ========================================================================== */
.hm2-morefilters__cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hm2-morefilters__btn { display: none; }
.hm2-morefilters { display: contents; }

@media (max-width: 640px) {
  .hm2-morefilters { display: none; }
  .hm2-morefilters__cb:checked ~ .hm2-morefilters { display: grid; gap: 12px; }

  .hm2-morefilters__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    color: var(--t);
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .hm2-morefilters__cb:checked ~ .hm2-morefilters__btn span::after { content: " (hide)"; }
  .hm2-morefilters__cb:focus-visible ~ .hm2-morefilters__btn { outline: 2px solid var(--t); outline-offset: 2px; }
}