/* ============================================================================ POV Associate — light design system (v2, Aug 2026) --------------------------------------------------------------------------- NEW FILE. Does not touch pov-realty.css (the blackout/acid system) — the two coexist so a rollback is a one-line href change, not a revert. Per-associate colour: pov-assoc.js reads profile.brand_color and sets --brand on . Everything accent-coloured derives from --brand, so an associate's site feels theirs without any of the layout changing. ========================================================================= */ :root{ color-scheme:light; /* ground + ink — taken from the logo pack, not invented: #FAFAFA light ground, #141414 ink, #0E0E10 dark ground */ --ground:#FAFAFA; --surface:#FFFFFF; --sunk:#F2F2F1; --sunk-2:#E9E9E8; --ink:#141414; --ink-2:#3E3E3E; --muted:#666666; --faint:#9A9A9A; --line:#E4E4E3; --line-2:#D4D4D3; /* brand — overridden per associate by pov-assoc.js */ --brand:#1F3A2E; --brand-2:#2C5142; --brand-on:#FFFFFF; --brand-wash:color-mix(in srgb, var(--brand) 7%, var(--surface)); --brand-line:color-mix(in srgb, var(--brand) 22%, var(--line)); /* fixed highlight — the one loud thing, kept small */ --lime:#C9F24D; --lime-ink:#1B2410; /* semantic */ --up:#1E7A5A; --down:#B4552F; --warn:#8A6A16; /* display follows the wordmark (Sora ExtraBold in the logo). Headings run at 600 in sentence case — brand-consistent without the all-caps shout. */ /* --serif is historical: it now holds the DISPLAY face, which is a sans. */ --serif:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif; --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --r:14px; --r-s:10px; --r-pill:100px; --sh:0 1px 2px #16181a0a, 0 12px 32px -20px #16181a2e; --sh-lift:0 2px 6px #16181a0f, 0 20px 44px -24px #16181a3d; --ease:cubic-bezier(.22,1,.36,1); --maxw:1180px; } /* LOCKED TO LIGHT, 30 Aug 2026. A dark palette used to live here, applied either by the visitor's OS setting or by a Blackout/Acid choice in the CRM. Two problems: nothing ever set data-assoc-theme, so the CRM choice was inert on these pages; and the dark variant was never reviewed against the listing pages, hero search bar or category tiles, which meant a visitor whose laptop happened to be in dark mode saw a version nobody had signed off. `color-scheme: light` below also keeps native controls (the search input, the selects) light, which the OS would otherwise repaint. If a dark theme is wanted later it needs its own review pass, not a revived media query. */ /* ── base ─────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--ground);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4,h5{margin:0;font-weight:400;text-wrap:balance} p{margin:0} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px} ::selection{background:var(--lime);color:var(--lime-ink)} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(18px,4vw,40px)} .wrap-wide{max-width:1400px;margin:0 auto;padding-inline:clamp(18px,4vw,40px)} /* ── type scale ───────────────────────────────────────────────────────── */ .display{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5.6vw,62px);line-height:1.04;letter-spacing:-.032em} .h1{font-family:var(--serif);font-weight:700;font-size:clamp(29px,4.4vw,48px);line-height:1.08;letter-spacing:-.03em} .h2{font-family:var(--serif);font-weight:600;font-size:clamp(23px,3.1vw,33px);line-height:1.14;letter-spacing:-.026em} .h3{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.2vw,24px);line-height:1.24;letter-spacing:-.02em} .h4{font-family:var(--sans);font-size:17px;font-weight:600;line-height:1.35} em.a{font-style:normal;font-weight:700;color:var(--brand)} .lede{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--ink-2);max-width:62ch} .body{color:var(--ink-2);max-width:68ch} .small{font-size:14px;color:var(--muted)} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* ── nav ──────────────────────────────────────────────────────────────── */ .anav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 88%,transparent); backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s} .anav.stuck{border-bottom-color:var(--line)} .anav .in{max-width:var(--maxw);margin:0 auto;padding:14px clamp(18px,4vw,40px); display:flex;align-items:center;justify-content:space-between;gap:18px} .brandmark{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);flex:none} .brandmark .m{width:19px;height:19px;border-radius:6px;background:var(--brand);flex:none} .brandmark img{height:24px;width:auto;display:block} .alinks{display:none;gap:clamp(14px,2vw,28px);font-size:14.5px;font-weight:500;color:var(--ink-2)} .alinks a{padding:6px 0;border-bottom:1.5px solid transparent;transition:color .18s,border-color .18s} .alinks a:hover,.alinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)} @media(min-width:900px){.alinks{display:flex}} .navright{display:flex;align-items:center;gap:10px;flex:none} .burger{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line); border-radius:var(--r-pill);background:var(--surface);cursor:pointer} @media(min-width:900px){.burger{display:none}} .burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink)} .burger span::before{top:-5px}.burger span::after{top:5px} .drawer{display:none;border-top:1px solid var(--line);background:var(--surface)} .drawer.open{display:block} .drawer a{display:block;padding:13px clamp(18px,4vw,40px);border-bottom:1px solid var(--line);font-weight:500} @media(min-width:900px){.drawer{display:none!important}} /* ── buttons ──────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-size:14.5px;font-weight:600;padding:12px 22px;border-radius:var(--r-pill); border:1px solid transparent;cursor:pointer;transition:transform .16s var(--ease),box-shadow .2s,background .2s,border-color .2s; white-space:nowrap;text-align:center} .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-p{background:var(--brand);color:var(--brand-on);box-shadow:0 1px 2px #16181a14} .btn-p:hover{box-shadow:0 6px 18px -8px color-mix(in srgb,var(--brand) 60%,transparent)} .btn-lime{background:var(--lime);color:var(--lime-ink)} .btn-lime:hover{box-shadow:0 6px 18px -8px #c9f24daa} .btn-g{background:var(--surface);color:var(--ink);border-color:var(--line-2)} .btn-g:hover{border-color:var(--ink)} .btn-t{background:transparent;color:var(--brand);padding-inline:4px} .btn-t:hover{text-decoration:underline;text-underline-offset:4px} .btn-sm{font-size:13px;padding:9px 16px} .btn-lg{font-size:15.5px;padding:15px 28px} .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none} /* ── hero ─────────────────────────────────────────────────────────────── */ .hero{position:relative;isolation:isolate;background:var(--sunk);z-index:3} /* overflow:hidden used to live on .hero. It belongs on the photo layer: on .hero it also clipped the search dropdown, which forced the results into normal flow where every keystroke resized the page. */ /* ⚠️ ROOT CAUSE, fixed 30 Aug: these layers used z-index:-2 / -1. Per spec a negative-z child paints ABOVE its parent's background, but in practice the hero's own background covered them and the image never appeared — the page rendered as a blank white hero with the photo loaded but invisible. Positive, explicit layers are unambiguous. Do not reintroduce negative z here: 0 = photo 1 = veil 2 = content `isolation:isolate` on .hero keeps all three out of the page's stacking order. */ .hero .shot{position:absolute;inset:0;z-index:0;overflow:hidden} .hero .shot img{width:100%;height:100%;object-fit:cover;object-position:center 42%} /* ⚠️ The veil is aspect-ratio sensitive. An earlier version used 100deg with stops running to 82%; on a wide, short viewport (1512x802) the transparent stop projects clean off the right edge and the whole hero washes out white. Keep it at 90deg (true horizontal, geometry-independent) and let it reach full transparency well before the right edge. */ .hero .veil{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg, rgba(250,250,250,.97) 0%, rgba(250,250,250,.92) 26%, rgba(250,250,250,.55) 44%, rgba(250,250,250,.12) 56%, rgba(250,250,250,0) 64%)} /* Narrow screens: the copy sits over the whole frame, so lift from the bottom instead of the left — a horizontal fade would leave the text unreadable. */ @media(max-width:820px){ .hero .veil{background:linear-gradient(178deg, rgba(250,250,250,.62) 0%, rgba(250,250,250,.86) 34%, rgba(250,250,250,.96) 62%, rgba(250,250,250,.99) 100%)} } /* The hero veil's dark variants went with the dark palette above. */ .hero .in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vw,120px) clamp(18px,4vw,40px) clamp(64px,10vw,132px); min-height:clamp(440px,64vh,660px);display:flex;flex-direction:column;justify-content:center} .hero .col{max-width:min(100%,600px)} .hero .display{margin-top:14px} .hero .lede{margin-top:18px;max-width:46ch} .herocta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px} .trustrow{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-family:var(--mono);font-size:11.5px;color:var(--muted)} .trustrow span{display:flex;align-items:center;gap:7px} .trustrow span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none} /* ── sections ─────────────────────────────────────────────────────────── */ .sec{padding:clamp(52px,8vw,96px) 0} .sec-sunk{background:var(--sunk)} .sec-head{max-width:66ch;margin-bottom:clamp(26px,4vw,42px)} .sec-head .eyebrow{margin-bottom:12px;display:flex;align-items:center;gap:9px} .sec-head .eyebrow::before{content:"";width:22px;height:1px;background:var(--brand);flex:none} .sec-head .h2{margin-bottom:14px} /* ── cards / grid ─────────────────────────────────────────────────────── */ .grid{display:grid;gap:clamp(14px,2vw,20px)} .g2{grid-template-columns:1fr} .g3{grid-template-columns:1fr} .g4{grid-template-columns:repeat(2,1fr)} @media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}} @media(min-width:940px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:22px;transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)} .card-link:hover{border-color:var(--brand-line);box-shadow:var(--sh-lift);transform:translateY(-2px)} .card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:11px} .card .h4{margin-bottom:7px} .card p{font-size:14.5px;color:var(--muted);line-height:1.55} .card .go{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px} .card-link:hover .go{gap:10px} .card .go::after{content:"→";transition:transform .2s} .figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--sunk)} .figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9} .figure.tall img{aspect-ratio:4/5} /* ── stat strip ───────────────────────────────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .stat{background:var(--surface);padding:18px 18px 16px} .stat .n{font-family:var(--serif);font-weight:700;font-size:31px;letter-spacing:-.028em;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:9px;line-height:1.45} .stat .s{font-size:13px;color:var(--muted);margin-top:5px} /* ── forms ────────────────────────────────────────────────────────────── */ .field{display:block;margin-bottom:14px} .field > span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:7px} .inp,select.inp,textarea.inp{width:100%;background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-s);padding:12px 14px;font:inherit;font-size:15px;color:var(--ink); transition:border-color .18s,box-shadow .18s} .inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)} textarea.inp{min-height:88px;resize:vertical} select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px} .row2{display:grid;grid-template-columns:1fr;gap:0 14px} @media(min-width:560px){.row2{grid-template-columns:1fr 1fr}} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── lead block (inline, non-gating) ──────────────────────────────────── */ .leadblock{background:var(--brand-wash);border:1px solid var(--brand-line);border-radius:var(--r); padding:clamp(22px,3.4vw,34px);display:grid;gap:22px;grid-template-columns:1fr} @media(min-width:880px){.leadblock{grid-template-columns:1.05fr 1fr;align-items:center;gap:36px}} .leadblock .h3{margin-bottom:10px} .leadblock p{color:var(--ink-2);font-size:15px} .leadblock ul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px} .leadblock li{margin-bottom:5px} .leadblock li::marker{color:var(--brand)} /* ── modal ────────────────────────────────────────────────────────────── */ .amodal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;justify-content:center;padding:0} @media(min-width:620px){.amodal{align-items:center;padding:24px}} .amodal.open{display:flex} .amodal .scrim{position:absolute;inset:0;background:#0b0d0b8c;backdrop-filter:blur(3px)} .amodal .sheet{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:18px 18px 0 0;width:100%;max-width:520px;max-height:92vh;overflow-y:auto; padding:clamp(22px,4vw,30px);box-shadow:var(--sh-lift)} @media(min-width:620px){.amodal .sheet{border-radius:18px}} .amodal .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%; border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;font-size:17px;color:var(--muted)} .amodal .x:hover{color:var(--ink);border-color:var(--line-2)} .amodal .h3{margin-bottom:8px;padding-right:38px} .amodal .why{font-size:14.5px;color:var(--muted);margin-bottom:20px} .amodal .msg{font-size:14px;margin-top:12px;min-height:20px} .amodal .fine{font-size:12px;color:var(--faint);margin-top:14px;line-height:1.5} /* ── search ───────────────────────────────────────────────────────────── */ .searchbar{position:relative;display:flex;gap:10px;flex-wrap:wrap} .searchbar .inp{flex:1 1 260px;font-size:16.5px;padding:15px 16px 15px 44px} .searchbar .ic{position:absolute;left:16px;top:50%;transform:translateY(-52%);color:var(--faint);pointer-events:none;font-size:19px;line-height:1;z-index:2} .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} .chip{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase; padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface); color:var(--muted);cursor:pointer;transition:.16s} .chip:hover{border-color:var(--ink);color:var(--ink)} .chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-on)} .reslist{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)} .res{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 18px;border-bottom:1px solid var(--line);transition:background .15s} .res:last-child{border-bottom:0} .res:hover{background:var(--sunk-2)} .res > span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0} .res .nm{display:block;font-weight:600;font-size:15px;line-height:1.3} .res .mt{display:block;font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.04em;line-height:1.3} .res .arw{color:var(--brand);font-size:15px;flex:none} .rescount{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:16px;letter-spacing:.05em} .empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:14.5px} /* ── table ────────────────────────────────────────────────────────────── */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} table.t{border-collapse:collapse;width:100%;font-size:14px;min-width:520px} table.t th,table.t td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line)} table.t thead th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);background:var(--sunk);white-space:nowrap} table.t tbody tr:last-child td{border-bottom:0} table.t td.n,table.t th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} /* ── distress radar: every row is a WhatsApp link ─────────────────────── */ .t tr.drow{cursor:pointer;transition:background .14s} .t tr.drow:hover,.t tr.drow:focus-visible{background:var(--brand-wash);outline:none} .t tr.drow:focus-visible{box-shadow:inset 0 0 0 2px var(--brand)} .t tr.drow .waicon{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--faint);white-space:nowrap;transition:color .14s} .t tr.drow:hover .waicon,.t tr.drow:focus-visible .waicon{color:var(--brand)} .wadot{width:8px;height:8px;border-radius:99px;background:#1FAE62;display:inline-block;flex:none} /* ── about / agent profile page ───────────────────────────────────────── */ .abhero{display:grid;gap:clamp(24px,4vw,48px);align-items:center} @media(min-width:840px){.abhero{grid-template-columns:1.25fr .75fr}} .abrole{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--brand);margin-bottom:12px} .abportrait{border-radius:var(--r);overflow:hidden;background:var(--sunk-2);aspect-ratio:4/5} .abportrait img{width:100%;height:100%;object-fit:cover;display:block} /* a stock interior standing in for a missing headshot should read as scenery, not as a portrait of someone */ .abportrait.generic{aspect-ratio:4/5;filter:saturate(.86)} /* 9:16 intro video — poster first, file fetched only on play */ .abvid{display:grid;gap:clamp(24px,4vw,48px);align-items:center} @media(min-width:840px){.abvid{grid-template-columns:.62fr 1fr}} .abvidplayer{max-width:330px;width:100%;margin-inline:auto} .vshell{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden; background:var(--sunk-2);isolation:isolate} .vshell img,.vshell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .vshell video{z-index:2;background:#000} .vshell::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(0deg,rgba(14,14,16,.5),rgba(14,14,16,.12) 55%,rgba(14,14,16,.28))} .vshell.empty::after{background:rgba(14,14,16,.55)} .vplay{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%); width:64px;height:64px;border-radius:99px;border:0;cursor:pointer; background:rgba(255,255,255,.94);display:grid;place-items:center; transition:transform .18s,background .18s} .vplay:hover{transform:translate(-50%,-50%) scale(1.06);background:#fff} .vplay span{width:0;height:0;margin-left:4px; border-left:17px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent} .vplaceholder{position:absolute;z-index:3;left:0;right:0;bottom:22px;text-align:center; font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:#fff;line-height:2} .vplaceholder span{opacity:.6} /* the promises list — a checklist, not bullets */ .promises{list-style:none;margin:0;padding:0;display:grid;gap:14px} .promises li{position:relative;padding-left:28px;font-size:15px;line-height:1.62;color:var(--muted)} .promises li b{color:var(--ink);font-weight:600} .promises li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:7px; border-left:2px solid var(--brand);border-bottom:2px solid var(--brand); transform:rotate(-45deg)} .promises-no{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .promises-no li::before{width:13px;height:2px;border-left:0;border-bottom:2px solid var(--faint); transform:none;top:12px} /* ── homepage segment router ──────────────────────────────────────────── */ /* .router / .rstats were removed 30 Aug 2026 — the homepage segment card was replaced by the hero search bar, which asks the question once. */ /* ── project directory: segment bar, facets, image cards ──────────────── */ .segbar{display:flex;flex-wrap:wrap;gap:8px} .seg{font-size:14.5px;font-weight:600;padding:11px 20px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer; transition:background .16s,border-color .16s,color .16s} .seg:hover{border-color:var(--ink);color:var(--ink)} .seg .mono{font-family:var(--mono);font-size:11.5px;opacity:.6;margin-left:5px} .seg[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-on)} .seg[aria-pressed="true"] .mono{opacity:.75} .facets{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:14px} .facet{display:flex;flex-direction:column;gap:5px;min-width:150px;flex:1 1 150px;max-width:230px} .facet>span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted)} .fsel{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;cursor:pointer; appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px} .fsel:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .resbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between; margin-top:18px} .resbar .rescount{margin:0} .viewtoggle{display:flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden} .vt{width:36px;height:32px;border:0;background:var(--surface);color:var(--muted); cursor:pointer;font-size:14px;line-height:1} .vt[aria-pressed="true"]{background:var(--brand);color:var(--brand-on)} .pgrid{display:grid;gap:clamp(14px,2vw,20px); grid-template-columns:repeat(auto-fill,minmax(255px,1fr))} .pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit; transition:border-color .18s,transform .18s,box-shadow .18s} .pcard:hover{border-color:var(--brand);transform:translateY(-2px); box-shadow:0 8px 26px rgba(20,20,20,.07)} .pcimg{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sunk-2)} .pcimg img{width:100%;height:100%;object-fit:cover;display:block} /* Every non-photo card says so. These are category backdrops, exactly as the project sites use them, and a card that implies otherwise is a lie. */ .pcimg .illus{position:absolute;left:9px;bottom:9px;font-family:var(--mono);font-size:8.5px; letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(20,20,20,.5); padding:3px 7px;border-radius:3px;backdrop-filter:blur(3px)} .pcimg .pctag{position:absolute;right:9px;top:9px;font-family:var(--mono);font-size:9px; letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.92); padding:4px 9px;border-radius:99px} .pcbody{padding:15px 16px 17px;display:flex;flex-direction:column;gap:5px;flex:1} .pcbody h3{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.28; letter-spacing:-.015em;color:var(--ink)} .pcmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--muted)} .pchead{margin-top:auto;padding-top:9px;font-size:14.5px;color:var(--ink-2)} .pchead b{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink); font-variant-numeric:tabular-nums} .pchead .poa{font-family:var(--mono);font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted)} .pcsub{font-size:12.5px;color:var(--muted)} .res .rnum{font-size:13.5px;color:var(--ink-2);white-space:nowrap;text-align:right} .res .rnum b{font-family:var(--serif);font-weight:700;color:var(--ink)} @media(max-width:480px){ .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .pcbody{padding:12px 12px 14px} .pcbody h3{font-size:14.5px} } /* ── project listing pages ────────────────────────────────────────────── */ /* Same layering lesson as the home hero: explicit POSITIVE z-index only. 0 = photo, 1 = veil, 2 = content. Do not reintroduce negative z here. */ .phero{position:relative;isolation:isolate;overflow:hidden;background:var(--sunk); min-height:clamp(230px,26vw,330px);display:flex;align-items:flex-end} .phero .pshot{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover} .phero .pveil{position:absolute;inset:0;z-index:1; background:linear-gradient(0deg, rgba(250,250,250,.96) 0%, rgba(250,250,250,.82) 30%, rgba(250,250,250,.34) 62%, rgba(250,250,250,.04) 88%, rgba(250,250,250,0) 100%)} .phero .pin{position:relative;z-index:2;padding:clamp(26px,4vw,44px) 22px clamp(22px,3vw,34px)} .phero .pin nav a{color:var(--brand);text-decoration:none} .phero .pin nav a:hover{text-decoration:underline} /* jump bar — sections, not tabs, so everything stays in the HTML for Google while the reader still gets one tap to the part they came for */ .jumpbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .jumpbar a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line); background:var(--surface);color:var(--ink-2);text-decoration:none;transition:border-color .16s,color .16s} .jumpbar a:hover{border-color:var(--brand);color:var(--brand)} .pill-dn{background:#FDECEC;color:#B02222} /* The old .gstrip / .glight gallery was replaced by .pgal on 30 Aug 2026. Its rules are removed rather than left behind — nothing renders them. */ /* hero fact strip — the harvested numbers, tabular so they line up */ .factstrip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(128px,1fr))} .factstrip .f{background:var(--surface);padding:14px 16px} .factstrip .f b{display:block;font-family:var(--serif);font-weight:700;font-size:19px; letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)} .factstrip .f span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-top:5px;line-height:1.4} /* transaction-signal cards */ .siggrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .sigcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px} .sigcard b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.2vw,32px); letter-spacing:-.03em;color:var(--brand);line-height:1} .sigcard span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:9px;line-height:1.5} /* at-a-glance list */ .glance{list-style:none;margin:0;padding:0;display:grid;column-gap:clamp(20px,4vw,56px); grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); border-top:1px solid var(--line)} .glance li{display:flex;justify-content:space-between;gap:16px;padding:13px 2px; border-bottom:1px solid var(--line);font-size:14.5px} .glance li b{color:var(--muted);font-weight:500} .glance li span{color:var(--ink);text-align:right;font-family:var(--mono);font-size:13px} /* internal-link pills */ .pillrow{display:flex;flex-wrap:wrap;gap:8px} .pill{display:inline-flex;align-items:center;padding:8px 14px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--surface);color:var(--ink-2); font-size:13.5px;text-decoration:none;transition:border-color .16s,color .16s} .pill:hover{border-color:var(--brand);color:var(--brand)} /* ── result panel (calculators) ───────────────────────────────────────── */ .result{background:var(--brand);color:var(--brand-on);border-radius:var(--r);padding:24px;margin-top:6px} .result .rl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.72} .result .rv{font-family:var(--serif);font-weight:700;letter-spacing:-.03em;font-size:clamp(28px,4.6vw,40px);line-height:1.05;margin-top:8px;font-variant-numeric:tabular-nums} .result .rs{font-size:14px;opacity:.82;margin-top:9px;line-height:1.5} .breakdown{margin-top:14px;border-top:1px solid color-mix(in srgb,var(--brand-on) 22%,transparent);padding-top:12px; display:grid;gap:7px;font-size:13.5px} .breakdown div{display:flex;justify-content:space-between;gap:14px} .breakdown .v{font-family:var(--mono);font-variant-numeric:tabular-nums} /* secondary result — deliberately quieter than .result so the primary number (cash in hand) stays the one the eye lands on first */ .result.result-2{background:var(--surface);color:var(--ink);border:1px solid var(--line)} .result.result-2 .rl{color:var(--brand);opacity:1} .result.result-2 .rs{color:var(--muted);opacity:1} .result.result-2 .breakdown{border-top-color:var(--line)} .result.result-2 .breakdown div{color:var(--ink-2)} .note{border-left:2px solid var(--brand);background:var(--brand-wash);padding:13px 16px;border-radius:0 var(--r-s) var(--r-s) 0; font-size:14px;color:var(--ink-2);margin-top:16px} .note b{color:var(--ink)} /* ── footer ───────────────────────────────────────────────────────────── */ .afoot{background:var(--sunk);border-top:1px solid var(--line);padding:clamp(40px,6vw,64px) 0 30px;margin-top:clamp(40px,6vw,72px)} .afoot .cols{display:grid;grid-template-columns:1fr;gap:28px} /* Four columns, not five: brand · Find · Work it out · Get in touch. */ @media(min-width:640px){.afoot .cols{grid-template-columns:1fr 1fr}} @media(min-width:900px){.afoot .cols{grid-template-columns:1.4fr .9fr .9fr 1.1fr}} .afoot h5{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px} .afoot a{display:block;font-size:14.5px;color:var(--ink-2);padding:4px 0;transition:color .15s} .afoot a:hover{color:var(--brand)} .afoot .about p{font-size:14px;color:var(--muted);margin-top:10px;max-width:34ch} /* The footer consultation bar was removed 30 Aug 2026 — see pov-assoc.js. Its rules are gone with it rather than left as dead weight. */ .afoot .fcontact .faddr{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:10px; max-width:30ch} /* Contact icons. Email and WhatsApp used to print as full-length text links and cost the column two lines each; they are icons now, sharing one row with the social handles. 44px hit area — these are thumb targets. */ .afoot .fsoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px; border-top:1px solid var(--line)} .afoot .fico{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border:1px solid var(--line);border-radius:11px; color:var(--muted);background:transparent; transition:color .16s ease,border-color .16s ease,background .16s ease} .afoot .fico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} .afoot .fico:hover,.afoot .fico:focus-visible{color:var(--brand);border-color:var(--brand); background:var(--sunk-2)} @media (prefers-reduced-motion:reduce){.afoot .fico{transition:none}} /* CEA compliance line: registration + agency licence, on every page */ /* practice lockup — shown only when an associate has their own logo, so the footer still says who they operate under */ .afoot .fpractice{margin-top:30px;padding-top:20px;border-top:1px solid var(--line); display:flex;align-items:center;gap:12px} .afoot .fpractice span{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint)} .afoot .fpractice img{height:20px;width:auto;opacity:.8} .afoot .fpractice+.flicence{margin-top:18px;border-top:0;padding-top:0} .afoot .flicence{margin-top:32px;padding-top:18px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--mono);font-size:11px; letter-spacing:.04em;color:var(--muted)} .afoot .flicence b{color:var(--ink-2);font-weight:500} .afoot .legal{margin-top:18px;padding-top:18px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between; font-family:var(--mono);font-size:11px;color:var(--faint)} .badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px} .badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--line-2);border-radius:var(--r-pill);padding:5px 11px;color:var(--muted)} /* ── floating CTA ─────────────────────────────────────────────────────── */ /* The floating ask. Restored to the pill this brand has used since the -pov pages: the salesperson's face, a two-line label, and the WhatsApp disc. The indigo is deliberate — it is the one element on these pages that is NOT the house green, which is why it reads as a person rather than as chrome. */ .fab{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;gap:12px;align-items:center} .fab a,.fab button{border:none;cursor:pointer;border-radius:999px;display:inline-flex;align-items:center; transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .fab .talk{height:54px;gap:10px;padding:6px 20px 6px 6px;background:#4d72ff;color:#fff; box-shadow:0 4px 20px rgba(77,114,255,.45)} .fab .talk:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(77,114,255,.6)} .fab .talk .face{display:inline-flex;width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} .fab .talk .face img{width:100%;height:100%;object-fit:cover;display:block} /* the logo fallback is a mark on a tint, not a cropped photo */ .fab .talk .face.mark{align-items:center;justify-content:center;background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .fab .talk .face.mark img{width:32px;height:32px;object-fit:contain} .fab .talk .lbl{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:3px} .fab .talk .lbl b{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9} .fab .talk .lbl i{font-style:normal;font-size:14px;font-weight:700;letter-spacing:.01em} .fab .wa{width:54px;height:54px;background:#25D366;display:grid;place-items:center; box-shadow:0 4px 20px rgba(37,211,102,.45)} .fab .wa:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.6)} @media(max-width:480px){ .fab{right:14px;bottom:14px;gap:9px} .fab .talk{height:48px;padding:4px 16px 4px 4px;gap:9px} .fab .talk .face{width:38px;height:38px} .fab .talk .face.mark img{width:28px;height:28px} .fab .wa{width:48px;height:48px} } @media (prefers-reduced-motion:reduce){.fab a,.fab button{transition:none}} /* ── misc ─────────────────────────────────────────────────────────────── */ .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill)} .pill-up{background:color-mix(in srgb,var(--up) 14%,transparent);color:var(--up)} .pill-down{background:color-mix(in srgb,var(--down) 14%,transparent);color:var(--down)} .pill-live{background:var(--lime);color:var(--lime-ink)} .pill-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime-ink)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--brand-on);padding:11px 18px;z-index:300;border-radius:0 0 var(--r-s) 0} .skip:focus{left:0} hr.rule{border:0;border-top:1px solid var(--line);margin:clamp(34px,5vw,56px) 0} .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .reveal{opacity:1!important;transform:none!important} } /* ══ listing page v3 ═══════════════════════════════════════════════════════ Rebuilt 30 Aug 2026 against how a launch page actually reads: picture, one dense row of facts, contact, then TABLES. The previous version gave every figure its own full-width section with an eyebrow, a headline and three lines of explanation — eleven screens of page for six screens of content. The rules below exist to make things SHORTER; be careful adding padding. */ /* Compact section head. The full .sec-head reserves 42px below itself and lets the intro run to 66ch; on a page with eight sections that alone is a screen and a half of whitespace. */ .sec-head.tight{max-width:74ch;margin-bottom:clamp(16px,2.2vw,22px)} .sec-head.tight .h2{margin-bottom:6px;font-size:clamp(20px,2.6vw,27px)} .sec-head.tight .eyebrow{margin-bottom:9px} .sec-head.tight .sub{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:78ch} .psec-top{padding-top:clamp(22px,3vw,34px);padding-bottom:0} .psec-mid{padding-top:clamp(16px,2.4vw,22px);padding-bottom:clamp(20px,2.8vw,28px)} .ptitle{margin:10px 0 8px} .crumb a{color:var(--brand);text-decoration:none} .crumb a:hover{text-decoration:underline} /* Gallery hero — main frame plus a thumbnail strip, the launch-page opening. Only the 93 projects with a reviewed photo set get this; a stock backdrop in a six-thumb strip reads as padding, so everything else keeps the plain hero. */ .pgal{margin-top:18px} .pgalmain{display:block;position:relative;width:100%;padding:0;border:1px solid var(--line); border-radius:var(--r);overflow:hidden;background:var(--sunk-2);cursor:zoom-in; aspect-ratio:16/10;transition:border-color .16s} .pgalmain:hover{border-color:var(--brand)} .pgalmain img{width:100%;height:100%;object-fit:cover;display:block} .pgalcount{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:11px; letter-spacing:.1em;color:#fff;background:rgba(12,12,14,.62);padding:6px 11px;border-radius:99px; backdrop-filter:blur(4px)} .pgalthumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .pgalthumbs::-webkit-scrollbar{height:5px} .pgalthumbs::-webkit-scrollbar-thumb{background:var(--sunk-2);border-radius:99px} .pgalthumb{flex:0 0 auto;width:clamp(84px,11vw,116px);aspect-ratio:4/3;padding:0;cursor:pointer; border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--sunk-2); scroll-snap-align:start;opacity:.62;transition:opacity .16s,border-color .16s} .pgalthumb:hover{opacity:1} .pgalthumb.on{opacity:1;border-color:var(--brand)} .pgalthumb img{width:100%;height:100%;object-fit:cover;display:block} .plightbox{position:fixed;inset:0;z-index:9999;background:rgba(12,12,14,.94); display:flex;align-items:center;justify-content:center;padding:clamp(16px,5vw,60px)} .plightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px} .plightbox button{position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff; cursor:pointer;border-radius:99px;line-height:1;transition:background .15s} .plightbox button:hover{background:rgba(255,255,255,.22)} .plbx{top:18px;right:18px;width:42px;height:42px;font-size:26px} .plbnav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px} .plbnav.prev{left:14px}.plbnav.next{right:14px} @media(max-width:600px){.plbnav{width:40px;height:40px;font-size:24px}} /* take-up bar */ .takeup{margin-top:18px;max-width:520px} .takeup .tkl{display:flex;justify-content:space-between;font-family:var(--mono); font-size:11.5px;color:var(--muted);margin-bottom:7px} .takeup .tkbar{height:7px;border-radius:99px;background:var(--sunk-2);overflow:hidden} .takeup .tkbar i{display:block;height:100%;background:var(--brand);border-radius:99px} /* Contact row, directly under the facts. On the reference page the phone, WhatsApp and viewing buttons sit above the fold; ours used to sit nine screens down. Individual links are removed at runtime where the associate has no number on file — see wireContacts() in pov-assoc.js. */ .ctarow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center} .ctarow .btn{flex:0 1 auto} @media(max-width:520px){.ctarow{gap:8px}.ctarow .btn{flex:1 1 calc(50% - 4px);justify-content:center} .ctarow .btn-t{flex-basis:100%}} /* Specification table. Replaces a grid of one-figure cards, an "At a glance" list and a third block of harvested rows — same facts, two columns, no headline between them. */ .spectable{margin:0;display:grid;column-gap:clamp(24px,5vw,64px); grid-template-columns:repeat(auto-fit,minmax(320px,1fr));border-top:1px solid var(--line)} .spectable>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px; padding:12px 2px;border-bottom:1px solid var(--line)} .spectable dt{color:var(--muted);font-size:14px;font-weight:500;flex:0 1 auto} .spectable dd{margin:0;text-align:right;color:var(--ink);font-family:var(--mono);font-size:13.5px; font-variant-numeric:tabular-nums} .spectable dd i{display:block;font-family:var(--sans);font-style:normal;font-size:12px; color:var(--faint);margin-top:3px} .spectable.yieldrow{margin-bottom:18px} /* Data tables — unit mix, floor plans. */ .tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} table.dtable{border-collapse:collapse;width:100%;font-size:14.5px;min-width:420px} table.dtable th,table.dtable td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)} table.dtable thead th{font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--faint);font-weight:400;background:var(--sunk-2)} table.dtable tbody tr:last-child td{border-bottom:0} table.dtable td.num,table.dtable th.num{text-align:right;font-family:var(--mono); font-variant-numeric:tabular-nums;white-space:nowrap} .tnote{margin-top:12px;max-width:74ch} .tcta{margin-top:16px} .panelbody{margin-top:16px} /* Location. Map beside the lists on desktop, stacked on mobile. Each list shows four rows and hides the rest behind Show all — the same compression the reference page uses, and the reason this section is one screen not four. */ .locgrid{display:grid;gap:clamp(18px,2.6vw,26px)} @media(min-width:900px){.locgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}} .locmap{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--sunk-2);aspect-ratio:4/3;min-height:260px} .locmap iframe{width:100%;height:100%;border:0;display:block} .locmap .maplink{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;background:var(--surface);border:1px solid var(--line); color:var(--ink-2);padding:7px 12px;border-radius:99px;text-decoration:none} .locmap .maplink:hover{border-color:var(--brand);color:var(--brand)} .locnear{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .locgroup h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);font-weight:400;padding-bottom:8px;border-bottom:1px solid var(--line)} .locgroup h4 b{color:var(--brand);font-weight:400} .locgroup ul{list-style:none;margin:0;padding:0} .locgroup li{display:flex;justify-content:space-between;gap:12px;align-items:baseline; padding:9px 0;border-bottom:1px solid var(--line);font-size:14px} .locgroup li:last-child{border-bottom:0} .locgroup .ln{color:var(--ink);min-width:0} .locgroup .ld{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right; white-space:nowrap;font-variant-numeric:tabular-nums} .locgroup .ld i{display:block;font-style:normal;font-size:10.5px;color:var(--faint);margin-top:2px} .showall{margin-top:10px;padding:0;border:0;background:none;cursor:pointer; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)} .showall:hover{text-decoration:underline} /* Closing block. Was a lead panel and a separate internal-links section, each taking a full screen. */ .closeblock{display:grid;gap:22px;background:var(--brand-wash);border:1px solid var(--brand-line); border-radius:var(--r);padding:clamp(22px,3vw,32px)} @media(min-width:880px){.closeblock{grid-template-columns:1.15fr .85fr;align-items:center;gap:36px}} .closeblock .h3{margin:9px 0 10px} .closeblock p{color:var(--ink-2);font-size:15px} .ctacol{display:flex;flex-direction:column;gap:9px} .ctacol .btn{width:100%;justify-content:center} .nearby{margin-top:clamp(24px,3.4vw,34px)} .nearby h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);font-weight:400;margin-bottom:12px} .nearby .btn-t{margin-top:12px;padding-left:0} .disc{margin-top:22px;max-width:78ch} /* Sticky ask. Replaces the floating bubble on these pages rather than stacking with it — renderFab() stands down when #stickyCta is in the document. */ .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:14px; align-items:center;justify-content:space-between;flex-wrap:wrap; padding:11px clamp(14px,3vw,26px);background:var(--surface);border-top:1px solid var(--line); box-shadow:0 -8px 26px rgba(16,18,20,.09); transform:translateY(110%);transition:transform .22s ease;pointer-events:none} .stickycta.on{transform:none;pointer-events:auto} .stickycta .scwho{min-width:0;flex:1 1 200px} .stickycta .scwho b{display:block;font-family:var(--serif);font-weight:700;font-size:15px; color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stickycta .scwho span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stickycta .scbtns{display:flex;gap:8px;flex:0 0 auto} .stickycta .btn{padding:10px 18px;font-size:14px} @media(max-width:520px){.stickycta .scwho span{display:none} .stickycta .btn{padding:10px 14px;font-size:13.5px}} @media (prefers-reduced-motion:reduce){.stickycta{transition:none}} table.dtable tr.tot td{border-top:1px solid var(--line);font-weight:600;color:var(--ink)} /* ── listing-page rhythm ─────────────────────────────────────────────────── The marketing pages breathe at 96px between sections because they have one idea per screen. A listing page has eight blocks of reference data and the same rhythm turns it into a ten-screen scroll. These override only inside a project page, which is what .pgpage marks. */ .pgpage .sec{padding:clamp(32px,4.4vw,54px) 0} .pgpage .psec-top{padding-top:clamp(20px,2.6vw,30px);padding-bottom:0} .pgpage .psec-mid{padding-top:clamp(14px,1.8vw,18px);padding-bottom:clamp(18px,2.4vw,24px)} /* The gallery frame was running to 950px tall at desktop width — a picture that big is a page of its own before a single figure. Cap it, and let the thumbnails sit inside the same visual block. */ .pgpage .pgal{max-width:960px} .pgpage .pgalmain{aspect-ratio:16/9;max-height:min(52vh,440px)} .pgpage .phero{min-height:clamp(190px,20vw,260px)} /* Two columns, never three. At 1280px the auto-fit grid was making three columns of four rows, which reads as a scattered form rather than a spec sheet, and a five-word label wrapped mid-column. */ .spectable{grid-template-columns:1fr;max-width:960px} @media(min-width:820px){.spectable{grid-template-columns:1fr 1fr}} /* A three-row spec table in a full-height section looked like something had failed to load. Sections whose content is short get the short padding. */ .pgpage .sec.short{padding-top:clamp(24px,3vw,34px);padding-bottom:clamp(24px,3vw,34px)} /* Mobile contact row: WhatsApp full width as the primary, the two form buttons two-up beneath it, and Call dropped — the sticky bar carries a persistent contact anyway and four stacked buttons was most of a screen. */ @media(max-width:520px){ .ctarow{gap:8px} .ctarow .btn{min-width:0} .ctarow .btn:first-child{flex:1 1 100%;justify-content:center} .ctarow .btn:not(:first-child):not(.btn-t){flex:1 1 calc(50% - 4px);justify-content:center; padding-left:12px;padding-right:12px;font-size:14px} .ctarow .btn-t{display:none} } /* ══ homepage v3 ═══════════════════════════════════════════════════════════ Hero search bar, three category tiles, weekly rail. Added 30 Aug 2026 with the section reorder; the router card these replace is gone. */ /* Search bar in the hero. Sits on the hero's own light veil, so it needs a solid surface and a real border — a translucent bar over a photograph is unreadable at the exact moment someone is trying to type in it. */ .hsearch{display:flex;align-items:stretch;gap:0;margin-top:clamp(22px,3vw,30px); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill); padding:7px 7px 7px 4px;max-width:760px;box-shadow:0 10px 34px -22px #16181a55} .hsearch .hfield{display:flex;flex-direction:column;justify-content:center;gap:2px; padding:4px 16px;min-width:0;border-right:1px solid var(--line);flex:0 1 auto} .hsearch .hfgrow{flex:1 1 46%} .hsearch .hfield label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--faint);white-space:nowrap} .hsearch .hin{border:0;background:none;outline:none;font:inherit;font-size:14.5px;color:var(--ink); width:100%;min-width:0;padding:2px 0;appearance:none} .hsearch select.hin{cursor:pointer;padding-right:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center/9px} .hsearch .hin::placeholder{color:var(--faint)} .hsearch .hin:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px} .hsearch .hgo{flex:none;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer; background:var(--brand);color:var(--brand-on);display:grid;place-items:center;align-self:center; margin-left:6px;transition:transform .16s var(--ease)} .hsearch .hgo:hover{transform:scale(1.06)} .hsearch .hgo svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .hsearchwrap{position:relative;max-width:760px} .hero .reslist{position:absolute;top:100%;left:0;right:0;z-index:5;margin-top:8px; max-height:min(56vh,400px);overflow-y:auto; box-shadow:0 18px 44px -20px rgba(16,18,20,.32)} .hero .reslist .empty{padding:22px 18px} .hhint{margin-top:10px;color:var(--muted)} @media(max-width:720px){ /* Below this the four controls in a row are 90px each and unusable. Stack into a card; the round button becomes a full-width bar. */ .hsearch{flex-direction:column;border-radius:var(--r);padding:6px;gap:0} .hsearch .hfield{border-right:0;border-bottom:1px solid var(--line);padding:9px 14px;flex:1 1 auto} .hsearch .hgo{width:100%;height:46px;border-radius:var(--r-pill);margin:6px 0 0} } @media (prefers-reduced-motion:reduce){.hsearch .hgo{transition:none}} /* Three category tiles. These were chips — "New launches 126" next to "Upcoming sites 57" told you nothing about the difference between them, and the difference is the entire point: only one of the three is buyable today. The tile is also the filter, so there is one control, not a filter and a separate explanation. */ .cattiles{display:grid;gap:12px;margin-bottom:clamp(20px,2.6vw,26px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .cattile{text-align:left;cursor:pointer;padding:18px 20px 20px;border-radius:var(--r); background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:5px; transition:border-color .16s,background .16s,transform .16s var(--ease)} .cattile:hover{border-color:var(--brand);transform:translateY(-2px)} .cattile[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-wash); box-shadow:inset 0 0 0 1px var(--brand-line)} .cattile .ct-n{font-family:var(--serif);font-weight:700;font-size:28px;letter-spacing:-.03em; line-height:1;color:var(--brand);font-variant-numeric:tabular-nums} .cattile .ct-h{font-weight:600;font-size:15.5px;color:var(--ink)} .cattile .ct-p{font-size:13.5px;color:var(--muted);line-height:1.5} @media (prefers-reduced-motion:reduce){.cattile{transition:none}} /* Three doors, now inside the directory section rather than a section of their own. Same cards, one heading fewer. */ .doors{display:grid;gap:14px;margin-top:clamp(28px,3.6vw,40px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} /* Weekly rail — a horizontal scroller rather than a grid, so ten issues cost one row instead of four. Snap points so a swipe lands on a card. */ .wrail{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .wrail::-webkit-scrollbar{height:6px} .wrail::-webkit-scrollbar-thumb{background:var(--sunk-2);border-radius:99px} .wcardh{flex:0 0 auto;width:clamp(220px,25vw,270px);scroll-snap-align:start;text-decoration:none; border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface); display:flex;flex-direction:column;transition:border-color .16s,transform .16s var(--ease)} .wcardh:hover{border-color:var(--brand);transform:translateY(-2px)} .wshoth{aspect-ratio:16/10;background:var(--sunk-2);overflow:hidden} .wshoth img{width:100%;height:100%;object-fit:cover;display:block} .wbodyh{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1} .wbodyh h3{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.35; letter-spacing:-.015em;color:var(--ink)} .wbodyh .small{color:var(--faint);margin-top:auto} @media (prefers-reduced-motion:reduce){.wcardh{transition:none}} /* ── glossary ────────────────────────────────────────────────────────────── Ported from the retired brutalist page on 30 Aug 2026 when this surface split into its own repo. Two-column at desktop because these are reference entries, not an article — nobody reads a glossary top to bottom. */ .gterms{display:grid;gap:clamp(16px,2.2vw,22px); grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} .gterm{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:clamp(18px,2.4vw,24px);scroll-margin-top:88px} .gterm h3{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.015em; color:var(--ink);line-height:1.3;display:flex;flex-wrap:wrap;align-items:baseline;gap:9px} .gabbr{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--brand);background:var(--brand-wash);border:1px solid var(--brand-line); border-radius:99px;padding:4px 9px;font-weight:400} .gdef{margin-top:11px;font-size:14.5px;line-height:1.65;color:var(--ink-2)} .gdef b{color:var(--ink);font-weight:600} /* "Where it matters" — the part that separates this from a dictionary. */ .gtake{margin-top:12px;padding-top:12px;border-top:1px solid var(--line); font-size:13.5px;line-height:1.6;color:var(--muted)} .gtake b{color:var(--ink-2)}