/* ========================================================================== AA Property Management — single stylesheet for the whole public site (shell + home + listings + property detail). Design DNA: gold / cream / ink, Fraunces display + Manrope text. No frameworks. ========================================================================== */ :root{ --gold:#A8842F; --gold-2:#C2A14E; --gold-3:#8E6E24; --gold-soft:#E7D6A6; --cream:#F8F3E9; --cream-2:#EFE6D2; --cream-3:#E6DAC0; --ink:#2A2418; --ink-soft:#5B533F; --ink-mute:#8A8067; --espresso:#241F17; --line:rgba(42,36,24,.13); --line-2:rgba(42,36,24,.075); --line-3:rgba(42,36,24,.2); --white:#fff; --display:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px; --shadow-s:0 2px 10px rgba(42,36,24,.05); --shadow-m:0 14px 38px rgba(42,36,24,.10); --shadow-l:0 28px 70px rgba(42,36,24,.16); --ease:cubic-bezier(.2,.7,.2,1); --head-h:78px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;overflow-x:clip} body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.7; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} picture{display:block} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.022em} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} ::selection{background:var(--gold-soft);color:var(--ink)} .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,32px)} .wrap-narrow{max-width:940px;margin:0 auto;padding:0 clamp(18px,4vw,32px)} .eyebrow{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:800; display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-2);flex:none} .sec-head.center .eyebrow::before{display:none} .gold{color:var(--gold)} .muted{color:var(--ink-soft)} .hairline{height:1px;background:linear-gradient(90deg,transparent,var(--line-3),transparent);border:0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- scroll reveals ---------- Only hidden when JS is available to reveal them again (html.js is set by an inline snippet in the ). Without JS every section renders immediately. */ .js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s var(--ease)} .js [data-reveal].visible{opacity:1;transform:none} .js [data-reveal][data-delay="1"]{transition-delay:.08s} .js [data-reveal][data-delay="2"]{transition-delay:.16s} .js [data-reveal][data-delay="3"]{transition-delay:.24s} .js [data-reveal][data-delay="4"]{transition-delay:.32s} /* gold underline that draws in */ h2.draw,h3.draw{position:relative;display:inline-block} h2.draw::after,h3.draw::after{content:"";position:absolute;left:0;bottom:-14px;height:3px;width:0;border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width 1.05s var(--ease) .2s} .sec-head.center h2.draw::after{left:50%;transform:translateX(-50%)} [data-reveal].visible h2.draw::after,[data-reveal].visible h3.draw::after{width:70px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--gold);color:#fff; padding:14px 28px;border-radius:46px;font-size:14px;font-weight:700;letter-spacing:.01em;border:1.5px solid var(--gold); cursor:pointer;font-family:var(--sans);transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s,border-color .25s; white-space:nowrap;text-align:center} .btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(168,132,47,.32);background:var(--gold-3);border-color:var(--gold-3)} .btn:active{transform:translateY(0)} .btn.out{background:transparent;color:var(--ink);border-color:var(--ink)} .btn.out:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:none} .btn.soft{background:var(--white);color:var(--ink);border-color:var(--line)} .btn.soft:hover{background:var(--cream-2);color:var(--ink);border-color:var(--gold-2);box-shadow:var(--shadow-m)} .btn.light{background:#fff;color:var(--ink);border-color:#fff} .btn.light:hover{background:var(--cream);color:var(--ink)} .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.7);backdrop-filter:blur(5px)} .btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff} .btn.wa{background:#25D366;border-color:#25D366} .btn.wa:hover{background:#1eb558;border-color:#1eb558} .btn.sm{padding:10px 19px;font-size:13px} .btn.lg{padding:17px 34px;font-size:15px} .btn.block{width:100%} .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none} .mag{will-change:transform} .link-gold{color:var(--gold);font-weight:700;border-bottom:1px solid rgba(168,132,47,.4);transition:border-color .2s} .link-gold:hover{border-color:var(--gold)} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between; height:var(--head-h);max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,32px); background:rgba(248,243,233,.88);backdrop-filter:blur(14px);transition:box-shadow .3s,background .3s} .site-header.scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px rgba(42,36,24,.06);background:rgba(248,243,233,.96)} .brand{display:flex;align-items:center;flex:none} .brand img{height:46px;width:auto} .nav-desktop{display:none} .nav-desktop a{position:relative;font-size:14px;font-weight:600;color:var(--ink-soft);transition:color .2s;padding:6px 0} .nav-desktop a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .3s var(--ease)} .nav-desktop a:hover{color:var(--gold)} .nav-desktop a:hover::after,.nav-desktop a.active::after{right:0} .nav-desktop a.active{color:var(--gold)} .head-right{display:flex;align-items:center;gap:14px} .lang{display:flex;gap:2px;font-size:12px;font-weight:800} .lang-btn{background:none;border:none;cursor:pointer;color:var(--ink-mute);padding:5px 8px;border-radius:7px; font-family:var(--sans);letter-spacing:.06em;transition:background .2s,color .2s} .lang-btn:hover{color:var(--ink)} .lang-btn.active{background:var(--gold);color:#fff} .menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer; width:44px;height:44px;align-items:center;justify-content:center} .menu-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),opacity .2s} .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile navigation — a drawer that slides in from the left over a dimmed page. */ .nav-scrim{position:fixed;inset:0;z-index:255;background:rgba(24,20,14,.5);opacity:0;visibility:hidden; transition:opacity .38s ease,visibility .38s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .nav-scrim.open{opacity:1;visibility:visible} /* the drawer owns the screen: fade the sticky header out so there is only one close affordance */ body.nav-open .site-header{opacity:0;pointer-events:none;transition:opacity .3s ease} /* above the sticky header (z-index 200) so the drawer owns the screen while open */ .nav-mobile{position:fixed;top:0;left:0;bottom:0;z-index:260;width:min(84vw,360px); background:var(--cream);border-right:1px solid var(--line-2);box-shadow:22px 0 60px rgba(24,20,14,.22); padding:26px clamp(20px,6vw,28px) 34px;display:flex;flex-direction:column;gap:2px;overflow-y:auto; transform:translateX(-102%);visibility:hidden; transition:transform .42s var(--ease),visibility .42s} .nav-mobile.open{transform:none;visibility:visible} .nav-m-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding-bottom:18px;margin-bottom:12px;border-bottom:1px solid var(--line-2)} .nav-m-head img{height:42px;width:auto} .nav-m-close{background:none;border:1px solid var(--line);border-radius:50%;width:38px;height:38px; display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);flex:none; transition:border-color .2s,color .2s} .nav-m-close:hover{border-color:var(--gold);color:var(--gold)} .nav-mobile a{font-family:var(--display);font-size:clamp(22px,6vw,28px);color:var(--ink);padding:14px 0; border-bottom:1px solid var(--line-2);opacity:0;transform:translateX(-16px); transition:opacity .4s ease,transform .45s var(--ease),color .2s} .nav-mobile.open a{opacity:1;transform:none} .nav-mobile.open a:nth-of-type(1){transition-delay:.12s} .nav-mobile.open a:nth-of-type(2){transition-delay:.17s} .nav-mobile.open a:nth-of-type(3){transition-delay:.22s} .nav-mobile.open a:nth-of-type(4){transition-delay:.27s} .nav-mobile.open a:nth-of-type(5){transition-delay:.32s} .nav-mobile a:active{color:var(--gold)} .nav-mobile .nav-m-cta{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:26px; opacity:0;transform:translateY(10px);transition:opacity .45s ease .34s,transform .45s var(--ease) .34s} .nav-mobile.open .nav-m-cta{opacity:1;transform:none} /* the CTA buttons are buttons, not nav links — reset the link styling the drawer applies */ .nav-mobile .nav-m-cta .btn{width:100%;padding:14px 24px;font-family:var(--sans);font-size:14px; border-bottom-width:1.5px;transform:none;opacity:1;transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s,border-color .25s} /* ---------- section rhythm ---------- */ section{padding:clamp(60px,8vw,96px) 0} .sec-head{max-width:52em;margin-bottom:clamp(32px,4.4vw,52px)} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head h2{font-size:clamp(30px,5vw,58px);margin:16px 0 14px;line-height:1.02} .sec-head p{color:var(--ink-soft);font-size:clamp(15px,1.7vw,17.5px);max-width:44em} .sec-head.center p{margin:0 auto} .sec-head .aside-link{margin-top:12px;display:inline-block} /* ========================================================================== HOME — hero ========================================================================== */ /* the preloader only exists when JS can dismiss it */ #preloader{display:none} .js #preloader{position:fixed;inset:0;z-index:9999;background:var(--cream);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:18px;transition:opacity .6s ease} #preloader img{height:88px;opacity:0;transform:translateY(8px);animation:pllogo .9s ease forwards} #preloader .pl-line{width:0;height:2px;background:var(--gold);animation:plline .8s .5s ease forwards} @keyframes pllogo{to{opacity:1;transform:none}} @keyframes plline{to{width:180px}} .hero{position:relative;padding:0} .hero-stage{position:relative;width:100%;height:clamp(540px,92vh,960px);overflow:hidden;background:#181410} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none} .hero-grad{position:absolute;inset:0;z-index:2;pointer-events:none;background: linear-gradient(to bottom,rgba(248,243,233,.45) 0%,rgba(248,243,233,0) 18%), linear-gradient(to top,rgba(19,17,11,.9) 0%,rgba(19,17,11,.62) 26%,rgba(19,17,11,.24) 50%,rgba(19,17,11,0) 72%)} /* The headline dims while the logo reveal plays, then comes back — see .hero.revealing below. */ .hero-content{position:absolute;left:0;right:0;bottom:clamp(40px,7vh,88px);z-index:3; transition:opacity .7s ease,transform .7s var(--ease)} .hero.revealing .hero-content{opacity:.06;transform:translateY(10px);pointer-events:none} .hero-content .eyebrow{color:#fff;margin-bottom:18px;text-shadow:0 1px 14px rgba(12,9,5,.85),0 0 3px rgba(12,9,5,.5)} .hero-content .eyebrow::before{background:var(--gold-2);height:2px} .kinetic{font-family:var(--display);font-size:clamp(42px,9.6vw,124px);line-height:.92;letter-spacing:-.035em} .kinetic .l1{display:block;font-weight:340;transition:font-weight .12s linear;color:#fff; text-shadow:0 2px 26px rgba(12,9,5,.5)} .kinetic .l2{display:block;font-style:italic;font-weight:560;color:var(--gold-2); text-shadow:0 2px 26px rgba(12,9,5,.5)} .hero-content p.lead{max-width:36em;margin:22px 0 0;font-size:clamp(15px,2vw,19px);color:rgba(255,255,255,.94); text-shadow:0 1px 14px rgba(12,9,5,.6)} .hero-cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap} /* stat strip pinned to the hero bottom edge */ .hero-stats{display:flex;gap:clamp(18px,4vw,48px);margin-top:30px;flex-wrap:wrap} .hero-stats div{color:#fff} .hero-stats b{display:block;font-family:var(--display);font-size:clamp(22px,3vw,30px);font-weight:600;line-height:1; color:var(--gold-soft);text-shadow:0 1px 12px rgba(12,9,5,.6)} .hero-stats span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8); text-shadow:0 1px 10px rgba(12,9,5,.6)} /* Cinematic beat: when the video ends the logo fades in over a cream veil, holds, then fades out and hands the stage back to the headline + CTAs. */ .hero-reveal{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity 1s ease; background:radial-gradient(ellipse 78% 62% at 50% 46%,rgba(248,243,233,.94) 0%,rgba(248,243,233,.8) 38%,rgba(248,243,233,.36) 70%,rgba(248,243,233,0) 100%)} .hero-reveal.show{opacity:1} .hr-inner{text-align:center;transform:translateY(16px) scale(.95);opacity:0; transition:transform 1.2s var(--ease) .15s,opacity 1.1s ease .15s} .hero-reveal.show .hr-inner{transform:none;opacity:1} .hr-logo{width:min(320px,54vw);margin:0 auto;filter:drop-shadow(0 18px 42px rgba(42,36,24,.25))} .hr-line{width:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:22px auto 0; transition:width 1s ease .55s} .hero-reveal.show .hr-line{width:min(230px,46vw)} .hr-tag{font-family:var(--display);font-style:italic;font-size:clamp(16px,2.3vw,23px);color:var(--ink);margin-top:14px; opacity:0;transition:opacity .9s ease .75s} .hero-reveal.show .hr-tag{opacity:1} /* marquee band */ .marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0; background:var(--cream-2);max-width:100vw} .marq-track{display:flex;gap:44px;white-space:nowrap;width:max-content;will-change:transform} .marq-track span{font-family:var(--display);font-size:clamp(19px,2.4vw,26px);font-style:italic;color:var(--gold);font-weight:500} .marq-track span::after{content:"✦";color:var(--gold-2);margin-left:44px;font-style:normal} /* ========================================================================== PROPERTY CARD (used on home, listings, similar, detail) ========================================================================== */ .prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)} .prop-grid.four{grid-template-columns:repeat(4,1fr)} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)} .pcard{position:relative;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s} .pcard:hover{transform:translateY(-7px);box-shadow:var(--shadow-l);border-color:rgba(168,132,47,.35)} .pcard .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--cream-2)} .pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .pcard:hover .ph img{transform:scale(1.06)} .pcard .ph::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(19,17,11,.78) 0%,rgba(19,17,11,.34) 24%,rgba(19,17,11,0) 52%)} .pcard .badges{position:absolute;top:13px;left:13px;right:13px;z-index:2;display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start} .pcard .badges .spacer{flex:1} .badge{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;padding:7px 12px;border-radius:40px; line-height:1;white-space:nowrap;backdrop-filter:blur(3px)} .badge.deal{background:var(--gold);color:#fff;box-shadow:0 4px 14px rgba(168,132,47,.35)} .badge.deal.rent{background:var(--ink)} .badge.deal.both{background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--gold-2),0 4px 14px rgba(24,20,14,.3); color:var(--gold-soft)} .badge.status{background:rgba(248,243,233,.94);color:var(--ink)} .badge.count{position:absolute;right:13px;bottom:13px;z-index:2;background:rgba(24,20,14,.72);color:#fff; display:inline-flex;align-items:center;gap:6px;letter-spacing:.04em} .pcard .price-tag{position:absolute;left:13px;bottom:13px;z-index:2;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)} .pcard .price-tag .p1{font-family:var(--display);font-size:clamp(20px,2.4vw,25px);font-weight:600;line-height:1.1;display:block} .pcard .price-tag .p2{font-size:12.5px;font-weight:600;opacity:.92;display:block;margin-top:2px} .pcard .body{padding:17px 18px 19px;display:flex;flex-direction:column;gap:8px;flex:1} .pcard h3{font-size:clamp(17px,1.6vw,19.5px);line-height:1.22;color:var(--ink)} .pcard .loc{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:6px} .pcard .loc svg{flex:none;opacity:.7} .pcard .note{font-size:12.5px;color:var(--gold-3);font-weight:600;background:rgba(168,132,47,.07); border:1px solid rgba(168,132,47,.18);border-radius:8px;padding:7px 10px;line-height:1.45} .pcard .specs{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:13px;border-top:1px solid var(--line-2); font-size:12.5px;color:var(--ink-soft)} .pcard .specs span{display:inline-flex;align-items:center;gap:5px} .pcard .specs b{color:var(--ink);font-weight:700} .pcard .specs svg{opacity:.55} .pcard .ref{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:700} .pcard-link::after{content:"";position:absolute;inset:0;z-index:3} /* featured (larger, editorial) variant used on the home page */ .prop-grid.feature .pcard .ph{aspect-ratio:4/3} .prop-grid.feature .pcard h3{font-size:clamp(19px,1.9vw,22px)} .prop-more{text-align:center;margin-top:clamp(28px,3.4vw,44px)} /* ========================================================================== HOME sections ========================================================================== */ .propsec{background:var(--cream);position:relative} .propsec .sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap; margin-bottom:clamp(26px,3.4vw,40px)} .propsec .sec-top .sec-head{margin-bottom:0} .deal-tabs{display:inline-flex;gap:6px;background:var(--white);border:1px solid var(--line-2);border-radius:44px;padding:5px; box-shadow:var(--shadow-s)} .deal-tabs a,.deal-tabs button{font-size:13px;font-weight:700;color:var(--ink-soft);background:none;border:none;cursor:pointer; padding:10px 18px;border-radius:40px;transition:background .25s,color .25s;white-space:nowrap} .deal-tabs a:hover,.deal-tabs button:hover{color:var(--ink)} .deal-tabs a.active,.deal-tabs button.active{background:var(--gold);color:#fff} .deal-tabs .n{opacity:.66;font-weight:600;margin-left:4px} .flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .fcard{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:28px 22px;position:relative; overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s} .fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)} .fcard::before{content:attr(data-n);position:absolute;top:-16px;right:6px;font-family:var(--display);font-size:82px; color:var(--cream-2);font-weight:800;line-height:1} .fcard .dot{width:11px;height:11px;border-radius:50%;background:var(--gold);margin-bottom:16px;position:relative} .fcard h3{font-size:21px;margin-bottom:8px;position:relative} .fcard p{font-size:13.5px;color:var(--ink-soft);position:relative} .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .svc{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:32px 26px; transition:transform .35s var(--ease),border-color .3s,box-shadow .35s} .svc:hover{transform:translateY(-6px);border-color:var(--gold-2);box-shadow:var(--shadow-m)} .svc .ic{width:54px;height:54px;border-radius:16px;background:var(--cream-2);display:flex;align-items:center; justify-content:center;color:var(--gold);margin-bottom:18px} .svc h3{font-size:21px;margin-bottom:10px} .svc ul{list-style:none;margin-top:8px} .svc li{font-size:13.5px;color:var(--ink-soft);padding:6px 0 6px 18px;position:relative} .svc li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--gold-2);transform:rotate(45deg)} /* renovation film band — the proof reel above the before/after slider */ .works-film{position:relative;margin:0 0 clamp(26px,3.4vw,42px);border-radius:var(--r-xl);overflow:hidden; border:1px solid var(--line-2);background:var(--cream-2);box-shadow:var(--shadow-m)} .works-film video{width:100%;height:clamp(240px,38vw,470px);object-fit:cover;display:block} .works-film::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(19,17,11,.72) 0%,rgba(19,17,11,.22) 34%,rgba(19,17,11,0) 62%)} .works-film figcaption{position:absolute;left:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,30px);z-index:2;color:#fff} .works-film .wf-eyebrow{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase; font-weight:800;color:var(--gold-soft);margin-bottom:8px;text-shadow:0 1px 10px rgba(0,0,0,.5)} .works-film strong{display:block;font-family:var(--display);font-weight:600;font-style:italic; font-size:clamp(20px,3vw,34px);line-height:1.1;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.5)} /* before / after */ .ba-shell{background:var(--cream-2);border-radius:var(--r-xl);padding:clamp(20px,3.4vw,44px);border:1px solid var(--line-2); /* start, not center: the side panel is shorter than the 705px photo on three of the four projects, and centring left its text floating in the middle of the card with dead cream above and below — a different amount on each project. */ display:grid;grid-template-columns:minmax(0,470px) 1fr;gap:clamp(24px,4vw,50px);align-items:start} .ba-wrap{position:relative;width:100%;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line); user-select:none;cursor:ew-resize;box-shadow:var(--shadow-l);touch-action:pan-y} .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none} .ba-after-img{clip-path:inset(0 0 0 50%)} .ba-tag{position:absolute;top:16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800; padding:7px 14px;border-radius:40px;z-index:3} .ba-tag.b{left:16px;background:rgba(42,36,24,.74);color:var(--cream)} .ba-tag.a{right:16px;background:rgba(248,243,233,.94);color:var(--ink)} .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%); box-shadow:0 0 0 1px rgba(42,36,24,.14);z-index:2} .ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%; background:#fff;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:19px;font-weight:700; box-shadow:0 6px 20px rgba(42,36,24,.3)} /* The comparison, the view pills and the drag hint are all about the same photo, so they share the left column. The project pills live on the right, next to the copy they change. */ .ba-left{display:flex;flex-direction:column;gap:14px;min-width:0} .ba-side h3{font-size:clamp(23px,3vw,32px);margin:14px 0 12px} .ba-side p{color:var(--ink-soft);font-size:15.5px;margin-bottom:22px} /* Two pill rows, deliberately not the same weight. .ba-proj is the primary control — which JOB you are looking at — and keeps the gold active state the single row always had. .ba-view is secondary — which VIEW of that job — so it is smaller and settles on ink rather than gold when active, and the two rows can never be mistaken for each other. */ .ba-projects{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px} /* The row keeps its height even when a project has no views to switch between. Only one of the four projects has multiple views, and collapsing the row on the other three made the whole card shrink 50px mid-scroll — pulling every section below it up the page on what is just a pill click. 36px of quiet space costs less than a jumping page. */ .ba-views{display:flex;gap:8px;flex-wrap:wrap;min-height:36px} .ba-thumb{font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:40px;border:1px solid var(--line); background:var(--white);cursor:pointer;color:var(--ink-soft);transition:all .22s} .ba-thumb.active,.ba-thumb:hover{background:var(--gold);color:#fff;border-color:var(--gold)} .ba-view{font-size:11.5px;padding:7px 14px} .ba-view.active,.ba-view:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)} .ba-note{margin:0;font-size:13px;color:var(--ink-soft)} /* case-study metadata. A tile is rendered only for a field that actually has a value, so a project with no figures leaves the container empty and :empty removes it — the panel keeps exactly the rhythm it had. index.php emits these with no whitespace inside for that reason, and site.js empties them the same way. */ .ba-meta{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px} .ba-meta:empty,.ba-side .ba-goal:empty,.ba-side .ba-incl:empty{display:none} .bam{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 14px;min-width:92px} .bam .v{display:block;font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);line-height:1.15} .bam .l{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:800;margin-top:3px} /* .ba-side p already sets size + margin, so this needs the extra class to win */ .ba-side .ba-goal{margin:0 0 20px;font-size:14.5px;color:var(--ink-soft)} .ba-side .ba-goal .l{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:3px} .ba-side .ba-goal .t{display:block} /* "What the job included" — the .chip idiom from #investors, on white because the shell itself is cream-2 and a cream chip on cream would vanish. Chips wrap and cost two or three lines where seven bullets would cost seven, so switching to a project WITHOUT a list does not visibly resize the panel. Label reuses the .ba-goal .l treatment exactly. */ .ba-side .ba-incl{margin:0 0 20px} .ba-incl .l{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold); font-weight:800;margin-bottom:9px} .ba-incl .items{display:flex;flex-wrap:wrap;gap:7px} /* Deliberately NOT pill-shaped. These are labels, not buttons — but sitting a few hundred pixels under the project pills in the same white, same 40px radius, same weight, they read as another row of things to click. A square corner and a tinted ground say "read me". */ .ba-incl .items span{font-size:12px;font-weight:600;color:var(--ink-soft);background:transparent; border:1px solid var(--line-2);border-left:2px solid var(--gold-soft);border-radius:3px;padding:6px 12px; cursor:default} /* signature mosaic */ .sig-grid{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:clamp(420px,52vw,620px)} .sig-card{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--cream-2)} .sig-card.tall{grid-row:1/3} .sig-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .sig-card:hover img{transform:scale(1.06)} .sig-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(19,17,11,.5) 0%,rgba(19,17,11,0) 42%); pointer-events:none} .sig-card figcaption{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-family:var(--display);font-style:italic; font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.5)} .sig-badge{position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%; background:rgba(248,243,233,.92);display:flex;align-items:center;justify-content:center;font-family:var(--display); font-weight:700;color:var(--gold);font-size:14px} /* The eyebrow and h2.draw are both inline-level, so a SHORT centred heading ends up sharing a line with its eyebrow — which is why every existing centred head on this page has a long headline. These two new headings are short in both languages, so they get their own line explicitly. Scoped to the new sections: no existing heading changes. */ #team .sec-head .eyebrow,#reviews .sec-head .eyebrow{display:block} /* team — the .svc card idiom (white, hairline border, gold edge and lift on hover) with a portrait column. Renders only when lib/config.php RE_TEAM has entries. */ .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(16px,2vw,24px); max-width:1040px;margin:0 auto} /* ── #projects · the three standalone jobs ────────────────────────────────────────────── Read side by side, not clicked through. The widget above lets a visitor walk the rooms of one apartment; this asks them to compare three finished jobs, and comparison needs the things on screen at the same time. Before and after sit flush against each other so the change is the first thing the eye lands on — no handle to find, no instruction to read. Same card idiom as .svc and .tp so it belongs to the page. */ #projects{background:var(--cream-2)} .pj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.4vw,28px); max-width:1180px;margin:0 auto} .pj{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column; transition:transform .35s var(--ease),border-color .3s,box-shadow .35s} .pj:hover{transform:translateY(-6px);border-color:var(--gold-2);box-shadow:var(--shadow-m)} .pj-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line-2)} .pj-half{position:relative;margin:0;aspect-ratio:2/3;overflow:hidden;background:var(--cream-2)} .pj-half img{width:100%;height:100%;object-fit:cover;display:block} /* The two labels mirror each other across the seam, so the pair reads as one image cut in half rather than as two unrelated photos. */ .pj-tag{position:absolute;bottom:10px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; font-weight:800;padding:5px 10px;border-radius:40px} .pj-tag.b{left:10px;background:rgba(42,36,24,.74);color:var(--cream)} .pj-tag.a{right:10px;background:rgba(248,243,233,.94);color:var(--ink)} .pj-body{padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:9px;flex:1} .pj-body h3{font-size:18px;line-height:1.25} .pj-body p{font-size:13px;color:var(--ink-soft);line-height:1.7} /* margin-top:auto pins the price to the bottom so three cards of different text length still line their figures up. */ .pj-cost{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2); font-family:var(--display);font-size:24px;color:var(--gold);line-height:1} /* Three numbered pillars, replacing the two person cards. Same white-card idiom as .svc so it reads as part of the page, but with the numeral doing the work the portrait used to do — giving the eye something to land on before the text. */ .team-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,24px); max-width:1040px;margin:0 auto} .tp{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px); transition:transform .35s var(--ease),border-color .3s,box-shadow .35s} .tp:hover{transform:translateY(-6px);border-color:var(--gold-2);box-shadow:var(--shadow-m)} .tp-n{display:block;font-family:var(--display);font-size:30px;line-height:1;color:var(--gold-soft);margin-bottom:14px} .tp h3{font-size:19px;margin-bottom:8px} .tp p{font-size:13.5px;color:var(--ink-soft);line-height:1.72} /* The portrait carries this section — it is the only place on the site where a face appears, and a thumbnail beside a paragraph reads like a byline rather than an introduction. Sized so the head is legible at a glance without the photo outweighing the text. */ .tcard{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px); display:grid;grid-template-columns:clamp(132px,19vw,178px) 1fr;gap:clamp(18px,2.2vw,26px);align-items:start; transition:transform .35s var(--ease),border-color .3s,box-shadow .35s} .tcard:hover{transform:translateY(-6px);border-color:var(--gold-2);box-shadow:var(--shadow-m)} .tcard.nophoto{grid-template-columns:1fr} .tphoto{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--cream-2);border:1px solid var(--line-2)} .tphoto img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .tcard:hover .tphoto img{transform:scale(1.05)} .tcard h3{font-size:21px;margin-bottom:5px} .trole{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:800; margin-bottom:12px} .tbio{font-size:13.5px;color:var(--ink-soft);line-height:1.72} .stats{background:var(--cream-2)} .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center} .stat span{font-family:var(--display);font-size:clamp(40px,6vw,74px);color:var(--gold);font-weight:600;display:block;line-height:1} .stat small{font-size:13px;letter-spacing:.05em;color:var(--ink-soft);display:block;margin-top:10px} /* testimonials — no carousel script anywhere: a grid on wide screens, a scroll-snap row on narrow ones (see the 680px block). Renders only when a review is published AND consented. */ .rev-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,2vw,24px)} .rev{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px); margin:0;display:flex;flex-direction:column;gap:13px; transition:transform .35s var(--ease),border-color .3s,box-shadow .35s} .rev:hover{transform:translateY(-6px);border-color:var(--gold-2);box-shadow:var(--shadow-m)} .rev-q{font-family:var(--display);font-size:52px;line-height:.8;color:var(--gold-soft)} .rev-body{font-family:var(--display);font-style:italic;font-size:clamp(16px,1.7vw,18.5px);line-height:1.5; letter-spacing:-.012em;color:var(--ink);margin:0;padding:0;border:0} .rev-who{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2)} .rev-name{display:block;font-size:13.5px;font-weight:800;color:var(--ink)} .rev-role{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:2px} .rev-stars{display:block;color:var(--gold);font-size:15px;letter-spacing:.14em;line-height:1;margin-bottom:2px} .rev-src{display:block;font-size:11.5px;color:var(--ink-mute);margin-top:4px} /* One review runs to three paragraphs and another to a single line. Clamping keeps the row of cards even without touching a word the reviewer wrote — the full text stays in the DOM for anyone reading the page with a screen reader or a crawler, and the button underneath goes to the original. Only the long one is ever clipped. */ .rev-body{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden} @media (max-width:680px){ .rev-body{-webkit-line-clamp:14} } /* Google reviews card. This is the half of #reviews that always renders, so it is designed for the empty-rail state first: on its own under the centred heading it has to read as a finished invitation, not as the leftovers of a section whose content failed to load. Hence the centred .inv-card treatment — white, gold hairline, gold-tinted shadow — which the page already uses for a standalone panel, at a width that does not look stranded. It is GOLD AND CREAM, not blue-red-yellow-green, and it reproduces no Google logo or wordmark: naming a destination in plain text is nominative use and needs nobody's brand permission, while pasting the mark on our own page borrows its authority and drags in Google's brand rules. There is also no star, filled or otherwise — every star on a reviews block reads as a rating, and we hold no rating data. */ .gbox{max-width:720px;margin:0 auto;text-align:center;background:var(--white); border:1px solid var(--gold-2);border-radius:var(--r-lg); padding:clamp(24px,3.4vw,38px) clamp(20px,3vw,38px); box-shadow:0 24px 60px rgba(168,132,47,.12)} .gbox.after-rail{margin-top:clamp(26px,3.4vw,42px)} .gbox h3{font-size:clamp(21px,2.5vw,28px);color:var(--ink)} .gbox p{color:var(--ink-soft);font-size:15px;margin:12px auto 22px;max-width:40em} .gbox .g-actions{display:flex;gap:13px;flex-wrap:wrap;justify-content:center} .inv-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:center} .inv-card{background:var(--white);border:1px solid var(--gold-2);border-radius:var(--r-lg);padding:30px 30px 38px; box-shadow:0 24px 60px rgba(168,132,47,.12)} .inv-img{width:100%;height:210px;object-fit:cover;border-radius:var(--r-sm);margin-bottom:24px;border:1px solid var(--line-2)} .inv-card h3{color:var(--gold);font-size:27px;margin-bottom:14px} .inv-card p{color:var(--ink-soft);font-size:15px} .inv-card .en{border-left:2px solid var(--gold);padding-left:18px;margin-top:18px;font-size:14px;color:var(--ink-soft)} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .chip{font-size:12.5px;background:var(--cream-2);border:1px solid var(--line-2);padding:9px 16px;border-radius:40px; font-weight:600;color:var(--ink-soft)} .cta-band{padding:0} .cta-stage{position:relative;display:flex;align-items:center;min-height:clamp(400px,44vw,540px); background:#efe7d6 url('brand/bg-cta-wide.jpg') center/cover no-repeat} .cta-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,243,233,.1) 0%,rgba(248,243,233,0) 26%, rgba(248,243,233,.52) 66%,rgba(248,243,233,.86) 100%)} .cta-inner{position:relative;z-index:2;width:100%} .cta-text{margin-left:auto;max-width:440px} .cta-text h2{font-size:clamp(28px,4.2vw,50px);color:var(--ink);margin:14px 0 14px;line-height:1.06} .cta-text p{color:var(--ink-soft);font-size:16px;margin-bottom:24px} .cta-actions{display:flex;gap:13px;flex-wrap:wrap} /* contact */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,54px)} .form-group{margin-bottom:15px} .form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 16px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--white);font-family:var(--sans);font-size:15px;color:var(--ink); transition:border-color .2s,box-shadow .2s} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(194,161,78,.16)} .form-group textarea{resize:vertical;min-height:110px} .cinfo p{margin-bottom:18px;font-size:16px} .cinfo .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;font-weight:800; margin-bottom:2px} /* Opening hours: day range left, time right, one hairline per row — the same quiet two-column read as the spec rows elsewhere. Capped in width so the two columns stay close enough to scan on a wide screen, and tabular figures so 09:00 and 10:00 line up under each other. */ /* No width cap: every other row in this column runs the full width, and capping the hours at 340px stopped their hairline rules 221px short of the address line directly above. */ .cinfo .hrs{display:block} .cinfo .hrs-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:4px 0;border-bottom:1px solid var(--line-2);line-height:1.5} .cinfo .hrs-row:last-child{border-bottom:0} .cinfo .hrs-row b{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} .map{margin-top:20px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative; padding-bottom:56%;height:0} .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ========================================================================== LISTINGS PAGE ========================================================================== */ .page-head{background:var(--cream-2);border-bottom:1px solid var(--line-2);padding:clamp(30px,4.4vw,52px) 0 clamp(44px,5vw,64px)} .page-head h1{font-size:clamp(30px,5vw,56px);margin:14px 0 10px} .page-head p{color:var(--ink-soft);font-size:16px;max-width:48em} .crumbs{font-size:12.5px;color:var(--ink-mute);letter-spacing:.02em} .crumbs a{color:var(--ink-soft)} .crumbs a:hover{color:var(--gold)} .crumbs .sep{margin:0 7px;opacity:.5} .filters{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:16px; margin:-34px auto 26px;position:relative;z-index:5;box-shadow:var(--shadow-m)} .filters .row-1{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .filters .search{flex:1;min-width:230px;position:relative} .filters .search input{width:100%;padding:13px 15px 13px 42px;border:1px solid var(--line);border-radius:44px; background:var(--cream);font-size:14.5px;transition:border-color .2s,box-shadow .2s,background .2s} .filters .search input:focus{outline:none;background:var(--white);border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(194,161,78,.16)} .filters .search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);opacity:.45;pointer-events:none} .filters form{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:10px;align-items:end} .fg{display:flex;flex-direction:column;gap:5px;min-width:0} .fg label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:800} .fg select,.fg input{padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white); font-family:var(--sans);font-size:14px;color:var(--ink);width:100%;transition:border-color .2s} .fg select:focus,.fg input:focus{outline:none;border-color:var(--gold-2)} .fg-actions{display:flex;gap:8px;align-items:flex-end} .chip-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .chip-toggle{font-size:13px;font-weight:700;padding:9px 17px;border-radius:40px;border:1px solid var(--line); background:var(--white);color:var(--ink-soft);cursor:pointer;transition:all .22s;white-space:nowrap;display:inline-flex;gap:6px;align-items:center} .chip-toggle:hover{border-color:var(--gold-2);color:var(--ink)} .chip-toggle.active{background:var(--gold);color:#fff;border-color:var(--gold)} .chip-toggle .n{font-size:11.5px;opacity:.7;font-weight:600} .chip-toggle.active .n{opacity:.85} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 22px;flex-wrap:wrap} .toolbar .count{font-size:14px;color:var(--ink-soft)} .toolbar .count b{color:var(--ink);font-weight:800} .toolbar .sortwrap{display:flex;align-items:center;gap:9px} .toolbar .sortwrap label{font-size:12.5px;color:var(--ink-soft)} .toolbar select{padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white); font-family:inherit;font-size:14px} .active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .active-filters .af{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;background:var(--cream-2); border:1px solid var(--line-2);border-radius:40px;padding:7px 12px;color:var(--ink-soft)} .active-filters .af a{color:var(--ink-mute);font-weight:800;line-height:1} .active-filters .af a:hover{color:var(--gold)} .pager{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap} .pager a,.pager span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-sm);border:1px solid var(--line);background:var(--white);font-weight:700;font-size:14px;color:var(--ink-soft)} .pager a:hover{border-color:var(--gold);color:var(--gold)} .pager .cur{background:var(--gold);color:#fff;border-color:var(--gold)} .empty{text-align:center;padding:70px 20px;color:var(--ink-soft);background:var(--white);border:1px dashed var(--line); border-radius:var(--r-lg)} .empty h3{font-size:24px;color:var(--ink);margin-bottom:10px} .empty p{max-width:34em;margin:0 auto} /* ========================================================================== PROPERTY DETAIL ========================================================================== */ .detail{padding:26px 0 clamp(56px,7vw,88px)} .preview-flag{background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.3);border-left:3px solid #c0392b; border-radius:var(--r-sm);padding:12px 16px;margin-bottom:18px;font-size:14px;color:#8e2a1f} .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px; height:clamp(340px,50vw,560px);border-radius:var(--r-lg);overflow:hidden;position:relative} .gallery .g0{grid-row:1/3;grid-column:1} .gallery figure{position:relative;overflow:hidden;background:var(--cream-2);cursor:zoom-in;margin:0} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .gallery figure:hover img{transform:scale(1.05)} .gallery .more{position:absolute;inset:0;background:rgba(24,20,14,.55);color:#fff;display:flex;align-items:center; justify-content:center;font-weight:700;font-size:17px;letter-spacing:.02em;backdrop-filter:blur(1px)} .gallery-all{position:absolute;right:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:8px; background:rgba(248,243,233,.95);color:var(--ink);border:none;border-radius:40px;padding:11px 18px;font-size:13px; font-weight:700;cursor:pointer;box-shadow:var(--shadow-m);transition:transform .2s,background .2s} .gallery-all:hover{transform:translateY(-2px);background:#fff} .det-grid{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:clamp(26px,3.6vw,46px);margin-top:32px} .det-main h1{font-size:clamp(26px,3.8vw,44px);margin:10px 0 8px} .det-loc{color:var(--ink-soft);font-size:15.5px;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .det-head-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px} .det-head-badges .badge{position:static} .invest-note{margin:20px 0 0;background:linear-gradient(100deg,rgba(168,132,47,.09),rgba(168,132,47,.03)); border:1px solid rgba(168,132,47,.26);border-left:3px solid var(--gold);border-radius:var(--r-sm);padding:15px 18px; font-size:14.5px;color:var(--ink);display:flex;gap:12px;align-items:flex-start} .invest-note svg{flex:none;color:var(--gold);margin-top:2px} .spectiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 0} .spectile{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:17px 12px;text-align:center} .spectile .v{font-family:var(--display);font-size:25px;color:var(--ink);font-weight:600;line-height:1.1} .spectile .l{font-size:11.5px;color:var(--ink-soft);margin-top:4px;letter-spacing:.03em} .sec-block{margin-top:38px} .sec-block h2{font-size:clamp(21px,2.4vw,26px);margin-bottom:16px} .sec-block .body{font-size:15.5px;color:var(--ink-soft);white-space:pre-line;max-width:64ch} .spec-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px} .spec-list .row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14.5px} .spec-list .row span:first-child{color:var(--ink-soft)} .spec-list .row span:last-child{font-weight:700;text-align:right} .feat-groups{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px} .feat-group h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-family:var(--sans); font-weight:800;margin-bottom:11px;line-height:1.4} .feat-list{display:flex;flex-wrap:wrap;gap:8px} .feat-list .f{font-size:13px;background:var(--white);border:1px solid var(--line-2);padding:8px 14px;border-radius:40px; font-weight:600;display:inline-flex;gap:7px;align-items:center;color:var(--ink-soft)} .feat-list .f::before{content:"✓";color:var(--gold);font-weight:800} .aside{position:sticky;top:calc(var(--head-h) + 18px);align-self:start} .aside .card{background:var(--white);border:1px solid var(--gold-2);border-radius:var(--r-lg);padding:24px; box-shadow:0 20px 50px rgba(168,132,47,.12)} .aside .price{font-family:var(--display);font-size:clamp(28px,3.4vw,34px);color:var(--gold);font-weight:600;line-height:1.1} .aside .price-2{font-size:15px;color:var(--ink-soft);font-weight:600;margin-top:4px} .aside .price-2 b{color:var(--ink)} .aside .ref{font-size:12.5px;color:var(--ink-mute);margin:8px 0 18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .aside .ref .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-mute);display:inline-block} .aside .actions{display:flex;flex-direction:column;gap:10px} .aside .ctc{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);font-size:14px;color:var(--ink-soft)} .aside .ctc b{color:var(--ink)} .aside h3{font-size:20px;margin-bottom:8px} .fld{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white); font-family:var(--sans);font-size:14px;color:var(--ink);width:100%;transition:border-color .2s,box-shadow .2s} .fld:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(194,161,78,.16)} .form-ok{color:#2e7d32;font-size:14px;margin-bottom:14px;background:rgba(46,125,50,.07);border:1px solid rgba(46,125,50,.25); border-radius:8px;padding:11px 14px} .form-err{color:#c0392b;font-size:14px;margin-bottom:14px;background:rgba(192,57,43,.06);border:1px solid rgba(192,57,43,.25); border-radius:8px;padding:11px 14px} /* lightbox */ .lbox{position:fixed;inset:0;z-index:9999;background:rgba(18,15,10,.96);display:none;align-items:center; justify-content:center;flex-direction:column;padding:60px 16px 108px} .lbox.open{display:flex} .lbox img{max-width:94vw;max-height:calc(100vh - 190px);object-fit:contain;border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5)} .lbox .nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%; background:rgba(255,255,255,.13);color:#fff;border:none;font-size:24px;cursor:pointer;transition:background .2s} .lbox .nav:hover{background:rgba(255,255,255,.24)} .lbox .prev{left:16px}.lbox .next{right:16px} .lbox .x{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.13);border:none;color:#fff;font-size:26px; cursor:pointer;width:46px;height:46px;border-radius:50%;line-height:1;transition:background .2s} .lbox .x:hover{background:rgba(255,255,255,.24)} .lbox .cap{color:rgba(255,255,255,.82);margin-top:12px;font-size:14px;text-align:center;max-width:60ch} .lbox .cnt{position:absolute;top:22px;left:22px;color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.08em;font-weight:700} .lbox .strip{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:14px 16px;overflow-x:auto; background:linear-gradient(to top,rgba(0,0,0,.55),transparent);scrollbar-width:thin} .lbox .strip img{width:78px;height:56px;object-fit:cover;border-radius:6px;opacity:.5;cursor:pointer;flex:none; border:2px solid transparent;transition:opacity .2s,border-color .2s;max-height:none;box-shadow:none} .lbox .strip img:hover{opacity:.85} .lbox .strip img.on{opacity:1;border-color:var(--gold)} /* ========================================================================== FOOTER + floats ========================================================================== */ .site-footer{background:var(--espresso);color:#C9BFA6;padding:60px 0 26px;margin-top:0} .site-footer img{height:56px;margin-bottom:18px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.09)} .foot-grid h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft); margin-bottom:14px;font-weight:800} .foot-grid a{display:block;font-size:14px;padding:5px 0;color:#C9BFA6;transition:color .2s} .foot-grid a:hover{color:var(--gold-soft)} .foot-grid p{font-size:14px;max-width:32em} .foot-bot{display:flex;justify-content:space-between;padding-top:22px;font-size:12.5px;flex-wrap:wrap;gap:10px;color:#9D9479} .foot-bot .credit{display:inline-flex;gap:6px;align-items:center} .foot-bot a{color:var(--gold-soft)} .wa-float,.wa{position:fixed;right:20px;bottom:20px;z-index:150;width:56px;height:56px;border-radius:50%;background:#25D366; display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.22);color:#fff; transition:transform .25s var(--ease)} .wa-float:hover,.wa:hover{transform:scale(1.08)} .totop{position:fixed;right:22px;bottom:88px;z-index:150;width:46px;height:46px;border-radius:50%;background:var(--gold); color:#fff;border:none;cursor:pointer;font-size:19px;opacity:0;pointer-events:none;transition:opacity .3s,transform .25s} .totop.show{opacity:1;pointer-events:auto} .totop:hover{transform:translateY(-3px)} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (min-width:769px){ .menu-toggle{display:none} .nav-desktop{display:flex;gap:clamp(18px,2.2vw,30px)} .nav-mobile,.nav-scrim{display:none!important} } @media (max-width:1100px){ .filters form{grid-template-columns:repeat(3,1fr)} .foot-grid{grid-template-columns:1.4fr 1fr 1fr} .prop-grid.four{grid-template-columns:repeat(2,1fr)} } @media (max-width:1024px){ .grid,.prop-grid{grid-template-columns:repeat(2,1fr)} .flow{grid-template-columns:repeat(3,1fr)} .svc-grid{grid-template-columns:repeat(2,1fr)} .det-grid{grid-template-columns:1fr} .aside{position:static} .aside .card{max-width:560px} } @media (max-width:900px){ .gallery{grid-template-columns:1fr 1fr;grid-template-rows:1.2fr 1fr;height:clamp(320px,62vw,460px)} .gallery .g0{grid-column:1/3;grid-row:1} .gallery figure:nth-child(n+4){display:none} .inv-grid,.contact-grid{grid-template-columns:1fr} .ba-shell{grid-template-columns:1fr} /* The cap moved from the image to the whole left column, so the view pills and the drag hint stay under the photo instead of running the full width beside it. .ba-wrap is width:100% inside it, so the image is the same 400px it always was. */ /* width:100% is load-bearing. Without it the flex column shrink-wraps its widest child, so the photo was 312px on the project that has view pills and 287.7px on the three that do not — the image visibly resized and shifted 12px sideways on every project switch. */ .ba-left{max-width:400px;width:100%;margin:0 auto} .sig-grid{grid-template-columns:1fr;grid-template-rows:none;height:auto} .sig-card{height:230px}.sig-card.tall{height:300px;grid-row:auto} .stats-grid{grid-template-columns:1fr;gap:30px} .cta-stage{min-height:520px;background-position:72% center} .cta-ov{background:linear-gradient(180deg,rgba(248,243,233,.1) 0%,rgba(248,243,233,.36) 44%,rgba(248,243,233,.88) 100%)} .cta-text{margin:0 auto;text-align:center;max-width:520px} .cta-actions{justify-content:center} .feat-groups{grid-template-columns:1fr} } @media (max-width:680px){ .grid,.prop-grid,.prop-grid.four{grid-template-columns:1fr} .flow{grid-template-columns:1fr 1fr} .svc-grid{grid-template-columns:1fr} .filters{margin-top:-26px;padding:14px} .filters form{grid-template-columns:1fr 1fr} .spectiles{grid-template-columns:1fr 1fr} .spec-list{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr;gap:26px} .hero-stage{height:min(84vh,760px)} .hr-logo{width:min(240px,58vw)} .hr-line{margin-top:16px} .hr-tag{font-size:15px;margin-top:10px} .hero-content .wrap{text-align:center} .hero-content .eyebrow{justify-content:center} .hero-content p.lead{margin-left:auto;margin-right:auto} .hero-cta{justify-content:center} .hero-cta .btn{flex:1 1 auto;min-width:0;padding-left:18px;padding-right:18px;font-size:13.5px} .hero-stats{justify-content:center;gap:24px} /* Σε column flex το cross-size της γραμμής παίρνει το max-content του πλατύτερου παιδιού· τα nowrap κουμπιά των tabs το τέντωναν στα ~376px και κόβονταν κάτω από 390px. min-width:0 λύνει το τέντωμα, και τα tabs κυλούν οριζόντια μέσα στο πλαίσιό τους αντί να ξεχειλίζουν από τη σελίδα. */ .propsec .sec-top{flex-direction:column;align-items:stretch;min-width:0} .propsec .sec-top > *{min-width:0;max-width:100%} .deal-tabs{overflow-x:auto;justify-content:flex-start;max-width:100%; scrollbar-width:none;-ms-overflow-style:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)} .deal-tabs::-webkit-scrollbar{display:none} .deal-tabs a,.deal-tabs button{flex:none} .toolbar{gap:10px} .lbox{padding:56px 8px 96px} .lbox .strip img{width:64px;height:46px} .gallery{grid-template-columns:1fr;grid-template-rows:none;height:auto} .gallery .g0{grid-column:1;grid-row:auto} .gallery figure{aspect-ratio:4/3} .gallery figure:nth-child(n+3){display:none} .gallery-all{right:10px;bottom:10px} } @media (max-width:680px){ /* one testimonial at a time, swiped — scroll-snap only, no JS. The scrollbar is hidden the same way .deal-tabs hides it, so the two rails on this page behave identically. align-items:flex-start is a BUG FIX, reported from an iPhone and shared by all three languages — see the declared-shared-change note at the foot of this file. A flex row stretches its items to the tallest one, and one of the reviews runs to three paragraphs, so every card was as tall as that one. .rev-who then pins itself to the bottom with margin-top:auto, and a two-line quote was followed by a wall of white before the reviewer's name. Measured at 390px, both engines, before the fix: all three cards 541.1px; the shortest needed 251.1px, so 290px of it was empty and the gap between the last line of the quote and the name was 301px. In EL, EN and HE alike. Equal heights are right on the DESKTOP grid, where three cards stand side by side and their baselines have to agree — that is what margin-top:auto is for, and it is untouched. In a horizontal snap row you see one card at a time; there is nothing to line up with, so a card that stops where its text stops is the honest shape, and a short review reads as short rather than as broken. No word is clipped that was not clipped before: the -webkit-line-clamp above is unchanged. */ .rev-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px; scrollbar-width:none;-ms-overflow-style:none;align-items:flex-start} .rev-rail::-webkit-scrollbar{display:none} .rev{flex:0 0 min(86%,340px);scroll-snap-align:center} } @media (max-width:560px){ /* below this the 120px portrait column leaves the bio too narrow to read */ .tcard{grid-template-columns:1fr} .tphoto{max-width:150px} } @media (max-width:420px){ .flow{grid-template-columns:1fr} .spectiles{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important; scroll-behavior:auto!important} .js [data-reveal]{opacity:1;transform:none} .hero-reveal,.hr-inner,.hr-line,.hr-tag{transition:none!important;transform:none!important} .pcard:hover{transform:none} } @media print{ .site-header,.nav-mobile,.wa,.wa-float,.totop,.filters,.pager,.lbox,#preloader{display:none!important} body{background:#fff} } /* ========================================================================== HEBREW / RTL — appended block (Israeli paid campaign, 09/2026) EVERYTHING below is scoped to html[dir="rtl"] and NOTHING above this line was touched: Greek and English render byte-identically to the signed-off site, and this whole block is inert until dir="rtl" is set — by setLang('he') in assets/site.js, or server-side by header.php for a ?lang=he ad landing. Rewriting the rules above into logical properties (inset-inline-start, margin-inline-start, …) would be the modern answer and would need no override block at all. It is not available here: every one of those edits changes a rule the two working languages already depend on. An append-only override block is the only shape that leaves them provably untouched. Where a rule below sets a property that a MEDIA QUERY further up also sets, the media query is restated inside this block — an appended selector carrying [dir="rtl"] outranks it everywhere, including inside the query, so the mobile behaviour has to be re-declared or it would be silently lost in Hebrew. ========================================================================== */ /* --- keystone: the two families the entire stylesheet is built on --------- Fraunces and Manrope ship no Hebrew glyphs, so without this the browser falls back per character to whatever the OS happens to have — a different, unchosen typeface on every device, next to Latin runs still set in Fraunces. It reads as a fault, not as a foreign language. Redefining the two custom properties on the root redirects every var(--display) / var(--sans) reference in the file at once, which is why the override block is affordable at all. Frank Ruhl Libre is the Hebrew book and newspaper serif (Frank-Ruehl, 1908) and the only Hebrew serif on Google Fonts with a real 300–900 variable axis — so the kinetic hero morph in site.js (font-weight 340 → 760) survives the language change unmodified. Assistant matches Manrope's register (humanist, low contrast, open counters) and its Latin companion sits inside Hebrew sentences without a seam, which matters on a page carrying Latin constantly: AA-1002, Airbnb, WhatsApp, the euro prices, m2. Every fallback carries Hebrew, so the pre-swap paint under display=swap is Hebrew-shaped rather than tofu. */ html[dir="rtl"]{ --display:'Frank Ruhl Libre','Frank Ruehl CLM','Times New Roman',serif; --sans:'Assistant','Segoe UI','Arial Hebrew',Arial,sans-serif; } /* --- chrome: desktop nav underline --------------------------------------- The underline grows from the edge the line starts at, so in RTL it is pinned right and animates its LEFT edge inwards. */ html[dir="rtl"] .nav-desktop a::after{left:100%;right:0;transition:left .3s var(--ease)} html[dir="rtl"] .nav-desktop a:hover::after, html[dir="rtl"] .nav-desktop a.active::after{left:0;right:0} /* --- chrome: the mobile drawer comes in from the right -------------------- The panel, its hairline, the shadow it throws over the page and the direction it slides from all mirror together. `.nav-mobile.open` and `.nav-mobile.open a` have to be restated: this block's selectors outrank them, so without those two lines the drawer would "open" by staying off-screen. The scrim is inset:0 and the focus trap is DOM-order, so neither needs a rule; the close button rides .nav-m-head's space-between and swaps sides on its own. */ html[dir="rtl"] .nav-mobile{left:auto;right:0;border-right:0; border-left:1px solid var(--line-2);box-shadow:-22px 0 60px rgba(24,20,14,.22); transform:translateX(102%)} html[dir="rtl"] .nav-mobile.open{transform:none} html[dir="rtl"] .nav-mobile a{transform:translateX(16px)} html[dir="rtl"] .nav-mobile.open a{transform:none} /* --- the gold heading underline ------------------------------------------ Anchored to the right so it draws leftwards, with the gradient turned to match. The centred variant needs its own rule: left:50% and right:0 together are over-constrained, and in an RTL containing block it is `left` that is ignored, so every centred underline would have jumped to the right edge. */ html[dir="rtl"] h2.draw::after, html[dir="rtl"] h3.draw::after{left:auto;right:0; background:linear-gradient(270deg,var(--gold),var(--gold-2))} html[dir="rtl"] .sec-head.center h2.draw::after{left:auto;right:50%;transform:translateX(50%)} /* --- the eyebrow needs its own line in Hebrew ---------------------------- h2.draw is display:inline-block so the gold underline above can be 70px of the HEADING rather than of the container. .eyebrow is display:inline-flex. Two inline-level boxes share a line whenever there is room for both — and in Greek and English there never is, because every headline on this page is long enough to fill the first line on its own. That is a coincidence of sentence length, not a rule, and it is the load-bearing assumption here. Hebrew is about 30% more compact at the same information, so the headlines stop filling the line and the eyebrow rides up beside the H2. Measured, both engines: at 1440 it happens in #properties, #flow, #works, #services and #signature; at 390 in #flow, #services, #signature, #investors and #contact. The fix is the one this stylesheet already uses at line ~405 for #team and #reviews, whose headings are short in every language: give the eyebrow its own block. display:flex rather than block, because the 26px gold hairline is an ::before with flex:none — on a non-flex parent it is an inline box, and width/height do not apply to one, so the hairline would silently vanish. The #team / #reviews rule stays authoritative for those two: an id selector outranks this, and there the eyebrow is display:block with the hairline already switched off. Centred heads need the second line: a block-level flex box no longer inherits the centring that text-align gives an inline one. */ html[dir="rtl"] .sec-head .eyebrow{display:flex} html[dir="rtl"] .sec-head.center .eyebrow{justify-content:center} /* --- marquee ------------------------------------------------------------- The separator sits after the phrase in reading order, so it moves to the other side. The band's travel is mirrored in site.js, not here: its position is a transform written inline every frame. */ html[dir="rtl"] .marq-track span::after{margin-left:0;margin-right:44px} /* --- property card -------------------------------------------------------- */ html[dir="rtl"] .badge.count{right:auto;left:13px} html[dir="rtl"] .pcard .price-tag{left:auto;right:13px} html[dir="rtl"] .deal-tabs .n{margin-left:0;margin-right:4px} /* --- home sections -------------------------------------------------------- */ html[dir="rtl"] .fcard::before{right:auto;left:6px} /* the ghost numeral */ html[dir="rtl"] .svc li{padding:6px 18px 6px 0} html[dir="rtl"] .svc li::before{left:auto;right:0} /* the gold diamond */ html[dir="rtl"] .works-film figcaption{left:auto;right:clamp(18px,3vw,34px)} html[dir="rtl"] .sig-card figcaption{left:auto;right:16px} html[dir="rtl"] .sig-badge{right:auto;left:14px} /* --- before / after ------------------------------------------------------ The panel tells a story — this was the state, this is the result — so it runs with the reading direction: BEFORE first, AFTER second. That means the two tags swap sides in Hebrew, and the clip has to swap with them or the panel would label the after photo "before", which is worse than not translating it at all. The clip itself cannot be done here: clip-path insets are physical edges and site.js writes them inline, so it branches there. This is only the resting state the stylesheet paints before the first paint(). */ html[dir="rtl"] .ba-after-img{clip-path:inset(0 50% 0 0)} html[dir="rtl"] .ba-tag.b{left:auto;right:16px} html[dir="rtl"] .ba-tag.a{right:auto;left:16px} html[dir="rtl"] .ba-incl .items span{border-left:1px solid var(--line-2); border-right:2px solid var(--gold-soft)} /* --- investors + CTA band ------------------------------------------------ The cream fade in .cta-ov has to land under the text, and the text has moved to the other side, so the gradient turns with it. Both mobile restatements below exist because this block outranks the 900px query. */ html[dir="rtl"] .inv-card .en{border-left:0;border-right:2px solid var(--gold); padding-left:0;padding-right:18px} html[dir="rtl"] .cta-text{margin-left:0;margin-right:auto} html[dir="rtl"] .cta-ov{background:linear-gradient(270deg,rgba(248,243,233,.1) 0%,rgba(248,243,233,0) 26%, rgba(248,243,233,.52) 66%,rgba(248,243,233,.86) 100%)} /* The PHOTOGRAPH has to mirror too, and background-position cannot do it. bg-cta-wide.jpg is a composed frame, not a texture: the armchairs, the coffee table, the olive branch, the window and the bust occupy the left third, and the right two thirds are an empty cream wall left there for the copy to sit on. .cta-text{margin-left:auto} puts the copy over that wall in LTR. Mirrored, the copy lands on the furniture and the empty wall is left bare — the composition reads backwards, which is what a Hebrew reader was getting on the desktop band. Sliding the crop cannot fix it. Measured at 1440: the stage is 540px tall, the file is 2560×905, and cover scales it to 1527.5px wide — 87.5px of horizontal slack in total, so the extremes of background-position are ±43.75px from centre. The wall is roughly 1000px away. The image itself must flip. Done on a ::before rather than on .cta-stage because a transform on the stage would take .cta-ov and every word of the copy with it. The pseudo-element is absolutely positioned, so it is not a flex item of the stage, and it paints below .cta-ov and .cta-inner: all three are positioned, ::before is first in tree order, and .cta-inner holds z-index:2. The stage keeps its #efe7d6 background COLOUR, so a slow image still fades in over the same warm ground. Below 900px the copy is centred and the overlay is a vertical fade, so the crop is atmosphere rather than composition — but the mirror still applies. The position is restated on the pseudo-element (the stage no longer carries the image) and it is the SAME 72% the LTR rule uses, not the 28% that used to be here: on a flipped layer, choosing the same region puts the furniture at the opposite edge, which is what mirroring that rule actually means. */ html[dir="rtl"] .cta-stage{background-image:none} html[dir="rtl"] .cta-stage::before{content:"";position:absolute;inset:0;z-index:0; background:url('brand/bg-cta-wide.jpg') center/cover no-repeat; transform:scaleX(-1)} @media (max-width:900px){ html[dir="rtl"] .cta-stage::before{background-position:72% center} html[dir="rtl"] .cta-ov{background:linear-gradient(180deg,rgba(248,243,233,.1) 0%,rgba(248,243,233,.36) 44%,rgba(248,243,233,.88) 100%)} html[dir="rtl"] .cta-text{margin:0 auto} } /* --- listings page -------------------------------------------------------- */ html[dir="rtl"] .filters .search input{padding:13px 42px 13px 15px} html[dir="rtl"] .filters .search svg{left:auto;right:15px} @media (max-width:680px){ /* the rail overflows towards the left in RTL, so the scroll-fade moves with it */ html[dir="rtl"] .deal-tabs{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(270deg,#000 calc(100% - 22px),transparent)} } /* --- property detail ------------------------------------------------------ */ html[dir="rtl"] .preview-flag{border-left:1px solid rgba(192,57,43,.3);border-right:3px solid #c0392b} html[dir="rtl"] .invest-note{border-left:1px solid rgba(168,132,47,.26);border-right:3px solid var(--gold)} /* the flex row flipped its two columns on its own; only the value's own text alignment was still pointing at the old edge */ html[dir="rtl"] .spec-list .row span:last-child{text-align:left} html[dir="rtl"] .gallery-all{right:auto;left:14px} @media (max-width:680px){ html[dir="rtl"] .gallery-all{right:auto;left:10px} } /* --- lightbox ------------------------------------------------------------ The chevrons swap: in an RTL interface "next" is to the left, and a reader who presses the left chevron expects to advance. site.js mirrors the arrow keys and the swipe to match, so the three ways of stepping the gallery agree. DO NOT add a transform to flip the glyphs. The buttons hold U+2039 and U+203A, which carry the Unicode Bidi_Mirrored property, so the browser already draws them the other way round inside an RTL paragraph — verified in both engines: "›" under dir="rtl" is pixel-for-pixel the "‹" of dir="ltr". Mirroring them in CSS as well would cancel that out and point both arrows the wrong way. */ html[dir="rtl"] .lbox .prev{left:auto;right:16px} html[dir="rtl"] .lbox .next{right:auto;left:16px} html[dir="rtl"] .lbox .x{right:auto;left:18px} html[dir="rtl"] .lbox .cnt{left:auto;right:22px} /* --- floating controls --------------------------------------------------- Conventional mirroring: both sit at the trailing edge of the reading flow. */ html[dir="rtl"] .wa-float,html[dir="rtl"] .wa{right:auto;left:20px} html[dir="rtl"] .totop{right:auto;left:22px} /* ========================================================================== HEBREW TYPOGRAPHY ========================================================================== */ /* --- tracking ------------------------------------------------------------ Hebrew is unicase, so text-transform:uppercase is a harmless no-op on Hebrew letters and is deliberately LEFT IN PLACE — it keeps the Latin words inside these labels (Airbnb, WhatsApp, EN) looking the way the design intends. It is the TRACKING that breaks Hebrew: 0.1em–0.3em between Hebrew letters destroys the word cluster the reader recognises, because Hebrew has almost no ascenders or descenders to hold a word's shape together once the letters separate. .rev-stars keeps its tracking — those are star glyphs, not letters. */ html[dir="rtl"] .eyebrow, html[dir="rtl"] .hero-stats span, html[dir="rtl"] .badge, html[dir="rtl"] .pcard .ref, html[dir="rtl"] .works-film .wf-eyebrow, html[dir="rtl"] .ba-tag, html[dir="rtl"] .bam .l, html[dir="rtl"] .ba-side .ba-goal .l, html[dir="rtl"] .ba-incl .l, html[dir="rtl"] .trole, html[dir="rtl"] .cinfo .lbl, html[dir="rtl"] .fg label, html[dir="rtl"] .feat-group h3, html[dir="rtl"] .foot-grid h4, html[dir="rtl"] .lang-btn, html[dir="rtl"] .btn, html[dir="rtl"] .crumbs, html[dir="rtl"] .stat small, html[dir="rtl"] .spectile .l, html[dir="rtl"] .gallery .more{letter-spacing:normal} /* Negative tracking is worse than positive: it collides the vertical strokes Hebrew is almost entirely built from. */ html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4, html[dir="rtl"] .kinetic, html[dir="rtl"] .works-film strong, html[dir="rtl"] .rev-body{letter-spacing:normal} /* --- line-height --------------------------------------------------------- Frank Ruhl Libre and Assistant sit taller than Fraunces and Manrope at the same px size, and the display settings here are tight enough (1.04, 0.92, 1.0) that the ascender of ל and the descenders of ק ן ף ץ touch the lines above and below. These are the only leadings raised, and only in Hebrew. */ html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{line-height:1.18} html[dir="rtl"] .kinetic{line-height:1.05} html[dir="rtl"] .hero-stats b, html[dir="rtl"] .stat span{line-height:1.15} html[dir="rtl"] .badge{line-height:1.25} html[dir="rtl"] .aside .price, html[dir="rtl"] .spectile .v, html[dir="rtl"] .works-film strong{line-height:1.2} /* --- italic -------------------------------------------------------------- Hebrew has no true italic. Asking for one makes the browser synthesise an oblique, which a native reader sees as a rendering fault rather than as emphasis. This is a REAL and unrecoverable design loss — .kinetic .l2 is the signature element of the hero — and it should be shown to the client rather than hidden. What survives is what those rules already carry alongside the italic: .l2 keeps its gold and its 560 weight, .rev-body keeps the display face and the size step. */ html[dir="rtl"] .kinetic .l2, html[dir="rtl"] .hr-tag, html[dir="rtl"] .marq-track span, html[dir="rtl"] .works-film strong, html[dir="rtl"] .sig-card figcaption, html[dir="rtl"] .rev-body{font-style:normal} /* --- bidi isolation ------------------------------------------------------ The failure a CSS audit cannot see, because nothing in the stylesheet is wrong. The Unicode bidi algorithm resolves the NEUTRAL characters between two number runs — a space, an en dash, a slash — to the paragraph direction, so in an RTL paragraph the runs themselves are laid out right to left even though the digits inside each run stay in order. Measured on this site's own strings: +30 695 7541131 -> the three groups reorder: the number is displayed wrong 10:00 - 18:00 -> 18:00 - 10:00, i.e. the wrong opening hours 3 / 12 -> 12 / 3 direction:ltr + unicode-bidi:isolate makes each of these its own bidi paragraph so it lays out internally LTR, while the element itself stays positioned at the RTL inline start; text-align:right keeps it flush with the Hebrew around it. Presentational on purpose: config.php deliberately stores no translated twin for a time or a phone number, so there is nowhere else to fix this. Scope is deliberately narrow. Elements that merely CONTAIN a Latin code beside Hebrew — .aside .ref, .pcard .specs, the spec-list values — are each a single run, or separate flex boxes, and resolve correctly on their own; forcing LTR on them would reverse the order of the flex items and break what already works. .btn is excluded for the same reason: the call button holds an icon and a Hebrew label with no digits at all, and its icon belongs on the Hebrew side. The drawer's phone button is the one .btn that holds a bare number. */ html[dir="rtl"] a[href^="tel:"]:not(.btn), html[dir="rtl"] a[href^="mailto:"]:not(.btn), html[dir="rtl"] .nav-m-cta a[href^="tel:"], html[dir="rtl"] .cinfo .hrs-row b, html[dir="rtl"] .lbox .cnt{direction:ltr;unicode-bidi:isolate;text-align:right} /* A phone or an email typed into an RTL field is still an LTR string; aligning it to the inline start keeps it beside its own label. */ html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"]{direction:ltr;text-align:right} /* --- prose that may still be in English ----------------------------------- Hebrew falls back to English, and some prose is English on purpose: the customer reviews are quoted verbatim. An English paragraph inside an RTL page is not merely left-over — it renders WRONG. Its trailing punctuation resolves to the paragraph direction, so "Highly recommended!" paints as "!Highly recommended" and an ellipsis lands at the head of the line. unicode-bidi:plaintext gives each paragraph the direction of its own first strong character, exactly as dir="auto" would, so a Hebrew review stays RTL and an English one becomes a correct LTR paragraph without anything here having to know which language arrived. text-align:start then follows that per-paragraph direction rather than the page's. Deliberately limited to long-form prose and to the one line that is Latin in every language. It is NOT applied site-wide: a Hebrew sentence that opens with a Latin brand ("Airbnb ...") would be flipped whole, which is a worse failure than the one being fixed. Short single-run strings — a reviewer's name, a reference code — have no misplaced punctuation to fix and are correctly aligned to the Hebrew edge as they are. .foot-bot is here for the copyright line. "© 2026 AA Property Management Μονοπρόσωπη Ι.Κ.Ε." is Latin and Greek with a neutral at each end, so in an RTL paragraph the "© 2026" jumps to the far side and the full stop is stranded at the other: it painted as "AA Property Management Μονοπρόσωπη Ι.Κ.Ε 2026 ©". Its sibling, the AGENTHS credit, opens with Hebrew and stays RTL. */ html[dir="rtl"] .rev-body, html[dir="rtl"] .sec-block .body, html[dir="rtl"] .inv-card .en, html[dir="rtl"] .foot-bot > span{unicode-bidi:plaintext;text-align:start} /* ========================================================================== SHARED CHANGES — declared, not silent. Two rules in this file are NOT scoped to html[dir="rtl"] and therefore touch Greek and English. Both are written down where they live; this is the register. 1. `.rev-rail{align-items:flex-start}` inside the 680px query above. Not a Hebrew rule at all — the client reported it from an iPhone, and the measurements in the comment beside it show the same 290px of dead white space in EL, EN and HE. Fixing it in one language only would have meant shipping the reported bug back to the two that reported it. 2. The rule below. It exists because the header now carries a THIRD language button, and three buttons no longer fit under 390px. Measured on the real header, both engines: viewport before this rule after 390px slack +8.8 / +5.0 (HE) untouched — the query does not apply 375px slack -6.2, no overflow slack +18.7 360px HEADER OVERFLOWS 3px EL / 7px HE slack +3.7 / -3.0, overflow 0 320px overflows 43px overflows 18px 360px is a live device class (Galaxy A-series, iPhone 12/13 mini), so without this the hamburger is clipped off the edge of the screen in every language. It narrows the ΕΛ and EN buttons by about 7px each and ONLY below 390px; no colour, type size or vertical rhythm changes, and nothing at 390px or wider is affected — the pixel comparison at 390 and 1440 is unaffected by it. 320px still overflows. That is pre-existing (it overflowed by 12px with only two buttons) and fixing it properly means moving the language group into the drawer, which is a markup change and a bigger decision than this one. ========================================================================== */ @media (max-width:389px){ .lang{gap:0} .lang-btn{padding:5px 5px;letter-spacing:.02em} }