/* =========================================================
   Realty Force — Minimal theme layer
   Loaded LAST. Black / white / dark blue. Inter Light.
   No italics, no red, white-first surfaces.
========================================================= */

/* ---------- 1. Type ---------- */
*, *::before, *::after{ font-style: normal !important; }

body{
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: -0.005em;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
h1{ font-weight: 200; }

/* Only the genuinely important words carry weight */
h1 strong, h2 strong, h3 strong,
.hero-headline em,
.page-hero-title strong{ font-weight: 600; }

/* `em` was the serif-italic accent — now a quiet ink emphasis */
em{
  font-weight: 400;
  color: inherit;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}
[data-theme="light"] em, .rf-page em{ color: var(--blue); }

p, li, .lead, .sub{ font-weight: 300; }
strong, b{ font-weight: 500; }

/* Eyebrows / labels: quiet, uppercase, never bold */
.hero-eyebrow, .section-eyebrow, .page-hero-eyebrow,
.home-areas-eyebrow, .eyebrow{
  font-weight: 400 !important;
  letter-spacing: 0.16em;
  font-size: 11px;
}
.eyebrow-dot, .page-hero-eyebrow::before, .section-eyebrow::before{
  background: var(--blue) !important;
  box-shadow: none !important;
}

/* Numbers read better light + tabular */
.hero-stat .n, .stat-value, .agent-stat-value{
  font-weight: 300 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

::selection{ background: var(--blue); color: #fff; }

/* ---------- 2. Surfaces: white first ---------- */
.rf-page, .listings, .projects, .press, .ceo-articles, .about{
  background: var(--white);
}
.awards{
  background: var(--n-50) !important;
}
.awards::before, .awards::after{ display: none !important; }
.rf-section.alt{ background: var(--n-50); }

/* Dark sections: neutral blue-black, no coloured glow */
.hero, .home-team, .page-hero, [data-theme="dark"]{
  background-color: var(--navy);
}
.page-hero::before, .home-team::before, .hero::after{
  background: none !important;
}

/* The footer's black gradient — charcoal at the top settling to near-black — is
   also the ground for every flat dark hero, so a page opens and closes on the
   same surface. Defined once here; used by .page-hero, .agent-hero, .site-footer. */
:root{
  --rf-black-gradient:
    radial-gradient(120% 80% at 15% -10%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #1b1d22 0%, #121317 34%, #0a0a0c 68%, #050506 100%);
}

/* ---------- 3. Header ---------- */
.header-glass::after{ display: none !important; }
.header-glass{
  background: rgba(16,24,40,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.site-header.is-scrolled .header-glass{
  background: rgba(16,24,40,0.92);
  box-shadow: none;
}
.site-header.is-light .header-glass{
  background: rgba(255,255,255,0.92);
  border-color: var(--line);
  box-shadow: none;
}
.site-header.is-light .main-nav a::after{ background: var(--blue); }
.site-header.is-light .btn-contact:hover{
  background: var(--blue); border-color: var(--blue); color: #fff;
}

/* ---------- 4. Controls ---------- */
.btn-primary, .hero-search-btn, .contact-submit, .cta-btn-primary,
.properties-search-submit, .agent-contact-primary{
  background: var(--ink);
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.01em;
  border-radius: 6px;
  box-shadow: none;
}
.btn-primary:hover, .hero-search-btn:hover, .contact-submit:hover,
.cta-btn-primary:hover, .properties-search-submit:hover,
.agent-contact-primary:hover{
  background: var(--blue);
  transform: none;
}

input, select, textarea, .filter-input{
  font-family: var(--font-body);
  font-weight: 300;
  border-radius: 6px;
}
/* Focus is shown by the field's own border darkening — no glow ring. */
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: none !important;
}

/* ---------- 5. Cards: hairline, flat ---------- */
.card, .listing-card, .project-card, .area-card,
.press-card, .award-card, .value-card, .rf-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none !important;
}
.card:hover, .listing-card:hover, .project-card:hover,
.area-card:hover{
  border-color: rgba(16,24,40,0.22);
  transform: none;
}

/* ---------- 6. Footer ---------- */
.site-footer{ background: var(--ink); }

/* ---------- 7. Weight discipline ----------
   600 is reserved for the main heading of a page/section.
   Everything else tops out at 500. */
.card *, .listing-card *, .project-card *, .area-card *, .agent-card *,
.press-card *, .award-card *, .value-card *,
.main-nav a, .btn, .btn-contact, .tab, .tabs *, .chip, .tag, .badge,
.filter-label, .field-label, .breadcrumb *, .stat-label, .footer-col *,
th, td, label, .sort-select, .facts *, .listing-meta *{
  font-weight: 400;
}
.card-title, .listing-card-title, .project-card-title, .area-card-title,
.agent-card-name, .press-card-title, .tab.is-active, .tab.active,
.listing-price, .project-price{
  font-weight: 500;
}

/* Section headings stay light; only the emphasised word carries weight */
.section-title, .home-team-title, .home-areas-title,
.awards-title, .press-title, .ceo-title{
  font-weight: 200;
  letter-spacing: -0.025em;
}
.section-title strong, .home-team-title em, .home-areas-title em,
.section-title em{ font-weight: 600; }

/* ---------- 8. Quieter motion + edges ---------- */
.card, .listing-card, .project-card, .area-card{
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gallery-tile-name{ font-weight: 300; letter-spacing: -0.02em; }
hr, .divider{ border-color: var(--line); }

/* ---------- 9. Agent cards ----------
   Black gradient ground, no border, soft shadow only. */
.agent-card{
  background: linear-gradient(165deg, #1C1D21 0%, #0E0F12 46%, #050506 100%) !important;
  border: none !important;
  box-shadow:
    0 1px 2px rgba(5,5,6,0.18),
    0 18px 34px -18px rgba(5,5,6,0.42),
    0 40px 70px -40px rgba(5,5,6,0.5) !important;
  transition: transform 0.7s var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              opacity 0.7s var(--ease-out);
}
.agent-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(5,5,6,0.2),
    0 26px 48px -20px rgba(5,5,6,0.5),
    0 56px 92px -44px rgba(5,5,6,0.55) !important;
}
/* portrait proportion, a touch narrower */
.agent-card{
  aspect-ratio: 3 / 4;
  min-height: 0;
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  border-radius: 18px;
}

/* Behind the portrait: a soft halo + a slow gradient shine sweep
   (replaces the rotating conic light rays). */
.agent-card::after{
  background:
    radial-gradient(46% 34% at 50% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 38%) !important;
}
.agent-card::before{
  inset: -35% -70% !important;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 32%,
    rgba(255,255,255,0.045) 43%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.045) 57%,
    rgba(255,255,255,0) 68%) !important;
  -webkit-mask: none !important;
          mask: none !important;
  opacity: 1;
  animation: agent-shine 9s ease-in-out infinite !important;
}
@keyframes agent-shine{
  0%,  100%{ transform: translateX(-42%); }
  50%      { transform: translateX(42%); }
}
.agent-card:hover::before{ animation-duration: 4.5s; }
@media (prefers-reduced-motion: reduce){
  .agent-card::before{ animation: none !important; transform: none; }
}

/* portrait sits a little higher so the name never crowds it */
.agent-card-photo{ height: 74%; bottom: 104px; }
.agent-card-scrim{ height: 190px; 
  background: linear-gradient(180deg, rgba(5,5,6,0) 0%, rgba(5,5,6,0.7) 44%, #050506 78%) !important;
}
.agent-card-name{ font-weight: 400; letter-spacing: -0.02em; }
.agent-card-role{ color: rgba(255,255,255,0.55); font-weight: 300; }
.agent-card:focus-visible{ outline: 2px solid var(--blue-soft); outline-offset: 3px; }

/* ---------- 10. CEO articles ----------
   Square-edged cards, no edge fades, no shine sweep. */
.ceo-articles{
  background: var(--white) !important;
  padding: 104px 32px 96px;
}
.ceo-articles::before{ display: none !important; }

.ceo-articles-title{ font-weight: 200; letter-spacing: -0.025em; }
.ceo-articles-title strong{ font-weight: 600; color: var(--ink); }
.ceo-active{
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--line);
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 4px 0 4px 22px;
  height: auto;
  min-height: 150px;
  margin-bottom: 24px;
}
.ceo-articles-eyebrow{ border-radius: 0; }
.ceo-active-index{ color: var(--n-400); font-weight: 300; font-variant-numeric: tabular-nums; }
.ceo-active-title{ font-weight: 300; letter-spacing: -0.015em; }
.ceo-active-meta span:first-child{ color: var(--blue); font-weight: 400; }
.ceo-active-link{ font-weight: 400; }
.ceo-active-link span{ color: var(--blue); }

/* no fade-out masks at the slider edges */
.ceo-slider-wrap::before,
.ceo-slider-wrap::after{ display: none !important; }
.ceo-slider:focus-visible{ border-radius: 0; }

.ceo-arrow{ border-radius: 0; border: 1px solid var(--line); }
.ceo-arrow:hover{ background: var(--ink); border-color: var(--ink); color: #fff; }
.ceo-dot.is-active{ background: var(--blue); }

/* ---- Cards: square, flat, no glass ---- */
.ceo-track{ perspective: none; padding: 0 4px; gap: 20px; }
.ceo-slider{ padding: 8px 0 40px; }

.ceo-slide{
  width: 300px;
  height: 420px;
  border-radius: 0 !important;
  background: var(--n-100);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0.42;
  transform: scale(0.94);
  transform-style: flat;
  box-shadow: none;
  transition: transform 480ms var(--ease-out),
              opacity 480ms var(--ease-out),
              box-shadow 480ms var(--ease-out);
}
/* drop the white inner hairline frame */
.ceo-slide::before{ display: none !important; }
/* drop the sweeping shine element */
.ceo-slide-shine{ display: none !important; }

.ceo-slide-img{ transition: transform 700ms var(--ease-out); }

.ceo-slide.is-active{
  opacity: 1;
  transform: scale(1);
  box-shadow: none !important;
}
.ceo-slide.is-active .ceo-slide-img{ transform: none; }
.ceo-slide:hover .ceo-slide-img{ transform: scale(1.03); }

/* Caption: solid ink block rather than a glass veil */
.ceo-slide-glass{
  padding: 20px 20px 18px;
  background: linear-gradient(180deg,
    rgba(5,5,6,0) 0%,
    rgba(5,5,6,0.55) 42%,
    rgba(5,5,6,0.92) 100%);
}
.ceo-slide-title{
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.ceo-slide-meta{
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}
.ceo-slide-meta span:first-child{ color: rgba(255,255,255,0.85); }

/* ---------- 11. Awards ----------
   Same language as the CEO carousel: flat, square, tone-only states. */
.awards{
  background: var(--n-50) !important;
  padding: 104px 32px 104px;
}
.awards::before{ display: none !important; }

.awards-eyebrow{
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--n-500);
}
.awards-eyebrow .eyebrow-dot{
  width: 30px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: var(--logo-navy) !important;
  box-shadow: none !important;
  animation: none !important;
}
.awards-title{
  font-weight: 200;
  color: var(--n-400);
  letter-spacing: -0.025em;
  line-height: 1.18;
}
.awards-title strong{ font-weight: 600; color: var(--ink); }
.awards-sub{ color: var(--n-700); }
.awards-sub strong{ font-weight: 500; color: var(--ink); }

/* Active-award readout: a hairline rule, not a glass card */
.awards-active{
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 4px 0 4px 22px;
}
.awards-active-index{ color: var(--n-400); font-variant-numeric: tabular-nums; }
.awards-active-title{ font-weight: 400; color: var(--ink); letter-spacing: -0.015em; }
.awards-active-desc{ color: var(--n-500); }

.awards-arrow{
  border-radius: 0;
  background: var(--white);
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--ink);
}
.awards-arrow:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: none;
}
.awards-dot.is-active{ background: var(--blue); }

/* no fade-out masks at the slider edges */
.awards-slider-wrap::before,
.awards-slider-wrap::after{ display: none !important; }
.awards-slider:focus-visible{ border-radius: 0; }
.awards-slider{ padding: 12px 0 24px; }
.awards-track{ gap: 20px; padding: 0 4px; }

/* ---- Cards: the certificate shown whole, on white ---- */
.award-card{
  width: 460px;
  height: 380px;
  border-radius: 0 !important;
  background: var(--white);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  opacity: 0.4;
  transform: scale(0.95);
  transition: transform 480ms var(--ease-out), opacity 480ms var(--ease-out);
}
.award-card::after{ display: none !important; }
.award-card img{
  object-fit: contain;
  padding: 18px;
  transition: none;
}
.award-card.is-active{
  opacity: 1;
  transform: scale(1);
  box-shadow: none !important;
}
.award-card.is-active img{ transform: none; }

/* Whole card is the article link */
.ceo-slide{ cursor: pointer; }
.ceo-slide-link{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
}
.ceo-slide-link:focus-visible{
  outline: 2px solid var(--blue-soft);
  outline-offset: -2px;
}

/* ---------- 12. Hero ----------
   Cinematic neutral footage, one bold word, and a square white
   search panel. No coloured glows, no glass, no rounded corners. */
.hero{ background: #06070A; }
.hero-video{ filter: saturate(0.72) contrast(1.04) brightness(0.92); }
.hero-glow{ display: none !important; }

/* Legibility grade: darker at the top-left where the copy sits,
   darker again at the base so the search panel has something to sit on. */
.hero-overlay{
  background:
    linear-gradient(100deg, rgba(6,7,10,0.86) 0%, rgba(6,7,10,0.42) 46%, rgba(6,7,10,0.20) 100%),
    linear-gradient(180deg, rgba(6,7,10,0.55) 0%, rgba(6,7,10,0.10) 34%, rgba(6,7,10,0.72) 100%) !important;
}

.hero-inner{ max-width: 1240px; padding: calc(var(--header-h) + 56px) 40px 128px; }

/* Eyebrow: a rule and a label, not a pill */
.hero-eyebrow{
  gap: 14px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.62);
  margin-bottom: 30px;
}
.hero-eyebrow .eyebrow-dot{
  width: 30px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.5) !important;
  box-shadow: none !important;
  animation: none !important;
}

.hero-headline{
  font-weight: 200;
  font-size: clamp(46px, 8.6vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-shadow: none;
}
.hero-headline em{ font-weight: 500; color: #fff; }
.hero-headline .line:nth-child(2){ padding-left: 0.06em; }

.hero-lead{
  margin-top: 28px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.68);
}

/* ---- Search: one solid white panel, hairline-divided ---- */
.hero-search{
  position: relative;
  z-index: 6;
  margin-top: 44px;
  max-width: 900px;
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.7);
}
.hero-search-tabs{
  display: flex;
  gap: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  padding: 0 6px;
  margin: 0;
}
.hero-search-tabs .search-tab{
  position: relative;
  padding: 15px 20px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--n-500);
}
.hero-search-tabs .search-tab:hover:not(.is-active){ color: var(--ink); }
.hero-search-tabs .search-tab.is-active{
  background: none;
  color: var(--ink);
  font-weight: 500;
  box-shadow: none;
}
.hero-search-tabs .search-tab.is-active::after{
  content: '';
  position: absolute;
  left: 20px; right: 20px; bottom: -1px;
  height: 1px;
  background: var(--ink);
}

.hero-search-row{ gap: 0; padding: 6px; }
.hero-search-field{
  background: none;
  border: none;
  border-right: 1px solid var(--n-200);
  border-radius: 0;
  min-height: 62px;
  padding: 0 18px;
}
.hero-search-field:focus-within{ background: var(--n-50); border-color: var(--n-200); }
.hero-search-field svg{ color: var(--n-400) !important; }
.hero-search-field input,
.hero-search-field select{ color: var(--ink); font-weight: 300; font-size: 14.5px; }
.hero-search-field input::placeholder{ color: var(--n-400); }
.hero-search-field-select{
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.hero-search-field-select select{ padding-right: 26px; }
.hero-search-btn{
  border-radius: 0;
  min-height: 62px;
  padding: 0 32px;
  background: var(--ink);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.hero-search-btn:hover{ background: var(--blue); }

/* ---- Stats ---- */
.hero-stats{ margin-top: 44px; gap: 0; }
.hero-stat{ padding-right: 40px; }
.hero-stat .n{
  font-size: 38px;
  font-weight: 200 !important;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.hero-stat .l{
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.hero-stat-divider{ height: 30px; background: rgba(255,255,255,0.16); margin-right: 40px; }

.hero-scroll{ font-size: 10px; letter-spacing: 0.28em; color: rgba(255,255,255,0.5); }

@media (max-width: 900px){
  .hero-search-field{
    border-right: none;
    border-bottom: 1px solid var(--n-200);
  }
  .hero-search-btn{ margin-top: 6px; }
}
@media (max-width: 640px){
  .hero-inner{ padding: calc(var(--header-h) + 34px) 22px 96px; }
  .hero-stats{ flex-wrap: wrap; }
  .hero-stat{ padding-right: 26px; }
  .hero-stat-divider{ margin-right: 26px; }
}

/* ---------- 13. Hero dropdowns ---------- */

/* Custom select (Property Type / Budget) */
.hero-search-field-select{ background-image: none; position: relative; }
.rf-select-native{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rf-select{ position: relative; width: 100%; }
.rf-select-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 0;
  font-size: 14.5px;
  font-weight: 300;
  color: var(--n-400);
  text-align: left;
}
.rf-select.is-chosen .rf-select-btn{ color: var(--ink); }
.rf-select-btn svg{
  flex-shrink: 0;
  color: var(--n-400);
  transition: transform var(--dur-fast) var(--ease-out);
}
.rf-select.is-open .rf-select-btn svg{ transform: rotate(180deg); }

.rf-select-list{
  position: absolute;
  top: calc(100% + 1px);
  left: -18px; right: -18px;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--n-200);
  padding: 4px;
  box-shadow: 0 22px 46px -26px rgba(5,5,6,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms var(--ease-out),
              transform 160ms var(--ease-out),
              visibility 160ms;
  max-height: 292px;
  overflow-y: auto;
}
.rf-select.is-open .rf-select-list{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rf-select-opt{
  display: block;
  width: 100%;
  padding: 11px 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 300;
  color: var(--n-700);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rf-select-opt:hover,
.rf-select-opt.is-active{ background: var(--n-50); color: var(--ink); }
.rf-select-opt.is-selected{ color: var(--ink); font-weight: 400; }
.rf-select-opt.is-selected::after{
  content: '';
  float: right;
  width: 5px; height: 5px;
  margin-top: 7px;
  background: var(--blue);
}

/* Location live-suggest: white, square, hairline */
.search-suggest{
  top: calc(100% + 1px);
  left: -18px; right: -18px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 22px 46px -26px rgba(5,5,6,0.5);
  padding: 4px;
  transform: translateY(-4px) scale(1);
}
.search-field-location.is-open .search-suggest{ transform: translateY(0) scale(1); }
.search-suggest-item{ border-radius: 0; padding: 9px 10px; }
.search-suggest-item:hover,
.search-suggest-item.is-active{ background: var(--n-50); }
.search-suggest-thumb{ border-radius: 0; background: var(--n-100); }
.search-suggest-title{ color: var(--ink); font-weight: 400; }
.search-suggest-title mark{ color: var(--blue); font-weight: 500; }
.search-suggest-meta{ color: var(--n-500); }
.search-suggest-price{ color: var(--ink); font-weight: 400; }
.search-suggest-tag{
  border-radius: 0;
  background: var(--n-100);
  color: var(--n-500);
  font-weight: 400;
}
.search-suggest-viewall{
  color: var(--ink);
  font-weight: 400;
  border-top: 1px solid var(--n-200);
}
.search-suggest-viewall:hover{ color: var(--blue); }
.search-suggest-empty p{ color: var(--n-500); }

/* The field's own tint is the focus cue inside the hero panel — no ring. */
.hero-search input:focus,
.hero-search select:focus{
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ---------- 14. Hero dropdown overflow + width ----------
   The hero clipped its own children, so an open dropdown was cut off at
   the section edge. Clip the video instead, and lift the hero above the
   sections below it so the panel can overhang them. */
.hero{ overflow: visible; z-index: 5; }
.hero-media{ overflow: hidden; }

/* The suggest list spans the whole search panel, not just the input:
   making the field a static box hands positioning to .hero-search. */
.hero-search-location{ position: static; }
.search-suggest{
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(60vh, 460px);
}

/* ---------- 15. About / "Who is Realty Force?" ----------
   Carries the hero's language onto white: hairline eyebrow, one bold
   phrase in the heading, flat evenly-weighted copy, no cards. */
.about{
  background: var(--white);
  padding: 112px 32px 116px;
}
.about-head{ margin-bottom: 60px; }

.about-eyebrow{
  gap: 14px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--n-500);
  margin-bottom: 28px;
}
.about-eyebrow .eyebrow-dot{
  width: 30px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: var(--n-400) !important;
  box-shadow: none !important;
  animation: none !important;
}

.about-title{
  font-weight: 200;
  font-size: clamp(36px, 5.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--n-400);
}
.about-title strong{ font-weight: 600; color: var(--ink); }

.about-body{ gap: 72px; }

/* Even, unemphasised copy — no bold runs inside the paragraphs */
.about-copy p{
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--n-700);
  margin-bottom: 24px;
}
.about-copy strong{ font-weight: 300; color: inherit; }

/* Quote: a rule and the words, nothing else */
.about-quote{
  margin-top: 40px;
  padding: 4px 0 4px 24px;
  border-left: 1px solid var(--n-200);
  border-radius: 0;
  background: none;
}
.quote-mark{ display: none; }
.about-quote p{
  font-size: 19px;
  font-weight: 200;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
.about-quote cite{ font-weight: 400; }
.about-quote cite span{ color: var(--n-400); }

/* Stats: a hairline-ruled list, like the hero strip */
.about-stats{
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--n-200);
}
.stat-card,
.stat-card:nth-child(3){
  grid-column: span 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  padding: 22px 0;
  box-shadow: none !important;
}
.stat-card:hover{ transform: none; }
.stat-card-num{
  font-weight: 200;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-card-suffix{
  font-weight: 200;
  font-size: 26px;
  color: var(--n-400);
}
.stat-card-label,
.stat-card:nth-child(3) .stat-card-label{
  margin-top: 0;
  margin-left: auto;
  text-align: right;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--n-500);
}

/* Developer names as a plain divided row, not chips */
.developer-strip{
  grid-column: span 1;
  margin-top: 26px;
  padding-top: 0;
  border-top: none;
}
.developer-strip-label{
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--n-400);
  margin-bottom: 14px;
}
.developer-strip ul{ gap: 0; align-items: center; }
.developer-strip li{
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 16px 0 0;
  margin-right: 16px;
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  border-right: 1px solid var(--n-200);
}
.developer-strip li:last-child{
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
.developer-strip li:hover{ background: none; }

@media (max-width: 900px){
  .about{ padding: 88px 22px 92px; }
  .about-body{ gap: 44px; }
}

/* ---------- 16. Signature communities ----------
   First section to carry the logo navy (#0E1636) as its accent. */
.home-areas{ padding: 104px 32px 112px; }

.home-areas-head{ margin-bottom: 44px; align-items: flex-end; }
.home-areas-eyebrow{
  gap: 14px;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em;
  color: var(--n-500);
  margin-bottom: 22px;
}
.home-areas-eyebrow .eyebrow-dot{
  width: 30px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: var(--logo-navy) !important;
  box-shadow: none !important;
  animation: none !important;
}
.home-areas-title{
  font-weight: 200;
  font-size: clamp(36px, 5.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--n-400);
}
.home-areas-title em{ font-weight: 600; color: var(--logo-navy); }
.home-areas-sub{ max-width: 380px; color: var(--n-700); }
.home-areas-link{
  font-weight: 400;
  color: var(--logo-navy);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--n-200);
}
.home-areas-link:hover{
  gap: 12px;
  color: var(--logo-navy);
  border-bottom-color: var(--logo-navy);
}

/* ---- Tiles: square, flat, navy-graded ---- */
.home-areas-gallery{ gap: 14px; grid-auto-rows: 232px; }
.home-areas-gallery .gallery-tile{
  border-radius: 0;
  box-shadow: none;
}
/* Neutral scrim — the navy stays in the type, never over the photography. */
.home-areas-gallery .gallery-tile::after{
  background: linear-gradient(180deg,
    rgba(5,5,6,0) 14%,
    rgba(5,5,6,0.30) 46%,
    rgba(5,5,6,0.72) 72%,
    rgba(5,5,6,0.94) 100%);
}
.home-areas-gallery .gallery-tile:hover img{ transform: scale(1.04); }

.home-areas-gallery .gallery-tile-body{ padding: 26px 24px 24px; }
.home-areas-gallery .gallery-tile-tag{
  background: none;
  border: none;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.78);
}
.home-areas-gallery .gallery-tile-name{
  font-weight: 300;
  font-size: 27px;
  letter-spacing: -0.03em;
}
.home-areas-gallery .gallery-tile.is-feature .gallery-tile-name{ font-size: 38px; }
.home-areas-gallery .gallery-tile-cta{
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
}

/* Awards: give the rail the wider half of the split, and let the cards
   shrink in step with it rather than overflowing narrow screens. */
.awards-layout{ grid-template-columns: 0.76fr 1.24fr; gap: 56px; }
.awards-track{ gap: 24px; }

@media (max-width: 1200px){
  .award-card{ width: 400px; height: 330px; }
}
@media (max-width: 1080px){
  .awards-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .award-card{ width: 300px; height: 250px; }
  .award-card img{ padding: 12px; }
}

/* ---------- 17. Featured listings ----------
   Taller, narrower cards. Same language as the hero: square edges,
   flat surfaces, one weight of type, ink on white. */
.listings{ padding: 104px 32px 112px; }
.listings-head{ margin-bottom: 34px; }

.listings-eyebrow{
  gap: 14px;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em;
  color: var(--n-500);
  margin-bottom: 22px;
}
.listings-eyebrow .eyebrow-dot{
  width: 30px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: var(--logo-navy) !important;
  box-shadow: none !important;
  animation: none !important;
}
.listings-title{
  font-weight: 200;
  font-size: clamp(36px, 5.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--n-400);
}
.listings-title strong{ font-weight: 600; color: var(--logo-navy); }
.listings-sub{ color: var(--n-700); max-width: 380px; }

/* Tabs: text with a rule, like the hero's Buy / Rent / Projects */
.listings-tabs{
  display: flex;
  gap: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  padding: 0;
  margin-bottom: 34px;
}
.listings-tab{
  position: relative;
  padding: 13px 20px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--n-500);
}
.listings-tab:first-child{ padding-left: 0; }
.listings-tab:hover:not(.is-active){ color: var(--ink); }
.listings-tab.is-active{
  background: none;
  color: var(--ink);
  font-weight: 500;
}
.listings-tab.is-active::after{
  content: '';
  position: absolute;
  left: 0; right: 20px; bottom: -1px;
  height: 1px;
  background: var(--ink);
}
.listings-tab:first-child.is-active::after{ left: 0; }

/* ---- Cards ---- */
.listings-grid{
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 20px;
}
.listing-card{
  border-radius: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none !important;
}
.listing-card:hover{
  transform: none;
  box-shadow: none !important;
}
.listing-card:focus-visible{ outline: 2px solid var(--logo-navy); outline-offset: 3px; }

/* Portrait media — the height the card gains comes from here */
.listing-card-media{
  aspect-ratio: 3 / 4;
  border-radius: 0;
  background: var(--n-100);
}
.listing-card:hover .listing-card-media img{ transform: scale(1.04); }
.listing-card-scrim{
  background: linear-gradient(180deg,
    rgba(5,5,6,0.34) 0%,
    rgba(5,5,6,0) 26%,
    rgba(5,5,6,0) 52%,
    rgba(5,5,6,0.72) 100%);
}

/* Badge and price sit as plain type on the scrim, not as chips */
.listing-card-badge{
  top: 16px; left: 16px;
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.85);
}
.listing-card-price{
  bottom: 16px; left: 16px;
  background: none !important;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.listing-card-body{ padding: 15px 0 0; }
.listing-card-title{
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  min-height: 42px;
  margin-bottom: 7px;
}
.listing-card:hover .listing-card-title{ color: var(--logo-navy); }
.listing-card-location{
  font-size: 11.5px;
  color: var(--n-500);
  margin-bottom: 13px;
}
.listing-card-location svg{ color: var(--n-400) !important; opacity: 1; }
.listing-card-specs{
  padding-top: 12px;
  border-top: 1px solid var(--n-200);
  font-size: 12px;
  color: var(--n-500);
}
.listing-card-specs svg{ color: var(--n-400) !important; opacity: 1; }
.spec-divider{ background: var(--n-200); }

/* Pagination: square hairline buttons */
.page-btn{
  border-radius: 0;
  background: none;
  border: 1px solid var(--n-200);
  color: var(--n-500);
  font-weight: 400;
}
.page-btn:hover:not(:disabled):not(.is-active){
  background: var(--n-50);
  color: var(--ink);
}
.page-btn.is-active{
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 400;
  box-shadow: none;
}

@media (max-width: 1200px){ .listings-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px){ .listings-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .listings-grid{ grid-template-columns: 1fr; } }

/* ---------- 18. Listing detail ----------
   Same language as the hero and the listing cards: square edges, flat
   surfaces, hairline rules, one bold thing per block. */
.listing-page{ padding: calc(var(--header-h) + 30px) 32px 104px; }

/* Breadcrumb trail: Home / Buy / Community / this property */
.listing-detail-breadcrumb{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--n-200);
  /* Same type as .rf-crumbs on the project/area heroes */
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.listing-detail-breadcrumb .crumb{
  font-size: inherit;
  font-weight: inherit;
  color: var(--n-500);
  transition: color var(--dur-fast) var(--ease-out);
}
.listing-detail-breadcrumb a.crumb:hover{ color: var(--logo-navy); }
.listing-detail-breadcrumb .crumb.is-current{
  font-weight: 400;
  color: var(--ink);
  max-width: 46ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listing-detail-breadcrumb .crumb-sep{
  margin: 0 10px;
  color: var(--n-200);
}
@media (max-width: 600px){
  .listing-detail-breadcrumb{ font-size: 11px; }
  .listing-detail-breadcrumb .crumb-sep{ margin: 0 7px; }
}

/* ---- Gallery ---- */
.listing-gallery{ gap: 10px; }
.listing-gallery .gallery-tile{
  border-radius: 0;
  background: var(--n-100);
}
/* No tint over the photography — hover is the zoom alone. */
.listing-gallery .gallery-tile:hover img{ transform: scale(1.03); filter: none; }
.listing-gallery .gallery-tile::after,
.listing-gallery .gallery-tile:hover::after{ background: none !important; }
.listing-gallery .gallery-tile:focus-visible{ outline: 2px solid var(--logo-navy); outline-offset: 2px; }
.gallery-more{
  background: rgba(5,5,6,0.5);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* Agent card in the price card */
.listing-agent-card{
  border-top: 1px solid var(--n-200, rgba(0,0,0,0.10));
}
.listing-agent-card-photo{
  border-radius: 0;
  border: none;
  background: none;
}
.listing-agent-card-label{
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--n-400);
}
.listing-agent-card-info h3{ font-weight: 400; }
.listing-agent-card-info p{ color: var(--n-500); }

/* ---- Headline ---- */
@media (min-width: 981px){
  .listing-detail-body{ grid-template-columns: 1fr 340px; gap: 64px; }
}

.listing-detail-badge{
  background: none;
  color: var(--n-500);
  border-radius: 0;
  padding: 0;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  margin-bottom: 16px;
}
.listing-detail-headline h1{
  font-weight: 200;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.listing-detail-location{
  font-size: 14px;
  color: var(--n-500);
  margin-bottom: 34px;
}
.listing-detail-location svg{ color: var(--n-400) !important; }

/* ---- Specs: a hairline ledger, not boxes ---- */
.listing-detail-specs{
  gap: 0;
  padding: 0;
  margin-bottom: 40px;
  border-top: 1px solid var(--n-200);
  border-bottom: 1px solid var(--n-200);
}
.listing-detail-spec{
  gap: 12px;
  padding: 22px 20px;
  background: none;
  border: none;
  border-right: 1px solid var(--n-200);
  border-radius: 0;
}
.listing-detail-spec:first-child{ padding-left: 0; }
.listing-detail-spec:nth-child(3n){ border-right: none; }
.listing-detail-spec:hover{ background: none; border-color: var(--n-200); }
.listing-detail-spec-icon{
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--n-400);
}
.listing-detail-spec-value{
  font-size: 22px;
  font-weight: 200;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.listing-detail-spec-label{
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--n-500);
}

/* ---- Sections: wide-tracked labels over a rule ---- */
.listing-detail-section{ margin-bottom: 44px; }
.listing-detail-section h2{
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--n-500);
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--n-200);
}
.listing-detail-section p{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--n-700);
}

/* Amenities: a divided list, no chips */
.listing-detail-amenities{ gap: 0 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.listing-detail-amenities li{
  background: none;
  border: none;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  padding: 12px 0;
  margin-right: 24px;
  font-size: 14px;
  font-weight: 300;
  color: var(--n-700);
}

.listing-detail-map{ border-radius: 0 !important; overflow: hidden; }

/* ---- Sidebar ---- */
.listing-detail-price-card{
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 0;
  padding: 28px 26px;
  box-shadow: none;
}
.listing-detail-price-label{
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--n-400);
  margin-bottom: 10px;
}
.listing-detail-price{
  font-size: 34px;
  font-weight: 200;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.listing-detail-reference{
  color: var(--n-500);
  border-bottom: 1px solid var(--n-200);
}
.listing-detail-cta{
  border-radius: 0 !important;
  min-height: 52px;
  font-weight: 400;
  letter-spacing: 0.02em;
  box-shadow: none !important;
}
.listing-detail-cta#listingCallBtn{
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
}
.listing-detail-cta#listingCallBtn:hover{ background: var(--logo-navy); border-color: var(--logo-navy); }
.listing-detail-cta-whatsapp{
  background: #fff !important;
  border: 1px solid var(--n-200) !important;
  color: var(--ink) !important;
}
.listing-detail-cta-whatsapp:hover{
  background: var(--n-50) !important;
  border-color: var(--n-400) !important;
}
.listing-detail-permit{ color: var(--n-400); }

.listing-state .btn-explore{
  border-radius: 0;
  background: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 980px){
  .listing-detail-amenities{ grid-template-columns: repeat(2, 1fr); }
  /* the spec grid drops to two columns here — move the seam with it */
  .listing-detail-spec:nth-child(3n){ border-right: 1px solid var(--n-200); }
  .listing-detail-spec:nth-child(2n){ border-right: none; }
  .listing-detail-spec:nth-child(2n+1){ padding-left: 0; }
}
@media (max-width: 560px){
  .listing-detail-amenities{ grid-template-columns: 1fr; }
}

/* Gallery tiles: no ring when they're clicked, keep one for keyboard */
.listing-gallery .gallery-tile,
.lightbox button,
.lightbox img{ -webkit-tap-highlight-color: transparent; }
.listing-gallery .gallery-tile:focus,
.lightbox button:focus,
.lightbox img:focus{ outline: none; }
.listing-gallery .gallery-tile:focus-visible{
  outline: 2px solid var(--logo-navy);
  outline-offset: -2px;
}

/* ---- Similar properties ---- */
.listing-similar{
  max-width: 1280px;
  margin: 12px auto 0;
  padding-top: 44px;
  border-top: 1px solid var(--n-200);
}
.listing-similar[hidden]{ display: none; }
.listing-similar h2{
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--n-500);
  margin-bottom: 26px;
}
.listing-similar .listings-grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 20px;
}
@media (max-width: 860px){
  .listing-similar .listings-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .listing-similar .listings-grid{ grid-template-columns: 1fr; }
}

/* ---------- 19. Ready-to-move projects (home) ----------
   Same card as Featured Listings: tall, narrow, flat, square. */
.projects{
  background: var(--n-50);
  border-top: none;
  padding: 104px 32px 112px;
}
.projects-inner{ max-width: 1280px; }

.projects-grid{
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 20px;
}
.project-card{
  border-radius: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none !important;
}
.project-card:hover{ transform: none; box-shadow: none !important; }
.project-card:focus-visible{ outline: 2px solid var(--logo-navy); outline-offset: 3px; }

.project-card-media{
  aspect-ratio: 3 / 4;
  border-radius: 0;
  background: var(--n-100);
}
.project-card:hover .project-card-media img{ transform: scale(1.04); }
.project-card-scrim{
  background: linear-gradient(180deg,
    rgba(5,5,6,0.34) 0%,
    rgba(5,5,6,0) 26%,
    rgba(5,5,6,0) 52%,
    rgba(5,5,6,0.72) 100%);
}
.project-card-badge{
  top: 16px; left: 16px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.85);
}
.project-card-badge::before{ display: none; }
.project-card-price{
  bottom: 16px; left: 16px;
  background: none !important;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.project-card-body{ padding: 15px 0 0; }
.project-card-developer{
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--n-400);
  margin-bottom: 8px;
}
.project-card-title{
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-line-clamp: 2;
  min-height: 42px;
  margin-bottom: 7px;
}
.project-card:hover .project-card-title{ color: var(--logo-navy); }
.project-card-location{ font-size: 11.5px; color: var(--n-500); margin-bottom: 13px; }
.project-card-location svg{ color: var(--n-400) !important; opacity: 1; }
.project-card-specs{
  padding-top: 12px;
  border-top: 1px solid var(--n-200);
  font-size: 12px;
  color: var(--n-500);
}
.project-card-specs svg{ color: var(--n-400) !important; opacity: 1; }
.project-spec-divider{ background: var(--n-200); }

@media (max-width: 1200px){ .projects-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px){ .projects-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .projects-grid{ grid-template-columns: 1fr; } }

/* ---------- 20. Project detail ----------
   The hero mirrors the homepage hero: neutral grade under a square
   white panel. Everything below is flat and hairline-ruled. */
.project-hero{ background: #06070A; }
.project-hero-media img{ filter: saturate(0.78) contrast(1.03) brightness(0.94); }
.project-hero-overlay{
  background:
    linear-gradient(100deg, rgba(6,7,10,0.72) 0%, rgba(6,7,10,0.30) 48%, rgba(6,7,10,0.16) 100%),
    linear-gradient(180deg, rgba(6,7,10,0.5) 0%, rgba(6,7,10,0.08) 32%, rgba(6,7,10,0.62) 100%);
}

/* Top bar: plain type, no glass pills */
.project-breadcrumb,
.project-gallery-btn{
  background: none !important;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.project-breadcrumb:hover,
.project-gallery-btn:hover{ color: #fff; }
.project-gallery-btn{ border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 4px; }

/* Highlights: a solid white panel, like the hero search bar */
.project-highlights-card{
  max-width: 560px;
  margin: 32px auto 72px;
  color: var(--ink);
  background: #fff;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 30px 32px 28px;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.7);
}
.project-highlights-badge{
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--n-500);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
}
.project-highlights-badge::before{
  width: 22px; height: 1px;
  border-radius: 0;
  background: var(--logo-navy);
}
.project-highlights-developer{
  color: var(--n-400);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
}
.project-highlights-card h1{
  font-weight: 200;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.038em;
  color: var(--ink);
}
.project-highlights-subtitle{ color: var(--n-700); font-weight: 300; }
.project-highlights-location{ color: var(--n-500); }
.project-highlights-location svg{ color: var(--n-400); }

.project-highlight-icon{
  width: auto; height: auto;
  border-radius: 0;
  background: none !important;
  border: none;
  color: var(--n-400);
}
.project-highlight-value{
  color: var(--ink);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: -0.015em;
}
.project-highlight-label{
  color: var(--n-500);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.project-highlights-footer{ border-top: 1px solid var(--n-200); padding-top: 22px; margin-top: 22px; }
.project-highlights-price-label{ color: var(--n-400); font-size: 10px; letter-spacing: 0.2em; }
.project-highlights-price-value{
  color: var(--ink);
  font-weight: 200;
  font-size: 28px;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.project-cta-btn{
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 15px 26px;
}
/* the icon-only WhatsApp button is a fixed square — padding would
   collapse its glyph to nothing */
.project-cta-btn.project-cta-whatsapp{ padding: 0; width: 52px; height: 52px; }
.project-cta-btn:hover{ transform: none; }
.project-cta-primary{ background: var(--ink); color: #fff; }
.project-cta-primary:hover{ background: var(--logo-navy); }
.project-cta-whatsapp,
.project-cta-whatsapp-text{
  border: 1px solid var(--n-200);
  color: var(--ink);
  background: #fff;
}
.project-cta-whatsapp:hover,
.project-cta-whatsapp-text:hover{ background: var(--n-50); border-color: var(--n-400); }

/* ---- Body ---- */
.project-section h2{
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--n-500);
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--n-200);
}
.project-section-sub{ color: var(--n-500); margin-top: 0; }
.project-rich-text{ font-size: 16px; color: var(--n-700); }
.project-rich-text strong{ font-weight: 400; color: var(--ink); }
.project-rich-text a{ color: var(--logo-navy); }

.project-amenities{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.project-amenities li{
  border: none;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  padding: 12px 0;
  margin-right: 24px;
  font-size: 14px;
  font-weight: 300;
  color: var(--n-700);
}

.project-gallery-tile{ border-radius: 0; }
.project-gallery-tile:hover img{ transform: scale(1.03); filter: none; }
.project-gallery-tile::after,
.project-gallery-tile:hover::after{ background: none !important; }
.project-gallery-tile:focus{ outline: none; }
.project-gallery-tile:focus-visible{ outline: 2px solid var(--logo-navy); outline-offset: -2px; }
.project-gallery-more{ background: rgba(5,5,6,0.5); font-weight: 300; }

.floorplan-card{
  border-radius: 0;
  border: 1px solid var(--n-200);
  box-shadow: none;
}
.floorplan-card-name{ font-weight: 400; }
.floorplan-card-size{ color: var(--n-500); }

.project-faq-item{
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--n-200);
  background: none;
}
.project-faq-item > summary{ font-weight: 400; padding-left: 0; padding-right: 0; }

/* ---- Aside ---- */
.project-aside-card{
  border-radius: 0;
  border: 1px solid var(--n-200);
  background: #fff;
  box-shadow: none;
}
.project-aside-label{ color: var(--n-400); font-size: 10px; letter-spacing: 0.2em; }
.project-aside-price{
  color: var(--ink);
  font-weight: 200;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.project-aside-fact{ border-color: var(--n-200); }
.project-aside-fact-label{ color: var(--n-500); }
.project-aside-fact-value{ color: var(--ink); font-weight: 400; }
.project-aside-cta{ background: var(--ink); border-radius: 0; }
.project-aside-cta:hover{ background: var(--logo-navy); }
.project-aside-cta.project-cta-whatsapp-text{ border-color: var(--n-200); }
.project-aside-nav a{ border-radius: 0; color: var(--n-500); }
.project-aside-nav a:hover{ background: var(--n-50); color: var(--ink); }

.project-map{ border-radius: 0 !important; overflow: hidden; }

.project-cta-banner{
  border-radius: 0;
  background: var(--ink);
}
.project-sticky-cta{ border-radius: 0; }

@media (max-width: 900px){
  .project-amenities{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .project-amenities{ grid-template-columns: 1fr; }
}

/* ---------- 21. Project hero, reworked ----------
   Full-bleed image with the title set over it; the specs, price and
   actions moved out into their own band below. */
.project-hero{
  min-height: min(88vh, 780px);
  justify-content: flex-end;
}
.project-hero-overlay{
  background:
    linear-gradient(100deg, rgba(6,7,10,0.74) 0%, rgba(6,7,10,0.28) 52%, rgba(6,7,10,0.12) 100%),
    linear-gradient(180deg, rgba(6,7,10,0.55) 0%, rgba(6,7,10,0.06) 30%, rgba(6,7,10,0.82) 100%) !important;
}
/* the hero is a bottom-aligned column — keep the top bar at the top */
.project-hero-topbar{
  padding: calc(var(--header-h) + 28px) 40px 0;
  margin-bottom: auto;
}

.project-hero-copy{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px 88px;
  color: #fff;
}
.project-hero-copy .project-highlights-head{
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.project-hero-copy .project-highlights-badge{
  color: rgba(255,255,255,0.9);
  border: none;
  padding: 0;
  font-size: 10.5px;
  letter-spacing: 0.24em;
}
.project-hero-copy .project-highlights-badge::before{
  width: 30px; height: 1px;
  background: rgba(255,255,255,0.55);
}
.project-hero-copy .project-highlights-developer{
  color: rgba(255,255,255,0.55);
  font-size: 10.5px;
  letter-spacing: 0.24em;
}
.project-hero-copy h1{
  font-weight: 200;
  font-size: clamp(38px, 6.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #fff;
  max-width: 16ch;
}
.project-hero-copy .project-highlights-subtitle{
  margin-top: 22px;
  max-width: 460px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
}
.project-hero-copy .project-highlights-location{
  margin-top: 18px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.project-hero-copy .project-highlights-location svg{ color: rgba(255,255,255,0.5); }

/* ---- Key facts band ---- */
.project-facts{
  background: #fff;
  border-bottom: 1px solid var(--n-200);
}
.project-facts-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.project-facts .project-highlights-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--n-200);
}
.project-facts .project-highlight-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 30px 24px;
  border-right: 1px solid var(--n-200);
}
.project-facts .project-highlight-item:first-child{ padding-left: 0; }
.project-facts .project-highlight-item:last-child{ border-right: none; }
.project-facts .project-highlight-value{
  font-size: 20px;
  font-weight: 200;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.project-facts .project-highlight-label{
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--n-500);
}

.project-facts .project-highlights-footer{
  border-top: none;
  margin-top: 0;
  padding: 28px 0 32px;
  gap: 24px;
}
.project-facts .project-highlights-price-value{ font-size: 34px; }
.project-facts .project-cta-btn{ min-height: 52px; }

@media (max-width: 900px){
  .project-hero-topbar{ padding: calc(var(--header-h) + 20px) 22px 0; }
  .project-hero-copy{ padding: 0 22px 64px; }
  .project-facts-inner{ padding: 0 22px; }
  .project-facts .project-highlights-grid{ grid-template-columns: repeat(2, 1fr); }
  .project-facts .project-highlight-item:nth-child(2n){ border-right: none; }
  .project-facts .project-highlight-item:nth-child(2n+1){ padding-left: 0; }
  .project-facts .project-highlight-item:nth-child(-n+2){ border-bottom: 1px solid var(--n-200); }
}
@media (max-width: 520px){
  .project-facts .project-highlights-footer{ flex-direction: column; align-items: flex-start; }
}

/* ---------- 22. Secondary page heroes ----------
   Shared by Properties, Projects, Areas, About, Careers, Contact. */
.page-hero{
  background: var(--rf-black-gradient);
  padding: calc(var(--header-h) + 76px) 32px 54px;
}
.page-hero::before{ display: none !important; }
.page-hero-inner{ max-width: var(--page-max); }

/* The agent portfolio hero (agents.css) takes the same ground; the glow under the
   photo goes neutral to match. */
.agent-hero{ background: var(--rf-black-gradient); }
.agent-hero-photo-wrap::after{
  background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%);
}

.page-hero-eyebrow{
  gap: 14px;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 26px;
}
.page-hero-eyebrow::before{
  width: 30px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.5) !important;
  box-shadow: none !important;
}
.page-hero-title{
  font-weight: 200;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.page-hero-title strong{ font-weight: 600; }
.page-hero-sub{
  margin-top: 22px;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.68);
}

/* ---------- Properties toolbar: continues the hero band ----------
   Flat, in the shade the hero gradient settles to, so there is no seam. */
.properties-toolbar{
  background: #050506;
  padding: 0 32px 52px;
}
.properties-toolbar-inner{ max-width: 1240px; }

/* Buy / Rent as type on a rule, like the homepage hero tabs */
.rf-tabs{
  display: flex;
  gap: 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  border-radius: 0;
  padding: 0;
  margin-bottom: 26px;
}
.rf-tab{
  position: relative;
  padding: 13px 22px 14px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
}
.rf-tab:first-child{ padding-left: 0; }
.rf-tab:hover:not(.is-active){ color: #fff; }
.rf-tab.is-active{
  background: none;
  color: #fff;
  font-weight: 500;
}
.rf-tab.is-active::after{
  content: '';
  position: absolute;
  left: 0; right: 22px; bottom: -1px;
  height: 1px;
  background: #fff;
}

/* Search bar: the same square white panel as the homepage hero */
.properties-searchbar{
  background: #fff;
  border-radius: 0;
  padding: 6px;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.7);
  gap: 0;
  max-width: 900px;
}
.properties-search-field{
  border-radius: 0;
  background: none;
  padding: 0 18px;
  min-height: 62px;
  border-right: 1px solid var(--n-200);
}
.properties-search-field svg{ color: var(--n-400); }
.properties-search-field input{ font-size: 14.5px; }
.properties-search-field input::placeholder{ color: var(--n-400); }
.properties-search-submit{
  border-radius: 0;
  background: var(--ink);
  min-height: 62px;
  padding: 0 34px;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.properties-search-submit:hover{ background: var(--logo-navy); transform: none; }

@media (max-width: 640px){
  .page-hero{ padding: calc(var(--header-h) + 48px) 22px 40px; }
  .properties-toolbar{ padding: 0 22px 40px; }
  .properties-search-field{ border-right: none; border-bottom: 1px solid var(--n-200); }
  .properties-search-submit{ width: 100%; margin-top: 6px; }
}

/* ---------- 23. Properties head: white, with live stock on the right ---------- */
.properties-head{
  background: #fff;
  padding: calc(var(--header-h) + 68px) 32px 60px;
  border-bottom: 1px solid var(--n-200);
}
.properties-head-inner{
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 64px;
  align-items: end;
}
.properties-head-copy{ min-width: 0; }

/* Type on white */
.properties-head .page-hero-eyebrow{ color: var(--n-500); }
.properties-head .page-hero-eyebrow::before{ background: var(--logo-navy) !important; }
.properties-head .page-hero-title{ color: var(--n-400); }
.properties-head .page-hero-title strong{ color: var(--logo-navy); }
.properties-head .page-hero-sub{ color: var(--n-700); max-width: 440px; }

.properties-head .rf-tabs{
  margin-top: 34px;
  margin-bottom: 22px;
  border-bottom-color: var(--n-200);
}
.properties-head .rf-tab{ color: var(--n-500); }
.properties-head .rf-tab:hover:not(.is-active){ color: var(--ink); }
.properties-head .rf-tab.is-active{ color: var(--ink); }
.properties-head .rf-tab.is-active::after{ background: var(--ink); }

.properties-head .properties-searchbar{
  border: 1px solid var(--n-200);
  box-shadow: none;
  max-width: none;
}

/* Three staggered portraits from the live result set */
.properties-head-visual{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: end;
}
.properties-head-visual[hidden]{ display: none; }
.properties-head-shot{
  margin: 0;
  overflow: hidden;
  background: var(--n-100);
  aspect-ratio: 3 / 4;
}
.properties-head-shot:nth-child(1){ margin-bottom: 34px; }
.properties-head-shot:nth-child(3){ margin-bottom: 68px; }
.properties-head-shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1080px){
  .properties-head-inner{ grid-template-columns: 1fr; gap: 44px; }
  .properties-head-visual{ max-width: 520px; }
  .properties-head-shot:nth-child(1),
  .properties-head-shot:nth-child(3){ margin-bottom: 0; }
}
@media (max-width: 640px){
  .properties-head{ padding: calc(var(--header-h) + 44px) 22px 44px; }
  .properties-head-visual{ display: none; }
}

/* A photo that fails to load leaves a neutral frame, not a broken icon */
.listing-card-media.is-empty,
.project-card-media.is-empty{ background: var(--n-100); }
.properties-head-shot[hidden]{ display: none; }

/* Buy / Rent results: more air between rows than between columns */
#propertiesGrid.listings-grid{ gap: 46px 20px; }

/* ---------- 24. Projects listing ----------
   Deliberately unlike Buy/Rent: filters run across the top and the
   results are compact tiles with the type set over the image. */
@media (min-width: 921px){
  .projects-page .properties-layout{ grid-template-columns: 1fr; gap: 26px; }

  .projects-page .filters-panel{
    position: static;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 20px 24px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--n-200);
    border-radius: 0;
    padding: 0 0 24px;
    box-shadow: none;
  }
  .projects-page .filters-head{
    grid-column: 1 / -1;
    margin-bottom: 2px;
    padding-bottom: 0;
    border: none;
  }
  .projects-page .filters-head h2{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--n-500);
  }
  .projects-page .filters-head h2 svg{ display: none; }
  .projects-page .filter-group{ margin-bottom: 0; }
  /* status chips and the price pair span the row they land on */
  .projects-page .filter-group:has(.filter-chips){ grid-column: span 2; }
}

.projects-page .filters-reset{
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--n-500);
}
.projects-page .filters-reset:hover{ color: var(--logo-navy); }

/* ---- Compact project tiles ---- */
.projects-page-grid{
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 16px;
}
.projects-page-grid .project-card{
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  height: auto;
  overflow: hidden;
}
.projects-page-grid .project-card-media{
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
}
.projects-page-grid .project-card-scrim{
  background: linear-gradient(180deg,
    rgba(5,5,6,0.42) 0%,
    rgba(5,5,6,0.06) 30%,
    rgba(5,5,6,0.42) 62%,
    rgba(5,5,6,0.9) 100%);
}
.projects-page-grid .project-card-price{
  top: 14px; left: auto; right: 14px; bottom: auto;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}
.projects-page-grid .project-card-badge{ top: 14px; left: 14px; font-size: 9.5px; }

.projects-page-grid .project-card-body{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 16px 18px;
}
.projects-page-grid .project-card-developer{
  color: rgba(255,255,255,0.6);
  font-size: 9.5px;
  margin-bottom: 6px;
}
.projects-page-grid .project-card-title{
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  min-height: 0;
  margin-bottom: 5px;
  -webkit-line-clamp: 2;
}
.projects-page-grid .project-card:hover .project-card-title{ color: #fff; }
.projects-page-grid .project-card-location{
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  margin-bottom: 0;
}
.projects-page-grid .project-card-location svg{ color: rgba(255,255,255,0.5) !important; }
/* the spec row would crowd a tile this size */
.projects-page-grid .project-card-specs{ display: none; }

/* Filter controls: square, hairline, on both the Buy/Rent and Projects pages */
.filter-label{
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--n-500);
}
.filter-select,
.filter-price-input{
  border-radius: 0;
  border: 1px solid var(--n-200);
  background-color: #fff;
  font-weight: 300;
  color: var(--ink);
}
.filter-select:focus,
.filter-price-input:focus{ border-color: var(--logo-navy) !important; }
.filter-chip{
  border-radius: 0;
  border: 1px solid var(--n-200);
  font-weight: 400;
  color: var(--n-700);
}
.filter-chip:hover{ border-color: var(--n-400); color: var(--ink); }
.filter-chip.is-active{
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.results-sort select{
  border-radius: 0;
  border: 1px solid var(--n-200);
  font-weight: 300;
}
.results-count{ color: var(--n-500); }
.results-count strong{ color: var(--ink); font-weight: 400; }
.filters-toggle{ border-radius: 0; background: var(--ink); font-weight: 400; }

@media (min-width: 921px){
  /* Buy/Rent keeps its sidebar, but flat and square like everything else */
  .rf-page:not(.projects-page) .filters-panel{
    border-radius: 0;
    border: 1px solid var(--n-200);
    box-shadow: none;
  }
}

/* ---------- 26. About page ---------- */
.rf-section{ padding: 96px 32px; }
.rf-section.alt{ background: var(--n-50); }
.rf-section-inner{ max-width: 1240px; }

.section-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em;
  color: var(--n-500);
  margin-bottom: 22px;
}
.section-eyebrow::before{
  content: '';
  width: 30px; height: 1px;
  background: var(--logo-navy);
}
.section-title{
  font-weight: 200;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--n-400);
}
.section-title strong{ font-weight: 600; color: var(--ink); }
.section-lead{ color: var(--n-700); max-width: 620px; }

/* Who we are */
.about-hero-grid{ gap: 64px; align-items: start; }
.about-hero-copy p{
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--n-700);
  margin-top: 22px;
}
.about-portrait{ border-radius: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.about-portrait img{ display: block; }

/* Stats as a hairline ledger */
.stats-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 72px;
  border-top: 1px solid var(--n-200);
  border-bottom: 1px solid var(--n-200);
}
.stat-block{
  padding: 30px 24px;
  border-right: 1px solid var(--n-200);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.stat-block:first-child{ padding-left: 0; }
.stat-block:last-child{ border-right: none; }
.stat-block-num{
  font-weight: 200;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-block-num .plus{ color: var(--n-400); }
.stat-block-label{
  margin-top: 10px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--n-500);
}

/* What we do */
.service-list{ margin-top: 48px; border-top: 1px solid var(--n-200); }
.service-row{
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  align-items: baseline;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--n-200);
  transition: background var(--dur-fast) var(--ease-out);
}
.service-row:hover{ background: rgba(16,24,40,0.02); }
.service-index{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--n-400);
  font-variant-numeric: tabular-nums;
}
.service-text h3{
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 8px;
}
.service-text p{
  max-width: 620px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--n-500);
}
.service-go{
  justify-self: end;
  color: var(--n-400);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.service-row:hover .service-go{ transform: translateX(5px); color: var(--logo-navy); }

/* Timeline */
.timeline{ list-style: none; margin-top: 48px; border-top: 1px solid var(--n-200); }
.timeline-item{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--n-200);
}
.timeline-year{
  font-size: 22px;
  font-weight: 200;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--logo-navy);
}
.timeline-text h3{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 6px;
}
.timeline-text p{
  max-width: 660px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--n-500);
}

/* Leadership */
.leader-grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}
.leader-portrait{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(165deg, #1C1D21 0%, #0E0F12 46%, #050506 100%);
}
.leader-portrait img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.leader-lead{
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--n-700);
}
.leader-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 36px 0 30px;
  border-top: 1px solid var(--n-200);
  border-bottom: 1px solid var(--n-200);
}
.leader-stat{ padding: 22px 20px; border-right: 1px solid var(--n-200); }
.leader-stat:first-child{ padding-left: 0; }
.leader-stat:last-child{ border-right: none; }
.leader-stat-value{
  display: block;
  font-size: 26px;
  font-weight: 200;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.leader-stat-label{
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--n-500);
}
.leader-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--logo-navy);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--n-200);
  transition: gap var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.leader-link:hover{ gap: 12px; border-bottom-color: var(--logo-navy); }

/* Partners */
.partner-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--n-200);
  list-style: none;
}
.partner-row li{
  padding-right: 40px;
  margin-right: 40px;
  border-right: 1px solid var(--n-200);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 200;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.partner-row li:last-child{ border-right: none; margin-right: 0; padding-right: 0; }

/* Values */
.values-grid{
  margin-top: 44px;
  gap: 0;
  border-top: 1px solid var(--n-200);
}
.value-card{
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  box-shadow: none !important;
  padding: 28px 32px 28px 0;
}
.value-card h3{
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.value-card p{ color: var(--n-500); font-size: 15px; }
.value-icon{ display: none; }

.about-team-note{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}
.about-team-note p{
  font-size: 16px;
  font-weight: 300;
  color: var(--n-700);
  max-width: 560px;
}

/* CTA band */
.cta-band{ background: var(--ink); padding: 96px 32px; }
.cta-band h2{
  font-weight: 200;
  font-size: clamp(30px, 4.2vw, 52px);
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.cta-band h2 strong{ font-weight: 600; }
.cta-band p{ color: rgba(255,255,255,0.65); font-weight: 300; }
.cta-btn-primary,
.cta-btn-ghost{
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 16px 30px;
}
.cta-btn-primary{ background: #fff; color: var(--ink); }
.cta-btn-primary:hover{ background: rgba(255,255,255,0.88); transform: none; }
.cta-btn-ghost{ border: 1px solid rgba(255,255,255,0.28); color: #fff; }
.cta-btn-ghost:hover{ background: rgba(255,255,255,0.08); }

@media (max-width: 900px){
  .rf-section{ padding: 72px 22px; }
  .stats-row{ grid-template-columns: repeat(2, 1fr); }
  .stat-block:nth-child(2){ border-right: none; }
  .stat-block:nth-child(-n+2){ border-bottom: 1px solid var(--n-200); }
  .stat-block:nth-child(2n+1){ padding-left: 0; }
  .leader-grid{ grid-template-columns: 1fr; gap: 32px; }
  .leader-portrait{ max-width: 320px; }
  .timeline-item{ grid-template-columns: 76px 1fr; gap: 16px; }
  .service-row{ grid-template-columns: 40px 1fr 28px; gap: 14px; }
}

/* =========================================================
   BREADCRUMBS (shared — project & area detail heroes)
========================================================= */
.rf-crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap: 8px;
  font-size: 12px; font-weight: 300; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
}
.rf-crumbs a{
  color: rgba(255,255,255,0.62);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rf-crumbs a:hover{ color:#fff; border-bottom-color: rgba(255,255,255,0.45); }
.rf-crumbs .sep{ opacity: 0.38; }
.rf-crumbs .current{ color:#fff; font-weight: 400; }
/* Truncate long project/area names on narrow screens */
.rf-crumbs .current{
  max-width: 46vw; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-hero-topbar .rf-crumbs{ margin-right: 16px; }
@media (max-width: 600px){
  .rf-crumbs{ font-size: 11px; gap: 6px; }
}

/* =========================================================
   MOBILE MENU — full-width white sheet, hairline rows
========================================================= */
@media (max-width: 860px){
  body.nav-is-open{ overflow: hidden; }

  /* NOTE: .site-header carries a transform, so it is the containing block for
     this fixed panel — offsets below are relative to the header box, not the
     viewport. Hence the oversized scrim instead of inset:0. */
  .main-nav{
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med) var(--ease-out);
  }
  .main-nav::before{
    content: "";
    position: fixed;
    top: var(--header-h);
    left: -50vw;
    right: -50vw;
    height: 200vh;
    background: rgba(15,17,21,0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 0;
  }
  .main-nav.is-open{ opacity: 1; visibility: visible; transform: none; }

  .main-nav ul{
    position: relative;
    z-index: 1;
    display: block;
    background: var(--white);
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--n-200);
    box-shadow: 0 24px 60px rgba(15,17,21,0.18);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-14px);
    opacity: 0;
    transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
  }
  .main-nav.is-open ul{ transform: translateY(0); opacity: 1; }

  .main-nav li{ margin: 0 22px; }
  .main-nav li + li{ border-top: 1px solid var(--n-100); }

  .main-nav a,
  .site-header .main-nav a,
  .site-header.is-light .main-nav a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 2px;
    border-radius: 0;
    font-size: 17px;
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--ink);
    background: none;
  }
  .main-nav a::after{ display: none; }
  .main-nav a::before{
    content: "";
    order: 2;
    width: 6px; height: 6px;
    border-right: 1px solid var(--n-400);
    border-top: 1px solid var(--n-400);
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .site-header .main-nav a:hover,
  .site-header.is-light .main-nav a:hover,
  .main-nav a[aria-current="page"]{ color: var(--ink); background: none; }
  .main-nav a:hover::before{ transform: rotate(45deg) translate(2px, -2px); border-color: var(--ink); }
  .main-nav a[aria-current="page"]{ font-weight: 400; }
  .main-nav a[aria-current="page"]::before{ border-color: var(--blue); }

  /* Contact sits last as the one solid action */
  .nav-contact-mobile{
    border-top: 0 !important;
    margin: 16px 22px 4px;
    padding-top: 0;
  }
  .nav-contact-mobile a,
  .site-header .nav-contact-mobile a,
  .site-header.is-light .nav-contact-mobile a{
    justify-content: center;
    background: var(--ink);
    color: #fff;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .nav-contact-mobile a::before{ display: none; }
  .site-header .nav-contact-mobile a:hover{ background: var(--blue); color: #fff; }

  /* Header turns solid white while the sheet is open */
  body.nav-is-open .site-header .header-glass{
    background: var(--white);
    border-bottom: 1px solid var(--n-200);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header .nav-toggle{ position: relative; z-index: 3; }
  .nav-toggle[aria-expanded="true"] span,
  .site-header.is-light .nav-toggle[aria-expanded="true"] span{ background: var(--ink); }
}

@media (max-width: 600px){
  .main-nav, .main-nav::before{ top: 64px; }
  .main-nav ul{ max-height: calc(100vh - 64px); }
}

/* =========================================================
   FOOTER — black ground, white hairline structure
========================================================= */
.site-footer{
  position: relative;
  color: rgba(255,255,255,0.62);
  padding: 84px 32px 28px;
  overflow: hidden;
  isolation: isolate;
  /* Deep black gradient — charcoal at the top settling to near-black. Shared with the heroes. */
  background: var(--rf-black-gradient);
}
.site-footer-inner{ position: relative; }
.footer-top{
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img{ height: 32px; opacity: 0.95; }
.footer-brand p{ color: rgba(255,255,255,0.5); }
.footer-col h4{
  font-weight: 400;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.42);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 18px;
}
.footer-col a{
  position: relative;
  display: inline-block;
  color: rgba(255,255,255,0.66);
}
.footer-col a::after{
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px; background: rgba(255,255,255,0.7);
  transition: width var(--dur-med) var(--ease-out);
}
.footer-col a:hover::after{ width: 100%; }
.footer-bottom{ padding-top: 26px; color: rgba(255,255,255,0.38); }
.footer-legal{ display:flex; align-items:center; gap: 22px; margin-right: auto; }
.footer-legal a,
.footer-legal span{
  font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.55);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-legal a:hover{ color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.footer-legal span[aria-current="page"]{ color: rgba(255,255,255,0.8); }
@media (max-width: 600px){
  .footer-legal{ gap: 18px; margin-right: 0; }
}
.footer-socials a{
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.16);
  background: transparent;
  color: rgba(255,255,255,0.7);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-socials a:hover{ background: #fff; border-color: #fff; color: var(--black); }
@media (max-width: 500px){
  .site-footer{ padding: 60px 18px 24px; }
}

/* =========================================================
   CONTACT PAGE
========================================================= */
.contact-channels-section{ padding-bottom: 0; }
.contact-channels{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--n-200);
  background: var(--white);
}
.contact-channel{
  position: relative;
  display: block;
  padding: 30px 28px 32px;
  color: var(--ink);
  transition: background var(--dur-med) var(--ease-out);
}
.contact-channel + .contact-channel{ border-left: 1px solid var(--n-200); }
.contact-channel:hover{ background: var(--n-50); }
.contact-channel .ch-icon{ display:block; color: var(--blue); margin-bottom: 18px; }
.contact-channel .ch-label{
  display:block; font-size: 11px; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--n-500); margin-bottom: 10px;
}
.contact-channel .ch-value{
  display:block; font-size: 20px; font-weight: 300; letter-spacing: -0.02em; color: var(--ink);
}
.contact-channel .ch-note{
  display:block; margin-top: 8px; font-size: 13px; font-weight: 300; color: var(--n-500);
}
.contact-channel .ch-arrow{
  position:absolute; top: 30px; right: 28px;
  width: 8px; height: 8px;
  border-right: 1px solid var(--n-400);
  border-top: 1px solid var(--n-400);
  transform: rotate(45deg);
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.contact-channel:hover .ch-arrow{ transform: rotate(45deg) translate(3px, -3px); border-color: var(--ink); }

.contact-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 0;
  border: 1px solid var(--n-200);
  background: var(--white);
}
.contact-form-card{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 44px 44px 48px;
}
.contact-form-card h2{
  font-size: 30px; font-weight: 200; letter-spacing: -0.025em; color: var(--ink);
  margin: 4px 0 8px;
}
.contact-form-card h2 strong{ font-weight: 600; }
.contact-form-card .sub{ color: var(--n-500); margin-bottom: 30px; }
.rf-field label{
  font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--n-500);
}
.contact-form-card .rf-field input,
.contact-form-card .rf-field select,
.contact-form-card .rf-field textarea{
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  padding: 10px 0 12px;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact-form-card .rf-field input:focus,
.contact-form-card .rf-field select:focus,
.contact-form-card .rf-field textarea:focus{
  border-bottom-color: var(--ink) !important;
  outline: none;
  box-shadow: none !important;
  background: transparent;
}
.contact-form-card .rf-field textarea{ min-height: 108px; }
.contact-form-card .rf-field{ margin-bottom: 22px; }
.contact-form-card .rf-field-row{ gap: 26px; }
.contact-form-card .contact-submit{
  width: 100%;
  border-radius: 0;
  padding: 17px 24px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
}
.contact-consent{
  margin-top: 16px;
  font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--n-400);
}
.contact-success .tick{
  background: var(--ink) !important;
  color: #fff;
  border-radius: 0;
}
.contact-success h3{ color: var(--ink); font-weight: 300; }

.contact-aside{
  border-left: 1px solid var(--n-200);
  background: var(--n-50);
  display: flex;
  flex-direction: column;
}
.contact-aside-block{ padding: 34px 34px 32px; }
.contact-aside-block + .contact-aside-block{ border-top: 1px solid var(--n-200); }
.contact-aside-block h3{
  font-size: 20px; font-weight: 300; letter-spacing: -0.02em; color: var(--ink);
  margin: 4px 0 12px;
}
.contact-address{ font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--n-500); }
.contact-directions{
  display: inline-block;
  margin-top: 16px;
  font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: var(--ink);
  border-bottom: 1px solid var(--n-200);
  padding-bottom: 3px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact-directions:hover{ border-bottom-color: var(--ink); }
.contact-hours{ margin-top: 14px; }
.contact-hours li{
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  font-size: 14px; font-weight: 300; color: var(--n-500);
  border-bottom: 1px solid var(--n-200);
}
.contact-hours li:last-child{ border-bottom: 0; padding-bottom: 0; }
.contact-hours li span:last-child{ color: var(--ink); font-variant-numeric: tabular-nums; }
.contact-links{ margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.contact-links a{
  font-size: 14px; font-weight: 300; color: var(--n-500);
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-links a:hover{ color: var(--ink); }

.contact-map-section{ padding: 0 32px 96px; }
.contact-map{
  max-width: var(--page-max); margin: 0 auto;
  height: 420px;
  border: 1px solid var(--n-200);
  border-radius: 0;
  overflow: hidden;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-med) var(--ease-out);
}
.contact-map:hover{ filter: grayscale(0.15) contrast(1); }

@media (max-width: 900px){
  .contact-channels{ grid-template-columns: 1fr; }
  .contact-channel + .contact-channel{ border-left: 0; border-top: 1px solid var(--n-200); }
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-form-card{ padding: 34px 24px 38px; }
  .contact-aside{ border-left: 0; border-top: 1px solid var(--n-200); }
  .contact-aside-block{ padding: 28px 24px; }
  .contact-map-section{ padding: 0 18px 72px; }
  .contact-map{ height: 320px; }
}

/* =========================================================
   MODALS — contact popup (.contact-modal-*, listing + project)
   and the area-guide enquiry popup (.rf-modal-*).
   Both share one treatment so every popup reads the same.
========================================================= */
.contact-modal-overlay,
.rf-modal-overlay{
  background: rgba(15,17,21,0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 24px;
  /* The overlay scrolls, not the panel — an overflow on .contact-modal would
     clip the country dropdown. `margin:auto` on the panel keeps it centred
     while it fits and reachable from the top when it doesn't. */
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.contact-modal,
.rf-modal{
  width: 100%;
  max-width: 480px;
  margin: auto;
  overflow: visible;
  background: var(--white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 44px 40px 40px;
  transform: translateY(16px);
  transition: transform 340ms var(--ease-out);
}
.contact-modal-overlay.is-open .contact-modal,
.rf-modal-overlay.is-open .rf-modal{ transform: translateY(0); }

/* Close — square hairline, not a grey circle */
.contact-modal-close,
.rf-modal-close{
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 0;
  background: none;
  border: 1px solid var(--n-200);
  color: var(--n-500);
  font-size: 20px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact-modal-close:hover,
.rf-modal-close:hover{ background: none; border-color: var(--ink); color: var(--ink); transform: none; }

.contact-modal-eyebrow{
  font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--n-400);
  margin-bottom: 14px;
}
.contact-modal-eyebrow::before{ display: none; }

.contact-modal-title,
.rf-modal-form h2{
  font-family: var(--font-display); font-weight: 200;
  font-size: 28px; line-height: 1.15; letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 8px;
}
.contact-modal-title strong,
.rf-modal-form h2 strong{ font-weight: 600; }

.contact-modal-sub,
.rf-modal-sub{
  font-size: 14px; font-weight: 300; line-height: 1.65;
  color: var(--n-500);
  margin-bottom: 30px;
}

/* Fields — underline, matching the contact page form */
.contact-modal-field,
.rf-modal-form .rf-field{ margin-bottom: 22px; }
.contact-modal-field label,
.rf-modal-form .rf-field label{
  font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--n-500);
  margin-bottom: 4px;
}
.contact-modal-field input,
.contact-modal-field textarea,
.rf-modal-form .rf-field input,
.rf-modal-form .rf-field textarea,
.rf-modal-form .rf-field select{
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  padding: 10px 0 12px;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact-modal-field input:focus,
.contact-modal-field textarea:focus,
.rf-modal-form .rf-field input:focus,
.rf-modal-form .rf-field textarea:focus,
.rf-modal-form .rf-field select:focus{
  border-bottom-color: var(--ink) !important;
  outline: none;
  box-shadow: none !important;
  background: transparent;
}
.contact-modal-field textarea,
.rf-modal-form .rf-field textarea{ height: 84px; min-height: 84px; resize: none; }

/* Phone row — one shared underline, hairline between prefix and input */
.contact-modal-phone-row{
  border: 0;
  border-bottom: 1px solid var(--n-200);
  border-radius: 0;
  background: transparent;
  /* style.css clips this row; the country dropdown has to escape it */
  overflow: visible;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact-modal-phone-row:focus-within{ border-bottom-color: var(--ink); box-shadow: none; }
.contact-modal-phone-prefix{
  padding: 10px 14px 12px 0;
  font-size: 15px; font-weight: 300; color: var(--n-500);
  border-right: 1px solid var(--n-200);
}
.contact-modal-phone-row input{ padding: 10px 0 12px 14px; }

/* Submit */
.contact-modal-submit,
.rf-modal-form .contact-submit{
  width: 100%;
  margin-top: 10px;
  padding: 17px 24px;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out);
}
.contact-modal-submit:hover,
.rf-modal-form .contact-submit:hover{ background: var(--blue); transform: none; }
.contact-modal-submit:active{ transform: none; }

/* Success state */
.contact-modal-success,
.rf-modal-success{ padding: 20px 0 6px; text-align: center; }
.contact-modal-success-icon,
.rf-modal-success .tick{
  width: 52px; height: 52px;
  border-radius: 0;
  background: var(--ink) !important;
  color: #fff;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
}
.contact-modal-success h3,
.rf-modal-success h3{
  font-family: var(--font-display); font-weight: 300; font-size: 24px;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px;
}
.contact-modal-success p,
.rf-modal-success p{ font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--n-500); }
.contact-modal-success-close{
  margin-top: 26px;
  padding: 15px 40px;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out);
}
.contact-modal-success-close:hover{ background: var(--blue); }

@media (max-width: 540px){
  .contact-modal-overlay,
  .rf-modal-overlay{ padding: 16px; }
  .contact-modal,
  .rf-modal{ padding: 36px 24px 30px; border-radius: 0; }
  .contact-modal-title,
  .rf-modal-form h2{ font-size: 24px; }
}

/* =========================================================
   PHONE COUNTRY-CODE SELECT (js/phone-select.js)
========================================================= */
.contact-modal-phone-row.has-phone-select{ position: relative; }

.phone-prefix-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 14px 12px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  border-right: 1px solid var(--n-200);
  transition: color var(--dur-fast) var(--ease-out);
}
.phone-prefix-btn .flag{ font-size: 18px; line-height: 1; }
.phone-prefix-btn .dial{ font-variant-numeric: tabular-nums; }
.phone-prefix-btn .caret{
  width: 6px; height: 6px;
  border-right: 1px solid var(--n-400);
  border-bottom: 1px solid var(--n-400);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.phone-prefix-btn:hover .caret{ border-color: var(--ink); }
.phone-prefix-btn[aria-expanded="true"] .caret{
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--ink);
}

.phone-panel{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: min(320px, 100%);
  background: var(--white);
  border: 1px solid var(--n-200);
  box-shadow: 0 20px 44px -20px rgba(15,17,21,0.3);
}
.phone-panel-search{ border-bottom: 1px solid var(--n-200); }
.phone-panel-search input{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
}
.phone-panel-search input:focus{ outline: none; }
.phone-panel-search input::placeholder{ color: var(--n-400); }

.phone-panel-list{
  max-height: 244px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.phone-panel-list li{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.phone-panel-list li + li{ border-top: 1px solid var(--n-100); }
.phone-panel-list li:hover,
.phone-panel-list li:focus{ background: var(--n-50); outline: none; }
.phone-panel-list li.is-selected{ background: var(--n-50); }
.phone-panel-list li .flag{ font-size: 17px; line-height: 1; flex: none; }
.phone-panel-list li .name{
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phone-panel-list li .dial{
  flex: none;
  color: var(--n-500);
  font-variant-numeric: tabular-nums;
}
.phone-panel-list li.is-selected .dial{ color: var(--ink); }
.phone-panel-empty{
  padding: 16px;
  font-size: 13.5px; font-weight: 300; color: var(--n-400);
  text-align: center;
}

/* The area popup nests the row inside .rf-field — keep the underline single */
.rf-modal-form .rf-field .contact-modal-phone-row{ margin-top: 0; }

.modal-consent{
  margin-top: 16px;
  font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--n-400);
  text-align: center;
}
.modal-consent a{ color: var(--n-500); border-bottom: 1px solid var(--n-200); padding-bottom: 1px; }
.modal-consent a:hover{ color: var(--ink); border-bottom-color: var(--ink); }

/* =========================================================
   PAGE COLUMN — one width for every band
   The homepage previously ran 1200 / 1240 / 1280 / 1360 / 1400 side by
   side, so no two sections lined up. Everything now resolves to the same
   content edge via --page-max (containers with no padding of their own)
   or --page-max-pad (containers carrying their own 40px gutter).
========================================================= */

/* Header and footer frame every page, so they use the column too */
.header-inner{ max-width: var(--page-max-pad); }
.site-footer-inner{ max-width: var(--page-max); }

/* Homepage bands */
.hero-inner{ max-width: var(--page-max-pad); }
.about-inner,
.home-areas-inner,
.awards-inner,
.press-inner,
.ceo-articles-inner,
.home-team-layout,
.listings-inner,
.projects-inner,
.home-blogs-inner{ max-width: var(--page-max); }

/* Shared inner-page containers */
.rf-section-inner,
.legal-layout,
.area-hero-inner,
.area-stats-inner,
.area-layout,
.area-block-wide,
.listing-detail,
.properties-toolbar-inner,
.properties-head-inner,
.properties-layout,
.search-page-hero-inner,
.search-page-results-inner{ max-width: var(--page-max); }

/* Templates that gutter themselves */
.blog-wrap{ max-width: var(--page-max-pad); }
.dev-page{ --pj-max: var(--page-max-pad); }
.project-body{ max-width: var(--page-max-pad32); }   /* 32px gutter */
.project-hero-topbar,
.project-hero-copy,
.project-facts-inner{ max-width: var(--page-max-pad); } /* 40px gutter */

/* =========================================================
   MOBILE SCALE — everything 20% smaller below the nav breakpoint
   `zoom` scales type, header, menu, spacing and controls in one
   go, and (unlike transform) it still reflows, so nothing clips
   and nothing overflows sideways.
   Viewport units are NOT scaled by zoom, so the few heights that
   use vh are compensated by 1/0.8 below.
========================================================= */
@media (max-width: 860px){
  :root{ --rf-mobile-scale: 0.8; }
  html{ zoom: var(--rf-mobile-scale); }

  /* vh compensation (100 / 0.8 = 125) */
  .main-nav ul{ max-height: calc(125vh - var(--header-h)); }
  .main-nav::before{ height: 250vh; }

  /* Keep form fields at an effective 16px so iOS doesn't
     zoom the viewport when a field is focused. */
  input, select, textarea{ font-size: 20px; }
}

@media (max-width: 600px){
  .main-nav ul{ max-height: calc(125vh - 64px); }
}