/* Roaya Real Estate — theme stylesheet (pairs with inline-styled Blade markup) */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Hanken Grotesk',sans-serif;background:#fff;color:#141414;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body>footer{margin-top:auto}
a{color:#141414}a:hover{color:#ef5a2a}
svg.lucide{width:1em;height:1em}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#d3d3cf;border-radius:8px}
@keyframes bwfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bwglow{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(1)}50%{opacity:.75;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes bwpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 18px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes bwshine{0%{transform:translateX(-130%) skewX(-18deg)}55%,100%{transform:translateX(260%) skewX(-18deg)}}
.float-card{animation:bwfloat 6s ease-in-out infinite}
.hero-glow{animation:bwglow 9s ease-in-out infinite}
.pulse{animation:bwpulse 2.6s ease-out infinite}
/* image zoom on hover */
[data-zoom]{overflow:hidden}
[data-zoom] img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
[data-card]:hover [data-zoom] img,[data-zoom]:hover img{transform:scale(1.09)}
/* CTA shine + arrow micro-interaction */
[data-arrow]{transition:transform .28s ease}
[data-cta]{position:relative;overflow:hidden}
[data-cta]:hover [data-arrow]{transform:translateX(4px)}
[data-cta]::after{content:"";position:absolute;top:0;bottom:0;width:36px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
[data-cta]:hover::after{animation:bwshine .9s ease}
/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
/* nav pills */
.nav-pill{ text-decoration:none;color:#6b6b6b;background:transparent;padding:8px 18px;border-radius:30px;font-weight:500;transition:background .25s,color .25s,box-shadow .25s}
.nav-pill:hover{color:#141414}
.nav-pill.active{color:#141414;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);font-weight:700}
/* header scroll state + progress */
#site-header{transition:box-shadow .25s,border-color .25s}
#site-header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.07);border-bottom-color:transparent}
#scroll-progress{position:absolute;inset-inline-start:0;bottom:-1px;height:2px;width:0;background:#ef5a2a;box-shadow:0 0 8px rgba(239,90,42,.5);transition:width .12s linear}
/* FAQ accordion */
.faq-item{background:#fff;border:1px solid #ededea;border-radius:14px;padding:18px 20px;cursor:pointer;transition:background .2s}
.faq-item .faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s}
.faq-item.open{background:#f6f6f4}
.faq-item.open .faq-a{max-height:140px;opacity:1}
/* rails */
[data-rail]{scroll-behavior:smooth}
/* lightbox */
#lightbox{position:fixed;inset:0;z-index:400;background:rgba(10,10,10,.88);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:40px}
#lightbox.open{display:flex}
/* form focus
   ⚠ NO background here. This rule used to force `background:#fff!important`,
   which on the project page's DARK inquiry card met an inline `color:#fff` —
   so the moment you clicked into a field it became white text on a white box.
   Measured 1:1 contrast: you could type a whole message and see nothing.
   A ring and a border read as focus on any surface; a hard-coded background
   only works on the one colour it was written against. */
.field:focus{border-color:#ef5a2a!important;box-shadow:0 0 0 4px rgba(239,90,42,.1)}
.field.err{border-color:#e03131!important}