/* =========================================================== Jackie Thompson · REALTOR® — Keller Williams Capital Realty Palette drawn from Jackie's own brand collateral: deep forest green, warm brass/camel, cream paper. =========================================================== */ :root{ /* Neutral ivory + warm stone. Brass accent carried over from Jackie's own printed collateral. Contrast checked against WCAG AA. */ --ink:#22201B; /* near-black, warm 15.9:1 on paper */ --stone:#38352E; /* dark UI only: primary buttons, gallery chrome */ --stone-soft:#4A463D; /* long-form prose 9.2:1 on paper */ --brass:#A8825A; /* decorative only: stars, rules, large display */ --brass-deep:#7F5E3D; /* small text on light + button fills; AA on all 3 grounds */ --brass-tint:#F1E9DC; --paper:#FDFCF9; /* ivory */ --paper-2:#F4F0E7; /* warm sand band */ --paper-3:#EAE3D6; /* deeper sand: footer */ --line:#E6E0D4; --line-soft:#F0EBE1; --muted:#67635A; /* 5.8 paper / 5.3 sand / 4.7 footer */ --white:#fff; --font-display:"Newsreader",ui-serif,Georgia,"Times New Roman",serif; --font-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --wrap:1240px; --gut:clamp(20px,5vw,64px); --r:4px; --r-lg:8px; --shadow-sm:0 1px 2px rgba(34,32,27,.06),0 2px 8px rgba(34,32,27,.04); --shadow-md:0 2px 6px rgba(34,32,27,.06),0 12px 32px rgba(34,32,27,.08); --shadow-lg:0 4px 12px rgba(34,32,27,.08),0 24px 64px rgba(34,32,27,.12); --ease:cubic-bezier(.22,.61,.36,1); --hdr-h:76px; } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth; /* keep #anchor targets clear of the fixed header */ scroll-padding-top:calc(var(--hdr-h) + 20px); } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-sans);font-size:16px;line-height:1.65; font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; /* `clip` (not `hidden`) — `hidden` on makes it a scroll container and stops the page scrolling. `clip` contains overflow without that. */ overflow-x:clip; } img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,textarea,select{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.12;letter-spacing:-.015em} p{margin:0} ul{margin:0;padding:0;list-style:none} ::selection{background:var(--brass);color:#fff} :focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px;border-radius:2px} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .wrap-wide{max-width:1440px} .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} .icon{width:1em;height:1em;flex:none;stroke-width:1.75} /* ---------- type scale ---------- */ .h-xl{font-size:clamp(2.5rem,1.4rem + 4.6vw,5rem);line-height:1.02;letter-spacing:-.03em} .h-lg{font-size:clamp(2rem,1.3rem + 2.8vw,3.4rem);line-height:1.08;letter-spacing:-.025em} .h-md{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);line-height:1.16;letter-spacing:-.02em} .h-sm{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.25;letter-spacing:-.015em} .eyebrow{ font-family:var(--font-sans);font-size:.7rem;font-weight:600; text-transform:uppercase;letter-spacing:.16em;color:var(--brass-deep); display:flex;align-items:center;gap:.65rem;margin-bottom:1.1rem; } .eyebrow::after{content:"";height:1px;flex:1;max-width:56px;background:var(--line)} .eyebrow.is-centred{justify-content:center} .eyebrow.is-centred::before{content:"";height:1px;flex:1;max-width:56px;background:var(--line)} .lede{font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);color:var(--muted);line-height:1.72;max-width:60ch} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.95rem 1.6rem;border-radius:var(--r);font-size:.9rem;font-weight:600; letter-spacing:.02em;transition:background .25s var(--ease),color .25s var(--ease), border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); border:1px solid transparent;text-align:center;line-height:1.2; } .btn .icon{width:1.05em;height:1.05em} .btn-primary{background:var(--stone);color:#fff;border-color:var(--stone)} .btn-primary:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent} .btn-ghost:hover{border-color:var(--stone);background:var(--white);transform:translateY(-1px);box-shadow:var(--shadow-sm)} .btn-brass{background:var(--brass-deep);color:#fff;border-color:var(--brass-deep)} .btn-brass:hover{background:#6E5134;border-color:#6E5134;transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn-block{width:100%} .btn-sm{padding:.7rem 1.15rem;font-size:.82rem} .link-arrow{ display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600; letter-spacing:.02em;color:var(--brass-deep); border-bottom:1px solid rgba(168,130,90,.35);padding-bottom:2px; transition:gap .25s var(--ease),border-color .25s var(--ease); } .link-arrow:hover{gap:.75rem;border-color:var(--brass-deep)} /* ---------- header ---------- */ .hdr{ position:fixed;inset:0 0 auto;z-index:120;height:var(--hdr-h); display:flex;align-items:center; transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); border-bottom:1px solid transparent; } .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%} .hdr.is-stuck{background:rgba(253,252,249,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(34,32,27,.05)} .brand{display:flex;flex-direction:column;line-height:1;gap:.3rem;flex:none} .brand-name{font-family:var(--font-display);font-size:1.22rem;letter-spacing:.01em;white-space:nowrap} .brand-sub{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);white-space:nowrap} .nav{display:flex;align-items:center;gap:2rem} .nav a{ font-size:.855rem;font-weight:500;letter-spacing:.01em;position:relative;padding:.3rem 0; transition:color .2s var(--ease); } .nav a::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease); } .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)} .hdr-cta{display:flex;align-items:center;gap:.75rem} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px;border-radius:var(--r)} .burger .icon{width:24px;height:24px} /* subpages: header is solid from the start */ .hdr.is-solid{background:rgba(253,252,249,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)} .hdr.is-solid .brand{color:var(--ink)} .hdr.is-solid .brand-sub{color:var(--muted)} .hdr.is-solid .nav a{color:var(--ink)} .hdr.is-solid .burger{color:var(--ink)} .hdr.is-solid .hdr-cta .btn-ghost{color:var(--ink);border-color:var(--line)} /* ---------- mobile drawer ---------- */ .drawer{ position:fixed;inset:0;z-index:200;background:var(--paper);color:var(--ink); display:flex;flex-direction:column;padding:1.4rem var(--gut) 2.5rem; transform:translateY(-100%);visibility:hidden; transition:transform .45s var(--ease),visibility .45s; } .drawer.is-open{transform:translateY(0);visibility:visible} .drawer-top{display:flex;align-items:center;justify-content:space-between;height:calc(var(--hdr-h) - 1.4rem)} .drawer-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-right:-10px} .drawer-close .icon{width:26px;height:26px} .drawer-nav{display:flex;flex-direction:column;gap:.35rem;margin-top:2.5rem;flex:1} .drawer-nav a{ font-family:var(--font-display);font-size:2rem;padding:.5rem 0; border-bottom:1px solid var(--line); opacity:0;transform:translateY(12px); } .drawer.is-open .drawer-nav a{animation:drawerIn .5s var(--ease) forwards} @keyframes drawerIn{to{opacity:1;transform:none}} .drawer-foot{display:flex;flex-direction:column;gap:.8rem;margin-top:2rem} .drawer-foot .btn{width:100%} .drawer-social{display:flex;gap:.6rem;margin-top:1.2rem} .drawer-social a{ width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r); display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s; } .drawer-social a:hover{background:var(--paper-2);border-color:var(--brass)} .drawer-social .icon{width:19px;height:19px} /* ---------- hero ---------- */ .hero{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;padding-top:var(--hdr-h)} .hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 78% 12%,rgba(168,130,90,.10),transparent 60%); } .hero-in{ position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr; gap:clamp(2rem,4vw,4.5rem);align-items:center; padding-block:clamp(3.5rem,7vw,6.5rem) clamp(3.5rem,7vw,6rem); } .hero .eyebrow{color:var(--brass-deep);} .hero .eyebrow::after{background:var(--line)} .hero h1{color:var(--ink);margin-bottom:1.5rem} .hero h1 em{font-style:italic;color:var(--brass-deep)} .hero-lede{color:var(--stone-soft);font-size:clamp(1rem,.96rem + .3vw,1.14rem);line-height:1.72;max-width:46ch;margin-bottom:2.2rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.8rem} .hero-trust{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;padding-top:1.8rem;border-top:1px solid var(--line)} .trust-item{display:flex;flex-direction:column;gap:.28rem} .trust-val{font-family:var(--font-display);font-size:1.6rem;line-height:1;display:flex;align-items:center;gap:.4rem} .trust-val .icon{width:16px;height:16px;color:var(--brass-deep)} .trust-lbl{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} .hero-media{position:relative} .hero-media img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-md);aspect-ratio:4/5;object-fit:cover;object-position:center} .hero-media::before{ content:"";position:absolute;inset:auto -14px -14px auto;width:62%;height:62%; border:1px solid rgba(168,130,90,.5);border-radius:var(--r-lg);z-index:-1; } .hero-badge{ position:absolute;left:-18px;bottom:34px;background:var(--white);color:var(--ink); border:1px solid var(--line); padding:.9rem 1.15rem;border-radius:var(--r);box-shadow:var(--shadow-md); display:flex;align-items:center;gap:.8rem;max-width:min(260px,80%); } .hero-badge .icon{width:22px;height:22px;color:var(--brass-deep)} .hero-badge-t{font-size:.78rem;line-height:1.35;font-weight:500} .hero-badge-t b{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:.15rem} /* ---------- sections ---------- */ .sec{padding-block:clamp(4rem,8vw,7.5rem)} .sec-tight{padding-block:clamp(3rem,5vw,4.5rem)} .sec-paper2{background:var(--paper-2)} .sec-head{max-width:62ch;margin-bottom:clamp(2.2rem,4vw,3.5rem)} .sec-head.is-centred{margin-inline:auto;text-align:center} .sec-head p{margin-top:1.1rem} .sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.2rem,4vw,3.2rem)} .sec-head-row .sec-head{margin-bottom:0} /* ---------- value props ---------- */ .props{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .prop{background:var(--paper);padding:clamp(1.6rem,2.6vw,2.4rem)} .prop .icon{width:26px;height:26px;color:var(--brass-deep);margin-bottom:1.1rem;stroke-width:1.5} .prop h3{font-size:1.12rem;margin-bottom:.55rem} .prop p{font-size:.9rem;color:var(--muted);line-height:1.68} /* ---------- listing cards ---------- */ .listings{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,2.6vw,2.4rem)} .lcard{ background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease); } .lcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent} .lcard-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)} .lcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .lcard:hover .lcard-media img{transform:scale(1.04)} .lcard-tags{position:absolute;top:.9rem;left:.9rem;display:flex;gap:.45rem;flex-wrap:wrap} .tag{ background:rgba(253,252,249,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:var(--ink);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em; padding:.42rem .7rem;border-radius:2px; } .tag-brass{background:var(--brass-deep);color:#fff} .lcard-count{ position:absolute;bottom:.9rem;right:.9rem;display:flex;align-items:center;gap:.4rem; background:rgba(34,32,27,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:#fff;font-size:.72rem;font-weight:600;padding:.4rem .65rem;border-radius:2px; } .lcard-count .icon{width:14px;height:14px} .lcard-body{padding:clamp(1.3rem,2.2vw,1.8rem);display:flex;flex-direction:column;flex:1;gap:.85rem} .lcard-price{font-family:var(--font-display);font-size:clamp(1.6rem,1.35rem + .9vw,2rem);line-height:1;letter-spacing:-.02em} .lcard-addr{font-size:1.02rem;font-weight:600;line-height:1.35} .lcard-city{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted)} .lcard-city .icon{width:15px;height:15px;color:var(--brass-deep)} .lcard-specs{display:flex;flex-wrap:wrap;gap:.5rem .6rem;padding-block:.35rem} .spec{ display:flex;align-items:center;gap:.42rem;font-size:.8rem;font-weight:500; background:var(--paper-2);border-radius:2px;padding:.42rem .68rem;white-space:nowrap; } .spec .icon{width:15px;height:15px;color:var(--brass-deep);stroke-width:1.6} .lcard-foot{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:1rem} .mls{font-size:.68rem;font-weight:600;letter-spacing:.09em;color:var(--muted);text-transform:uppercase} /* ---------- about ---------- */ .about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start} .about-media{position:relative;position:sticky;top:calc(var(--hdr-h) + 2rem)} .about-media img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-sm);aspect-ratio:4/5;object-fit:cover;object-position:center} .about-sig{margin-top:1.4rem;display:flex;flex-direction:column;gap:.2rem} .about-sig .n{font-family:var(--font-display);font-size:1.35rem} .about-sig .r{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)} .about-body p{margin-bottom:1.15rem;color:var(--stone-soft);line-height:1.78} .about-body p:first-of-type{font-size:1.1rem;color:var(--ink)} .pull{ margin:2rem 0;padding:1.5rem 0 1.5rem 1.6rem;border-left:2px solid var(--brass); font-family:var(--font-display);font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem); line-height:1.42;letter-spacing:-.015em;color:var(--ink); } .about-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:2rem} .fact{background:var(--paper);padding:1.15rem 1.3rem} .fact dt{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.35rem} .fact dd{margin:0;font-size:.92rem;font-weight:500;line-height:1.5} .fact dd a:hover{color:var(--brass-deep)} /* ---------- testimonials ---------- */ /* A uniform grid of quoted headlines, with the full review behind a click. Reviews vary from 15 to 95 words — showing them all in full made either cramped text or big dead space, so the card shows the strongest line and opens on demand. Uses native

, so it works without JavaScript. */ .tst-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.5rem);align-items:start; } .tst{ display:flex;flex-direction:column;height:100%; background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.5rem,2.2vw,1.9rem); transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease); } .tst.is-clickable:hover{border-color:var(--brass);box-shadow:var(--shadow-sm);transform:translateY(-2px)} .stars{display:flex;gap:.18rem;margin-bottom:1rem} .stars .icon{width:15px;height:15px;color:var(--brass)} .tst-head{ margin:0;font-family:var(--font-display); font-size:clamp(1.08rem,1rem + .35vw,1.28rem);line-height:1.45; letter-spacing:-.01em;color:var(--ink); } /* full review opens in a dialog — see .rvw below. Without JS the text simply shows inline instead, so nothing is lost. */ .tst-full{ margin:1rem 0 0;font-size:.9rem;line-height:1.78;color:var(--stone-soft); } .has-js .tst-full{display:none} .tst-open{ display:none;margin-top:1.05rem;align-items:center;gap:.45rem; font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--brass-deep); padding:.3rem 0;transition:gap .25s var(--ease);text-align:left; } .has-js .tst-open{display:inline-flex} .no-dialog .tst-full{display:block} .no-dialog .tst-open{display:none} .no-dialog .tst.is-clickable{cursor:auto} .tst-open .icon{width:14px;height:14px;transition:transform .25s var(--ease)} .tst-open:hover{gap:.68rem} .tst-open:hover .icon{transform:translateX(2px)} .has-js .tst.is-clickable{cursor:pointer} .tst-by{margin-top:auto;padding-top:1.35rem;border-top:1px solid var(--line-soft)} .tst-name{display:block;font-size:.86rem;font-weight:600} .tst-role{display:block;font-size:.75rem;color:var(--muted);margin-top:.1rem} @media (max-width:1140px){.tst-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:700px){.tst-grid{grid-template-columns:1fr}} .slider-ctl{display:flex;align-items:center;gap:.6rem} .sbtn{ width:46px;height:46px;border:1px solid var(--line);border-radius:50%; display:flex;align-items:center;justify-content:center; transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),opacity .25s; } .sbtn .icon{width:19px;height:19px} .sbtn:hover:not(:disabled){background:var(--stone);border-color:var(--stone);color:#fff} .sbtn:disabled{opacity:.3;cursor:default} .dots{display:flex;gap:.4rem;justify-content:center;margin-top:.4rem} .dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .25s,width .25s var(--ease)} .dot.is-on{background:var(--brass);width:22px;border-radius:4px} /* ---------- sold gallery ---------- */ .sold-track{ display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:1.4rem; scrollbar-width:none;-ms-overflow-style:none;scroll-padding-inline:var(--gut); } .sold-track::-webkit-scrollbar{display:none} .sold-item{ flex:0 0 auto;scroll-snap-align:start;width:clamp(220px,30vw,300px); border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);position:relative; cursor:zoom-in;border:0;padding:0; } .sold-item img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease),filter .4s} .sold-item:hover img{transform:scale(1.045)} .sold-item::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(34,32,27,.72),transparent 48%); opacity:0;transition:opacity .35s var(--ease); } .sold-item:hover::after{opacity:1} .sold-cap{ position:absolute;left:0;right:0;bottom:0;padding:1rem;color:#fff;font-size:.8rem; font-weight:500;text-align:left;z-index:2;opacity:0;transform:translateY(6px); transition:opacity .35s var(--ease),transform .35s var(--ease); } .sold-item:hover .sold-cap{opacity:1;transform:none} /* ---------- listing detail ---------- */ .lp-head{padding-top:calc(var(--hdr-h) + clamp(1.6rem,3vw,2.6rem));padding-bottom:clamp(1.2rem,2vw,1.8rem)} .crumbs{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted);margin-bottom:1.4rem;flex-wrap:wrap} .crumbs a:hover{color:var(--brass-deep)} .crumbs .icon{width:13px;height:13px;opacity:.5} .lp-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap} .lp-city{display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.95rem;margin-top:.6rem} .lp-city .icon{width:16px;height:16px;color:var(--brass-deep)} .lp-price{font-family:var(--font-display);font-size:clamp(2rem,1.5rem + 2vw,2.9rem);line-height:1;letter-spacing:-.025em;white-space:nowrap} .lp-mls{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.55rem;text-align:right} /* gallery */ .gal{position:relative;background:var(--ink);border-radius:var(--r-lg);overflow:hidden} .gal-stage{position:relative;aspect-ratio:3/2;background:var(--ink)} @media (max-width:640px){.gal-stage{aspect-ratio:4/3}} .gal-slide{ position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease); pointer-events:none; } .gal-slide.is-on{opacity:1;pointer-events:auto} .gal-slide img{width:100%;height:100%;object-fit:cover;cursor:zoom-in} .gal-nav{ position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%; background:rgba(253,252,249,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:var(--ink);display:flex;align-items:center;justify-content:center;z-index:3; transition:background .25s var(--ease),transform .25s var(--ease); } .gal-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)} .gal-nav .icon{width:20px;height:20px} .gal-prev{left:.9rem}.gal-next{right:.9rem} .gal-counter{ position:absolute;bottom:.9rem;left:.9rem;z-index:3;display:flex;align-items:center;gap:.4rem; background:rgba(34,32,27,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:#fff;font-size:.75rem;font-weight:600;padding:.42rem .72rem;border-radius:2px; } .gal-expand{ position:absolute;bottom:.9rem;right:.9rem;z-index:3;display:flex;align-items:center;gap:.45rem; background:rgba(34,32,27,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:#fff;font-size:.75rem;font-weight:600;padding:.42rem .72rem;border-radius:2px; transition:background .25s var(--ease); } .gal-expand:hover{background:var(--ink)} .gal-expand .icon{width:14px;height:14px} .thumbs{ display:flex;gap:.5rem;overflow-x:auto;padding:.7rem;background:var(--ink); scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent; } .thumbs::-webkit-scrollbar{height:6px} .thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px} .thumb{ flex:0 0 auto;width:88px;aspect-ratio:3/2;border-radius:3px;overflow:hidden; opacity:.45;transition:opacity .25s var(--ease),box-shadow .25s var(--ease);border:0;padding:0;background:none; } .thumb img{width:100%;height:100%;object-fit:cover} .thumb:hover{opacity:.8} .thumb.is-on{opacity:1;box-shadow:inset 0 0 0 2px var(--brass)} /* listing layout */ .lp-grid{display:grid;grid-template-columns:1fr 350px;gap:clamp(2rem,4vw,3.5rem);align-items:start;padding-block:clamp(2.5rem,5vw,4rem)} .keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:clamp(2rem,3.5vw,3rem)} .kf{background:var(--paper);padding:1.25rem 1.1rem;text-align:center} .kf .icon{width:21px;height:21px;color:var(--brass-deep);margin:0 auto .6rem;stroke-width:1.5} .kf-v{font-family:var(--font-display);font-size:1.45rem;line-height:1;margin-bottom:.32rem} .kf-l{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)} .lp-desc{font-size:1.02rem;line-height:1.8;color:var(--stone-soft)} .lp-desc p{margin-bottom:1.1rem} .blk{margin-top:clamp(2.2rem,4vw,3rem)} .blk h2{font-size:1.35rem;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)} .dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 2.5rem} .dl-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.72rem 0;border-bottom:1px solid var(--line-soft);font-size:.885rem} .dl-row dt{color:var(--muted);flex:none} .dl-row dd{margin:0;font-weight:500;text-align:right} /* agent aside */ .aside{position:sticky;top:calc(var(--hdr-h) + 1.5rem);display:flex;flex-direction:column;gap:1rem} .agent-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;text-align:center} .agent-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto .95rem;box-shadow:var(--shadow-sm)} .agent-card .n{font-family:var(--font-display);font-size:1.3rem;line-height:1.2} .agent-card .r{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-top:.3rem} .agent-card .b{font-size:.78rem;color:var(--muted);margin-top:.5rem;padding-top:.8rem;border-top:1px solid var(--line-soft)} .agent-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem} .note{ background:var(--brass-tint);border-radius:var(--r);padding:1rem 1.15rem; font-size:.8rem;line-height:1.6;color:var(--stone-soft);display:flex;gap:.7rem; } .note .icon{width:17px;height:17px;color:var(--brass-deep);flex:none;margin-top:2px} /* ---------- lightbox ---------- */ .lbx{ position:fixed;inset:0;z-index:300;background:rgba(15,20,17,.96); display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s; } .lbx.is-open{opacity:1;visibility:visible} .lbx img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:3px} .lbx-close{position:absolute;top:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:50%;background:rgba(255,255,255,.1);transition:background .25s} .lbx-close:hover{background:rgba(255,255,255,.22)} .lbx-close .icon{width:24px;height:24px} .lbx-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .25s} .lbx-nav:hover{background:rgba(255,255,255,.22)} .lbx-nav .icon{width:22px;height:22px} .lbx-prev{left:1rem}.lbx-next{right:1rem} .lbx-cap{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:.82rem;text-align:center;max-width:80vw;padding:.4rem .9rem;background:rgba(0,0,0,.35);border-radius:3px} /* ---------- review dialog ---------- */ /* Native