.hero{height:min(940px,100vh);min-height:760px;position:relative;display:flex;align-items:flex-end;overflow:hidden} .hero-media{position:absolute;inset:0;background-image:url('https://4frealty.com/wp-content/uploads/2026/06/KJ1XB5DVGR1N2Z085DQVWDVNA0_0_6a3beee51683b.jpg');background-size:cover;background-position:center 45%;transform:scale(1.03)} .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.38) 52%,rgba(0,0,0,.69))} .hero-content{position:relative;z-index:2;padding-bottom:62px} .hero-lead{max-width:730px;color:rgba(255,255,255,.83);font-size:17px;margin:25px 0 34px} .search-panel{display:grid;grid-template-columns:1.35fr 1fr .85fr 1.35fr auto;background:#fff;padding:12px;gap:0;box-shadow:var(--shadow);align-items:stretch} .search-panel label{display:flex;flex-direction:column;justify-content:center;padding:7px 18px;border-right:1px solid var(--line)} .search-panel label>span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:#777;margin-bottom:6px} .search-panel input,.search-panel select{border:0;outline:0;background:transparent;font:inherit;color:#222;min-width:0} .search-panel input::placeholder{color:#9c9c9c} .search-panel .price-line{display:flex;justify-content:space-between;color:#555;font-size:12px} .search-panel .price input{width:100%;accent-color:#222} .inspiration{background:var(--cream)} .inspiration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .inspiration-card{height:430px;position:relative;overflow:hidden;background-size:cover;background-position:center} .inspiration-card:before,.area-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.7))} .inspiration-card:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:.35s} .inspiration-card:hover:after{background:rgba(0,0,0,.11)} .inspiration-card span{position:absolute;z-index:2;left:28px;bottom:26px;color:#fff;display:grid;gap:4px} .inspiration-card strong{font-family:'Playfair Display',serif;font-size:31px;font-weight:500} .inspiration-card small{opacity:.78;font-size:12px} .card-apartment{background-image:url('https://4frealty.com/wp-content/uploads/2026/06/othmanQW56AWR80B99YZ7K3G50MDZ33G_0_6a3e8d381546a.jpg')} .card-villa{background-image:url('https://4frealty.com/wp-content/uploads/2026/06/KJ1XB5DVGR1N2Z085DQVWDVNA0_0_6a3beee51683b.jpg')} .card-townhouse{background-image:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.06)),url('https://4frealty.com/wp-content/uploads/2026/06/KJ1XB5DVGR1N2Z085DQVWDVNA0_0_6a3beee51683b.jpg');background-position:68% center} .about-visual{height:650px;position:relative} .main-image{left:0;top:0;width:79%;height:85%;background-image:url('https://4frealty.com/wp-content/uploads/2026/06/othmanQW56AWR80B99YZ7K3G50MDZ33G_0_6a3e8d381546a.jpg')} .accent-image{right:0;bottom:0;width:43%;height:44%;background-image:url('https://4frealty.com/wp-content/uploads/2026/06/KJ1XB5DVGR1N2Z085DQVWDVNA0_0_6a3beee51683b.jpg');border:12px solid #fff} .about-badge{position:absolute;left:8%;bottom:4%;width:150px;height:150px;border-radius:50%;background:#171717;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .about-badge strong{font-family:'Playfair Display',serif;font-size:26px} .about-badge span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-top:3px} .services-section{background:#171717;color:#fff} .services-section .eyebrow{color:#9d9d9d} .services-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #3b3b3b} .area-section{background:#161616;color:#fff} .area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#353535} .area-card{height:480px;background-size:cover;background-position:center;position:relative;overflow:hidden} .area-card span{position:absolute;z-index:2;left:24px;bottom:24px;display:grid} .area-card strong{font-family:'Playfair Display',serif;font-size:27px;font-weight:500} .area-card small{color:#c6c6c6;margin-top:4px} .area-1,.area-3{background-image:url('https://4frealty.com/wp-content/uploads/2026/06/KJ1XB5DVGR1N2Z085DQVWDVNA0_0_6a3beee51683b.jpg')} .area-2,.area-4{background-image:url('https://4frealty.com/wp-content/uploads/2026/06/othmanQW56AWR80B99YZ7K3G50MDZ33G_0_6a3e8d381546a.jpg')} .area-2{background-position:75% center} .area-4{background-position:25% center} .contact-section{background:var(--sand)} .developer-strip{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff} .developer-track{display:flex;width:max-content;animation:marquee 34s linear infinite} .developer-track span{min-width:180px;height:115px;display:grid;place-items:center;border-right:1px solid var(--line);font-family:'Playfair Display',serif;color:#777;font-size:18px;letter-spacing:.04em} @media(max-width:1080px){.search-panel{grid-template-columns:1fr 1fr}.search-panel label{border-bottom:1px solid var(--line)}.search-panel .btn{grid-column:1/-1}.about-visual{max-width:760px}.area-grid{grid-template-columns:repeat(2,1fr)}.services-grid{grid-template-columns:1fr}} @media(max-width:720px){.hero{min-height:820px;height:auto;padding-top:150px;align-items:flex-end}.hero-content{padding-bottom:30px}.hero-lead{font-size:15px}.search-panel{grid-template-columns:1fr}.search-panel label{border-right:0}.inspiration-card{height:360px}.about-visual{height:490px}.main-image{width:88%;height:82%}.accent-image{width:48%;height:42%}.about-badge{width:120px;height:120px}.area-card{height:390px}} .hero-overlay{background:linear-gradient(180deg,rgba(10,31,48,.26),rgba(10,31,48,.34) 48%,rgba(8,28,45,.72))} .services-section,.area-section{background:var(--brand-navy-deep)} .developer-track span{min-width:176px;height:110px;padding:18px;background:#fff} .developer-track span img{display:block;width:120px;height:62px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.25s} .developer-track span:hover img{opacity:1;filter:grayscale(0)} .hero{min-height:820px;height:min(980px,100vh)} .hero-media{transform:scale(1.06);filter:saturate(.88) contrast(1.04)} .hero-overlay{background:linear-gradient(90deg,rgba(5,24,40,.76) 0%,rgba(5,24,40,.47) 42%,rgba(5,24,40,.20) 70%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(5,24,40,.50))} .hero-content{padding-bottom:78px} .hero h1{font-size:clamp(58px,7vw,112px);max-width:970px;text-shadow:0 12px 36px rgba(0,0,0,.2)} .hero-lead{font-size:18px;max-width:660px;line-height:1.8;color:rgba(255,255,255,.84)} .search-panel{border-radius:18px;padding:10px;box-shadow:0 26px 70px rgba(0,0,0,.24);overflow:hidden;border:1px solid rgba(255,255,255,.35)} .search-panel label{padding:10px 20px} .search-panel .btn{border-radius:12px;background:linear-gradient(135deg,var(--lux-navy-2),var(--lux-navy));min-width:155px} .inspiration-card:before,.area-card:before{border-radius:20px} .inspiration-card strong,.area-card strong{font-size:34px} .about-visual{height:700px} .main-image,.accent-image{border-radius:28px;box-shadow:var(--lux-shadow)} .accent-image{border:10px solid var(--lux-paper)} .about-badge{width:168px;height:168px;background:linear-gradient(145deg,var(--lux-navy-2),var(--lux-navy));box-shadow:0 22px 55px rgba(13,47,79,.35);border:1px solid rgba(255,255,255,.14)} .services-section{background:radial-gradient(circle at 80% 10%,rgba(200,169,107,.13),transparent 24%),linear-gradient(135deg,#0a2945,#123d62 58%,#0b2e4d);overflow:hidden} .services-grid{border-color:rgba(255,255,255,.13)} .area-section{background:radial-gradient(circle at 15% 0%,rgba(200,169,107,.13),transparent 28%),#0b2c49} .area-grid{gap:18px;background:transparent} .area-card{height:520px} .contact-section{background:linear-gradient(180deg,#f5f0e7,#f9f7f2)} @media(max-width:720px){.hero h1{font-size:clamp(52px,15vw,74px)}} .home-page .hero-media{will-change:transform;transform:scale(1.08) translate3d(0,var(--hero-parallax,0px),0);transition:transform 1.8s cubic-bezier(.16,1,.3,1);} .home-page.home-ready .hero-media{transform:scale(1.03) translate3d(0,var(--hero-parallax,0px),0);} .home-page .hero .eyebrow, .home-page .hero h1, .home-page .hero-lead, .home-page .search-panel{opacity:0;transform:translate3d(0,28px,0);transition:opacity .85s ease,transform .95s cubic-bezier(.16,1,.3,1);} .home-page.home-ready .hero .eyebrow{opacity:1;transform:none;transition-delay:.08s} .home-page.home-ready .hero h1{opacity:1;transform:none;transition-delay:.16s} .home-page.home-ready .hero-lead{opacity:1;transform:none;transition-delay:.28s} .home-page.home-ready .search-panel{opacity:1;transform:none;transition-delay:.40s} .home-page .motion-stagger{opacity:0;transform:translate3d(0,34px,0) scale(.985);transition: opacity .72s ease var(--motion-delay,0ms), transform .9s cubic-bezier(.16,1,.3,1) var(--motion-delay,0ms), box-shadow .35s ease, border-color .35s ease;will-change:transform,opacity;} .home-page .motion-stagger.motion-in{opacity:1;transform:translate3d(0,0,0) scale(1);} .home-page .inspiration-card, .home-page .area-card{transition:transform .55s cubic-bezier(.16,1,.3,1),filter .45s ease,background-position .8s cubic-bezier(.16,1,.3,1);will-change:transform;} .home-page .inspiration-card:hover, .home-page .area-card:hover{transform:translateY(-8px) scale(1.012);filter:saturate(1.06) contrast(1.02);} .home-page .inspiration-card span, .home-page .area-card span{transition:transform .5s cubic-bezier(.16,1,.3,1);} .home-page .inspiration-card:hover span, .home-page .area-card:hover span{transform:translateY(-7px);} .home-page .service-card{transition:background-color .35s ease,transform .45s cubic-bezier(.16,1,.3,1);} .home-page .service-card:before{transition:width .5s cubic-bezier(.16,1,.3,1),opacity .35s ease;} .home-page .service-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.025);} .home-page .service-card:hover:before{width:128px} .home-page .service-card h3, .home-page .service-card li{transition:transform .45s cubic-bezier(.16,1,.3,1),color .35s ease;} .home-page .service-card:hover h3{transform:translateX(5px)} .home-page .service-card:hover li{color:rgba(255,255,255,.78)} .home-page .property-card{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transform-style:preserve-3d;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease;will-change:transform;} .home-page .property-card:hover{--lift:-8px;box-shadow:0 30px 76px rgba(11,41,65,.15);} .home-page .property-image{transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease;transform:translateZ(14px);} .home-page .property-card:hover .property-image{filter:saturate(1.05);} .home-page .property-body{transform:translateZ(8px)} .home-page .about-visual{transform:translate3d(0,var(--about-parallax,0px),0);transition:transform .15s linear;will-change:transform;} .home-page .accent-image{transform:translate3d(0,var(--accent-parallax,0px),0);transition:transform .15s linear;will-change:transform;} .home-page .about-badge{animation:homeBadgeFloat 5.5s ease-in-out infinite;} .home-page .btn, .home-page .text-link{position:relative;transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s ease,color .3s ease,box-shadow .3s ease;} .home-page .btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.16)} .home-page .btn span, .home-page .text-link span{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)} .home-page .btn:hover span{transform:translateX(5px)} .home-page .text-link:hover span{transform:translate(4px,-4px) rotate(4deg)} .home-page .search-panel{transition:opacity .85s ease,transform .95s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;} .home-page .search-panel:focus-within{box-shadow:0 24px 70px rgba(0,0,0,.16);} .home-page .search-panel label{transition:background-color .3s ease;} .home-page .search-panel label:focus-within{background:#faf9f6} .home-page .developer-track:hover{animation-play-state:paused} @media(hover:none),(pointer:coarse){.home-page .property-card{transform:none!important}.home-page .inspiration-card:hover, .home-page .area-card:hover, .home-page .service-card:hover{transform:none}} @media(prefers-reduced-motion:reduce){.home-page *, .home-page *:before, .home-page *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}.home-page .hero-media, .home-page .about-visual, .home-page .accent-image, .home-page .property-card{transform:none!important}} .hero[style] .hero-media{background-image: var(--hero-image);} .contact-section[style]{background: linear-gradient( 90deg, rgba(242, 239, 233, 0.96), rgba(242, 239, 233, 0.86) ), var(--contact-image) center/cover;} .about-badge{animation: ffFloat 5s ease-in-out infinite;} body.home-page .hero{min-height: min(900px,100svh);padding: 145px 0 54px;align-items: end;isolation: isolate;background: var(--ff-navy);} body.home-page .hero[style] .hero-media{inset: 0;background-image: var(--hero-image, url('https://4frealty.com/wp-content/uploads/2026/06/KJ1XB5DVGR1N2Z085DQVWDVNA0_0_6a3beee51683b.jpg'));transform: translateY(var(--hero-parallax,0));filter: saturate(.9);} body.home-page .hero-overlay{background: linear-gradient(90deg,rgba(4,23,33,.8),rgba(4,23,33,.35) 58%,rgba(4,23,33,.18)), linear-gradient(0deg,rgba(4,23,33,.78),transparent 55%);} .hero-grain{position: absolute;z-index: 1;inset: 0;opacity: .035;pointer-events: none;background: #000;mix-blend-mode: soft-light;} .hero-signature{display: none;} body.home-page .hero-content{z-index: 3;padding-bottom: 0;} body.home-page .hero h1{max-width: 920px;color: #fff;font-size: clamp(58px,6.8vw,96px);line-height: .96;letter-spacing: -.045em;} body.home-page .hero-lead{max-width: 590px;margin: 27px 0 34px;padding-left: 20px;border-left: 2px solid var(--ff-gold);color: rgba(255,255,255,.78);font-size: 15px;line-height: 1.75;} .hero-scroll{display: none;} .luxury-intro-strip{background: var(--ff-white);border-bottom: 1px solid var(--ff-border);} .luxury-intro-grid{display: grid;grid-template-columns: repeat(4,1fr);} .luxury-intro-grid > div{position: relative;min-height: 126px;padding: 28px;border-right: 1px solid var(--ff-border);display: flex;flex-direction: column;justify-content: center;} .luxury-intro-grid > div:first-child{border-left: 1px solid var(--ff-border);} .luxury-intro-grid small{position: absolute;right: 20px;top: 18px;color: #aa9878;font-size: 9px;} .luxury-intro-grid strong{font-family: var(--ff-heading-font);font-size: 24px;font-weight: 500;} .luxury-intro-grid span{margin-top: 5px;color: var(--ff-muted);font-size: 11px;} body.home-page .inspiration{background: var(--ff-ivory);} body.home-page .inspiration-grid{gap: 20px;} body.home-page .inspiration-card{height: 460px;border-radius: 14px;filter: saturate(.86);box-shadow: 0 14px 40px rgba(10,37,51,.08);} body.home-page .inspiration-card:after{background: linear-gradient(180deg,transparent 35%,rgba(4,26,38,.76));} body.home-page .inspiration-card span{inset: auto 24px 25px;} body.home-page .inspiration-card strong{font-family: var(--ff-heading-font);font-size: 29px;font-weight: 500;} body.home-page .about-preview{padding: 130px 0;background: var(--ff-white);} body.home-page .split-grid{grid-template-columns: 1.02fr .98fr;gap: clamp(55px,7vw,105px);} body.home-page .about-visual{height: 650px;} body.home-page .main-image{width: 85%;height: 87%;border-radius: 14px;filter: saturate(.88);} body.home-page .accent-image{width: 44%;height: 42%;border: 9px solid var(--ff-white);border-radius: 10px;} body.home-page .about-badge{right: 8%;bottom: 4%;width: 132px;height: 132px;border: 0;border-radius: 50%;background: var(--ff-navy);color: #fff;box-shadow: 0 0 0 9px rgba(255,255,255,.9);} body.home-page .copy-block > div{color: var(--ff-muted);font-size: 16px;line-height: 1.85;} body.home-page .text-link{margin-top: 22px;padding-bottom: 7px;border-bottom: 1px solid var(--ff-navy);font-size: 11px;letter-spacing: .08em;text-transform: uppercase;} body.home-page .services-section{background: var(--ff-navy);color: #fff;} body.home-page .services-section:after{display: none;} body.home-page .services-section h2, body.home-page .service-card h3{color: #fff;} body.home-page .services-grid{grid-template-columns: repeat(3,1fr);gap: 16px;} body.home-page .service-card{min-height: 310px;padding: 32px;border: 1px solid rgba(255,255,255,.14);border-radius: 10px;background: rgba(255,255,255,.035);color: #fff;box-shadow: none;} body.home-page .service-card:hover{background: rgba(255,255,255,.075);transform: translateY(-5px);} body.home-page .service-card p{color: rgba(255,255,255,.62);line-height: 1.75;} body.home-page .properties-section{background: var(--ff-ivory);} body.home-page .area-section{background: var(--ff-navy-2);} body.home-page .area-grid{grid-template-columns: repeat(2,1fr);gap: 14px;} body.home-page .area-card{height: 420px;border-radius: 14px;filter: saturate(.86);} body.home-page .area-card strong{font-family: var(--ff-heading-font);font-size: 33px;font-weight: 500;} body.home-page .area-card:before{border-radius: 12px;} body.ff-luxury .contact-section{background: var(--ff-white);} @media (max-width: 760px){body.home-page .hero{min-height: 860px;padding: 115px 0 35px;}body.home-page .hero-overlay{background: linear-gradient(0deg,rgba(4,23,33,.88),rgba(4,23,33,.25));}body.home-page .hero h1{font-size: clamp(49px,13.5vw,64px);line-height: .98;}body.home-page .hero-lead{margin: 21px 0 26px;padding-left: 14px;font-size: 13px;}.luxury-intro-grid{grid-template-columns: 1fr 1fr;}.luxury-intro-grid > div{min-height: 115px;padding: 23px 17px;}.luxury-intro-grid strong{font-size: 21px;}body.home-page .inspiration-card{height: 400px;}body.home-page .split-grid{grid-template-columns: 1fr;gap: 48px;}body.home-page .about-visual{height: 480px;}body.home-page .about-preview{padding: 78px 0;}body.home-page .service-card{min-height: 250px;padding: 27px;}body.home-page .area-card{height: 340px;}} .services-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px} .services-carousel{overflow:hidden;width:100%;scrollbar-width:none;overscroll-behavior-inline:contain;--swiper-wrapper-transition-timing-function:cubic-bezier(.22,1,.36,1);} .services-carousel::-webkit-scrollbar{display:none} body.home-page .services-carousel .services-grid, .services-carousel .services-grid{display:flex;gap:0;border-top:none;} body.home-page .services-carousel .service-card, .services-carousel .service-card{box-sizing:border-box;height:auto;margin:0;min-height:430px;display:flex;flex-direction:column;} body.home-page .services-carousel .service-card + .service-card, .services-carousel .service-card + .service-card{padding-left:32px;} body.home-page .services-carousel .service-card:hover, .services-carousel .service-card:hover{transform:none} .services-carousel .service-card h3{margin:62px 0 19px;font-size:clamp(29px,2.4vw,38px)} .services-carousel .service-card h3 a{display:inline;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;transition:background-size .35s ease} .services-carousel .service-card h3 a:hover,.services-carousel .service-card h3 a:focus-visible{background-size:100% 1px} .services-carousel .service-card p{color:rgba(255,255,255,.62);font-size:14px;line-height:1.75;margin:0 0 25px} .services-carousel .service-icon{position:absolute;right:28px;top:34px;width:58px;height:58px;border:1px solid rgba(255,255,255,.17);border-radius:50%;display:grid;place-items:center} .services-carousel .service-icon img{width:27px;height:27px;object-fit:contain;filter:brightness(0) invert(1);opacity:.8} .services-carousel-controls{display:flex;align-items:center;gap:14px;padding-bottom:8px} .services-carousel-controls button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff;font-size:18px;cursor:pointer;transition:.25s} .services-carousel-controls button:hover,.services-carousel-controls button:focus-visible{background:#fff;color:#0d2f4f} .services-carousel-status{font-size:10px;letter-spacing:.13em;color:rgba(255,255,255,.48);min-width:58px;text-align:center} .services-carousel-status b{color:#ead9b2} @media(max-width:720px){.services-heading{align-items:flex-start;flex-direction:column}.services-carousel .services-grid{gap:0}.services-carousel .service-card,.services-carousel .service-card+.service-card{padding:27px;min-height:360px}.services-carousel .service-card h3{margin-top:58px}}