/* ================================
   Tokens
   ================================ */
:root {
  --bg:        #091f38;
  --bg-2:      #071929;
  --surface:   #0b2540;
  --border:    rgba(240,235,224,.09);
  --cream:     #f0ebe0;
  --cream-dim: rgba(240,235,224,.5);
  --cream-xs:  rgba(240,235,224,.10);
  --gold:      #c9a96e;
  --gold-dim:  rgba(201,169,110,.25);
  --muted:     rgba(240,235,224,.35);

  --serif: 'Nanum Myeongjo', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;

  --fs-2xs: clamp(.65rem,  1.5vw,  .75rem);
  --fs-xs:  clamp(.72rem,  1.8vw,  .82rem);
  --fs-sm:  clamp(.85rem,  2vw,    .95rem);
  --fs-md:  clamp(.95rem,  2.5vw,  1.05rem);
  --fs-lg:  clamp(1.1rem,  3vw,    1.3rem);
  --fs-xl:  clamp(1.4rem,  4vw,    2rem);
  --fs-2xl: clamp(2rem,    5vw,    3.2rem);
  --fs-3xl: clamp(2.8rem,  7vw,    5rem);

  --pad:  clamp(1.25rem, 5vw, 3rem);
  --max:  1280px;
  --ease: cubic-bezier(.4,0,.2,1);
  --fast: 160ms;
  --mid:  280ms;
  --slow: 440ms;
}

/* ================================
   Reset
   ================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs-md);
  background: var(--bg);
  color: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loader { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ================================
   Layout
   ================================ */
.holder {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ================================
   Loader
   ================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.loader-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-logo {
  width: clamp(120px, 15vw, 180px);
  height: auto;
  display: block;
}
.loader-dots {
  display: flex;
  gap: 6px;
  margin-top: 2rem;
  justify-content: center;
}
.loader-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.3;
  animation: loader-pulse 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: .2s; }
.loader-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes loader-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40%           { opacity: 1;   transform: scale(1.4); }
}

/* ================================
   Header
   ================================ */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  transition: background var(--slow) var(--ease), border-bottom var(--slow) var(--ease);
}
.header::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: max(200px, 18.5vw);
  background: linear-gradient(180deg, rgba(0,0,0,.45) 12%, rgba(0,0,0,0) 78%);
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--slow) var(--ease);
}
.header.scrolled { background: var(--bg); border-bottom: 1px solid var(--border); }
.header.scrolled::before { opacity: 0; }

.header .holder {
  max-width: none;
  padding-inline: max(16px, 2.08vw);
}

.header-block {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: max(20px, 1.872vw);
  position: relative;
  z-index: 1;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: max(16px, 2.08vw);
}

/* Desktop nav (hidden on mobile) */
.hn-left, .hn-right {
  display: none;
  gap: max(16px, 2.08vw);
}

.hn-link {
  position: relative;
  font-size: max(14px, 0.832vw);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color var(--fast);
}
.hn-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.19,1,0.22,1);
}
.hn-link:hover { color: var(--cream); }
.hn-link:hover::before { transform: scaleX(1); }
.hn-link[aria-current="page"] { color: var(--cream); }
.hn-link[aria-current="page"]::before { transform: scaleX(1); }
.hn-link--cta[aria-current="page"] { background: var(--gold); color: var(--bg); }

.hn-link--cta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: .4em 1.1em;
  letter-spacing: .14em;
  line-height: 1;
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.hn-link--cta::before { display: none; }
.hn-link--cta:hover {
  background: var(--gold);
  color: var(--bg);
}

.header-phone {
  display: none;
  font-size: max(14px, 0.832vw);
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--fast);
  white-space: nowrap;
}
.header-phone:hover { color: var(--cream); }

/* Logo */
.header-logo, .footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-logo-img {
  height: clamp(36px, 3.2vw, 48px);
  width: auto;
  display: block;
}

/* Hamburger */
.mob-nav-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 36px;
  height: 36px;
  padding: 4px;
}
.mob-nav-icon span {
  display: block;
  height: 1px;
  background: var(--cream);
  transform-origin: center;
  transition: all var(--mid) var(--ease);
}
.mob-nav-icon.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-nav-icon.open span:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  display: none;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 190;
  background: var(--bg-2);
  padding: 0 var(--pad) 2rem;
  padding-top: 90px;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer.open { display: block; }

.drawer-close {
  position: absolute;
  top: 1.25rem;
  right: var(--pad);
  background: transparent;
  border: none;
  color: var(--cream-dim);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color var(--fast);
}
.drawer-close:hover { color: var(--gold); }
.drawer-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

#drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 189;
}
#drawer-backdrop.open { display: block; }

.drawer-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.drawer-link {
  display: block;
  padding: 1rem 0;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 300;
  color: var(--cream);
  border-bottom: 1px solid var(--border);
  transition: color var(--fast);
}
.drawer-link:hover { color: var(--gold); }
.drawer-link[aria-current="page"] { color: var(--gold); }

.drawer-foot { padding-top: 1.5rem; }
.drawer-phone {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: .08em;
  transition: color var(--fast);
}
.drawer-phone:hover { color: var(--cream); }

/* ================================
   Banner
   ================================ */
.banner {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.banner-slider {
  position: absolute;
  inset: 0;
}

.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.banner-slide.active { opacity: 1; }

.banner-float {
  width: 100%;
  height: 115%;
  margin-top: -7.5%;
}
.banner-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14,13,11,.35) 0%, rgba(14,13,11,.65) 100%);
  z-index: 1;
}

.banner-main {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(4rem, 10vw, 7rem);
}

.banner-main .holder {
  max-width: none;
  padding-inline: max(16px, 2.08vw);
}

.banner-block { width: 100%; }

.banner-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(240,235,224,.45);
  margin-bottom: 1.5rem;
}
.beo-sep { color: var(--gold); }

.banner-h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 6.656vw, 88px);
  font-weight: 300;
  line-height: .935;
  letter-spacing: -.2vw;
  color: var(--cream);
  margin-bottom: 2rem;
}
.banner-h1 em { font-style: italic; letter-spacing: -.2vw; }

.banner-sub {
  font-size: var(--fs-sm);
  color: rgba(240,235,224,.6);
  max-width: 48ch;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.banner-dots {
  position: absolute;
  bottom: 2.5rem;
  right: var(--pad);
  z-index: 3;
  display: flex;
  gap: .5rem;
  align-items: center;
}
.bn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(240,235,224,.3);
  transition: all var(--mid) var(--ease);
}
.bn-dot.active {
  background: var(--cream);
  width: 22px;
  border-radius: 100px;
}

/* ================================
   Shared / Utilities
   ================================ */
.text-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.text-inner { display: block; }

.key-wrap {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
  flex-shrink: 0;
}
.key {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(240,235,224,.25);
  transform: rotate(45deg);
}

.img-float {
  overflow: hidden;
}
.img-float img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center;
}

.subheading {
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .75rem;
}

.link-flash {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color var(--fast), color var(--fast);
}
.link-flash:hover { border-color: var(--gold); color: var(--gold); }

.button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2.25rem;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(240,235,224,.3);
  color: var(--cream);
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease), color var(--mid) var(--ease);
}
.button:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--bg);
}
.button--outline {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.button--outline:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}

/* ================================
   Main Wrap
   ================================ */
.main-wrap {
  background: var(--bg);
}

/* --- About Team (flex, TREF overlay) --- */
.about-team {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-block: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid var(--border);
  gap: clamp(3rem, 6vw, 5rem);
}

/* vertical dividing line */
.at-line {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.at-line-inner {
  width: 1px;
  height: 0%;
  background: var(--border);
  transition: height 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.at-line-inner.animate { height: 100%; }

.about-team-col {
  width: 100%;
}

.at-heading {
  font-family: var(--serif);
  font-size: clamp(32px, 3.8vw, 56px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cream);
  margin-bottom: 1.5rem;
  white-space: nowrap;
}
.at-heading em { font-style: italic; }

.at-role {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
}
.at-role-dash {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.at-role-label {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
}

.at-sub {
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
}

.at-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  margin-bottom: 1rem;
}
.at-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.at-caption {
  font-size: var(--fs-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: .5;
}

.at-text {
  font-size: var(--fs-sm);
  color: var(--cream-dim);
  line-height: 1.8;
  letter-spacing: .03em;
  margin-bottom: 1.5rem;
}
.at-text--second { opacity: .75; }

/* --- Slogan --- */
.slogan {
  padding-block: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--border);
}

.slogan-text {
  font-family: var(--serif);
  font-size: clamp(32px, 4.992vw, 72px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.15vw;
  color: var(--cream);
}
.slogan-text em { font-style: italic; }

/* --- Info / Properties --- */
.info {
  background: var(--bg);
  padding-block: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid var(--border);
}

.info-top {
  margin-bottom: 3.5rem;
}

.info-heading {
  font-family: var(--serif);
  font-size: clamp(32px, 4.992vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.15vw;
  color: var(--cream);
}

.info-content {}

.line-wrap {
  overflow: hidden;
  margin-bottom: 3rem;
}
.line-dash {
  height: 1px;
  background: var(--border);
  transform-origin: left center;
}

.info-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.info-text {
  font-size: var(--fs-sm);
  color: var(--cream-dim);
  line-height: 1.8;
  max-width: 52ch;
  align-self: center;
}

.info-side-img {
  aspect-ratio: 4/3;
  max-height: 260px;
}

.info-footer-link {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* --- Filter tabs --- */
.filter-tabs {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.ftab {
  padding: .45rem 1rem;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-dim);
  border: 1px solid var(--border);
  background: transparent;
  transition: all var(--fast);
}
.ftab:hover  { color: var(--cream); border-color: rgba(240,235,224,.25); }
.ftab.active { background: var(--cream); color: var(--bg); border-color: var(--cream); }

/* --- Property Cards (dark) --- */
.props-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}

.prop-card {
  display: block;
  cursor: pointer;
  transition: transform var(--mid) var(--ease);
}
.prop-card:hover { transform: translateY(-4px); }
.prop-card.hidden { display: none; }

.prop-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: .85rem;
}
.prop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--slow) var(--ease);
}
.prop-card:hover .prop-img { transform: scale(1.04); }

.prop-tag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  background: var(--bg);
  color: var(--cream);
}
.prop-tag.rent     { background: var(--gold); color: var(--bg); }
.prop-tag.sold     { background: #4a4a4a; color: var(--cream); }
.prop-tag.reserved { background: transparent; color: var(--gold); border: 1px solid var(--gold); }

.prop-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .35rem;
}
.prop-loc {
  font-size: var(--fs-2xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.prop-price {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gold);
}
.prop-price small { font-size: .8em; font-weight: 400; color: var(--muted); }

.prop-title {
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.25;
  margin-bottom: .35rem;
}
.prop-specs {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: .04em;
}

/* --- Invest-info / Services --- */
.invest-info {
  padding-top: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--border);
  margin-top: clamp(4rem, 8vw, 6rem);
}

.invest-info-top {
  margin-bottom: 3rem;
}

.invest-heading {
  font-family: var(--serif);
  font-size: clamp(32px, 4.992vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.15vw;
  color: var(--cream);
}
.invest-heading em { font-style: italic; }

.invest-info-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.invest-info-img {
  aspect-ratio: 4/3;
}

.services-list {
  border-top: 1px solid var(--border);
  margin-bottom: 2.5rem;
}

.svc-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.75rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

.svc-num {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: rgba(240,235,224,.1);
  line-height: 1;
  width: clamp(2rem, 4vw, 3.5rem);
  text-align: right;
  flex-shrink: 0;
}

.svc-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: .5rem;
  line-height: 1.1;
  letter-spacing: -.08vw;
}

.svc-desc {
  font-size: var(--fs-sm);
  color: var(--cream-dim);
  max-width: 52ch;
  line-height: 1.75;
}

/* ================================
   About Agent
   ================================ */
.about-section {
  background: var(--bg-2);
  padding-block: clamp(5rem, 10vw, 8rem);
}

.about-grid {
  display: grid;
  gap: 3rem;
}

.about-img-col { position: relative; }

.about-img-wrap {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.about-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.about-tag {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  background: var(--gold);
  padding: 1rem 1.25rem;
  text-align: center;
  min-width: 110px;
}
.at-big {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: 300;
  color: var(--bg);
  line-height: 1;
}
.at-sm {
  display: block;
  font-size: var(--fs-2xs);
  color: rgba(14,13,11,.7);
  line-height: 1.4;
  margin-top: .25rem;
}

.about-role {
  font-size: var(--fs-xs);
  color: var(--gold);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .25rem;
  margin-bottom: 1.75rem;
}

.about-copy {
  font-size: var(--fs-sm);
  color: var(--cream-dim);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.about-creds {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-block: 1.75rem;
}
.about-creds li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-xs);
  color: var(--cream-dim);
}
.about-creds li::before {
  content: '—';
  color: var(--gold);
  flex-shrink: 0;
}

/* ================================
   Testimonials
   ================================ */
.testi-section {
  background: var(--bg);
  padding-block: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid var(--border);
}

.testi-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 4rem;
}
.testi-top .key-wrap { margin-bottom: 0; }

.testi-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
}

.testi-list {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 280px;
}

.testi-item {
  display: none;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.testi-item.is-active {
  display: block;
  animation: testi-in .45s ease both;
}

@keyframes testi-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav — arrows + counter */
.testi-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 2.5rem;
}

.testi-arrow {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-dim);
  cursor: pointer;
  transition: color var(--fast);
  flex-shrink: 0;
  background: none;
  border: none;
}
.testi-arrow:hover { color: var(--cream); }

.testi-counter {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testi-nav-line {
  display: block;
  width: clamp(40px, 6vw, 80px);
  height: 1px;
  background: var(--border);
}

.testi-count {
  font-size: var(--fs-2xs);
  letter-spacing: .2em;
  color: var(--gold);
  white-space: nowrap;
}

.testi-big-quote {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 300;
  font-style: italic;
  color: rgba(240,235,224,.10);
  line-height: 1.2;
  letter-spacing: -.15vw;
  margin-bottom: 2rem;
  text-align: center;
}

/* TREF line-by-line reveal */
.testi-line {
  display: block;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.testi-cover {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  white-space: nowrap;
  color: var(--cream);
  clip-path: inset(0 100% 0 0);
}

.testi-attr {
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ================================
   Join / Contact
   ================================ */
.join {
  background: var(--bg-2);
  padding-block: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid var(--border);
}

.join-top { margin-bottom: 3rem; }

.join-heading {
  font-family: var(--serif);
  font-size: clamp(32px, 4.992vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.15vw;
  color: var(--cream);
}

.join-body { max-width: 700px; }

.join-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-row { display: grid; grid-template-columns: 1fr; gap: 0; }

.fg {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.75rem;
}

.flabel {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,235,224,.55);
}

.finput {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: .65rem 0;
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--cream);
  appearance: none;
  transition: border-color var(--fast);
}
.finput::placeholder { color: rgba(240,235,224,.25); }
.finput:focus { outline: none; border-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }

.ftextarea { resize: none; min-height: 100px; }

.join-submit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-top: .5rem;
}

.join-contact-links {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.jcl {
  font-size: var(--fs-xs);
  color: var(--muted);
  transition: color var(--fast);
}
.jcl:hover { color: var(--gold); }

/* ================================
   Footer
   ================================ */
.footer {
  background: var(--bg);
  padding-block: clamp(3rem, 7vw, 5rem);
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

.fn-link {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--fast);
}
.fn-link:hover { color: var(--cream); }

.footer-text {
  font-size: var(--fs-xs);
  color: rgba(240,235,224,.2);
  line-height: 1.7;
  max-width: 800px;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.fsoc-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,235,224,.3);
  transition: color var(--fast);
}
.fsoc-link:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.footer-copy {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: var(--fs-2xs);
  color: rgba(240,235,224,.18);
}
.footer-copy a { color: inherit; transition: color var(--fast); }
.footer-copy a:hover { color: rgba(240,235,224,.45); }

.footer-studio {
  font-size: var(--fs-2xs);
  color: rgba(240,235,224,.12);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-admin-link {
  color: transparent;
  text-decoration: none;
  transition: color .3s;
}
.footer-admin-link:hover { color: rgba(240,235,224,.9); }

/* ================================
   WhatsApp FAB
   ================================ */
.wa-fab {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 100;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  border: 2px solid rgba(201,169,110,.3);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,.4); }

/* ================================
   640px
   ================================ */
@media (min-width: 640px) {
  .props-grid    { grid-template-columns: repeat(2, 1fr); }
  .form-row      { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
  .info-intro    { grid-template-columns: 1fr 1fr; }
  .info-side-img { max-height: unset; }
}

/* ================================
   768px
   ================================ */
@media (min-width: 768px) {
  .about-grid   { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer-top   { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ================================
   1024px
   ================================ */
@media (min-width: 1024px) {
  .mob-nav-icon  { display: none; }
  .hn-left, .hn-right { display: flex; }
  .header-phone  { display: block; }
  .mobile-drawer { display: none !important; }

  .about-team {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
  }

  .at-line { display: block; }

  .about-team-col {
    width: calc(50% - 2rem);
    margin-bottom: 0;
  }

  .at-img-col {
    width: calc(50% - 2rem);
  }

  .at-img {
    aspect-ratio: unset;
    height: clamp(480px, 52vw, 720px);
  }

  .at-heading {
    font-size: clamp(36px, 3.8vw, 56px);
  }

  .props-grid { grid-template-columns: repeat(3, 1fr); }

  .invest-info-block {
    grid-template-columns: 5fr 7fr;
    gap: 5rem;
    align-items: start;
  }
  .invest-info-img { aspect-ratio: 3/4; }

  .join-body { max-width: 800px; }
}

/* ================================
   1280px
   ================================ */
@media (min-width: 1280px) {
  .banner-main { padding-bottom: 5rem; }
}

/* ================================
   Language Switcher
   ================================ */
.lang-switcher {
  position: relative;
  margin-left: .75rem;
}
.lang-btn {
  background: none;
  border: 1px solid rgba(201,169,110,.35);
  color: var(--cream);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  padding: .28rem .55rem;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  min-width: 2.6rem;
  text-align: center;
}
.lang-btn:hover { border-color: var(--gold); background: var(--gold-dim); }
.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #0d2b48;
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 6px;
  min-width: 10rem;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
}
.lang-dropdown.open { display: block; }
.lang-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--cream-dim);
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .04em;
  padding: .55rem .9rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-opt:hover { background: rgba(201,169,110,.12); color: var(--cream); }
.lang-opt.active { color: var(--gold); font-weight: 500; }

@media (max-width: 767px) {
  .lang-switcher { margin-left: .4rem; }
  .lang-btn { font-size: .65rem; padding: .22rem .42rem; }
}

/* ================================
   Cookie Consent Banner
   ================================ */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  max-width: 520px;
  background: var(--bg-2);
  border: 1px solid rgba(240,235,224,.12);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  z-index: 9999;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(0);
  transition: transform .4s var(--ease), opacity .4s;
}
.cookie-banner.is-hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
.cookie-banner p {
  font-size: var(--fs-xs);
  color: rgba(240,235,224,.7);
  line-height: 1.6;
  margin: 0;
}
.cookie-banner a { color: var(--gold); }
.cookie-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.cookie-btn-accept {
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  padding: .55rem 1.25rem;
  font-size: var(--fs-xs);
  font-family: var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  transition: opacity .2s;
}
.cookie-btn-accept:hover { opacity: .85; }
.cookie-btn-reject {
  background: transparent;
  color: rgba(240,235,224,.5);
  border: 1px solid rgba(240,235,224,.15);
  border-radius: 4px;
  padding: .55rem 1.25rem;
  font-size: var(--fs-xs);
  font-family: var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.cookie-btn-reject:hover { color: var(--cream); border-color: rgba(240,235,224,.35); }

/* ── Toast notification ── */
#an-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--gold);
  color: var(--bg);
  padding: .75rem 1.75rem;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .35s;
  z-index: 9999;
  white-space: nowrap;
}
#an-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ================================
   Agent logo frame (about section)
   ================================ */
.at-logo-frame {
  background: linear-gradient(160deg, #0d2741 0%, #091f38 60%, #061628 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.at-logo-frame::before {
  content: '';
  position: absolute;
  inset: 1.75rem;
  border: 1px solid var(--gold);
  opacity: .22;
  pointer-events: none;
}
.at-logo-avatar {
  width: 42% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: .9;
  filter: brightness(1.05);
}

/* ================================
   Stats bar
   ================================ */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(4rem, 8vw, 6rem);
}
.stat-item {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-right: 1px solid var(--border);
}
.stat-item:nth-child(even) { border-right: none; }
.stat-item:nth-child(3),
.stat-item:nth-child(4) { border-top: 1px solid var(--border); }
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -.03em;
}
.stat-num sup {
  font-size: .45em;
  color: var(--gold);
  vertical-align: super;
  letter-spacing: 0;
}
.stat-label {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: .6;
}

@media (min-width: 640px) {
  .stats-bar { grid-template-columns: repeat(4, 1fr); }
  .stat-item { border-right: 1px solid var(--border); }
  .stat-item:last-child { border-right: none; }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4) { border-top: none; }
}

/* ================================
   Property badges
   ================================ */
.prop-badge {
  position: absolute;
  top: 2.6rem;
  left: 1rem;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3em .85em;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.prop-badge--new       { background: var(--gold); color: var(--bg); }
.prop-badge--exclusive { background: transparent; color: var(--cream); border: 1px solid rgba(240,235,224,.5); }
.prop-badge--reduced   { background: #c0392b; color: #fff; }
.prop-badge--offmarket { background: var(--bg); color: var(--gold); border: 1px solid var(--gold); }

/* ================================
   How it works / Process section
   ================================ */
.process-section {
  padding-block: clamp(5rem, 10vw, 8rem);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.015);
}
.process-top {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.process-heading {
  font-family: var(--serif);
  font-size: clamp(32px, 4.992vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.15vw;
  color: var(--cream);
  margin-bottom: 1rem;
}
.process-heading em { font-style: italic; }

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.process-step {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  gap: 0 2.5rem;
  align-items: start;
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.process-step:first-child { border-top: 1px solid var(--border); }
.ps-num {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  color: rgba(240,235,224,.08);
  line-height: 1;
  width: 4rem;
  text-align: right;
  flex-shrink: 0;
  padding-top: .1em;
}
.ps-line {
  width: 1px;
  background: var(--border);
  height: 100%;
  min-height: 3rem;
}
.ps-body { padding-top: .25rem; }
.ps-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: .75rem;
  line-height: 1.1;
  letter-spacing: -.04vw;
}
.ps-desc {
  font-size: var(--fs-sm);
  color: var(--cream-dim);
  max-width: 56ch;
  line-height: 1.8;
}

@media (min-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-step {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 1.5rem 0;
    padding: 3rem 2rem 3rem 0;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .process-step:first-child { border-top: none; }
  .process-step:last-child { border-right: none; padding-right: 0; padding-left: 2rem; }
  .process-step:nth-child(2) { padding-inline: 2rem; }
  .ps-num { width: auto; text-align: left; font-size: clamp(3rem, 5vw, 5rem); }
  .ps-line { width: 2rem; height: 1px; background: var(--gold); opacity: .4; min-height: unset; }
}

/* ================================
   Mobile optimisations — ≤ 767px
   ================================ */
@media (max-width: 767px) {

  /* About heading: long translations overflow on narrow screens
     without white-space:normal the German/Italian lines clip */
  .at-heading {
    font-size: clamp(22px, 6vw, 28px);
    white-space: normal;
  }

  /* Logo frame: 3/4 portrait is ~450px tall when stacked — too much */
  .at-img.at-logo-frame { aspect-ratio: 4/3; }

  /* Stats: tighter padding keeps €500M+ inside its half-width cell */
  .stat-item { padding: 1.5rem 1.25rem; }
  .stat-num  { font-size: clamp(1.9rem, 7.5vw, 2.5rem); }

  /* Banner dots: WAFab sits at bottom-right — move dots to avoid overlap */
  .banner-dots { left: var(--pad); right: auto; }

  /* Process steps: 2.5rem gap × 2 + 4rem number = 9rem overhead on 335px */
  .process-step { gap: 0 1.25rem; padding-block: 1.75rem; }
  .ps-num       { width: 2.5rem; font-size: 1.8rem; }

  /* Testimonials: 32px italic for 3-sentence quotes is too large on mobile */
  .testi-big-quote { font-size: clamp(24px, 5.5vw, 28px); line-height: 1.55; }
  .testi-list      { min-height: 160px; }

  /* Form inputs: iOS auto-zooms on focus if font-size < 16px */
  .finput { font-size: 16px; }
  .button { font-size: 15px; }
}

/* ================================
   Form field error messages
   ================================ */
.field-error {
  font-size: var(--fs-2xs);
  color: var(--gold);
  letter-spacing: .04em;
  margin-top: .3rem;
  line-height: 1.4;
}

/* ================================
   Focus states — keyboard navigation
   ================================ */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* suppress for mouse users on elements that already have hover states */
.hn-link:focus-visible,
.hn-link--cta:focus-visible  { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 1px; }
.button:focus-visible         { outline: 2px solid var(--gold); outline-offset: 4px; }
.ftab:focus-visible           { outline: 2px solid var(--gold); outline-offset: 3px; }
.prop-card:focus-visible      { outline: 2px solid var(--gold); outline-offset: 3px; transform: translateY(-4px); }
.lang-btn:focus-visible       { outline: 2px solid var(--gold); outline-offset: 3px; }
.lang-opt:focus-visible       { outline: 2px solid var(--gold); outline-offset: 2px; }
.fn-link:focus-visible        { outline: 2px solid var(--gold); outline-offset: 4px; }
.drawer-link:focus-visible    { outline: 2px solid var(--gold); outline-offset: 4px; }
.wa-fab:focus-visible         { outline: 3px solid var(--gold); outline-offset: 5px; }
.mob-nav-icon:focus-visible   { outline: 2px solid var(--gold); outline-offset: 4px; }
.link-flash:focus-visible     { outline: 2px solid var(--gold); outline-offset: 4px; }