:root{ --navy:#1a1838; --navy-2:#272355; --accent:#8a6408; --accent-2:#e8c766; --gold:#d4a62a; --gold-hi:#efd27a; --ink:#1a2433; --muted:#5b6b7d; --line:#e8edf2; --bg:#f6f8fb; --white:#fff; --radius:16px; --shadow:0 10px 30px rgba(10,31,51,.08); --shadow-lg:0 24px 60px rgba(10,31,51,.14); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} img{max-width:100%} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;border:none;transition:.2s;white-space:nowrap} .btn-primary{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--navy)} .btn-primary:hover{background:linear-gradient(135deg,var(--gold),var(--gold-hi));transform:translateY(-2px);box-shadow:0 8px 20px rgba(184,134,11,.4)} .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)} .btn-ghost:hover{background:rgba(255,255,255,.2)} .btn-dark{background:var(--navy);color:#fff} .btn-dark:hover{background:var(--navy-2)} .eyebrow{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase} h1,h2,h3{line-height:1.15;letter-spacing:-.02em;color:var(--ink)} section{padding:84px 0} .center{text-align:center} .sec-head{max-width:640px;margin:0 auto 48px} .sec-head h2{font-size:38px;font-weight:800;margin:10px 0} .sec-head p{color:var(--muted);font-size:17px} /* NAV */ header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--navy)} .logo .mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--gold-hi),var(--gold));display:grid;place-items:center;color:var(--navy);font-size:20px} .nav-links{display:flex;gap:30px;font-weight:500;font-size:15px;color:var(--ink)} .nav-links a{padding:4px 0;border-bottom:2px solid transparent} .nav-links a:hover{color:var(--accent)} .nav-links a.active{color:var(--accent);border-color:var(--accent)} .nav-cta{display:flex;align-items:center;gap:14px} @media(max-width:980px){.nav-links{display:none}} /* PAGE HERO (inner) */ .phero{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff;padding:70px 0;position:relative;overflow:hidden} .phero::after{content:"";position:absolute;right:-100px;top:-100px;width:420px;height:420px;background:radial-gradient(circle,rgba(184,134,11,.25),transparent 65%);border-radius:50%} .phero .wrap{position:relative;z-index:2} .phero h1{color:#fff;font-size:44px;font-weight:800} .phero p{color:rgba(255,255,255,.8);font-size:18px;max-width:620px;margin-top:14px} .crumb{color:rgba(255,255,255,.6);font-size:14px;margin-bottom:14px} .crumb a:hover{color:#fff} /* HOME HERO */ .hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;overflow:hidden;padding:96px 0 120px} .hero::after{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(184,134,11,.25),transparent 65%);border-radius:50%} .hero .wrap{position:relative;z-index:2} .hero h1{color:#fff;font-size:54px;font-weight:800;max-width:760px} .hero h1 span{color:var(--accent-2)} .hero p{color:rgba(255,255,255,.8);font-size:19px;max-width:560px;margin:22px 0 36px} .search{background:#fff;border-radius:18px;padding:10px;display:flex;gap:8px;box-shadow:var(--shadow-lg);max-width:780px;flex-wrap:wrap} .search .field{flex:1;min-width:140px;padding:10px 16px;border-right:1px solid var(--line)} .search .field:last-of-type{border:none} .search .field label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .search .field .val{color:var(--ink);font-weight:600;font-size:15px;margin-top:2px} @media(max-width:700px){.hero h1{font-size:38px}.phero h1{font-size:32px}.search .field{border:none;border-bottom:1px solid var(--line)}} /* STATS */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:-56px;position:relative;z-index:5} .stat{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);text-align:center} .stat .n{font-size:34px;font-weight:800;color:var(--navy)} .stat .l{color:var(--muted);font-size:14px;font-weight:500;margin-top:4px} @media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}} /* CARDS */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.grid{grid-template-columns:1fr}} .card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s;border:1px solid var(--line)} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .card .img{height:210px;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat} .card .img.poster{aspect-ratio:4/5;height:auto;background-size:cover;background-position:center top;background-repeat:no-repeat;background-color:#fff} .card .tag{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px} .card .fav{position:absolute;top:14px;right:14px;width:34px;height:34px;background:rgba(255,255,255,.9);border-radius:50%;display:grid;place-items:center;font-size:16px} .card .body{padding:20px} .card .price{font-size:22px;font-weight:800;color:var(--navy)} .card .price small{font-size:14px;color:var(--muted);font-weight:500} .card h3{font-size:18px;margin:6px 0 4px} .card .loc{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:6px} .card .feats{display:flex;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:500} /* AREAS */ .area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:900px){.area-grid{grid-template-columns:repeat(2,1fr)}} .area{position:relative;height:170px;border-radius:var(--radius);overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;color:#fff;padding:18px;box-shadow:var(--shadow)} .area::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,31,51,.85),transparent)} .area span{position:relative;z-index:2;font-size:18px;font-weight:700} .area small{position:relative;z-index:2;display:block;font-weight:500;opacity:.85;font-size:13px} /* FEATURES */ .why{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:820px){.why{grid-template-columns:1fr}} .feature{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);border:1px solid var(--line)} .feature .ic{width:54px;height:54px;border-radius:14px;background:rgba(184,134,11,.1);color:var(--accent);display:grid;place-items:center;font-size:24px;margin-bottom:18px} .feature h3{font-size:19px;margin-bottom:8px} .feature p{color:var(--muted);font-size:15px} /* SPLIT */ .split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} @media(max-width:820px){.split{grid-template-columns:1fr;gap:30px}} .split h2{font-size:34px;font-weight:800;margin:10px 0 16px} .split p{color:var(--muted);font-size:16px;margin-bottom:14px} .split .media{height:380px;border-radius:20px;background:linear-gradient(135deg,#34506e,#1a2f47);box-shadow:var(--shadow-lg)} .ticks{list-style:none;margin-top:18px} .ticks li{padding:8px 0 8px 32px;position:relative;font-weight:500} .ticks li::before{content:"✓";position:absolute;left:0;width:22px;height:22px;background:var(--accent);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700} /* PARTNERS */ .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px} .logos .l{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 26px;font-weight:700;color:var(--navy);font-size:16px} /* CTA */ .cta{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:24px;padding:60px;text-align:center;box-shadow:var(--shadow-lg)} .cta h2{color:#fff;font-size:36px;font-weight:800} .cta p{opacity:.92;margin:12px 0 28px;font-size:18px} /* FORM */ .form-card{background:#fff;border-radius:20px;padding:36px;box-shadow:var(--shadow)} .form-card h3{font-size:24px;font-weight:800;margin-bottom:6px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:600px){.form-row{grid-template-columns:1fr}} .inp{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;margin-top:14px;background:var(--bg)} .inp:focus{border-color:var(--accent)} .contact-info{display:flex;flex-direction:column;gap:22px} .ci-item{display:flex;gap:16px;align-items:flex-start} .ci-item .ic{width:48px;height:48px;border-radius:12px;background:rgba(184,134,11,.1);color:var(--accent);display:grid;place-items:center;font-size:20px;flex:0 0 auto} .ci-item b{display:block;color:var(--ink);font-size:16px} .ci-item span{color:var(--muted);font-size:15px} /* FOOTER */ footer{background:var(--navy);color:rgba(255,255,255,.75);padding:64px 0 30px;margin-top:30px} .fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px} @media(max-width:820px){.fcols{grid-template-columns:1fr 1fr}} footer h4{color:#fff;font-size:16px;margin-bottom:16px} footer a{display:block;color:rgba(255,255,255,.7);margin-bottom:10px;font-size:14px} footer a:hover{color:var(--accent-2)} .fbrand .logo{color:#fff;margin-bottom:14px} .fbrand p{font-size:14px;max-width:300px} .fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:10px} .rera{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 14px;font-size:13px;color:#fff;display:inline-block} .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;justify-content:center} .chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer} .chip.on,.chip:hover{background:var(--navy);color:#fff;border-color:var(--navy)} /* real logo */ .logo img{height:50px;width:auto;display:block} .fbrand .logo img{height:56px} /* newsletter */ .news{display:flex;gap:10px;margin-top:14px;max-width:320px} .news input{flex:1;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:14px} .news input::placeholder{color:rgba(255,255,255,.5)} .news button{background:var(--accent);border:none;color:#fff;border-radius:10px;padding:0 18px;font-weight:700;cursor:pointer} /* callback strip */ .callback{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:34px;display:grid;grid-template-columns:1.2fr 2fr;gap:30px;align-items:center;margin-top:-40px;position:relative;z-index:6} @media(max-width:820px){.callback{grid-template-columns:1fr}} .callback h3{font-size:24px;font-weight:800} .callback p{color:var(--muted);font-size:15px;margin-top:6px} .cb-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px} @media(max-width:820px){.cb-form{grid-template-columns:1fr 1fr}} @media(max-width:520px){.cb-form{grid-template-columns:1fr}} .cb-form .inp{margin-top:0} .social{display:flex;gap:10px;margin-top:16px} .social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;font-size:16px;margin:0} .social a:hover{background:var(--accent)} /* ===== TOP BAR ===== */ .topbar{background:#06182b;color:rgba(255,255,255,.8);font-size:13.5px} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px} .topbar a{color:rgba(255,255,255,.8)}.topbar a:hover{color:#fff} .topbar .tb-left{display:flex;gap:22px} .topbar .tb-right{display:flex;gap:18px;align-items:center} @media(max-width:760px){.topbar .tb-left{gap:14px}.topbar .tb-left span:last-child{display:none}.topbar .tb-right a:not(.tb-add){display:none}} .tb-add{background:var(--accent);color:#fff!important;padding:5px 14px;border-radius:6px;font-weight:600} /* ===== MOBILE NAV ===== */ .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px} .burger span{width:26px;height:3px;background:var(--navy);border-radius:3px;transition:.2s} @media(max-width:980px){ .burger{display:flex} .mobile-menu{position:fixed;inset:0 0 0 auto;width:280px;background:#fff;box-shadow:-10px 0 40px rgba(0,0,0,.15);transform:translateX(100%);transition:.28s;z-index:120;padding:80px 28px 28px;display:flex;flex-direction:column;gap:6px} .mobile-menu.open{transform:translateX(0)} .mobile-menu a{padding:13px 0;font-weight:600;font-size:17px;border-bottom:1px solid var(--line)} .mobile-menu .btn{margin-top:16px;justify-content:center} .mm-close{position:absolute;top:22px;right:24px;font-size:28px;background:none;border:none;cursor:pointer;color:var(--navy)} .mm-overlay{position:fixed;inset:0;background:rgba(10,31,51,.5);z-index:110;opacity:0;pointer-events:none;transition:.28s} .mm-overlay.open{opacity:1;pointer-events:auto} } /* ===== CATEGORY TILES ===== */ .cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} @media(max-width:900px){.cats{grid-template-columns:repeat(3,1fr)}} @media(max-width:520px){.cats{grid-template-columns:repeat(2,1fr)}} .cat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 12px;text-align:center;transition:.2s;cursor:pointer} .cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)} .cat .ci{font-size:30px;margin-bottom:10px} .cat b{display:block;font-size:15px;color:var(--ink)} .cat small{color:var(--muted);font-size:13px} /* ===== DEVELOPERS ===== */ .devs{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} @media(max-width:900px){.devs{grid-template-columns:repeat(3,1fr)}} @media(max-width:520px){.devs{grid-template-columns:repeat(2,1fr)}} .dev{background:#fff;border:1px solid var(--line);border-radius:14px;height:96px;display:grid;place-items:center;padding:18px;transition:.2s} .dev:hover{box-shadow:var(--shadow)} .dev img{max-height:46px;max-width:100%;object-fit:contain} /* ===== BANNER (pre-launch) ===== */ .banner{border-radius:22px;overflow:hidden;position:relative;background-size:cover;background-position:center;min-height:300px;display:flex;align-items:center;color:#fff;box-shadow:var(--shadow-lg)} .banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,24,43,.9),rgba(6,24,43,.4))} .banner .bc{position:relative;z-index:2;padding:50px;max-width:560px} .banner .tagx{display:inline-block;background:var(--accent);padding:5px 14px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:14px} .banner h2{color:#fff;font-size:34px;font-weight:800} .banner p{color:rgba(255,255,255,.85);margin:12px 0 22px} /* ===== FLOATING WIDGETS ===== */ .float-wrap{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:12px;align-items:flex-end} .fab{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:26px;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;transition:.2s;border:none} .fab:hover{transform:scale(1.08)} .fab-wa{background:#25d366} .fab-en{background:var(--accent);font-size:22px} .fab-label{position:absolute;right:70px;white-space:nowrap;background:#fff;color:var(--ink);padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;box-shadow:var(--shadow);opacity:0;transform:translateX(8px);transition:.2s;pointer-events:none} .fab-row{position:relative;display:flex;align-items:center} .fab-row:hover .fab-label{opacity:1;transform:translateX(0)} /* ===== MODAL ===== */ .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px} .modal.open{display:flex} .modal-bg{position:absolute;inset:0;background:rgba(6,24,43,.6);backdrop-filter:blur(3px)} .modal-card{position:relative;background:#fff;border-radius:20px;width:100%;max-width:440px;padding:34px;box-shadow:var(--shadow-lg);z-index:2;max-height:92vh;overflow:auto} .modal-card h3{font-size:24px;font-weight:800;margin-bottom:4px} .modal-card .sub{color:var(--muted);font-size:14px;margin-bottom:8px} .modal-close{position:absolute;top:16px;right:18px;font-size:26px;background:none;border:none;cursor:pointer;color:var(--muted)} .phone-field{display:flex;gap:8px;margin-top:14px} .phone-field .cc{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--bg);font-weight:600;font-size:15px} .phone-field .inp{margin-top:0;flex:1} .tabs{display:flex;gap:8px;margin-bottom:18px;background:var(--bg);padding:5px;border-radius:12px} .tabs button{flex:1;padding:10px;border:none;background:none;border-radius:8px;font-weight:600;cursor:pointer;color:var(--muted);font-family:inherit} .tabs button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)} /* ===== VIDEO HERO ===== */ .hero{padding:110px 0 130px} .hero-video{position:absolute;inset:0;overflow:hidden;z-index:0} .hero-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;transform:translate(-50%,-50%);border:0;pointer-events:none} .hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,24,43,.88) 0%,rgba(19,49,79,.7) 60%,rgba(184,134,11,.25) 130%);z-index:1} .hero .wrap{position:relative;z-index:2} /* topbar social */ .tb-social{display:flex;gap:12px;align-items:center} .tb-social a{width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:12px;color:#fff;margin:0} .tb-social a:hover{background:var(--accent)} .acct{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:18px;color:var(--navy);cursor:pointer} .acct:hover{border-color:var(--accent);color:var(--accent)} /* FIX: hide mobile menu + overlay on desktop */ .mobile-menu{display:none} .mm-overlay{display:none} @media(max-width:980px){.mobile-menu{display:flex}.mm-overlay{display:block}} /* premium animated image hero (video embed was blocked) */ .hero-video{background-size:cover;background-position:center;animation:kb 22s ease-in-out infinite alternate} @keyframes kb{from{transform:scale(1)}to{transform:scale(1.12)}} /* hero video element */ .hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ===== FOOTER (match existing) ===== */ .fcols2{display:grid;grid-template-columns:1.5fr .8fr 1.2fr 1.4fr;gap:40px} @media(max-width:900px){.fcols2{grid-template-columns:1fr}} .f-contact .fitem{display:flex;gap:12px;margin-bottom:16px;color:rgba(255,255,255,.75);font-size:14px;align-items:flex-start} .f-contact .fitem .ic{color:var(--accent);font-size:16px;flex:0 0 auto;margin-top:2px} .f-social2{display:flex;gap:12px;margin-top:18px} .f-social2 a{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;font-size:16px;margin:0} .f-social2 a:hover{background:var(--accent)} .cat-list{columns:2;column-gap:24px} .cat-list a{display:block;color:rgba(255,255,255,.72);margin-bottom:11px;font-size:14px;break-inside:avoid} .cat-list a:hover{color:var(--accent-2)} .cat-list a span{color:rgba(255,255,255,.45)} .fprop{display:flex;gap:13px;margin-bottom:16px;align-items:center} .fprop img{width:66px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 auto} .fprop .pt{color:#fff;font-size:14px;font-weight:600;line-height:1.3} .fprop .pr{color:var(--accent-2);font-size:13px;font-weight:700;margin-top:3px} /* ===== TOP BAR — modern refined (overrides) ===== */ .topbar{background:#06182b;color:rgba(255,255,255,.72);font-size:13px;border-bottom:1px solid rgba(255,255,255,.06)} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:46px} .topbar .tb-left{display:flex;align-items:center;gap:0} .topbar .tb-left>span{display:inline-flex;align-items:center;gap:7px;padding:0 18px;position:relative} .topbar .tb-left>span+span::before,.topbar .tb-left>span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:14px;width:1px;background:rgba(255,255,255,.12)} .topbar .tb-left .tb-social::after{content:"";display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.12);margin-left:16px} .topbar .tb-left>span:first-of-type::before{display:none} .tb-social{display:flex;align-items:center;gap:8px} .tb-social a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:12px;color:rgba(255,255,255,.85);margin:0;transition:.2s} .tb-social a:hover{background:var(--accent);color:#fff;transform:translateY(-1px)} .topbar .tb-right{display:flex;align-items:center;gap:16px} .topbar .tb-right a:not(.tb-add){display:inline-flex;align-items:center;gap:7px;font-weight:500;color:rgba(255,255,255,.82)} .topbar .tb-right a:not(.tb-add):hover{color:#fff} .tb-add{background:var(--accent);color:#fff!important;padding:8px 16px;border-radius:8px;font-weight:600;font-size:13px;transition:.2s} .tb-add:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 6px 16px rgba(184,134,11,.3)} /* topbar dividers — clean single */ .topbar .tb-left>span::before,.topbar .tb-left .tb-social::after{display:none!important} .topbar .tb-left>span{border-left:1px solid rgba(255,255,255,.12);padding:0 18px} .topbar .tb-left .tb-social{padding-right:18px} @media(max-width:760px){.topbar .tb-left>span{border-left:none;padding:0 10px}} /* FIX + premium Latest Properties */ .fprop{display:flex;gap:14px;margin-bottom:12px;align-items:center;padding:8px;border-radius:12px;transition:.2s} .fprop:hover{background:rgba(255,255,255,.05)} .fprop>span{display:flex;flex-direction:column;gap:4px;min-width:0} .fprop .pt{display:block;color:#fff;font-size:14px;font-weight:600;line-height:1.35} .fprop .pr{display:block;color:var(--accent-2);font-size:13px;font-weight:700} .fprop img{width:68px;height:60px;border-radius:10px;object-fit:cover;flex:0 0 auto;box-shadow:0 4px 12px rgba(0,0,0,.25)} footer h4{color:#fff;font-size:17px;margin-bottom:20px;font-weight:700;position:relative;padding-bottom:12px} footer h4::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;background:var(--accent);border-radius:3px} /* social SVG icon sizing */ .tb-social svg{width:14px;height:14px;fill:currentColor} .f-social2 svg{width:17px;height:17px;fill:currentColor} .social svg{width:15px;height:15px;fill:currentColor} /* ===== FUNCTIONAL SEARCH SELECTS ===== */ .fsel{border:none;background:transparent;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;width:100%;margin-top:2px;font-family:inherit;outline:none;appearance:none;-webkit-appearance:none;padding-right:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a6408' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center} /* ===== PROPERTY LIST PAGE ===== */ .plist{display:grid;grid-template-columns:290px 1fr;gap:30px;align-items:start} @media(max-width:900px){.plist{grid-template-columns:1fr}} .psidebar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 18px 18px;position:sticky;top:90px} .faccord{border-bottom:1px solid var(--line)} .faccord summary{list-style:none;cursor:pointer;padding:15px 0;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center} .faccord summary::-webkit-details-marker{display:none} .faccord summary::after{content:"⌄";color:var(--muted);font-size:18px;transition:.2s} .faccord[open] summary::after{transform:rotate(180deg)} .faccord .fbody{padding:4px 0 16px} .fchk{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14px;color:var(--muted);cursor:pointer} .fchk input{accent-color:var(--accent);width:16px;height:16px} .fchk input:disabled{opacity:.5;cursor:default} .fchk .fcount{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)} .faccord .fbody.fscroll{max-height:230px;overflow-y:auto;padding-right:6px} .faccord .fbody.fscroll::-webkit-scrollbar{width:6px} .faccord .fbody.fscroll::-webkit-scrollbar-thumb{background:#d7e0ea;border-radius:3px} .pcard .prera{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);word-break:break-all} .frange{padding:16px 0} .frange label{font-size:13px;font-weight:600;display:block;margin-bottom:4px} .frange .rv{color:var(--accent);font-weight:700} .frange input[type=range]{width:100%;accent-color:var(--accent)} .ptoolbar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px} .ptoolbar .res{color:var(--muted);font-size:14px} .viewtog{display:flex;gap:6px} .viewtog button{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:15px} .viewtog button.on{background:var(--navy);color:#fff;border-color:var(--navy)} .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} @media(max-width:680px){.pgrid{grid-template-columns:1fr}} .pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s} .pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)} .pcard .pimg{height:215px;background-size:cover;background-position:center;position:relative} .pcard .badges-l{position:absolute;top:12px;left:12px;display:flex;gap:6px} .pcard .badges-r{position:absolute;top:12px;right:12px;display:flex;gap:6px} .bdg{font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px;color:#fff} .bdg-feat{background:#16a34a} .bdg-bhk{background:var(--navy)} .bdg-status{background:var(--accent)} .pcard .actions{position:absolute;bottom:12px;left:12px;display:flex;gap:8px} .pcard .actions span{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:14px;cursor:pointer} .pcard .pbody{padding:18px} .pcard .ptags{color:var(--muted);font-size:12.5px;font-weight:500;margin-bottom:6px} .pcard h3{font-size:18px;margin-bottom:6px} .pcard .pprice{color:var(--accent);font-size:18px;font-weight:800;margin-bottom:8px} .pcard .pdesc{color:var(--muted);font-size:13.5px;line-height:1.5;margin-bottom:14px} .pcard .pmeta{display:flex;gap:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:600} .pcard .pmeta span{display:flex;align-items:center;gap:6px} /* property card CTA buttons (Call/Email/WhatsApp) */ .pcta{display:flex;gap:8px;margin-top:14px} .pcta a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:600;color:var(--navy);background:#f1f6fb;margin:0;transition:.18s} .pcta a:hover{background:var(--navy);color:#fff;border-color:var(--navy)} .pcta a.wa{flex:0 0 46px} .pcta a.wa:hover{background:#25d366;border-color:#25d366} .psidebar .fsel{border:1px solid var(--line);border-radius:10px;padding:11px 28px 11px 12px;width:100%;color:var(--ink);margin-top:6px} .kw-input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;margin-top:6px;background:var(--bg)} /* WhatsApp card button — real icon, always green */ .pcta a.wa{background:#25d366;border-color:#25d366} .pcta a.wa svg{width:19px;height:19px;fill:#fff} .pcta a.wa:hover{background:#1ebe57;border-color:#1ebe57} .fab-wa svg{width:30px;height:30px;fill:#fff} /* property meta icons — clean aligned SVG */ .pcard .pmeta{align-items:center} .pcard .pmeta span{display:inline-flex;align-items:center;gap:7px;line-height:1} .pcard .pmeta svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} /* ===== ENQUIRY POPUP — match existing (peach) ===== */ .enq-card{background:#fbf6ea!important;max-width:470px} .enq-card h3{color:#1a2433;font-size:26px} .enq-div{border:none;border-top:1px solid rgba(0,0,0,.12);margin:14px 0 8px} .enq-l{font-size:14px;font-weight:700;color:#1a2433;display:block;margin:14px 0 0} .enq-card .inp{background:#fff;border-color:#e6d6a8;margin-top:6px} .enq-card .phone-field .cc{background:#fff;border-color:#e6d6a8} .enq-submit{background:var(--navy);color:#fff;width:100%;justify-content:center;margin-top:20px;font-weight:700;letter-spacing:.06em} .enq-submit:hover{background:var(--navy-2)} /* ===== ENQUIRY as RIGHT SLIDE-IN PANEL (match existing) ===== */ #modal-enquiry{display:block;background:none;pointer-events:none;inset:auto;z-index:95} #modal-enquiry .modal-bg{display:none} #modal-enquiry .enq-card{position:fixed;right:22px;bottom:96px;margin:0;width:380px;max-width:calc(100vw - 44px);max-height:78vh;overflow:auto;transform:translateX(140%);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s;opacity:0;box-shadow:0 24px 60px rgba(10,31,51,.28)} #modal-enquiry.open{pointer-events:auto} #modal-enquiry.open .enq-card{transform:translateX(0);opacity:1} @media(max-width:520px){#modal-enquiry .enq-card{right:12px;bottom:84px;width:calc(100vw - 24px)}} /* prevent horizontal scroll from off-screen slide panel */ html,body{overflow-x:hidden} /* ===== ENQUIRY popup — compact / medium size ===== */ #modal-enquiry .enq-card{width:340px;padding:22px 22px 24px;max-height:none;overflow:visible;bottom:auto;top:50%;transform:translate(140%,-50%)} #modal-enquiry.open .enq-card{transform:translate(0,-50%)} .enq-card h3{font-size:20px} .enq-div{margin:10px 0 4px} .enq-card .enq-l{font-size:12.5px;margin:10px 0 0} .enq-card .inp{padding:9px 12px;font-size:14px;margin-top:4px} .enq-card .phone-field .cc{padding:0 10px;font-size:14px} .enq-card textarea.inp{min-height:64px} .enq-card textarea[rows]{rows:2} .enq-submit{margin-top:14px;padding:11px} .enq-card .modal-close{top:12px;right:14px;font-size:22px} @media(max-width:520px){#modal-enquiry .enq-card{width:calc(100vw - 24px);right:12px;top:auto;bottom:84px;transform:translateX(140%)}#modal-enquiry.open .enq-card{transform:translateX(0)}} /* ===================== MOBILE POLISH ===================== */ @media(max-width:820px){ /* About "What We Do" 4-col (inline style) -> 2 col */ .why[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important} } @media(max-width:768px){ section{padding:56px 0} .hero{padding:74px 0 86px} .hero h1{font-size:34px} .phero{padding:50px 0} .phero h1{font-size:27px} .sec-head h2,.split h2,.banner h2,.cta h2{font-size:27px} .callback{padding:22px;margin-top:-20px} .stat .n{font-size:26px} .cta{padding:38px 22px} .topbar{font-size:12px} .topbar .wrap{height:auto;padding:8px 24px;flex-wrap:wrap;gap:6px} .banner .bc{padding:30px} } @media(max-width:600px){ .topbar .tb-left>span{display:none} .topbar .tb-left .tb-social{padding-right:0} .topbar .tb-right{gap:10px} .why[style*="repeat(4"]{grid-template-columns:1fr!important} .hero h1{font-size:29px} .sec-head h2,.split h2,.cta h2{font-size:24px} .nav{height:64px} .logo img{height:36px} .ptoolbar{flex-direction:column;gap:12px;align-items:flex-start} .fbot{flex-direction:column;text-align:center} } /* ===== ENQUIRY popup — compact on MOBILE ===== */ @media(max-width:560px){ #modal-enquiry .enq-card{ width:calc(100vw - 32px);max-width:360px;right:16px;left:auto; top:50%;bottom:auto;transform:translate(140%,-50%); max-height:84vh;overflow:auto;padding:18px 18px 20px} #modal-enquiry.open .enq-card{transform:translate(0,-50%)} #modal-enquiry .enq-card h3{font-size:18px} #modal-enquiry .enq-card .form-row{grid-template-columns:1fr 1fr;gap:10px} #modal-enquiry .enq-card .enq-l{font-size:11.5px;margin-top:8px} #modal-enquiry .enq-card .inp{padding:8px 10px;font-size:13px} #modal-enquiry .enq-card textarea.inp{min-height:50px} #modal-enquiry .enq-submit{margin-top:12px;padding:10px} } /* ===== CUSTOM PREMIUM DROPDOWN (hero search) ===== */ .cdd{position:relative} .cdd-val{cursor:pointer;font-weight:600;font-size:15px;color:var(--ink);margin-top:3px;display:flex;justify-content:space-between;align-items:center;gap:10px} .cdd-val i{color:var(--accent);font-style:normal;font-size:11px;transition:.25s;flex:0 0 auto} .cdd.open .cdd-val i{transform:rotate(180deg)} .cdd-list{position:absolute;top:calc(100% + 14px);left:-6px;min-width:190px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:7px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s;z-index:40;border:1px solid var(--line)} .cdd.open .cdd-list{opacity:1;visibility:visible;transform:translateY(0)} .cdd-opt{padding:11px 14px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:.12s;display:flex;align-items:center;gap:9px} .cdd-opt:hover{background:var(--bg)} .cdd-opt.sel{background:var(--accent);color:#fff} .cdd-opt.sel::after{content:"✓";margin-left:auto;font-size:12px} /* FIX: let search dropdown overflow the hero (video still clipped by .hero-video) */ .hero{overflow:visible} .hero::after{display:none} .cdd-list{z-index:200} .callback{z-index:5} /* FIX: hero wrapper stacking above callback so dropdown shows on top */ .hero .wrap{z-index:30} .callback{z-index:1} /* hero now has YouTube video — no zoom anim, ensure iframe covers + image fallback behind */ .hero-video{animation:none;background-size:cover;background-position:center} .hero-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;transform:translate(-50%,-50%);border:0;pointer-events:none} /* inner-page hero banner — background image + dark overlay (all pages) */ .phero{background:linear-gradient(150deg,rgba(8,24,43,.92) 0%,rgba(19,49,79,.82) 55%,rgba(184,134,11,.35) 130%),url('assets/hero-bg.jpg');background-size:cover;background-position:center;padding:84px 0} /* ===== TESTIMONIALS ===== */ .tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:900px){.tcards{grid-template-columns:1fr}} .tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)} .tcard .stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin-bottom:12px} .tcard p{color:var(--ink);font-size:15px;line-height:1.65;margin-bottom:18px} .tcard .who{display:flex;align-items:center;gap:12px} .tcard .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--gold-hi),var(--gold));display:grid;place-items:center;color:var(--navy);font-weight:700;font-size:18px} .tcard .who b{display:block;font-size:15px} .tcard .who small{color:var(--muted);font-size:13px} /* per-page hero banner image via variable */ .phero{background:linear-gradient(150deg,rgba(8,24,43,.92) 0%,rgba(19,49,79,.82) 55%,rgba(184,134,11,.32) 130%),var(--phero-bg,url('assets/hero-bg.jpg'));background-size:cover;background-position:center} /* ===== AREAS — modern premium ===== */ .area-grid{gap:22px} .area{height:250px;border-radius:18px;align-items:flex-end;padding:22px;box-shadow:0 12px 30px rgba(10,31,51,.12);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;background-size:cover} .area::before{background:linear-gradient(to top,rgba(8,24,43,.94) 0%,rgba(8,24,43,.45) 45%,rgba(8,24,43,.05) 100%);transition:.35s} .area:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(10,31,51,.28)} .area:hover::before{background:linear-gradient(to top,rgba(184,134,11,.55) 0%,rgba(8,24,43,.55) 55%,rgba(8,24,43,.1) 100%)} .area>div{position:relative;z-index:2;transition:transform .35s} .area:hover>div{transform:translateY(-6px)} .area span{font-size:21px;font-weight:800;letter-spacing:-.02em} .area small{font-size:13.5px;margin-top:5px;opacity:.9} .area::after{content:"View Properties →";position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;font-size:13px;font-weight:700;opacity:0;transform:translateY(10px);transition:.35s} .area:hover::after{opacity:1;transform:translateY(0)} .area:hover small{opacity:0;transform:translateY(-6px)} /* ===== DEVELOPERS — modern premium ===== */ .devs{gap:20px} .dev{height:112px;border-radius:16px;border:1px solid var(--line);padding:22px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;background:#fff} .dev:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(10,31,51,.14);border-color:rgba(184,134,11,.4)} .dev img{max-height:52px;filter:grayscale(100%);opacity:.65;transition:.3s} .dev:hover img{filter:grayscale(0);opacity:1;transform:scale(1.05)} /* developers — full colour (no grayscale) */ .dev img{filter:none!important;opacity:1!important;max-height:52px;transition:transform .3s} .dev:hover img{filter:none!important;opacity:1!important;transform:scale(1.06)} /* ===== INNER HERO — modern premium ===== */ .phero{padding:104px 0 92px;position:relative;overflow:hidden} .phero::after{content:"";position:absolute;right:-140px;bottom:-160px;width:480px;height:480px;background:radial-gradient(circle,rgba(184,134,11,.30),transparent 62%);border-radius:50%;z-index:1;display:block} .phero .wrap{position:relative;z-index:3;max-width:1200px} .phero .crumb{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:7px 16px;border-radius:999px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:22px;backdrop-filter:blur(6px)} .phero .crumb a{color:var(--accent-2)} .phero h1{font-size:50px;font-weight:800;line-height:1.08;max-width:820px} .phero h1::after{content:"";display:block;width:70px;height:4px;background:var(--accent);border-radius:4px;margin-top:20px} .phero p{font-size:18px;max-width:600px;margin-top:20px;color:rgba(255,255,255,.82)} @media(max-width:768px){.phero h1{font-size:32px}.phero{padding:64px 0 56px}} /* ===== STATS — modern premium ===== */ .stat{padding:34px 24px;border-radius:18px;border:1px solid var(--line);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s} .stat:hover{transform:translateY(-7px);box-shadow:0 24px 54px rgba(10,31,51,.16)} .stat .si{width:58px;height:58px;margin:0 auto 16px;border-radius:16px;background:linear-gradient(135deg,rgba(184,134,11,.14),rgba(232,199,102,.14));color:var(--accent);display:grid;place-items:center;font-size:27px} .stat .n{font-size:40px;font-weight:800;background:linear-gradient(135deg,var(--navy) 30%,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.05} .stat .l{color:var(--muted);font-size:14.5px;font-weight:600;margin-top:8px} /* stat SVG icons */ .stat .si svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ===== CATEGORIES — modern premium ===== */ .cat{padding:30px 14px;border-radius:16px;border:1px solid var(--line);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s} .cat:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(10,31,51,.15);border-color:rgba(184,134,11,.45)} .cat .ci{width:62px;height:62px;margin:0 auto 16px;border-radius:16px;background:linear-gradient(135deg,rgba(184,134,11,.12),rgba(232,199,102,.12));display:grid;place-items:center;transition:.3s} .cat .ci svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:.3s} .cat:hover .ci{background:linear-gradient(135deg,var(--accent),var(--accent-2))} .cat:hover .ci svg{stroke:#fff} .cat b{font-size:16px} .cat small{font-size:13px;margin-top:2px} /* ===================== FINAL MOBILE PASS ===================== */ @media(max-width:768px){ .stat .n{font-size:32px} .stat{padding:26px 14px} .stat .si{width:50px;height:50px} .cat .ci,.dev{height:auto} .area{height:200px} .banner .bc{padding:26px} .banner h2{font-size:26px} .tcard{padding:22px} .callback h3{font-size:21px} /* search dropdown full width on mobile */ .cdd-list{left:0;right:0;min-width:auto;width:100%} /* contact map shorter */ section iframe[title="Stairway Homes location"]{height:300px} } @media(max-width:600px){ .stats{grid-template-columns:repeat(2,1fr);gap:14px} .cats{grid-template-columns:repeat(2,1fr)} .devs{grid-template-columns:repeat(2,1fr)} .area-grid{grid-template-columns:1fr} .pcta a{font-size:12px;padding:9px 4px;gap:4px} .pcta a.wa{flex:0 0 40px} .ptoolbar{flex-direction:column;align-items:flex-start;gap:12px} .phero h1{font-size:28px} .hero h1{font-size:28px} .sec-head h2{font-size:24px} /* search stacks cleanly */ .search{flex-direction:column} .search .field{border:none;border-bottom:1px solid var(--line);width:100%} .search .btn{width:100%;justify-content:center} } /* ===== WHY CHOOSE US — premium ===== */ .why-premium .feature{position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s} .why-premium .feature:hover{transform:translateY(-8px);box-shadow:0 26px 56px rgba(10,31,51,.16);border-color:rgba(184,134,11,.4)} .why-premium .feature .ic{transition:.3s} .why-premium .feature:hover .ic{background:linear-gradient(135deg,var(--accent),var(--accent-2))} .why-premium .feature .ic svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:.3s} .why-premium .feature:hover .ic svg{stroke:#fff} .why-premium .fnum{position:absolute;top:18px;right:22px;font-size:34px;font-weight:800;color:var(--line);line-height:1;transition:.3s;letter-spacing:-.03em} .why-premium .feature:hover .fnum{color:rgba(184,134,11,.22)} .why-premium .feature h3{position:relative;z-index:1} /* ===== UPCOMING PROPERTIES — premium ===== */ .upgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:900px){.upgrid{grid-template-columns:1fr}} .upcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s} .upcard:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(10,31,51,.2)} .upcard .uimg{height:240px;background-size:cover;background-position:center;position:relative} .upcard .ubadge{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;box-shadow:0 6px 16px rgba(184,134,11,.35)} .upcard .ubody{padding:22px} .upcard h3{font-size:19px;margin-bottom:4px} .upcard .ubuilder{color:var(--accent);font-size:13px;font-weight:700;margin-bottom:10px} .upcard .uloc{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:6px;margin-bottom:14px} .upcard .uconf{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .upcard .uconf span{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--ink)} .upcard .uprice{font-weight:800;color:var(--navy);font-size:17px;margin-bottom:14px} .upcard .uprice small{color:var(--muted);font-weight:500;font-size:13px} .cdesc{font-size:.92rem;color:var(--muted);line-height:1.55;margin:6px 0 12px} /* ===== MODERN HEADER ===== */ header{transition:box-shadow .25s,background .25s} header.scrolled{box-shadow:0 6px 28px rgba(10,31,51,.10);background:rgba(255,255,255,.96)} .nav{height:80px} .nav-links{gap:34px;font-weight:600;font-size:15px} .nav-links a{position:relative;padding:8px 2px;border-bottom:none;color:var(--ink);transition:color .2s} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .25s ease} .nav-links a:hover::after,.nav-links a.active::after{width:100%} .nav-links a.active{color:var(--accent)} .nav-cta{gap:18px} .nav-cta .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;box-shadow:0 8px 20px rgba(184,134,11,.28);padding:13px 24px;font-weight:700;border-radius:12px;transition:transform .2s,box-shadow .2s} .nav-cta .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(184,134,11,.40)} @media(max-width:980px){.nav{height:68px}} /* ===== LATEST PROPERTIES CAROUSEL ===== */ .lpsec{background:var(--white)} .lpcar{position:relative;display:flex;align-items:center;gap:14px} .lptrack{display:flex;gap:22px;overflow:hidden;scroll-behavior:smooth;flex:1;border-radius:var(--radius)} .lpslide{flex:0 0 calc((100% - 44px)/3);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#f3f5f8} .lpslide img{width:100%;height:300px;object-fit:cover;display:block;transition:transform .5s} .lpslide:hover img{transform:scale(1.05)} .lparrow{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:26px;line-height:1;cursor:pointer;box-shadow:var(--shadow);transition:.2s;display:grid;place-items:center} .lparrow:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.06)} .lpdots{display:flex;justify-content:center;gap:9px;margin-top:26px} .lpdots span{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s} .lpdots span.on{background:var(--accent);width:26px;border-radius:5px} @media(max-width:900px){.lpslide{flex:0 0 calc((100% - 22px)/2)}} @media(max-width:600px){.lpslide{flex:0 0 100%}.lpslide img{height:240px}.lparrow{width:40px;height:40px;font-size:22px}} /* ===== DEVELOPERS — medium sizing ===== */ .devs{grid-template-columns:repeat(5,1fr);gap:14px;max-width:1000px;margin-left:auto;margin-right:auto} .dev{height:96px;padding:10px 14px;border-radius:12px} .dev img{max-height:64px!important;max-width:100%!important;width:auto} @media(max-width:900px){.devs{grid-template-columns:repeat(3,1fr)}} @media(max-width:520px){.devs{grid-template-columns:repeat(2,1fr)}.dev{height:74px}} .qlinks a{display:block;color:rgba(255,255,255,.72);margin-bottom:12px;font-size:14.5px} .qlinks a:hover{color:var(--accent-2)} /* ===== FOOTER LINK ICONS ===== */ .qlinks a,.cat-list a{position:relative;padding-left:18px;transition:color .2s,padding-left .2s} .qlinks a::before,.cat-list a::before{content:"›";position:absolute;left:0;top:-1px;color:var(--accent);font-weight:800;font-size:15px;transition:transform .2s} .qlinks a:hover,.cat-list a:hover{padding-left:22px} .qlinks a:hover::before,.cat-list a:hover::before{transform:translateX(2px)} .fitem .ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(184,134,11,.12);color:var(--accent);font-size:13px;flex:0 0 auto} /* ===== FOOTER CATEGORY LIST — clean align ===== */ .cat-list{columns:auto!important;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:2px} .cat-list a{display:flex;align-items:flex-start;gap:8px;padding-left:0!important;margin-bottom:9px;line-height:1.4} .cat-list a::before{position:static!important;flex:0 0 auto;line-height:1.45} .cat-list a span{color:rgba(255,255,255,.45);margin-left:2px} @media(max-width:520px){.cat-list{grid-template-columns:1fr}} /* ===== FOOTER CATEGORY — block flow fix ===== */ .cat-list a{display:block!important;align-items:initial;gap:0;padding-left:18px!important;position:relative;line-height:1.45;margin-bottom:10px} .cat-list a::before{position:absolute!important;left:0;top:0} .cat-list a span{display:inline;margin-left:4px;white-space:nowrap} /* ===== FOOTER CATEGORY — fit on one line ===== */ .cat-list{column-gap:18px} .cat-list a{font-size:13.5px;padding-left:15px!important;margin-bottom:11px} .cat-list a::before{font-size:14px} .cat-list a span{margin-left:3px;font-size:12.5px} @media(min-width:901px){.fcols2{grid-template-columns:1.4fr .8fr 1.5fr 1.3fr}} .fcard-cta{display:flex;width:100%;justify-content:center;margin-top:16px;border-radius:12px} /* new logo lockup is taller than the old one — keep it legible, shrink on phones */ @media(max-width:640px){.logo img{height:42px}.fbrand .logo img{height:46px}} @media(max-width:980px){.nav-links{display:none!important}.burger{display:flex}} /* legal pages (privacy policy, terms) */ .legal{max-width:820px;margin:0 auto;color:var(--ink)} .legal h2{font-size:24px;font-weight:800;margin:34px 0 12px} .legal h3,.legal h4{font-size:18px;font-weight:700;margin:26px 0 10px} .legal p{margin-bottom:16px;color:#3d4a5c;font-size:16px} .legal ul,.legal ol{margin:0 0 18px 22px} .legal li{margin-bottom:8px;color:#3d4a5c;font-size:16px} .legal a{color:var(--accent);font-weight:600;word-break:break-word} .legal a:hover{text-decoration:underline} .legal strong{color:var(--ink)} @media(max-width:640px){.legal h2{font-size:21px}.legal p,.legal li{font-size:15px}} /* footer category list: one per line, arrow fixed left, counts right-aligned in a single column. The 2-column grid wrapped 'Villas & Row Houses' and 'Under Construction' onto a second line, which knocked every row out of alignment. */ .cat-list{display:grid!important;grid-template-columns:1fr!important;column-gap:0;row-gap:0;max-width:250px} .cat-list a{display:flex!important;align-items:baseline;justify-content:space-between;gap:10px;padding-left:18px!important;position:relative;margin-bottom:10px;line-height:1.45;white-space:nowrap} .cat-list a::before{position:absolute!important;left:0;top:0;transform:none} .cat-list a:hover{padding-left:22px!important} .cat-list a span{flex:0 0 auto;margin-left:0;font-variant-numeric:tabular-nums} @media(max-width:820px){.cat-list{max-width:260px}} /* list view for the properties grid (the ☰ toggle) */ .pgrid.list{grid-template-columns:1fr!important} .pgrid.list .pcard{display:grid;grid-template-columns:300px 1fr} .pgrid.list .pcard .pimg{height:100%;min-height:230px} .pgrid.list .pcard .pbody{padding:22px 24px} .pgrid.list .pcard .pdesc{max-width:none} @media(max-width:760px){.pgrid.list .pcard{grid-template-columns:1fr}.pgrid.list .pcard .pimg{min-height:200px}} /* saved (shortlisted) card action */ .pcard .actions span{transition:background .2s,color .2s,transform .15s} .pcard .actions span:hover{transform:translateY(-2px)} .pcard .actions .act-save.on{background:var(--gold);color:var(--navy)} /* ===== GLASSMORPHIC HEADER ===== */ header{ background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.62)); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border-bottom:1px solid rgba(255,255,255,.55); box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -18px rgba(10,31,51,.35); transition:background .3s,box-shadow .3s,border-color .3s; } /* gold hairline under the glass */ header::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(184,134,11,.45),rgba(232,199,102,.65),rgba(184,134,11,.45),transparent); opacity:.7;pointer-events:none; } header.scrolled{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.8)); box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 34px -16px rgba(10,31,51,.4); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ header,header.scrolled{background:rgba(255,255,255,.97)} } /* nav links get a soft glass pill on hover */ .nav-links a{border-radius:10px;padding:8px 12px;transition:color .2s,background .25s,box-shadow .25s} .nav-links a:hover{background:rgba(255,255,255,.55);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 6px 16px -10px rgba(10,31,51,.45)} .nav-links a::after{left:12px;right:12px;width:auto;transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .nav-links a:hover::after,.nav-links a.active::after{width:auto;transform:scaleX(1)} /* CTA keeps the gold but gains a glass sheen */ .nav-cta .btn-primary{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.35)} .nav-cta .btn-primary::before{ content:"";position:absolute;inset:0 0 50% 0; background:linear-gradient(180deg,rgba(255,255,255,.42),transparent); pointer-events:none; } /* frosted burger on mobile */ .burger{border-radius:12px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} /* topbar picks up the same frosted treatment */ .topbar{ background:linear-gradient(180deg,rgba(6,24,43,.92),rgba(6,24,43,.86)); -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid rgba(255,255,255,.08); } /* ===== GLASS HEADER, PART 2: let content pass UNDER the bar ===== backdrop-filter only shows when something is behind the element. The header used to sit above the hero, so the blur had nothing to frost and read as a flat white bar. Pull the next section up under it and pad the heroes back. */ :root{--hh:80px} header{margin-bottom:calc(-1 * var(--hh))} .hero{padding-top:calc(96px + var(--hh))} .phero{padding-top:calc(70px + var(--hh))} @media(max-width:980px){:root{--hh:68px}} /* thinner glass now that a real image sits behind it */ header{ background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.5)); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); } header.scrolled{ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.76)); } /* ===== FULL GLASS HEADER ===== At the top of the page the bar is near-transparent and floats on the hero; once you scroll onto white content it fades into a light frosted bar. The logo swaps to the light lockup via CSS background (no markup change). */ header{ background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06)); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid rgba(255,255,255,.18); box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 40px -30px rgba(0,0,0,.6); } header::after{opacity:.35} /* light logo while glass is transparent */ header:not(.scrolled) .logo{background:url(assets/logo-v2-light.webp) left center/contain no-repeat} header:not(.scrolled) .logo img{opacity:0} /* nav on glass */ header:not(.scrolled) .nav-links a{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)} header:not(.scrolled) .nav-links a:hover{background:rgba(255,255,255,.16);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 8px 20px -12px rgba(0,0,0,.5)} header:not(.scrolled) .nav-links a.active{color:var(--accent-2)} header:not(.scrolled) .nav-links a::after{background:linear-gradient(90deg,var(--accent-2),#fff)} /* burger on glass */ header:not(.scrolled) .burger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)} header:not(.scrolled) .burger span{background:#fff} /* scrolled: frosted light bar, dark logo/text (defaults) */ header.scrolled{ background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.7)); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); border-bottom-color:rgba(255,255,255,.6); box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 16px 36px -20px rgba(10,31,51,.45); } header.scrolled::after{opacity:.7} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ header{background:rgba(10,24,43,.55)} header.scrolled{background:rgba(255,255,255,.97)} } /* ===== STICKY HEADER FIX ===== `html,body{overflow-x:hidden}` (line ~415) turns the root into a scroll container, which silently breaks position:sticky in Chrome. `clip` prevents the same horizontal overflow without creating that container. */ html,body{overflow-x:clip} @supports not (overflow-x:clip){html,body{overflow-x:hidden}} header{position:sticky;top:0;z-index:100} /* enquiry popup must sit above the sticky header (100) but below the mobile menu overlay (110/120) so the menu still covers it when open */ #modal-enquiry{z-index:105} /* ===== FEATURED CARDS — medium size ===== The 4:5 poster ratio made each card taller than the viewport. Fixed, shorter image band keeps three cards readable on one screen. */ .card .img.poster{aspect-ratio:auto;height:250px;background-position:center} @media(max-width:900px){.card .img.poster{height:220px}} @media(max-width:600px){.card .img.poster{height:200px}} /* ============================================================================ Audit fixes. Deliberately last in the file: several of the rules below exist only because an earlier @media block was overridden by a plain rule declared after it. Anything appended AFTER this block risks reintroducing exactly that. ============================================================================ */ /* Focus. There was no :focus-visible rule anywhere, and two outline:none declarations, so a keyboard user could not see where they were. */ :focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px} .topbar :focus-visible,footer :focus-visible,.hero :focus-visible,.phero :focus-visible, .mobile-menu :focus-visible,.cta :focus-visible{outline-color:var(--gold-hi)} .fsel:focus-visible{outline:3px solid var(--navy);outline-offset:2px} /* opacity:0 and an off-canvas transform do NOT take an element out of the tab order. Both of these put invisible controls in every page's tab sequence: the enquiry panel (close + 3 inputs + textarea + submit) on all 8 pages, and the mobile drawer (close + 7 links + CTA) at phone widths. */ #modal-enquiry .enq-card{visibility:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s,visibility .4s} #modal-enquiry.open .enq-card{visibility:visible} .mobile-menu{visibility:hidden} .mobile-menu.open{visibility:visible} /* "Login / Register" is hidden for phones at line 178, then resurrected by a plain rule 121 lines later. This is the clipped "Logi…" in the bug report. */ @media(max-width:760px){.topbar .tb-right a:not(.tb-add){display:none!important}} /* The @media(max-width:520px) popup block is dead — a LATER @media(max-width:560px) overrides it — so the panel ignored its intended bottom:84px anchor and landed dead centre over the hero on every phone. Re-state the intent last. */ @media(max-width:560px){ #modal-enquiry .enq-card{top:auto;bottom:84px;transform:translateX(140%)} #modal-enquiry.open .enq-card{transform:translateX(0)} } /* The floating WhatsApp button physically covered the footer "Privacy Policy" link (23x18px overlap at 360px) — the link could not be tapped. */ @media(max-width:600px){.fbot{padding-bottom:120px}} /* Touch targets. Measured under 40x40 at phone widths; the enquiry panel's close button was 13x26 and it is the only way to dismiss the auto-popup. */ .modal-close,.enq-card .modal-close,.mm-close{min-width:44px;min-height:44px;display:grid;place-items:center} .burger{min-width:44px;min-height:44px;justify-content:center} .viewtog button{min-width:44px;min-height:44px} @media(max-width:600px){ .pcard .actions span{width:40px;height:40px} } /* .devs and .dev mobile rules were beaten by a plain block declared later, leaving 3 cramped developer logos in the 521-600px band where 2 were meant. */ @media(max-width:600px){ .devs{grid-template-columns:repeat(2,1fr)!important} .dev{height:auto!important} } /* same pattern: .nav height 64px at <=600 lost to a later plain rule */ @media(max-width:600px){.nav{height:64px}} /* properties.html squeeze band: the sidebar returns at 901px while the card grid is still 2-up, making cards 254px — narrower than they are on a phone. */ @media(min-width:901px) and (max-width:1000px){.pgrid{grid-template-columns:1fr}} /* legal pages ran to 105 characters per line on desktop; 70ch is a readable measure */ .legal{max-width:70ch} .legal-date,.legal-note{font-size:14px;color:var(--muted)} .legal-note{background:var(--bg);border-left:3px solid var(--gold);padding:12px 16px;border-radius:6px} /* visually-hidden labels — every control had a placeholder only, so its name vanished the moment the visitor started typing */ .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} /* inline result of a lead submission (lead.js) */ .lead-note{margin-top:12px;font-size:13.5px;line-height:1.5} .lead-note.ok{color:#1c7c3f} .lead-note.err{color:#c0392b;font-weight:600} .lead-note a{color:var(--accent);font-weight:600;text-decoration:underline;margin-left:4px} .inp[aria-invalid=true]{border-color:#c0392b} /* ========================================================================= MOBILE RESPONSIVE PASS — 390 / 430 / 768px Appended last on purpose: several earlier rules are plain declarations that sit AFTER their own media queries, so overrides only stick from here down. ========================================================================= */ /* --- header height variable must equal the REAL rendered header --- nav is 68px at <=980 and 64px at <=600, plus the 1px glass border. The old 68px value pulled the next section 3px above the header's own top edge at phone widths, so the hero/phero painted over the topbar's bottom border. */ @media(max-width:980px){:root{--hh:69px}} @media(max-width:600px){:root{--hh:65px}} /* --- iOS Safari zooms the whole viewport when a focused input is under 16px. That drags the sticky header and the fixed enquiry panel out of frame. --- */ @media(max-width:820px){ .inp,textarea.inp,.kw-input,.fsel,select,.news input, #modal-enquiry .enq-card .inp{font-size:16px} #modal-enquiry .enq-card .inp{padding:10px 12px} } /* --- HERO: the search bar (main conversion element) was pushed off-screen --- 96px+header of top padding plus a 19px 7-line paragraph ran ~925px tall. */ @media(max-width:600px){ .hero{padding-top:calc(28px + var(--hh));padding-bottom:56px} .hero p{font-size:15.5px;line-height:1.55;margin:14px 0 22px;max-width:none} /* only the value row was tappable (~24px) and its label was an inert 11px */ .search .field{padding:0} .search .field label{font-size:12.5px;padding:8px 16px 0} .search .field:last-of-type{border-bottom:none} .cdd-val{min-height:44px;padding:4px 16px 10px;margin-top:0;display:flex;align-items:center} } /* --- stats were still 4-up in the 761-768px band (no rule covered it) --- */ @media(max-width:768px){.stats{grid-template-columns:repeat(2,1fr)}} /* --- LATEST PROPERTIES CAROUSEL: overflow:hidden meant no touch swipe at all, so 7 slides were reachable only via a 40px arrow or a 9px dot. --- */ @media(max-width:900px){ .lptrack{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .lptrack::-webkit-scrollbar{display:none} .lpslide{scroll-snap-align:start} } @media(max-width:600px){ .lpcar{gap:8px} .lparrow{width:44px;height:44px} /* keep the dot visual at 9px but give it a 22px hit area */ .lpdots{gap:2px} .lpdots span{width:22px;height:22px;background:none;position:relative} .lpdots span::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--line);transition:.2s} .lpdots span.on{width:22px} .lpdots span.on::after{background:var(--accent);width:20px;border-radius:5px} } /* --- featured / listing card meta had no flex-wrap, so each phrase wrapped internally into a ragged strip (worst on plots: "2,400 - 6,000 sqft") --- */ @media(max-width:600px){ .card .feats{flex-wrap:wrap;gap:8px 14px;font-size:13px} .pcard .pmeta{flex-wrap:wrap;gap:10px 14px} .pcard .pmeta span{line-height:1.3} } /* --- ENQUIRY POPUP --- */ /* it could not scroll in the 561-980px band: max-height:none there */ #modal-enquiry .enq-card{max-height:min(88vh,100dvh - 40px);overflow:auto;overscroll-behavior:contain} @media(max-width:560px){ /* a 1fr 1fr override forced Name+Email into 156px columns inside a 358px panel */ #modal-enquiry .enq-card .form-row{grid-template-columns:1fr;gap:0} #modal-enquiry .enq-card .enq-l{font-size:13.5px} /* panel sat on top of the FAB that opens it, and 84vh hid SUBMIT behind the keyboard */ #modal-enquiry .enq-card{bottom:162px;max-height:min(76vh,100dvh - 210px)} } /* --- PROPERTIES: ~957px of filter UI shipped ABOVE the first listing --- */ @media(max-width:900px){ .plist>aside.psidebar{order:2;position:static} .plist>div{order:1} /* nested 230px touch-scroll panes are a scroll trap once full-width */ .faccord .fbody.fscroll{max-height:none;overflow:visible} /* filter rows were 34px and the price slider had no height at all */ .fchk{padding:11px 0} .fchk input{width:20px;height:20px} .frange input[type=range]{height:44px} } /* sort select was 36px beside two 44px toggle buttons */ .ptoolbar .fsel{min-height:44px;padding-top:0;padding-bottom:0} @media(max-width:600px){ .pcta a{min-height:44px;font-size:13px} .pcta a.wa{flex:0 0 44px} } /* --- decorative panels ate half the viewport above the copy they introduce. services.html carries an inline min-height:420px, hence !important. --- */ @media(max-width:768px){.split .media{height:220px;min-height:220px!important}} /* --- form cards: 36px of padding is 21% of a 390px screen --- */ @media(max-width:600px){ .form-card{padding:22px 18px;border-radius:16px} /* stacked row fields inherited both the grid gap and .inp margin-top */ .form-row{gap:14px} .form-row .inp{margin-top:0} .inp[type=file]{overflow:hidden;text-overflow:ellipsis} } /* --- topbar: the rule that killed the old clipped "Login" link now also hid the click-to-call number, leaving phones with an icon row and no phone. --- */ @media(max-width:760px){ .topbar .tb-right a:not(.tb-add):not([href^="tel:"]){display:none!important} .topbar .tb-right a[href^="tel:"]{display:inline-flex!important;font-weight:600} } /* Touch viewports need a 44px target, but a 44px *disc* dwarfed the phone chip next to it. Keep the visible circle at 32px and grow the hit area with a transparent ::after instead. 32px disc + 12px gap = a 44px pitch, so the targets tile exactly without overlapping each other. */ @media(max-width:820px){ .topbar .tb-left .tb-social{gap:12px} .topbar .tb-left .tb-social a{width:32px;height:32px;position:relative} .topbar .tb-left .tb-social a::after{content:"";position:absolute;inset:-6px} .topbar .tb-left .tb-social svg{width:15px;height:15px} } /* --- footer: ~25 links per page at ~22px tall, counts under 13px --- */ @media(max-width:600px){ .qlinks a,.cat-list a{min-height:44px;display:flex!important;align-items:center;margin-bottom:0} .cat-list a span{font-size:13px} .fbot a{display:inline-block!important;padding:10px 6px} .f-social2 a{width:44px;height:44px} } /* --- small-text floor: nothing functional below 13px --- */ @media(max-width:820px){ .pcard .prera{font-size:12px;word-break:normal;overflow-wrap:anywhere} .bdg,.card .tag,.upcard .ubadge{font-size:12px} .fchk .fcount{font-size:13px} .upcard .uconf span{font-size:13px} } /* --- header row is 306px of content in 342px at 390px: shrink, don't hide, the CTA is the primary action --- */ @media(max-width:430px){ .nav-cta .btn-primary{padding:11px 14px;font-size:13.5px;border-radius:10px} } /* --- drawer could not scroll in landscape (content ~590px, no overflow) --- */ .mobile-menu{overflow-y:auto;overscroll-behavior:contain} /* ========================================================================= VERIFICATION FIXES — cascade + perf bugs found after the mobile pass ========================================================================= */ /* the active carousel dot kept its gold square: background:none was only set on `.lpdots span` (0,1,1), which loses to `.lpdots span.on` (0,2,1) */ @media(max-width:600px){.lpdots span.on{background:none;border-radius:50%}} /* enquiry popup: forcing the row to 1 column also zeroed its gap, so the "Your Email" label sat flush against the name input */ @media(max-width:560px){#modal-enquiry .enq-card .form-row{gap:12px}} /* the popup is now its own scroll container, so an absolutely-positioned close button scrolled out of reach (`.modal-bg` is display:none, so this button and Escape are the only ways out) */ #modal-enquiry .enq-card .modal-close{position:sticky;top:0;float:right;z-index:2} /* inline padding on the sort