:root{
  --bg:#0c0d0f;
  --bg2:#141519;
  --panel:#1a1c20;
  --text:#f3f0e8;
  --muted:#a8a9a6;
  --line:rgba(243,240,232,.13);
  --green:#a9aba8;
  --green2:#dedbd2;
  --light:#f1eee6;
  --dark:#111216;
  --clay:#aaa8a2;
  --max:1240px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}

body,button,input,textarea,select{
  font-synthesis:none;
}

body.gallery-open{
  overflow:hidden;
}

::selection{
  background:#e8e4db;
  color:#111216;
}

a{
  text-decoration:none;
  color:inherit;
}

img,video{
  max-width:100%;
  display:block;
}

button{
  font:inherit;
}

.container{
  width:min(var(--max),calc(100% - 48px));
  margin-inline:auto;
}


/* =========================================================
   LOADER
========================================================= */

.site-loader{
  position:fixed;
  inset:0;
  z-index:999999;

  display:grid;
  place-items:center;

  background:#08090b;

  transition:
    opacity .55s ease,
    visibility .55s ease;
}

.site-loader.hide{
  opacity:0;
  visibility:hidden;
}

.loader-logo{
  font-size:28px;
  letter-spacing:.18em;

  animation:
    loaderLogo .9s var(--ease) both;
}

.loader-line{
  position:absolute;

  width:180px;
  height:1px;

  background:#25272b;

  overflow:hidden;
}

.loader-line span{
  display:block;

  width:45%;
  height:100%;

  background:var(--green2);

  animation:loader 1.2s infinite;
}

.loader-label{
  position:absolute;
  left:22px;
  bottom:22px;

  font-size:10px;
  letter-spacing:.18em;

  color:#7f8185;
}

@keyframes loader{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

@keyframes loaderLogo{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;

  z-index:1000;

  background:
    linear-gradient(
      180deg,
      rgba(7,8,10,.92),
      rgba(7,8,10,.38),
      transparent
    );

  transition:
    background .4s ease,
    backdrop-filter .4s ease;
}

.site-header.solid{
  position:sticky;

  background:rgba(10,11,14,.94);

  border-bottom:1px solid var(--line);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.nav{
  min-height:78px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}

.brand{
  display:flex;
  align-items:center;

  gap:12px;

  transition:
    transform .3s var(--ease);
}

.brand:hover{
  transform:translateY(-1px);
}

.brand-mark{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:1px solid rgba(243,240,232,.22);

  background:rgba(255,255,255,.02);

  font-size:12px;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .35s var(--ease);
}

.brand:hover .brand-mark{
  background:rgba(255,255,255,.07);
  border-color:rgba(243,240,232,.38);
  transform:rotate(-4deg);
}

.brand-name{
  display:grid;
  gap:2px;
}

.brand-name strong{
  font-size:11px;
  letter-spacing:.18em;
}

.brand-name small{
  font-size:8px;
  color:#85878a;
  letter-spacing:.19em;
}

.desktop-nav{
  display:flex;
  gap:28px;
}

.desktop-nav a{
  position:relative;

  font-size:13px;
  color:#a7a8ab;

  transition:
    color .25s ease;
}

.desktop-nav a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-8px;

  width:100%;
  height:1px;

  background:#f5f2eb;

  transform:scaleX(0);
  transform-origin:right;

  transition:
    transform .35s var(--ease);
}

.desktop-nav a:hover,
.desktop-nav a.active{
  color:#fff;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after{
  transform:scaleX(1);
  transform-origin:left;
}

.nav-actions{
  display:flex;
  align-items:center;

  gap:12px;
}

.lang-switcher{
  display:flex;
  gap:4px;

  padding:4px 5px;

  border:1px solid rgba(243,240,232,.15);

  border-radius:999px;

  background:rgba(15,16,19,.68);

  backdrop-filter:blur(12px);
}

.lang-switcher .glink{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:50%;

  overflow:hidden;

  opacity:.5;

  transition:
    opacity .2s ease,
    background .2s ease,
    transform .25s var(--ease);
}

.lang-switcher .glink img{
  width:23px;
  height:23px;

  object-fit:cover;
  border-radius:50%;
}

.lang-switcher .glink:hover,
.lang-switcher .glink.gt-current-lang{
  opacity:1;
  background:rgba(243,240,232,.11);
}

.lang-switcher .glink:hover{
  transform:scale(1.05);
}

.nav-phone{
  font-size:12px;
  color:#bcbdbb;

  padding:8px 11px;

  border:1px solid var(--line);

  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.nav-phone:hover{
  color:#fff;
  border-color:var(--line-strong);
  background:rgba(255,255,255,.03);
}

.menu-toggle{
  display:none;

  background:none;
  color:#fff;

  border:1px solid var(--line);

  padding:7px 10px;
}

.mobile-nav{
  display:none;

  padding:14px 24px;

  border-top:1px solid var(--line);

  background:#08090b;
}

.mobile-nav a{
  display:block;

  padding:12px 0;

  border-bottom:1px solid var(--line);

  font-size:14px;

  color:#d3d2ce;
}


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

.hero{
  min-height:100svh;

  position:relative;

  overflow:hidden;

  display:flex;
  align-items:flex-end;

  background:#0b0c0f;
}

.hero-video,
.hero-fallback,
.hero-vignette,
.hero-contours{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
}

.hero-video{
  z-index:1;

  object-fit:cover;

  opacity:0;

  transform:scale(1.035);

  transition:
    opacity .9s ease,
    transform 5s var(--ease);
}

.hero-video.is-ready{
  opacity:1;
  transform:scale(1);
}

.hero-fallback{
  z-index:0;

  background:
    linear-gradient(
      130deg,
      #0c0d0f,
      #25272b 52%,
      #111216
    );
}

.hero-vignette{
  z-index:2;

  background:
    linear-gradient(
      180deg,
      rgba(8,9,11,.1),
      rgba(8,9,11,.34) 42%,
      rgba(8,9,11,.96) 100%
    );
}

.hero-contours{
  z-index:2;

  opacity:.18;

  background:
    radial-gradient(
      ellipse at 70% 25%,
      transparent 0 26%,
      rgba(220,216,206,.14) 26.2% 26.4%,
      transparent 26.6%
    ),
    radial-gradient(
      ellipse at 62% 45%,
      transparent 0 34%,
      rgba(220,216,206,.08) 34.2% 34.4%,
      transparent 34.6%
    );

  transform:rotate(-7deg);

  animation:
    contourFloat 16s ease-in-out infinite alternate;
}

@keyframes contourFloat{
  from{
    transform:rotate(-7deg) translate3d(-1%,0,0);
  }
  to{
    transform:rotate(-5deg) translate3d(1%,1%,0);
  }
}

.hero::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:3;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(9,10,8,.42),
      transparent 42%,
      rgba(9,10,8,.08)
    );
}

.hero-content{
  position:relative;
  z-index:4;

  padding-bottom:98px;

  animation:
    heroIn 1s var(--ease) both;
}

@keyframes heroIn{
  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

.hero h1{
  max-width:960px;

  margin:18px 0;

  font-size:clamp(48px,7.5vw,98px);

  line-height:.91;

  letter-spacing:-.06em;
}

.hero h1 em,
.section h2 em,
.page-hero h1 em,
.error-card h1 em{
  font-style:normal;
  color:#c5c4bf;
}

.hero p{
  max-width:560px;

  margin:0 0 24px;

  color:#c7c7c3;

  font-size:16px;
}

.hero-actions .btn{
  animation:
    heroButtons .8s var(--ease) both;
}

.hero-actions .btn:nth-child(2){
  animation-delay:.08s;
}

@keyframes heroButtons{
  from{
    opacity:0;
    transform:translateY(14px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

.hero-meta{
  position:absolute;
  z-index:4;

  left:24px;
  right:24px;
  bottom:20px;

  display:flex;
  justify-content:space-between;

  color:#8d9092;

  font-size:10px;
  letter-spacing:.08em;

  text-transform:uppercase;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  min-height:46px;

  padding:0 18px;

  border:1px solid var(--line);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:12px;

  transition:
    transform .3s var(--ease),
    box-shadow .3s ease,
    background .3s ease,
    border-color .3s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-light{
  background:var(--light);
  color:#111216;

  border-color:var(--light);
}

.btn-light:hover{
  box-shadow:
    0 12px 30px rgba(0,0,0,.2);
}

.btn-outline{
  background:rgba(0,0,0,.18);

  color:#fff;

  border-color:
    rgba(243,240,232,.22);

  backdrop-filter:blur(7px);
}

.btn-outline:hover{
  background:rgba(243,240,232,.08);
  border-color:rgba(243,240,232,.34);
}

.btn-dark{
  background:#111216;
  color:#f5f2eb;
}

.btn-dark-outline{
  background:transparent;
  color:#111216;
  border-color:#9b9c9a;
}


/* =========================================================
   SECTIONS
========================================================= */

.section{
  padding:100px 0;
}

.section-dark{
  padding:100px 0;

  background:#0f1013;

  border-block:1px solid var(--line);
}

.intro-grid,
.profile-grid,
.land-focus-grid,
.contact-grid{
  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:70px;

  align-items:center;
}

.intro-copy h2,
.profile-copy h2,
.land-copy h2,
.section-head h2{
  margin:14px 0 22px;

  font-size:clamp(38px,5vw,68px);

  line-height:.98;

  letter-spacing:-.05em;
}

.intro-copy p,
.profile-copy p,
.land-copy p{
  max-width:570px;

  color:#acadae;

  font-size:16px;
}


/* =========================================================
   SURVEY / LAND VISUALS
========================================================= */

.survey-visual,
.land-drawing{
  position:relative;

  overflow:hidden;

  border:1px solid var(--line);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 22px 50px rgba(0,0,0,.18);
}

.survey-visual{
  height:430px;

  background:#121418;
}

.survey-grid{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(243,240,232,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(243,240,232,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  animation:
    gridMove 20s linear infinite;
}

@keyframes gridMove{
  from{
    background-position:0 0,0 0;
  }
  to{
    background-position:42px 42px,42px 42px;
  }
}

.survey-visual::before,
.land-drawing::before{
  content:"";

  position:absolute;

  inset:10px;

  border:1px solid rgba(243,240,232,.06);

  pointer-events:none;

  z-index:8;
}

.survey-contour{
  position:absolute;

  border:1px solid rgba(224,220,211,.22);

  border-radius:50%;

  transition:
    transform 1s var(--ease);
}

.survey-contour.c1{
  width:82%;
  height:74%;

  left:7%;
  top:8%;
}

.survey-contour.c2{
  width:62%;
  height:55%;

  left:20%;
  top:20%;
}

.survey-contour.c3{
  width:44%;
  height:38%;

  left:30%;
  top:31%;
}

.survey-visual:hover .survey-contour.c1{
  transform:
    rotate(-9deg)
    scale(1.025);
}

.survey-visual:hover .survey-contour.c2{
  transform:
    rotate(-5deg)
    scale(1.04);
}

.survey-visual:hover .survey-contour.c3{
  transform:
    rotate(-2deg)
    scale(1.05);
}

.survey-parcel{
  position:absolute;

  border:1px solid rgba(241,238,230,.34);

  background:rgba(220,216,206,.035);

  transition:
    transform .8s var(--ease);
}

.survey-parcel.p1{
  width:210px;
  height:120px;

  left:20%;
  top:34%;
}

.survey-parcel.p2{
  width:145px;
  height:92px;

  left:52%;
  top:48%;

  transform:rotate(7deg);
}

.survey-visual:hover .survey-parcel.p1{
  transform:
    rotate(-8deg)
    translateY(-3px);
}

.survey-visual:hover .survey-parcel.p2{
  transform:
    rotate(5deg)
    translateY(4px);
}

.survey-north,
.survey-tag{
  position:absolute;

  color:#969895;

  font-size:9px;

  letter-spacing:.15em;
}

.survey-north{
  right:18px;
  top:18px;
}

.survey-tag{
  left:18px;
  bottom:18px;
}

.stat-row{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:10px;

  margin-top:28px;
}

.stat-row div{
  padding-top:12px;

  border-top:1px solid var(--line);

  transition:
    transform .35s var(--ease),
    border-color .3s ease;
}

.stat-row div:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
}

.stat-row strong{
  display:block;

  margin-bottom:6px;

  color:#d1d0cb;

  font-size:12px;
}

.stat-row span{
  color:#85868a;

  font-size:10px;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-image-wrap{
  position:relative;

  max-width:430px;
}

.profile-image{
  width:100%;

  aspect-ratio:4/5;

  object-fit:cover;

  border:1px solid var(--line);

  filter:
    saturate(.75);

  transition:
    transform .7s var(--ease),
    filter .5s ease;
}

.profile-image-wrap:hover .profile-image{
  transform:scale(1.015);
  filter:saturate(.9);
}

.profile-caption{
  position:absolute;

  left:14px;
  bottom:14px;

  padding:9px 11px;

  background:rgba(8,9,11,.74);

  backdrop-filter:blur(8px);

  font-size:12px;
}

.profile-caption span{
  color:#989995;

  font-size:10px;
}


/* =========================================================
   TEXT LINK
========================================================= */

.text-link{
  display:inline-flex;
  align-items:center;

  gap:8px;

  color:#d9d7d0;

  font-size:12px;

  transition:
    color .25s ease,
    transform .3s var(--ease);
}

.text-link:hover{
  color:#fff;
  transform:translateX(3px);
}


/* =========================================================
   PROPERTY GRID
========================================================= */

.section-head{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:34px;
}

.portfolio-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:20px;

  align-items:start;
}

.property-card{
  min-width:0;

  overflow:hidden;

  background:#121418;

  border:1px solid var(--line);

  transition:
    transform .45s var(--ease),
    border-color .3s ease,
    box-shadow .45s ease;
}

.property-card:hover{
  transform:translateY(-5px);

  border-color:
    rgba(243,240,232,.24);

  box-shadow:
    0 22px 48px rgba(0,0,0,.18);
}


/* =========================================================
   PROPERTY IMAGE
========================================================= */

.property-image{
  position:relative;

  aspect-ratio:1.2/1;

  background:#16181c;

  overflow:hidden;
}

.property-image::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(12,14,11,.45)
    );

  z-index:4;
}

.property-slides{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  overflow:hidden;
}

.property-slide{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;

  object-fit:cover !important;

  margin:0 !important;

  display:block !important;

  opacity:0;
  visibility:hidden;

  transform:scale(1.03);

  transition:
    opacity .55s ease,
    transform .8s var(--ease);
}

.property-slide.active{
  opacity:1;
  visibility:visible;

  transform:scale(1);
}

.property-card:hover .property-slide.active{
  transform:scale(1.025);
}

.property-info{
  padding:18px;
}

.property-kicker{
  display:flex;

  justify-content:space-between;

  gap:10px;

  color:#93959a;

  font-size:9px;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.property-info h3{
  margin:14px 0;

  font-size:25px;

  line-height:1.05;

  letter-spacing:-.03em;
}

.property-meta{
  display:flex;

  flex-wrap:wrap;

  gap:12px;

  color:#aeb0b1;

  font-size:11px;
}

.land-metrics{
  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin-top:14px;
}

.land-metric{
  display:inline-flex;

  align-items:center;

  padding:6px 9px;

  border:1px solid rgba(243,240,232,.09);

  background:rgba(255,255,255,.025);

  color:#c9c8c3;

  font-size:10px;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s var(--ease);
}

.property-card:hover .land-metric{
  background:rgba(255,255,255,.045);
  border-color:rgba(243,240,232,.14);
}

.image-label{
  position:absolute;

  left:12px;
  top:12px;

  z-index:8;

  padding:6px 8px;

  background:rgba(10,11,14,.60);

  color:#e8e5dc;

  font-size:9px;

  letter-spacing:.12em;

  text-transform:uppercase;

  backdrop-filter:blur(9px);
}


/* =========================================================
   SLIDER CONTROLS
========================================================= */

.property-slider-prev,
.property-slider-next,
.property-fullscreen{
  position:absolute;

  z-index:20;

  width:42px;
  height:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.3);

  border-radius:50%;

  background:rgba(8,11,9,.72);

  color:#fff;

  cursor:pointer;

  opacity:0;
  visibility:hidden;

  backdrop-filter:blur(8px);

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .3s var(--ease),
    background .25s ease;
}

.property-slider-prev{
  left:14px;
  top:50%;

  transform:translateY(-50%);
}

.property-slider-next{
  right:14px;
  top:50%;

  transform:translateY(-50%);
}

.property-fullscreen{
  right:14px;
  top:14px;

  font-size:19px;
}

.property-slider-prev:hover,
.property-slider-next:hover{
  background:rgba(8,11,9,.95);

  transform:
    translateY(-50%)
    scale(1.08);
}

.property-fullscreen:hover{
  transform:scale(1.08);

  background:rgba(8,11,9,.95);
}

.property-slider-dots{
  position:absolute;

  left:50%;
  bottom:14px;

  transform:translateX(-50%);

  display:flex;

  gap:6px;

  z-index:20;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease;
}

.property-slider-dots span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:rgba(255,255,255,.45);

  transition:
    width .3s var(--ease),
    background .25s ease;
}

.property-slider-dots span.active{
  width:19px;

  border-radius:10px;

  background:#fff;
}

.property-photo-count{
  position:absolute;

  left:14px;
  bottom:14px;

  z-index:20;

  padding:5px 9px;

  border-radius:20px;

  background:rgba(8,11,9,.7);

  color:#fff;

  font-size:11px;

  opacity:0;
  visibility:hidden;

  backdrop-filter:blur(8px);
}

@media (hover:hover) and (pointer:fine){

  .property-slider:hover
  .property-slider-prev,

  .property-slider:hover
  .property-slider-next,

  .property-slider:hover
  .property-fullscreen,

  .property-slider:hover
  .property-slider-dots,

  .property-slider:hover
  .property-photo-count{
    opacity:1;
    visibility:visible;
  }
}

@media (hover:none),(pointer:coarse){

  .property-slider.controls-visible
  .property-slider-prev,

  .property-slider.controls-visible
  .property-slider-next,

  .property-slider.controls-visible
  .property-fullscreen,

  .property-slider.controls-visible
  .property-slider-dots,

  .property-slider.controls-visible
  .property-photo-count{
    opacity:1;
    visibility:visible;
  }
}


/* =========================================================
   LAND FOCUS
========================================================= */

.land-focus{
  overflow:hidden;
}

.land-copy{
  position:relative;
  z-index:2;
}

.land-drawing{
  min-height:430px;

  background:
    linear-gradient(
      140deg,
      #14161a,
      #0e0f12
    );
}

.land-line{
  position:absolute;

  height:1px;

  background:
    rgba(220,216,206,.18);

  transform-origin:left;

  transition:
    transform .7s var(--ease);
}

.l1{
  width:78%;
  left:10%;
  top:30%;

  transform:rotate(-8deg);
}

.l2{
  width:58%;
  left:23%;
  top:49%;

  transform:rotate(10deg);
}

.l3{
  width:50%;
  left:18%;
  top:65%;

  transform:rotate(-16deg);
}

.land-drawing:hover .l1{
  transform:rotate(-6deg);
}

.land-drawing:hover .l2{
  transform:rotate(8deg);
}

.land-drawing:hover .l3{
  transform:rotate(-13deg);
}

.land-poly{
  position:absolute;

  border:1px solid rgba(228,224,215,.3);

  background:rgba(220,216,206,.035);

  transition:
    transform .7s var(--ease),
    background .4s ease;
}

.poly1{
  width:210px;
  height:122px;

  left:17%;
  top:29%;
}

.poly2{
  width:145px;
  height:92px;

  left:50%;
  top:44%;

  transform:rotate(9deg);
}

.poly3{
  width:120px;
  height:76px;

  left:36%;
  top:58%;

  transform:rotate(-21deg);
}

.land-drawing:hover .poly1{
  transform:
    rotate(-6deg)
    translateY(-4px);
}

.land-drawing:hover .poly2{
  transform:
    rotate(6deg)
    translateY(4px);
}

.land-drawing:hover .poly3{
  transform:
    rotate(-18deg)
    translateY(-3px);
}


/* =========================================================
   REELS
========================================================= */

.reels-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.reel{
  position:relative;

  aspect-ratio:9/16;

  overflow:hidden;

  background:#15171b;

  border:1px solid var(--line);

  box-shadow:
    0 12px 35px rgba(0,0,0,.18);
}

.reel video{
  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    blur(1.6px)
    brightness(.68);

  transform:scale(1.03);

  transition:
    filter .5s ease,
    transform .7s var(--ease);
}

.reel.active video{
  filter:
    blur(0)
    brightness(.95);

  transform:scale(1.05);
}

.reel span{
  position:absolute;

  right:11px;
  bottom:11px;

  padding:5px 7px;

  background:rgba(0,0,0,.42);

  font-size:10px;
}


/* =========================================================
   CONTACT BAND
========================================================= */

.contact-band{
  padding:54px 0;

  background:
    linear-gradient(
      110deg,
      #f1eee6,
      #dcdad4
    );

  color:#111216;
}

.contact-band-inner{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;
}

.contact-band .eyebrow{
  color:#66686a;
}

.contact-band h2{
  margin:8px 0 0;

  font-size:
    clamp(34px,5vw,62px);

  line-height:1;

  letter-spacing:-.05em;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
  padding:55px 0 24px;

  border-top:1px solid var(--line);

  background:#08090b;
}

.footer-grid{
  display:grid;

  grid-template-columns:
    1.4fr .6fr .6fr;

  gap:35px;
}

.footer-main p{
  max-width:360px;

  color:#8b8d91;

  font-size:13px;

  margin-top:18px;
}

.footer-links{
  display:grid;

  gap:10px;

  align-content:start;
}

.footer-links a{
  color:#a6a8aa;

  font-size:12px;

  transition:
    color .25s ease,
    transform .25s var(--ease);
}

.footer-links a:hover{
  color:#f4f1e8;

  transform:translateX(3px);
}

.footer-bottom{
  margin-top:44px;

  padding-top:15px;

  border-top:1px solid var(--line);

  display:flex;

  justify-content:space-between;

  color:#727477;

  font-size:10px;
}


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

.page-main{
  min-height:calc(100vh - 78px);
}

.page-hero{
  padding:92px 0 64px;

  background:#0d0e11;

  border-bottom:1px solid var(--line);
}

.page-hero-grid{
  display:grid;

  grid-template-columns:
    1fr .8fr;

  align-items:end;

  gap:40px;
}

.page-hero h1{
  margin:12px 0 0;

  font-size:
    clamp(58px,8vw,115px);

  line-height:.88;

  letter-spacing:-.06em;
}

.page-hero-grid>p{
  max-width:340px;

  color:#8e9195;
}


/* =========================================================
   PROPERTY DETAIL
========================================================= */

.property-page{
  padding-top:58px;
}

.property-detail-grid{
  display:grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:40px;

  align-items:center;
}

.property-detail-gallery{
  position:relative;

  min-height:560px;

  overflow:hidden;

  border:1px solid var(--line);

  background:#111317;

  box-shadow:
    0 20px 55px rgba(0,0,0,.18);
}

.property-detail-gallery img{
  width:100%;
  height:100%;

  min-height:560px;

  object-fit:cover;

  transition:
    transform .8s var(--ease),
    filter .5s ease;
}

.property-detail-gallery:hover img{
  transform:scale(1.015);
}

.property-detail-copy h1{
  margin:14px 0 20px;

  font-size:
    clamp(42px,5vw,76px);

  line-height:.95;

  letter-spacing:-.055em;
}

.property-description{
  max-width:570px;

  color:#acaeae;

  font-size:15px;

  line-height:1.8;
}

.property-description p{
  margin:0 0 1em;
}

.property-description p:last-child{
  margin-bottom:0;
}

.property-description h2,
.property-description h3,
.property-description h4{
  margin:
    1.4em 0 .6em;

  color:#ebe8e1;

  line-height:1.25;
}

.property-description ul,
.property-description ol{
  margin:.8em 0 1em;

  padding-left:1.4em;
}

.property-description li{
  margin-bottom:.35em;
}

.property-description a{
  text-decoration:underline;
}

.detail-stats{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;

  margin:28px 0;
}

.detail-stats div{
  padding:14px;

  border:1px solid var(--line);

  background:
    rgba(255,255,255,.015);

  transition:
    transform .3s var(--ease),
    background .3s ease,
    border-color .3s ease;
}

.detail-stats div:hover{
  transform:translateY(-3px);

  background:
    rgba(255,255,255,.028);

  border-color:
    rgba(243,240,232,.2);
}

.detail-stats span{
  display:block;

  margin-bottom:6px;

  color:#7e8084;

  font-size:9px;

  letter-spacing:.14em;

  text-transform:uppercase;
}

.detail-stats strong{
  font-size:13px;
}

.property-land-price{
  margin-top:8px;

  color:#aeb0ae;

  font-size:12px;
}

.property-extra-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;

  margin-top:25px;
}

.property-extra-item{
  padding:14px;

  border:1px solid var(--line);

  background:
    rgba(255,255,255,.015);

  transition:
    transform .3s var(--ease),
    border-color .3s ease;
}

.property-extra-item:hover{
  transform:translateY(-2px);

  border-color:
    rgba(243,240,232,.2);
}

.property-extra-item span{
  display:block;

  margin-bottom:5px;

  color:#77797d;

  font-size:9px;

  letter-spacing:.13em;

  text-transform:uppercase;
}

.property-extra-item strong{
  font-size:13px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-page-hero .page-hero-grid{
  grid-template-columns:
    1fr .4fr;
}

.contact-hero-side{
  display:flex;

  align-items:flex-end;

  gap:12px;
}

.contact-hero-side img{
  width:70px;
  height:90px;

  object-fit:cover;
}

.contact-hero-side div{
  display:grid;

  gap:2px;
}

.contact-hero-side span{
  color:#7c7e82;

  font-size:10px;
}

.contact-grid{
  align-items:start;
}

.contact-card{
  padding:18px;

  background:#101216;

  border:1px solid var(--line);

  box-shadow:
    0 15px 40px rgba(0,0,0,.12);
}

.contact-card img{
  width:100%;

  aspect-ratio:4/5;

  object-fit:cover;
}

.contact-name{
  margin-top:16px;

  font-size:25px;
}

.contact-role{
  margin-top:4px;

  color:#7f8185;

  font-size:11px;
}

.contact-list{
  display:grid;

  gap:10px;

  margin-top:20px;
}

.contact-list a{
  color:#b6b7b7;

  font-size:13px;

  transition:
    color .25s ease,
    transform .25s var(--ease);
}

.contact-list a:hover{
  color:#fff;

  transform:translateX(3px);
}

.contact-form{
  display:grid;

  gap:15px;
}

.contact-form label{
  display:grid;

  gap:7px;

  color:#808286;

  font-size:9px;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.contact-form input,
.contact-form textarea{
  width:100%;

  padding:12px 13px;

  border:1px solid var(--line);

  background:#0f1115;

  color:#fff;

  outline:none;

  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.contact-form input{
  min-height:46px;
}

.contact-form textarea{
  min-height:170px;

  resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:
    rgba(243,240,232,.3);

  background:#121419;

  box-shadow:
    0 0 0 3px
    rgba(243,240,232,.035);
}

.form-note{
  min-height:16px;

  color:#91938f;

  font-size:11px;
}


/* =========================================================
   EMPTY / REVEAL
========================================================= */

.empty-state{
  padding:80px 20px;

  border:1px solid var(--line);

  background:#111317;

  text-align:center;
}

.empty-state h2{
  margin:10px 0 22px;

  font-size:42px;
}

.property-card.reveal-image{
  opacity:0;

  transform:
    translateY(24px);
}

.property-card.reveal-image.revealed{
  opacity:1;

  transform:none;

  transition:
    opacity .75s ease,
    transform .75s var(--ease),
    border-color .25s ease;
}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-wa{
  position:fixed;

  right:18px;
  bottom:18px;

  z-index:900;

  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#e7e3d9;

  color:#111216;

  border:1px solid rgba(17,18,22,.1);

  box-shadow:
    0 12px 30px rgba(0,0,0,.32);

  transition:
    transform .3s var(--ease),
    box-shadow .3s ease;
}

.floating-wa:hover{
  transform:
    translateY(-4px)
    scale(1.04);

  box-shadow:
    0 18px 38px rgba(0,0,0,.4);
}


/* =========================================================
   ERROR
========================================================= */

.error-page{
  min-height:100vh;

  display:grid;
  place-items:center;

  background:#08090b;

  position:relative;

  overflow:hidden;
}

.error-lines{
  position:absolute;

  inset:0;

  opacity:.22;

  background-image:
    linear-gradient(
      rgba(243,240,232,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(243,240,232,.045) 1px,
      transparent 1px
    );

  background-size:62px 62px;
}

.error-card{
  position:relative;

  width:min(
    680px,
    calc(100% - 40px)
  );

  padding:40px;

  text-align:center;
}

.error-card h1{
  margin:18px 0;

  font-size:
    clamp(64px,11vw,150px);

  line-height:.82;

  letter-spacing:-.07em;
}

.error-card p{
  color:#8f9195;

  margin-bottom:26px;
}


/* =========================================================
   GOOGLE TRANSLATE
========================================================= */

.gt-hidden{
  position:absolute;

  left:-99999px;
  top:-99999px;

  width:1px;
  height:1px;

  overflow:hidden;
}

.goog-te-banner-frame.skiptranslate{
  display:none!important;
}

body{
  top:0!important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

  .container{
    width:min(
      var(--max),
      calc(100% - 32px)
    );
  }

  .desktop-nav,
  .nav-phone{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

  .mobile-nav.open{
    display:block;
  }

  .intro-grid,
  .profile-grid,
  .land-focus-grid,
  .property-detail-grid,
  .contact-grid,
  .page-hero-grid{
    grid-template-columns:1fr;
  }

  .survey-visual,
  .land-drawing{
    height:360px;
  }

  .portfolio-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .reels-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .contact-page-hero
  .page-hero-grid{
    grid-template-columns:1fr;
  }

  .contact-hero-side{
    justify-self:start;
  }

  .footer-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .contact-band-inner{
    display:grid;

    grid-template-columns:1fr;
  }

  #land-filter-panel{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


@media(max-width:640px){

  .container{
    width:
      calc(100% - 24px);
  }

  .nav{
    min-height:68px;
  }

  .brand-mark{
    width:34px;
    height:34px;

    flex-basis:34px;
  }

  .brand-name strong{
    font-size:10px;
  }

  .brand-name small{
    font-size:7px;
  }

  .lang-switcher .glink{
    width:28px;
    height:28px;
  }

  .lang-switcher .glink img{
    width:21px;
    height:21px;
  }

  .hero-content{
    padding-bottom:128px;
  }

  .hero h1{
    font-size:
      clamp(42px,12vw,62px);
  }

  .hero p{
    font-size:14px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-meta{
    padding:0 12px;

    font-size:8px;
  }

  .hero-meta span:nth-child(n+5){
    display:none;
  }

  .section,
  .section-dark{
    padding:72px 0;
  }

  .intro-copy h2,
  .profile-copy h2,
  .land-copy h2,
  .section-head h2{
    font-size:41px;
  }

  .survey-visual,
  .land-drawing{
    height:285px;
  }

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

  .portfolio-grid{
    grid-template-columns:1fr;
  }

  .property-image{
    aspect-ratio:4/3;
  }

  .property-info{
    padding:16px;
  }

  .property-info h3{
    font-size:21px;
  }

  #land-filter-panel{
    grid-template-columns:1fr;
  }

  .property-detail-image,
  .property-detail-image img,
  .property-detail-gallery,
  .property-detail-gallery img{
    min-height:340px;
  }

  .property-detail-copy h1{
    font-size:48px;
  }

  .detail-stats{
    grid-template-columns:1fr;
  }

  .property-extra-grid{
    grid-template-columns:1fr;
  }

  .detail-actions{
    flex-direction:column;
  }

  .detail-actions .btn{
    width:100%;
  }

  .reels-grid{
    gap:8px;
  }

  .page-hero{
    padding:70px 0 48px;
  }

  .page-hero h1{
    font-size:58px;
  }

  .contact-band{
    padding:44px 0;
  }

  .contact-band-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .contact-band-actions .btn{
    width:100%;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;

    gap:6px;

    align-items:flex-start;
  }

  .floating-wa{
    right:12px;
    bottom:12px;

    width:46px;
    height:46px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
}

/* =========================================================
   PREMIUM PORTFOLIO FILTERS
========================================================= */

.filters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 6px;
  border: 1px solid rgba(243,240,232,.10);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(12px);
}

.filter {
  position: relative;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid transparent;
  background: transparent;
  color: #96989c;
  font-size: 11px;
  letter-spacing: .03em;
  cursor: pointer;
  overflow: hidden;
  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    transform .3s cubic-bezier(.22,1,.36,1);
}

.filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 15%,
    rgba(255,255,255,.12) 50%,
    transparent 85%
  );
  transform: translateX(-120%);
  transition: transform .55s ease;
}

.filter:hover::before {
  transform: translateX(120%);
}

.filter:hover {
  color: #f3f0e8;
  border-color: rgba(243,240,232,.12);
  transform: translateY(-1px);
}

.filter.active {
  color: #111216;
  background: #f1eee6;
  border-color: #f1eee6;
  box-shadow:
    0 7px 20px rgba(0,0,0,.16);
}

.filter.active::before {
  display: none;
}


/* Mobilde filtreler yatay kaydırılabilir */
@media (max-width: 640px) {

  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 5px;
    margin-bottom: 20px;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filter {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
  }
}


/* =========================================================
   LAND FILTER PANEL
========================================================= */

#land-filter-panel {
  position: relative;
  overflow: hidden;
  padding: 14px;
  margin: -8px 0 28px;
  border: 1px solid rgba(243,240,232,.09);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
  animation:
    landFilterIn .45s cubic-bezier(.22,1,.36,1) both;
}

#land-filter-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255,255,255,.05),
      transparent 35%
    );
}

#land-filter-panel input {
  position: relative;
  min-height: 44px;
  border: 1px solid rgba(243,240,232,.10);
  background: rgba(0,0,0,.17);
  color: #f3f0e8;
  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s cubic-bezier(.22,1,.36,1);
}

#land-filter-panel input:hover {
  border-color: rgba(243,240,232,.18);
}

#land-filter-panel input:focus {
  border-color: rgba(243,240,232,.32);
  background: rgba(255,255,255,.035);
  box-shadow:
    0 0 0 3px rgba(243,240,232,.035);
  transform: translateY(-1px);
}

@keyframes landFilterIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   SECTION ENTER ANIMATION
========================================================= */

main > section {
  animation:
    sectionEnter .9s cubic-bezier(.22,1,.36,1) both;
}

@keyframes sectionEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   HERO PREMIUM EFFECT
========================================================= */

.hero-content .eyebrow {
  display: inline-block;
  animation:
    eyebrowIn .8s .08s cubic-bezier(.22,1,.36,1) both;
}

.hero-content h1 {
  animation:
    titleIn 1s .15s cubic-bezier(.22,1,.36,1) both;
}

.hero-content p {
  animation:
    textIn .9s .28s cubic-bezier(.22,1,.36,1) both;
}

@keyframes eyebrowIn {
  from {
    opacity: 0;
    transform: translateY(12px);
    letter-spacing: .28em;
  }

  to {
    opacity: 1;
    transform: none;
    letter-spacing: .18em;
  }
}

@keyframes titleIn {
  from {
    opacity: 0;
    transform:
      translateY(35px)
      scale(.985);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes textIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


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

.hero-meta {
  animation:
    metaIn 1s .65s cubic-bezier(.22,1,.36,1) both;
}

@keyframes metaIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   HERO VIGNETTE / MOVING LIGHT
========================================================= */

.hero-vignette {
  overflow: hidden;
}

.hero-vignette::after {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 25%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.055),
      transparent
    );
  transform: skewX(-12deg);
  animation:
    heroLight 10s 2s ease-in-out infinite;
}

@keyframes heroLight {
  0%,
  65%,
  100% {
    left: -35%;
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  88% {
    left: 120%;
    opacity: 0;
  }
}


/* =========================================================
   SECTION HEAD REVEAL
========================================================= */

.section-head > div {
  animation:
    sectionTitle .9s cubic-bezier(.22,1,.36,1) both;
}

@keyframes sectionTitle {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   PROPERTY CARD STAGGER
========================================================= */

.portfolio-grid .property-card:nth-child(1) {
  transition-delay: .02s;
}

.portfolio-grid .property-card:nth-child(2) {
  transition-delay: .08s;
}

.portfolio-grid .property-card:nth-child(3) {
  transition-delay: .14s;
}

.portfolio-grid .property-card:nth-child(4) {
  transition-delay: .20s;
}

.portfolio-grid .property-card:nth-child(5) {
  transition-delay: .26s;
}

.portfolio-grid .property-card:nth-child(6) {
  transition-delay: .32s;
}


/* =========================================================
   PROPERTY IMAGE PREMIUM HOVER
========================================================= */

.property-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      transparent 25%,
      rgba(255,255,255,.08) 50%,
      transparent 75%
    );

  transform:
    translateX(-120%);

  transition:
    transform .9s cubic-bezier(.22,1,.36,1);
}

.property-card:hover .property-image::before {
  transform:
    translateX(120%);
}

.property-card:hover .image-label {
  transform: translateY(-2px);
  background:
    rgba(10,11,14,.76);
}

.image-label {
  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    background .3s ease;
}


/* =========================================================
   PROPERTY INFO HOVER
========================================================= */

.property-info h3 {
  transition:
    color .3s ease,
    transform .35s cubic-bezier(.22,1,.36,1);
}

.property-card:hover .property-info h3 {
  color: #fff;
  transform: translateX(3px);
}

.property-kicker span:last-child {
  transition:
    transform .35s cubic-bezier(.22,1,.36,1);
}

.property-card:hover
.property-kicker span:last-child {
  transform:
    translate(3px,-2px);
}


/* =========================================================
   LAND METRICS
========================================================= */

.land-metric {
  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    border-color .25s ease,
    background .25s ease,
    color .25s ease;
}

.land-metric:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color:
    rgba(243,240,232,.22);
  background:
    rgba(255,255,255,.055);
}


/* =========================================================
   PROFILE IMAGE
========================================================= */

.profile-image-wrap::after {
  content: "";

  position: absolute;

  left: 12px;
  right: -12px;

  top: 12px;
  bottom: -12px;

  border:
    1px solid
    rgba(243,240,232,.07);

  z-index: -1;

  transition:
    transform .6s cubic-bezier(.22,1,.36,1);
}

.profile-image-wrap:hover::after {
  transform:
    translate(5px,5px);
}


/* =========================================================
   SURVEY / LAND DRAWING PARALLAX FEEL
========================================================= */

.survey-visual:hover,
.land-drawing:hover {
  border-color:
    rgba(243,240,232,.18);
}

.survey-tag,
.survey-north,
.land-label,
.land-scale,
.land-north {
  transition:
    color .3s ease,
    transform .4s cubic-bezier(.22,1,.36,1);
}

.survey-visual:hover .survey-tag {
  transform:
    translateX(3px);
  color: #c9c8c3;
}

.land-drawing:hover .land-label.bottom {
  transform:
    translateX(4px);
  color: #e4e1d9;
}


/* =========================================================
   REELS PREMIUM
========================================================= */

.reel {
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,
    box-shadow .45s ease;
}

.reel:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(243,240,232,.22);

  box-shadow:
    0 20px 42px
    rgba(0,0,0,.23);
}

.reel::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05),
      transparent 45%,
      rgba(0,0,0,.35)
    );

  opacity: .7;
}

.reel span {
  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    background .3s ease;
}

.reel:hover span {
  transform:
    translateY(-3px);
  background:
    rgba(0,0,0,.62);
}


/* =========================================================
   STAT ROW
========================================================= */

.stat-row div {
  position: relative;
  overflow: hidden;
}

.stat-row div::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 1px;

  background:
    rgba(243,240,232,.45);

  transition:
    width .5s cubic-bezier(.22,1,.36,1);
}

.stat-row div:hover::after {
  width: 100%;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.contact-card {
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,
    box-shadow .45s ease;
}

.contact-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(243,240,232,.2);

  box-shadow:
    0 24px 55px
    rgba(0,0,0,.18);
}

.contact-card img {
  transition:
    transform .7s cubic-bezier(.22,1,.36,1),
    filter .5s ease;
}

.contact-card:hover img {
  transform: scale(1.015);
  filter: saturate(.9);
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.contact-list a {
  position: relative;

  width: fit-content;
}

.contact-list a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 100%;
  height: 1px;

  background: currentColor;

  transform:
    scaleX(0);

  transform-origin: right;

  transition:
    transform .35s cubic-bezier(.22,1,.36,1);
}

.contact-list a:hover::after {
  transform:
    scaleX(1);

  transform-origin: left;
}


/* =========================================================
   FOOTER ANIMATION
========================================================= */

.footer-main .brand,
.footer-links,
.footer-bottom {
  animation:
    footerIn .9s cubic-bezier(.22,1,.36,1) both;
}

.footer-links:nth-child(2) {
  animation-delay: .08s;
}

.footer-links:nth-child(3) {
  animation-delay: .15s;
}

@keyframes footerIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


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

.page-hero h1 {
  animation:
    pageHeroIn 1s cubic-bezier(.22,1,.36,1) both;
}

.page-hero-grid > p {
  animation:
    pageSideIn .8s .18s cubic-bezier(.22,1,.36,1) both;
}

@keyframes pageHeroIn {
  from {
    opacity: 0;
    transform:
      translateY(30px);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes pageSideIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   PROPERTY DETAIL
========================================================= */

.property-detail-gallery {
  transition:
    border-color .3s ease,
    box-shadow .4s ease;
}

.property-detail-gallery:hover {
  border-color:
    rgba(243,240,232,.20);

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.24);
}

.property-detail-gallery img {
  transition:
    transform .8s cubic-bezier(.22,1,.36,1);
}

.property-detail-gallery:hover img {
  transform:scale(1.015);
}

.detail-stats div,
.property-extra-item {
  animation:
    detailBoxIn .7s cubic-bezier(.22,1,.36,1) both;
}

.detail-stats div:nth-child(2),
.property-extra-item:nth-child(2) {
  animation-delay:.05s;
}

.detail-stats div:nth-child(3),
.property-extra-item:nth-child(3) {
  animation-delay:.1s;
}

.detail-stats div:nth-child(4),
.property-extra-item:nth-child(4) {
  animation-delay:.15s;
}

@keyframes detailBoxIn {
  from {
    opacity: 0;
    transform:
      translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-wa {
  animation:
    whatsappFloat 3.5s ease-in-out infinite;
}

@keyframes whatsappFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.floating-wa:hover {
  animation-play-state: paused;

  transform:
    translateY(-5px)
    scale(1.05);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:640px) {

  .filters {
    margin-bottom:20px;
  }

  .property-card:hover {
    transform:none;
  }

  .property-card:hover
  .property-slide.active {
    transform:scale(1);
  }

  .reel:hover {
    transform:none;
  }

  .contact-card:hover {
    transform:none;
  }

  .profile-image-wrap::after {
    display:none;
  }

  .hero-vignette::after {
    display:none;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}