/* =========================================================================== GROW WITH PRABHAT — v3, light Same structure as v1. White ground, near-black type, gold as the accent. One thing had to change beyond swapping values: v1's gold (#C9A227) reads at only ~2.2:1 on white, which fails legibility badly. So gold splits into two roles here — a deeper gold for anything that is TEXT, and the original bright gold kept for FILLS, where dark type sits on top of it. =========================================================================== */ :root{ --bg:#FFFFFF; --bg-2:#F7F7F4; --bg-3:#F0F0EC; --bg-4:#E6E6E1; --line:#E2E2DC; --line-soft:#EDEDE8; --fg:#14161A; --fg-2:#4C5157; --fg-3:#686D73; /* gold, split by role */ --gold:#7C5E0F; /* text, links, headings — 5.9:1 on white */ --gold-2:#634B0D; /* hover */ --gold-fill:#C9A227; /* backgrounds, with --on-gold type on top */ --on-gold:#17140A; --gold-dim:rgba(201,162,39,.16); --ok:#22563A; --ok-bg:rgba(47,107,69,.11); --warn:#8A6A12; --warn-bg:rgba(201,162,39,.10); --off:#5B6066; --off-bg:rgba(110,115,121,.11); --red:#9B3122; --red-bg:rgba(176,58,40,.10); --max:1240px; --r:5px; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{ margin:0;background:var(--bg);color:var(--fg); font-family:"Newsreader",Georgia,serif;font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .narrow{max-width:840px} a{color:var(--gold);text-decoration:none} a:hover{color:var(--gold-2)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;text-wrap:balance;margin:0} .mono{font-family:"Archivo",system-ui,sans-serif} /* ======================= top bar ======================= */ header.site{border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);position:sticky;top:0;z-index:60} .bar{display:flex;align-items:center;gap:26px;padding:15px 0} .sitename{ font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:14px; letter-spacing:.11em;text-transform:uppercase;color:var(--fg);flex:none;line-height:1.2; } .sitename b{color:var(--gold);font-weight:800} nav.main{display:flex;align-items:center;gap:24px;margin-left:auto} nav.main a{font-family:"Archivo",system-ui,sans-serif;font-size:14px;font-weight:500;color:var(--fg-2)} nav.main a:hover,nav.main a[aria-current="page"]{color:var(--fg)} nav.main a[aria-current="page"]{box-shadow:0 2px 0 var(--gold)} nav.main a.cta{background:var(--gold-fill);color:var(--on-gold);font-weight:700;padding:9px 18px;border-radius:3px;box-shadow:none} nav.main a.cta:hover{background:var(--gold-2);color:#fff} .menubtn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--fg);border-radius:3px;padding:8px 12px;font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;cursor:pointer} @media (max-width:900px){ .menubtn{display:block} nav.main{ display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-2); border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch; gap:0;padding:8px 24px 18px;margin-left:0; } nav.main.open{display:flex} nav.main a{padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15px} nav.main a.cta{margin-top:12px;text-align:center;border-bottom:0} } /* ======================= deadline strip ======================= */ .strip{background:var(--gold-fill);color:var(--on-gold);font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;text-align:center;padding:9px 24px} .strip a{color:var(--on-gold);text-decoration:underline;text-underline-offset:2px} .strip b{font-weight:800} /* ======================= hero ======================= */ .hero{padding:74px 0 58px;border-bottom:1px solid var(--line)} .hero.short{padding:50px 0 42px} .hero h1{font-weight:800;font-size:clamp(2.2rem,5.4vw,3.7rem);line-height:1.04;letter-spacing:-.032em;margin-bottom:20px;max-width:19ch} .hero.short h1{font-size:clamp(1.85rem,4.4vw,2.9rem);max-width:24ch} .hero h1 em{font-style:normal;color:var(--gold)} .hero .lede{font-size:clamp(1.03rem,2.1vw,1.22rem);color:var(--fg-2);max-width:60ch;margin:0 0 28px;line-height:1.55} .hero .lede b{color:var(--fg);font-weight:600} .hero-actions{display:flex;flex-wrap:wrap;gap:12px} /* ======================= buttons ======================= */ .btn{font-family:"Archivo",sans-serif;font-size:14.5px;font-weight:700;padding:13px 24px;border-radius:3px;border:1px solid transparent;cursor:pointer;display:inline-block;text-align:center} .btn.primary{background:var(--gold-fill);color:var(--on-gold)} .btn.primary:hover{background:var(--gold-2);color:#fff} .btn.ghost{border-color:var(--line);color:var(--fg);background:transparent} .btn.ghost:hover{border-color:var(--gold);color:var(--gold)} .btn.sm{font-size:13px;padding:10px 16px} .btn.full{width:100%} .btn[disabled]{opacity:.5;cursor:not-allowed} /* ======================= sections ======================= */ section{padding:58px 0} section.tight{padding:40px 0} section+section{border-top:1px solid var(--line-soft)} .sec-title{font-weight:750;font-size:clamp(1.42rem,3vw,1.95rem);letter-spacing:-.024em;margin-bottom:10px} .sec-sub{color:var(--fg-2);max-width:66ch;margin:0 0 28px;font-size:16.5px} .sec-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:8px} .sec-head-row .sec-title{margin-bottom:0} .morelink{font-family:"Archivo",sans-serif;font-size:13.5px;font-weight:600} /* ======================= stats ======================= */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:1px;background:var(--line-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats > div{background:var(--bg);padding:22px 24px} .stats .k{font-family:"Archivo",sans-serif;font-weight:750;font-size:1.55rem;color:var(--gold);letter-spacing:-.025em;display:block;margin-bottom:6px;font-variant-numeric:tabular-nums} .stats .k.up{color:var(--ok)} .stats .k.down{color:var(--red)} .stats .v{font-size:14px;color:var(--fg-2);line-height:1.45;display:block} /* ======================= project cards ======================= */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px} .grid.wide{grid-template-columns:repeat(auto-fill,minmax(min(390px,100%),1fr))} .pcard{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease,transform .15s ease} .pcard:hover{border-color:#C9C9C2;transform:translateY(-2px)} .pcard .shot{position:relative;aspect-ratio:16/10;background:var(--bg-4);overflow:hidden} .pcard .shot img{width:100%;height:100%;object-fit:cover} .pcard .shot .ph{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-family:"Archivo",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--fg-2); background:linear-gradient(135deg,#F0F0EC,#E4E4DE); } .pcard .shot .ontop{position:absolute;top:11px;left:11px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 22px)} .pcard .body{padding:17px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1} .pcard h3{font-weight:700;font-size:1.13rem;letter-spacing:-.014em;line-height:1.24} .pcard h3 a{color:var(--fg)} .pcard h3 a:hover{color:var(--gold)} .pcard .where{font-family:"Archivo",sans-serif;font-size:13px;color:var(--fg-3);letter-spacing:.01em} .pcard .price{font-family:"Archivo",sans-serif;font-weight:750;font-size:1.02rem;color:var(--gold)} .pcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .pcard .foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px} .pcard .foot a{font-family:"Archivo",sans-serif;font-size:13.5px;font-weight:700} /* ======================= badges ======================= */ .badge{font-family:"Archivo",sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:2px;white-space:nowrap;display:inline-block} .badge.active{background:var(--ok-bg);color:var(--ok)} .badge.soon{background:var(--warn-bg);color:var(--warn)} .badge.sold{background:var(--off-bg);color:var(--off)} .badge.hst{background:var(--gold-fill);color:var(--on-gold)} .badge.no{background:var(--red-bg);color:var(--red)} .badge.tbd{background:var(--off-bg);color:var(--off)} .badge.solid{background:rgba(255,255,255,.9);color:var(--fg);backdrop-filter:blur(4px)} .badges{display:flex;flex-wrap:wrap;gap:7px} /* ======================= controls ======================= */ .controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;align-items:center} .controls input[type=search],.controls select{font-family:"Archivo",sans-serif;font-size:14px;background:var(--bg-2);border:1px solid var(--line);color:var(--fg);padding:11px 14px;border-radius:3px} .controls input[type=search]{flex:1 1 260px;min-width:0} .chipbtn{font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;background:transparent;border:1px solid var(--line);color:var(--fg-2);padding:10px 15px;border-radius:3px;cursor:pointer;min-height:40px} .chipbtn:hover{color:var(--fg);border-color:#C9C9C2} .chipbtn[aria-pressed="true"]{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--on-gold)} .count{font-family:"Archivo",sans-serif;font-size:13px;color:var(--fg-3);margin-left:auto} .empty{color:var(--fg-3);padding:38px 0;font-size:16px} /* ======================= project detail ======================= */ .gallery{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin-bottom:28px;max-height:440px} .gallery .main{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-4)} .gallery .side{display:grid;grid-template-rows:1fr 1fr;gap:8px} .gallery .side > div{border-radius:var(--r);overflow:hidden;background:var(--bg-4);position:relative} .gallery img{width:100%;height:100%;object-fit:cover} .gallery .ph{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;font-family:"Archivo",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);background:linear-gradient(135deg,#F0F0EC,#E4E4DE)} @media (max-width:800px){.gallery{grid-template-columns:1fr;max-height:none}.gallery .side{grid-template-rows:none;grid-template-columns:1fr 1fr}} .factstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:34px} .factstrip > div{background:var(--bg-2);padding:16px 18px} .factstrip dt{font-family:"Archivo",sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px} .factstrip dd{margin:0;font-family:"Archivo",sans-serif;font-size:15px;font-weight:600;color:var(--fg);line-height:1.35} .factstrip dd.gold{color:var(--gold)} .detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:44px;align-items:start} .detail-grid > *{min-width:0} @media (max-width:940px){.detail-grid{grid-template-columns:1fr;gap:32px}} .sidebar{position:sticky;top:92px;display:flex;flex-direction:column;gap:16px} @media (max-width:940px){.sidebar{position:static}} .block{margin-bottom:36px} .block h2{font-weight:750;font-size:1.28rem;letter-spacing:-.02em;margin-bottom:12px} .block p{margin:0 0 14px;color:var(--fg-2);max-width:68ch} .block p:last-child{margin-bottom:0} .amenities{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media (max-width:620px){.amenities{grid-template-columns:1fr}} .amenities h3{font-family:"Archivo",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:12px} .amenities ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .amenities li{font-size:15.5px;color:var(--fg-2);padding-left:20px;position:relative;line-height:1.45} .amenities li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold-fill);opacity:.75} .amenities .future li::before{background:transparent;border:1.5px solid var(--gold);opacity:.65} /* ---- project-page map: the same controls as the compare page, so an agent moving between them isn't re-learning anything ---- */ .pmap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2);max-width:100%} .pmapbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:13px 15px; background:var(--bg-2);border-bottom:1px solid var(--line)} .pmapbar .right{margin-left:auto} .pmapbar .seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:100px;overflow:hidden} .pmapbar .seg button{font-family:"Archivo",sans-serif;font-size:12px;font-weight:700;background:none; border:0;padding:8px 14px;cursor:pointer;color:var(--fg-2)} .pmapbar .seg button[aria-pressed="true"]{background:var(--gold-fill);color:var(--on-gold)} .pmap #map{height:400px;width:100%;max-width:100%;background:#EDEEEA} @media (max-width:700px){.pmap #map{height:320px}} @media (max-width:760px){.pmapbar .mchip,.pmapbar .seg button{min-height:44px;display:inline-flex;align-items:center}} .amen-pin{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%; background:#fff;box-shadow:0 2px 6px rgba(20,22,26,.2);font-size:12px} .here-pin{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%; background:var(--gold-fill);border:3px solid #fff;box-shadow:0 3px 10px rgba(20,22,26,.28);font-size:17px} /* ======================= gate ======================= */ .gate{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:26px} .gate.hl{border-color:rgba(201,162,39,.4);background:linear-gradient(180deg,var(--gold-dim),var(--bg-2) 62%)} .gate h3{font-weight:750;font-size:1.15rem;letter-spacing:-.016em;margin-bottom:9px} .gate p{font-size:14.5px;color:var(--fg-2);margin:0 0 16px;line-height:1.5} .gate ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px} .gate li{font-family:"Archivo",sans-serif;font-size:13.5px;color:var(--fg-2);padding-left:21px;position:relative} .gate li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:7px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)} .gate .fine{font-size:12.5px;color:var(--fg-3);margin:14px 0 0} .locked-preview{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--bg-2);overflow:hidden} .locked-preview .blur{filter:blur(5px);opacity:.4;user-select:none;pointer-events:none} .locked-preview .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.94))} .locked-preview .over span{font-family:"Archivo",sans-serif;font-size:13.5px;font-weight:600;color:var(--fg-2);text-align:center;padding:0 20px} /* ======================= tables ======================= */ .scroller{overflow-x:auto;margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft)} table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px} th,td{text-align:left;padding:11px 18px 11px 0;border-bottom:1px solid var(--line-soft);vertical-align:top} tbody tr:last-child td{border-bottom:none} th{font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;padding-top:12px;padding-bottom:10px} td{color:var(--fg-2);line-height:1.45} td:first-child{color:var(--fg);font-weight:500} td.num,th.num{font-family:"Archivo",sans-serif;font-variant-numeric:tabular-nums;font-size:13.5px} tr.on td{background:rgba(201,162,39,.09);color:var(--fg)} tr.on td:first-child{box-shadow:inset 3px 0 0 var(--gold)} /* ======================= callout / prose ======================= */ .callout{background:var(--bg-2);border-left:3px solid var(--gold);padding:20px 24px;margin:22px 0;max-width:74ch} .callout p:last-child{margin-bottom:0} .callout .lede{font-family:"Archivo",sans-serif;font-weight:700;font-size:.98rem;margin:0 0 8px;color:var(--fg)} .callout.warn{border-left-color:var(--warn)} .prose p{margin:0 0 16px;max-width:70ch;color:var(--fg-2)} .prose h2{font-weight:750;font-size:1.5rem;letter-spacing:-.02em;margin:36px 0 12px;color:var(--fg)} .prose h3{font-weight:700;font-size:1.15rem;margin:28px 0 10px;color:var(--fg)} .prose ul{margin:0 0 18px;padding-left:20px;max-width:70ch;color:var(--fg-2)} .prose li{margin-bottom:9px} .prose li::marker{color:var(--gold)} .prose strong{color:var(--fg);font-weight:600} /* ======================= news ======================= */ .news{display:flex;flex-direction:column} .news article{border-top:1px solid var(--line-soft);padding:18px 0;display:grid;grid-template-columns:108px 1fr;gap:20px} .news article:first-child{border-top:1px solid var(--line)} .news time{font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);padding-top:4px} .news h3{font-weight:700;font-size:1.04rem;margin-bottom:6px;line-height:1.3} .news p{margin:0;font-size:15px;color:var(--fg-2);line-height:1.5;max-width:68ch} @media (max-width:640px){.news article{grid-template-columns:1fr;gap:5px}} /* ======================= forms ======================= */ .formwrap{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:28px} form.lead{display:grid;grid-template-columns:1fr 1fr;gap:14px} form.lead.one{grid-template-columns:1fr} form.lead label{display:flex;flex-direction:column;gap:6px;font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:600;color:var(--fg-2);letter-spacing:.02em} form.lead .full{grid-column:1/-1} form.lead input,form.lead select,form.lead textarea{font-family:"Archivo",sans-serif;font-size:15px;background:var(--bg);border:1px solid var(--line);color:var(--fg);padding:12px 14px;border-radius:3px;width:100%} form.lead textarea{min-height:82px;resize:vertical} form.lead button{grid-column:1/-1} .consent{grid-column:1/-1;font-size:12.5px;color:var(--fg-3);line-height:1.55;margin:0} .consent-check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-family:"Archivo",sans-serif;font-size:12.5px;color:var(--fg-2);line-height:1.5} .consent-check input{width:auto;margin-top:2px;flex:none} .formnote{font-family:"Archivo",sans-serif;font-size:13.5px;margin:6px 0 0;grid-column:1/-1} .formnote.ok{color:var(--ok)} .formnote.err{color:var(--red)} @media (max-width:600px){form.lead{grid-template-columns:1fr}.formwrap{padding:22px}} /* ======================= auth ======================= */ .authbox{max-width:440px;margin:0 auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:32px} .authbox h1{font-size:1.6rem;font-weight:750;margin-bottom:10px;letter-spacing:-.022em} .authbox p.sub{color:var(--fg-2);font-size:15px;margin:0 0 22px;line-height:1.5} .who{font-family:"Archivo",sans-serif;font-size:13px;color:var(--fg-2)} .who b{color:var(--gold)} /* ======================= footer — the branding lives here ======================= */ footer.site{border-top:1px solid var(--line);background:var(--bg-2);margin-top:24px;padding:52px 0 46px} .footbrand{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap} .footbrand img{height:56px;width:auto} .footbrand .txt .n{font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--fg);line-height:1.1} .footbrand .txt .n b{color:var(--gold)} .footbrand .txt .b{font-family:"Archivo",sans-serif;font-size:13.5px;font-weight:600;color:var(--fg-2);margin-top:5px;letter-spacing:.01em} .footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:32px} @media (max-width:760px){.footgrid{grid-template-columns:1fr;gap:26px}} .footgrid h4{font-family:"Archivo",sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:13px} .footgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .footgrid a{font-family:"Archivo",sans-serif;font-size:14px;color:var(--fg-2)} .footgrid a:hover{color:var(--gold)} .footgrid p{font-size:14.5px;color:var(--fg-2);margin:0 0 12px;line-height:1.55;max-width:46ch} .legal{border-top:1px solid var(--line);padding-top:24px;font-size:12.5px;color:var(--fg-3);line-height:1.65} .legal p{margin:0 0 11px;max-width:88ch} .legal strong{color:var(--fg-2)} .updated{font-family:"Archivo",sans-serif;font-size:12.5px;color:var(--fg-3)} /* ======================= tap-to-call ======================= Mobile only. Highest-converting element on a property site, so it floats above the page instead of waiting in the footer. */ .phone{font-family:"Archivo",sans-serif;font-size:14px;font-weight:700;color:var(--gold)!important} .phone:hover{color:var(--gold-2)!important} @media (max-width:900px){ .phone{display:none} } #callbar{display:none} @media (max-width:760px){ #callbar{ display:block;position:fixed;left:0;right:0;bottom:0;z-index:80; background:var(--gold-fill);color:var(--on-gold); font-family:"Archivo",sans-serif;font-size:15px;font-weight:800; text-align:center;padding:15px 20px; box-shadow:0 -6px 20px rgba(20,22,26,.14); padding-bottom:calc(15px + env(safe-area-inset-bottom)); } #callbar:hover{color:var(--on-gold)} body.has-callbar footer.site{padding-bottom:96px} } /* ======================= launch alert box ======================= */ .alertbox{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r);padding:22px} .alertbox h3{font-weight:750;font-size:1.08rem;margin-bottom:8px} .alertbox p{font-size:14.5px;color:var(--fg-2);margin:0 0 15px;line-height:1.5} /* ======================= presentation mode ======================= Agent sitting with a client. Bigger type, no lead capture, no noise. */ .presentbtn{ position:fixed;right:18px;bottom:18px;z-index:90; background:var(--bg);border:1px solid var(--gold);color:var(--gold); font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:700; padding:11px 17px;border-radius:100px;cursor:pointer; box-shadow:0 6px 22px rgba(20,22,26,.14); } .presentbtn:hover{background:var(--gold-fill);color:var(--on-gold)} @media (max-width:760px){ body.has-callbar .presentbtn{bottom:74px} } body.present{font-size:19px} body.present .strip{font-size:15px;padding:12px 24px} body.present .sec-title{font-size:clamp(1.7rem,3.4vw,2.3rem)} body.present .sec-sub{font-size:18px} body.present .pcard h3{font-size:1.3rem} body.present .pcard .where{font-size:14.5px} body.present .pcard .price{font-size:1.2rem} body.present .ctable td{font-size:16.5px} body.present .ctable .rlabel{font-size:12.5px} body.present .out .big .n{font-size:3.1rem} body.present .cmp .pay{font-size:2.5rem} body.present .cmp li{font-size:15px} body.present .lines .li{font-size:16px;padding:14px 26px} body.present .factstrip dd{font-size:17px} body.present .nearby .row .nm{font-size:15px} body.present .nearby .row .dd{font-size:15px} body.present .prose p,body.present .block p{font-size:18.5px} /* Nothing that asks a client for their details, or asks us to sell. */ body.present .formwrap, body.present form.lead, body.present .gate.hl, body.present [data-teaser], body.present nav.main a.cta, body.present #callbar, body.present .alertbox form{display:none!important} body.present .gate p.fine{display:none} body.present section:has(> .wrap > .detail-grid > .sidebar){padding-bottom:20px} /* ======================= citation markers ======================= */ .cite{display:inline-block;font-family:"Archivo",sans-serif;font-size:9.5px;font-weight:800; color:var(--gold);vertical-align:super;margin-left:3px;text-decoration:none;line-height:1} .cite:hover{color:var(--gold-2);text-decoration:underline} .cite::before{content:"["} .cite::after{content:"]"} /* ======================= touch targets ======================= 44px is the accepted minimum for a finger. Desktop keeps the tighter sizing; only narrow screens grow. */ @media (max-width:760px){ .menubtn{min-height:44px;padding:10px 16px} .chipbtn,.lchip,.mchip,.pchip,.tab{min-height:44px;display:inline-flex;align-items:center} .controls select,.controls input[type=search],form.lead select,form.lead input{min-height:46px} .segbtn button,.segbtn.sm button{min-height:44px} .btn.sm{padding:13px 18px} nav.main a{min-height:44px;display:flex;align-items:center} } /* ======================= floor plan explorer ======================= The builder's own drawing, zoomable and pannable. Nothing generated — a fabricated interior would look better and be a lie. */ .planblock{min-width:0} .planintro{font-size:16px;color:var(--fg-2);margin:0 0 16px;max-width:66ch;line-height:1.55} .planwrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2);max-width:100%} .planbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:11px 14px; background:var(--bg-2);border-bottom:1px solid var(--line)} .plantabs{display:flex;flex-wrap:wrap;gap:7px} .plantabs button{font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:650;background:var(--bg); border:1px solid var(--line);color:var(--fg-2);padding:8px 14px;border-radius:100px;cursor:pointer} .plantabs button[aria-pressed="true"]{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--on-gold)} .planctl{margin-left:auto;display:flex;gap:6px} .planctl button{font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:700;background:var(--bg); border:1px solid var(--line);color:var(--fg-2);padding:8px 13px;border-radius:3px;cursor:pointer;min-width:38px} .planctl button:hover{border-color:var(--gold);color:var(--gold)} .planstage{position:relative;height:520px;overflow:hidden;background:#fff;cursor:grab;touch-action:none} .planstage.drag{cursor:grabbing} .planstage img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none} .planstage:fullscreen{height:100vh;background:#fff} @media (max-width:700px){.planstage{height:380px}} @media (max-width:760px){.plantabs button,.planctl button{min-height:44px}} .tourframe{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:18px} .tourframe iframe{width:100%;height:460px;border:0;display:block} /* ======================= models & plans table ======================= */ .modeltable{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px} .modeltable th,.modeltable td{text-align:left;padding:13px 18px 13px 0;border-bottom:1px solid var(--line-soft);vertical-align:top} .modeltable thead th{font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--fg-3);white-space:nowrap;border-bottom:1px solid var(--line)} .modeltable td{color:var(--fg-2)} .modeltable td strong{color:var(--fg);font-weight:700;display:block} .modeltable .mtype{display:block;font-family:"Archivo",sans-serif;font-size:11.5px;color:var(--fg-3);margin-top:3px} .modeltable td.num{font-family:"Archivo",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap} .modeltable tbody tr:hover td{background:var(--bg-2)} .modeltable td.mact{text-align:right;padding-right:0;white-space:nowrap} .mbtn{font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:700;background:var(--bg); border:1px solid var(--line);color:var(--fg-2);padding:9px 15px;border-radius:100px;cursor:pointer;min-height:38px} .mbtn:hover{border-color:var(--gold);color:var(--gold)} .mbtn.tour{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--on-gold)} @media (max-width:760px){.mbtn{min-height:44px}} .tourframe{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:18px} .tourframe iframe{width:100%;height:460px;border:0;display:block} .planblock{min-width:0} .planintro{font-size:16px;color:var(--fg-2);margin:0 0 18px;max-width:66ch;line-height:1.55} .modeltable .askus{color:var(--fg-3);font-family:"Archivo",sans-serif;font-size:12.5px} /* ---- team-only builder package ---- */ .drivepack{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:20px;padding:16px 18px; border:1px solid var(--gold-fill);background:var(--warn-bg);border-radius:var(--r)} .dp-tag{font-family:"Archivo",sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;background:var(--gold-fill);color:var(--on-gold);padding:4px 9px;border-radius:100px;flex:none} .dp-body{flex:1 1 260px;min-width:0} .dp-body b{display:block;color:var(--fg);font-size:15px;margin-bottom:3px} .dp-body span{display:block;color:var(--fg-2);font-size:13.5px;line-height:1.5} .dp-acts{display:flex;gap:9px;flex-wrap:wrap;flex:none} @media (max-width:600px){.dp-acts{width:100%}.dp-acts .btn{flex:1}} /* Brokerage identification and the RECO notices must survive JavaScript being off — a screenshot of this site with JS blocked still has to identify the brokerage. The scripted footer carries the same text for everyone else. */ .legal-noscript{max-width:var(--max);margin:0 auto;padding:34px 22px 54px;border-top:1px solid var(--line); color:var(--fg-2);font-size:12.5px;line-height:1.65} .legal-noscript p{margin:0 0 9px;max-width:92ch} @media (max-width:760px){.chipbtn{min-height:44px}} /* A 13px checkbox is a poor thumb target even when its