/* 17 Great Finds — elevated 2026-09-14. Base look from Kyle's concept; motion layer is transform/opacity only. */
:root{--ink:#171722;--muted:#61616b;--blue:#0E76BC;--blue-ink:#0B63A0;--green:#056839;--deep:#262262;--pale:#E8F2FA;--paper:#faf9f7;--line:#e6e3e8;--font:'DM Sans',Arial,sans-serif;--num:'Space Grotesk','DM Sans',Arial,sans-serif;
  --out:cubic-bezier(.16,1,.3,1);--soft:cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.4,.64,1)}
@supports (transition-timing-function:linear(0,1)){:root{--spring:linear(0,.079,.257,.466,.662,.823,.94,1.016,1.057,1.072,1.07,1.059,1.044,1.029,1.017,1.007,1,.997,.995,.995,.995,.996,.997,.998,1)}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:110px}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5}
::selection{background:var(--blue);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:min(1240px,calc(100% - 64px));margin:auto}
.skip{position:fixed;top:-80px;left:20px;z-index:100;background:#fff;padding:12px}
.skip:focus{top:12px}

/* ---------- Nav ---------- */
.nav-wrap{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97)}
.nav{position:relative;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid #f1eff2;border-top:0;border-radius:0 0 24px 24px;padding:12px 24px;box-shadow:0 5px 20px #21282d05}
.nav::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 14px 30px #21282d12;opacity:0;transition:opacity .45s var(--soft);pointer-events:none}
.nav-wrap.is-scrolled .nav::after{opacity:1}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{font-family:Georgia,serif;font-size:39px;line-height:1;font-weight:bold;letter-spacing:-4px;color:var(--deep)}
.brand-mark>span{font-size:25px;display:inline-block;transform:translateY(-2px);margin:0 3px;color:var(--blue);transition:transform .7s var(--spring),color .3s}
.brand-name{font-size:17px;line-height:1.2;letter-spacing:2px;font-weight:800;border-left:1px solid #CADCEB;padding-left:12px}
.brand-name small{display:block;font-size:10px;font-weight:500;letter-spacing:.2px;margin-top:4px}
.nav-links{display:flex;gap:23px;align-items:center;font-size:14px;font-weight:550}
.nav-links a{position:relative;padding:8px 2px;transition:color .3s var(--soft)}
.nav-links a::after{content:'';position:absolute;left:2px;right:2px;bottom:1px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--out),opacity .3s}
.nav-links a.is-current{color:var(--deep)}
.nav-links a.is-current::after{transform:scaleX(1);opacity:.25}
.nav-links a:focus-visible{border-radius:6px}
.menu-toggle{display:none;cursor:pointer}

/* ---------- Pill buttons ---------- */
.button{--cc:29px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:58px;padding:10px 10px 10px 28px;border-radius:60px;font-size:17px;font-weight:700;line-height:1.2;cursor:pointer;-webkit-user-select:none;user-select:none;
  box-shadow:0 0 0 1px #d1cbd6,0 6px 12px #151f2725,0 0 0 5px #ffffff60;transition:transform .7s var(--spring),translate .8s var(--spring)}
.button.is-magnet{transition:transform .7s var(--spring),translate .22s var(--out)}
.button::before{content:'';position:absolute;inset:-3px -3px -8px;border-radius:inherit;z-index:-1}
.button::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;box-shadow:inset 0 0 0 2px #ffffffa3,inset 0 0 0 5px #ffffff39,inset 0 4px 10px #ffffff70}
.btn-fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none}
.btn-fx::before{content:'';position:absolute;top:50%;left:calc(100% - var(--cc));width:230%;aspect-ratio:1;border-radius:50%;background:var(--flood,#fff);transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--out)}
.btn-fx::after{content:'';position:absolute;top:-10%;bottom:-10%;left:0;width:42%;background:linear-gradient(100deg,#fff0 10%,#ffffff42 50%,#fff0 90%);transform:translateX(-130%) skewX(-18deg)}
.button .label{position:relative;z-index:2;transition:transform .7s var(--spring)}
.button.dark{color:#fff;background:linear-gradient(#36363b,#17171a);--flood:linear-gradient(#3A93D1,#0B63A0)}
.button.blue{color:#fff;background:linear-gradient(#3A93D1,#0B63A0);--flood:linear-gradient(#0B63A0,#084B7C);box-shadow:0 0 0 1px #BFD9EE,0 7px 19px #0E76BC33,0 0 0 5px #E3EFF8}
.button.blue::after{box-shadow:inset 0 0 0 2px #ffffffa3,inset 0 0 0 5px #ffffff38,inset 0 4px 11px #ffffff99}
.button.white{background:#fff;color:var(--deep);--flood:linear-gradient(#F2F8FD,#DCEBF7)}
.round{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;height:38px;width:38px;background:#fff;color:var(--ink);flex-shrink:0;transition:transform .7s var(--spring),translate .8s var(--spring),background-color .35s var(--soft),color .35s var(--soft)}
.is-magnet .round{transition:transform .7s var(--spring),translate .22s var(--out),background-color .35s var(--soft),color .35s var(--soft)}
.round svg{position:absolute;left:23%;top:23%;width:54%;height:54%;transition:transform .5s var(--out)}
.round .a2{transform:translate(-170%,170%)}
.button.white .round{background:var(--blue);color:#fff}
.small{--cc:21px;font-size:14px;min-height:42px;padding:6px 6px 6px 19px;gap:12px}
.small .round{height:30px;width:30px}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(174deg,var(--paper) 55%,#fbfafc 77%,#DCEBF7 100%);padding:30px 0 58px;overflow:hidden}
.hero-copy{text-align:center}
.location-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #efecf0;border-radius:99px;padding:7px 14px;font-size:12px;font-weight:600;box-shadow:0 3px 12px #28384309}
.pin{font-size:19px;color:var(--blue-ink);line-height:1}
.pill-divider{height:14px;width:1px;background:#d8d2db;margin:0 4px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(46px,5.3vw,75px);font-weight:900;letter-spacing:-4px;line-height:1.01;margin:18px auto 15px}
h2{font-size:clamp(34px,4vw,54px);font-weight:750;letter-spacing:-2.3px;line-height:1.09}
h3{line-height:1.15;letter-spacing:-.6px}
p{color:var(--muted)}
.hero-copy>p{font-size:18px;line-height:1.45}
.actions{display:flex;justify-content:center;gap:22px;margin-top:27px;flex-wrap:wrap}
.hero-note{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:600;margin-top:24px}
.check{background:#E6F1F9;color:var(--blue-ink);height:23px;width:23px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.hero-rule{display:flex;align-items:center;gap:15px;max-width:760px;margin:19px auto 0;font-size:10px;letter-spacing:1.1px;color:#66616d}
.hero-rule:before,.hero-rule:after{content:'';height:1px;background:#e2dce5;flex:1}
.hero-rule:before{transform-origin:100% 50%}.hero-rule:after{transform-origin:0 50%}
/* hero headline words rise individually (opacity + translate only) */
.words .w{display:inline-block}
.words .w>span{display:inline-block}

/* ---------- Category cards ---------- */
.category-grid{display:grid;grid-template-columns:1fr 1.1fr 1.08fr 1.1fr 1fr;gap:13px;align-items:end;margin-top:24px;min-height:380px}
.photo-card,.feature-card{display:block;position:relative;border-radius:24px;color:#fff;isolation:isolate;transition:transform .8s var(--spring)}
.card-media{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;isolation:isolate}
.card-media img{position:absolute;inset:0;transform:scale(var(--zoom,1));transition:transform .9s var(--out)}
.card-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0c1318e6 0%,#15102218 78%)}
.card-shade::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#262262f0 0%,#0E76BC47 55%,#0E76BC00 88%);opacity:0;transition:opacity .6s var(--soft)}
.photo-card::before,.feature-card::before{content:'';position:absolute;left:7%;right:7%;bottom:-16px;height:55%;border-radius:50%;background:radial-gradient(closest-side,#141A3D7a,#141A3D00);z-index:-2;opacity:0;transform:translateY(4px);transition:opacity .5s var(--soft);pointer-events:none}
.photo-card::after,.feature-card::after,.tint-card::after{content:'';position:absolute;inset:-2px -2px -10px;border-radius:inherit;z-index:-3}
.category-stack{display:flex;flex-direction:column;gap:12px}
.outer .photo-card{height:237px}
.little-card{display:flex;gap:12px;align-items:center;min-height:125px;padding:20px 17px;border-radius:22px;background:#232034;color:#fff}
.little-card h3{font-size:16px;line-height:1.2}
.little-card p{color:#dbe1e6;font-size:12px;line-height:1.5;margin-top:7px}
.icon-circle{font-size:28px}
.inner{height:318px}
.center{height:292px}
.center .card-media{background:linear-gradient(140deg,#3A93D1,#0E76BC 70%,#0A4F85)}
.card-copy{position:absolute;left:20px;right:16px;bottom:20px;transition:transform .8s var(--spring)}
.card-copy h2{font-size:23px;font-weight:800;line-height:1.06;letter-spacing:-.8px}
.card-copy p{font-size:12px;color:#edf2f5;line-height:1.4;margin-top:10px}
.card-copy .round{position:absolute;right:0;bottom:0;width:31px;height:31px;background:var(--blue);color:#fff}
.card-tag{display:block;font-size:10px;font-weight:500;margin-bottom:10px}
.estates .card-copy{bottom:22px}
.estates h2{font-size:29px}
.category-icon{position:absolute;left:20px;top:20px;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:28px;background:#fff;color:var(--blue-ink);transition:transform .8s var(--spring)}
.feature-card .card-copy{bottom:22px}
.feature-card .card-copy h2{font-size:24px}
.feature-card .round{background:#CFE4F5;color:#262262}
.quilt{height:200px!important}
.quilt .card-copy h2{font-size:22px}
.tint-card{position:relative;isolation:isolate;min-height:162px;background:#E3EFF8;color:var(--deep);transition:transform .8s var(--spring),background-color .4s var(--soft)}
.tint-card p{color:#2E5877}
.tint-card .icon-circle{align-self:flex-start;line-height:1.1}
.tint-card .icon-circle svg{display:block;width:26px;height:26px;transition:transform .7s var(--spring)}

/* ---------- Sections ---------- */
.section{padding:100px 0}
.section-heading{text-align:center;margin-bottom:48px}
.section-pill{display:inline-flex;font-size:13px;padding:7px 16px;border-radius:30px;background:#EEF4F9;border:1px solid #DCE7F0;margin-bottom:20px}
.section-heading p{margin:18px auto 0;font-size:16px}
.auction-section{background:#f4f3f5}
@media (min-width:761px){.auction-section.section{padding-bottom:78px}}
@media (max-width:760px){.auction-section.section{padding-bottom:64px}}  /* #sold follows on white: ~90px of grey under "See all B&H auctions" */
/* The catalog wall (2026-09-16). One open sale = one wall: the sale itself is the single navy tile
   and every other tile is a real lot from that HiBid catalog. Tiles pack onto six columns in bands
   two rows tall — a lot is 1x2, a wide lot 2x2, the big lot and the sale card 2x4 — so the wall
   fills a clean rectangle at any column count and dense flow closes the gaps the card leaves. */
.sale-wall{display:block;margin-bottom:30px}
.wall-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:128px;grid-auto-flow:dense;gap:12px}
.wall-lot{position:relative;grid-row:span 2;display:block;border-radius:18px;background:#fff;border:1px solid #ECEFF2;overflow:hidden;isolation:isolate;transition:transform .7s var(--spring),border-color .35s var(--soft)}
.wall-lot.wide{grid-column:span 2}
.wall-lot.big{grid-column:span 2;grid-row:span 4}
.wall-img{position:absolute;inset:0 0 54px;padding:15px 15px 3px}
.wall-img img{object-fit:contain;transition:transform .9s var(--out)}
/* a tile turning over to another lot in the same catalog (wall-rotate.js) */
.wall-cap b{transition:color .35s var(--soft),opacity .34s var(--soft) .05s}
.wall-lot.is-turning .wall-img img{opacity:0;transform:scale(.965);transition:opacity .3s var(--soft),transform .42s var(--soft)}
.wall-lot.is-turning .wall-cap b,.wall-lot.is-turning .wall-cap em{opacity:0;transition:opacity .26s var(--soft)}
.wall-cap em{transition:opacity .34s var(--soft) .05s}
.wall-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:8px 14px 12px;background:#fff}
.wall-cap em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--blue-ink);font-variant-numeric:tabular-nums}
.wall-cap b{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .35s var(--soft)}
.wall-lot::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),#7DB8E3);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--out);z-index:3}

/* the sale, as the one navy tile in the wall */
.wall-card{--accent:#DCEDFB;--accent-soft:#ffffff33;--accent-ink:var(--blue-ink);
  position:relative;grid-column:span 2;grid-row:span 4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:18px;padding:30px 26px 28px;
  background:linear-gradient(140deg,#3A93D1,#0E76BC 70%,#0A4F85);color:#fff;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 1px 0 #ffffff29,0 18px 40px #0a4f851f;transition:transform .7s var(--spring),box-shadow .6s var(--soft)}
.wall-card::before{content:'';position:absolute;left:-25%;right:-35%;top:-45%;height:80%;background:radial-gradient(closest-side,var(--accent-soft),#ffffff00);pointer-events:none;z-index:-1;transition:background .8s var(--soft)}
.wall-card>*{flex:none}   /* nothing in the card may shrink: a clamped paragraph that shrinks spills over the list below it */
.wall-live{position:relative;align-self:center;margin-bottom:4px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;background:#ffffff14;border:1px solid #ffffff2b;border-radius:30px;padding:6px 13px;transition:border-color .6s var(--soft)}
.wall-live b{font-weight:650}
.wall-card:is(.s-final,.s-closing) .wall-live{border-color:#ffffff4a}
.wall-card h3{margin:20px 0 0;font-size:clamp(27px,2.5vw,37px);font-weight:750;letter-spacing:-1.6px;line-height:1.02}
/* ---- the sale clock: set as type, not as a gadget ---- */
.sale-clock{width:100%;margin-top:28px}
.clock-kicker{display:block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent);transition:color .6s var(--soft)}
.clock-time{display:flex;justify-content:center;align-items:baseline;gap:22px;margin:12px 0 0;color:#fff;font-variant-numeric:tabular-nums}
.clock-time .t{display:inline-flex;align-items:baseline;gap:4px}
.clock-time b{font-family:var(--num);font-size:clamp(42px,4.2vw,58px);font-weight:700;line-height:.92;letter-spacing:-2px;font-style:normal;color:inherit}
.clock-time i{font-style:normal;font-size:14px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#BBDAF1;transition:color .6s var(--soft)}
.clock-bar{position:relative;width:100%;height:2px;margin-top:20px;border-radius:2px;background:#ffffff1f;overflow:hidden}
.clock-bar span{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--run,0));border-radius:2px;background:var(--accent);
  transition:transform 1s linear,background-color .6s var(--soft)}
.clock-when{margin:11px 0 0;font-size:12.5px;color:#DCEDFB;font-variant-numeric:tabular-nums}

.wall-where{margin:12px 0 0;font-size:13px;color:#D3E7F7}
.wall-where .count{color:#fff;font-weight:700}
.clock-pickup{margin:7px 0 0;font-size:12px;color:#BBDAF1}

/* temperature: the closer the sale is to ending, the warmer the card gets */
/* published on HiBid, bidding not open yet: calm, not urgent */
.wall-card.s-preview{--accent:#BBDAF1;--accent-soft:#ffffff2b}
.wall-card.s-soon{--accent:#F5C25F;--accent-soft:#F0A62B33}
.wall-card.s-today{--accent:#FFA468;--accent-soft:#F2762B3d}
.wall-card.s-final,.wall-card.s-closing{--accent:#FF8770;--accent-soft:#F0443833}
.wall-card.s-over{--accent:#8F94C6;--accent-soft:#26226200}
.wall-card{--accent-ink:var(--blue)}
.wall-card.s-soon{--accent-ink:#B87400}
.wall-card.s-today{--accent-ink:#C4541A}
.wall-card:is(.s-final,.s-closing){--accent-ink:#C2321B}
.wall-card .button.white .round{background:var(--accent-ink);transition:background-color .6s var(--soft)}
/* on the blue ground the brand green goes muddy, so the live dot brightens */
.wall-card .live-dot{background:#63DD9B;box-shadow:0 0 0 4px #ffffff2b}
.wall-card:is(.s-today,.s-final,.s-closing) .live-dot{background:var(--accent);box-shadow:0 0 0 4px #ffffff29}
.remind-form .button.blue{background:#fff;color:var(--blue-ink);--flood:linear-gradient(#F2F8FD,#DCEBF7);box-shadow:0 0 0 1px #ffffff5e,0 7px 19px #04365c3d,0 0 0 5px #ffffff26}
.remind-form .button.blue .round{background:var(--blue);color:#fff}
.wall-card:is(.s-final,.s-closing) .clock-time b{color:var(--accent)}
.wall-card:is(.s-final,.s-closing) .clock-time b{font-size:clamp(46px,4.6vw,64px)}
.wall-card:is(.s-final,.s-closing) .wall-live{border-color:#ffffff4a}
.card-face{display:flex;flex-direction:column;align-items:center;width:100%}
.card-acts{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px}
.wall-card .button{align-self:center;z-index:2}
.remind-open{display:inline-flex;align-items:center;gap:7px;padding:12px 16px;border:0;border-radius:40px;background:none;color:#D9ECFA;
  font-size:13.5px;font-weight:650;cursor:pointer;transition:color .3s var(--soft),background-color .3s var(--soft)}
.remind-open svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* the card turns over to the reminder */
.card-remind{display:flex;flex-direction:column;width:100%;text-align:left}
.remind-back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 10px 6px 6px;border:0;border-radius:30px;
  background:none;color:#CFE5F7;font-size:12.5px;font-weight:650;cursor:pointer;transition:color .3s var(--soft)}
.remind-back .ta{width:13px;height:13px;transform:rotate(180deg)}
.card-remind h4{margin:0;font-size:20px;font-weight:750;letter-spacing:-.8px}
.rf-note{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:#CBE3F6}
.rf-hp{position:absolute;left:-9999px}
.rf-field{display:block;margin-top:13px}
.rf-field span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#BBDAF1;margin-bottom:5px}
.rf-field i{font-style:normal;font-weight:600;letter-spacing:.4px;color:#8FC2E6;text-transform:none}
.rf-field input{width:100%;height:42px;padding:0 13px;border-radius:11px;border:1px solid #ffffff2e;background:#ffffff14;color:#fff;
  font:550 14px/1 var(--font);transition:border-color .3s var(--soft),background-color .3s var(--soft)}
.rf-field input::placeholder{color:#9AC8E8}
.rf-field input:focus{outline:none;border-color:var(--accent);background:#ffffff1f}
.rf-check{display:flex;align-items:flex-start;gap:9px;margin-top:13px;font-size:11.5px;line-height:1.45;color:#CBE3F6;cursor:pointer}
.rf-check input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:var(--blue)}
.rf-error{margin:11px 0 0;font-size:12px;font-weight:600;color:#FFD9CF}
.remind-form .button{width:100%;margin-top:15px;min-height:46px}
.rf-fine{margin:11px 0 0;font-size:10.5px;line-height:1.4;color:#9AC8E8}
.remind-done{text-align:center;margin:auto 0;display:flex;flex-direction:column;align-items:center}
.rd-tick{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#1E9E63;margin-bottom:14px}
.rd-tick svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.remind-done p{margin:8px 0 0;font-size:13px;line-height:1.5;color:#D3E7F7}
.remind-done .text-link{margin-top:16px;background:none;border:0;cursor:pointer;color:#fff;font-size:13px;font-weight:650}
.wall-card.is-remind .row-link::after{display:none}   /* the whole-card link must not sit over the fields */
.wall-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:15px 4px 0;font-size:13px;color:var(--muted)}
.wall-foot-acts{display:flex;align-items:center;gap:22px}
/* browse: the wall opens into the photographed part of the catalog (wall-browse.js) */
.wall-open{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;border:1px solid #D7DEE6;border-radius:30px;background:#fff;font-size:13px;font-weight:650;color:var(--deep);cursor:pointer;
  transition:transform .6s var(--spring),border-color .3s var(--soft),background-color .3s var(--soft),box-shadow .4s var(--soft)}
.wall-open svg{width:14px;height:14px;color:var(--blue-ink);transition:transform .5s var(--out)}
.browse-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.browse-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:baseline;gap:7px;padding:9px 15px;border:1px solid #E1E6EB;border-radius:30px;background:#fff;font-size:13px;font-weight:600;color:#5c5866;cursor:pointer;
  transition:transform .5s var(--spring),border-color .3s var(--soft),background-color .3s var(--soft),color .3s var(--soft)}
.chip em{font-style:normal;font-size:11px;font-weight:700;color:#9a94a3;font-variant-numeric:tabular-nums;transition:color .3s var(--soft)}
.chip.is-on{background:var(--deep);border-color:var(--deep);color:#fff}
.chip.is-on em{color:#A9AEDC}
.browse-close{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid transparent;border-radius:30px;background:none;font-size:13px;font-weight:650;color:var(--blue-ink);cursor:pointer;transition:background-color .3s var(--soft),transform .5s var(--spring)}
.browse-close .ta{width:13px;height:13px;transform:rotate(180deg)}
.browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px}
.browse-lot{position:relative;display:block;border-radius:16px;background:#fff;border:1px solid #ECEFF2;overflow:hidden;isolation:isolate;aspect-ratio:1/1.18;
  transition:transform .6s var(--spring),border-color .3s var(--soft),box-shadow .45s var(--soft)}
.browse-img{position:absolute;inset:0 0 46px;padding:13px 13px 2px}
.browse-img img{object-fit:contain;transition:transform .8s var(--out)}
.browse-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:1px;padding:7px 12px 10px;background:#fff}
.browse-cap em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--blue-ink);font-variant-numeric:tabular-nums}
.browse-cap b{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browse-lot.is-peeked{border-color:var(--deep);box-shadow:0 0 0 2px var(--deep)}
.browse-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 4px 0;font-size:13px;color:var(--muted)}
.browse-sale{font-weight:700;color:var(--deep)}

/* a lot opened in place, full width under its row */
.browse-peek{grid-column:1/-1;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center;
  margin:2px 0 4px;padding:24px 26px;border-radius:20px;background:var(--deep);color:#fff;overflow:hidden}
.browse-peek::before{content:'';position:absolute;left:-10%;top:-60%;width:60%;height:160%;background:radial-gradient(closest-side,#3A93D140,#3A93D100);pointer-events:none}
.peek-photo{position:relative;width:190px;height:190px;border-radius:14px;background:#fff;padding:12px;flex:none}
.peek-photo img{object-fit:contain}
.peek-copy{position:relative;min-width:0}
.peek-lot{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#fff;background:#ffffff1f;border:1px solid #ffffff30;border-radius:20px;padding:4px 10px;font-variant-numeric:tabular-nums}
.browse-peek h4{margin:13px 0 0;font-size:clamp(20px,2vw,26px);font-weight:750;letter-spacing:-.9px;line-height:1.12}
.peek-desc{margin:9px 0 0;font-size:14px;color:#C6CAEC;font-variant-numeric:tabular-nums}
.peek-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#A2A8D8;max-width:52ch}
.browse-peek .button{margin-top:17px}
/* solid, because on phones the photo goes full width and sits right under this button */
.peek-close{position:absolute;z-index:3;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff42;background:#2B2670;color:#fff;cursor:pointer;transition:background-color .3s var(--soft),transform .5s var(--spring)}
.peek-close svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.motion .browse-peek{opacity:0;translate:0 -8px;transition:opacity .35s var(--soft),translate .45s var(--out)}
.motion .browse-peek.is-open{opacity:1;translate:0 0}
.motion .browse-grid.is-in .browse-lot{animation:gf-browse-in .5s var(--out) both;animation-delay:calc(var(--i,0)*.022s)}
@keyframes gf-browse-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.motion .browse-grid.is-in .browse-lot{animation:none}}
@media(max-width:760px){
  .browse-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
  .browse-peek{grid-template-columns:1fr;gap:18px;padding:20px}
  .peek-photo{width:100%;height:210px}
  .browse-bar{gap:12px}
  .browse-foot{flex-direction:column;align-items:flex-start;gap:8px}
}
/* a sale posted on HiBid before its lot photos have been cut: the card alone, as a wide banner
   rather than one narrow tile marooned in an empty grid (site.js sets .is-bare) */
.sale-wall.is-bare .wall-grid{grid-auto-rows:auto}
.sale-wall.is-bare .wall-card{grid-column:1/-1;grid-row:auto;min-height:0;display:grid;align-content:center;column-gap:40px;padding:32px 34px;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"live clock" "meta clock" "title clock" "blurb button"}
.sale-wall.is-bare .wall-live{grid-area:live;justify-self:start}
.sale-wall.is-bare .wall-card .auction-meta{grid-area:meta;justify-content:flex-start;gap:10px}
.sale-wall.is-bare .wall-card .auction-meta span+span::before{content:'·';margin-right:10px}
.sale-wall.is-bare .wall-card h3{grid-area:title}
.sale-wall.is-bare .wall-card h3 br{display:none}
.sale-wall.is-bare .wall-card>p{grid-area:blurb}
.sale-wall.is-bare .sale-clock{grid-area:clock;align-self:end;padding-top:0;margin-top:0;border-top:0}
.sale-wall.is-bare .wall-close{display:none}
.sale-wall.is-bare .wall-card .button{grid-area:button;justify-self:start;align-self:start;margin-top:22px}
@media(max-width:820px){
  .sale-wall.is-bare .wall-card{grid-template-columns:1fr;grid-template-areas:"live" "meta" "title" "blurb" "clock" "button"}
  .sale-wall.is-bare .sale-clock{padding-top:22px}
}
.auction-meta{display:flex;justify-content:space-between;gap:20px;color:#6b6270;font-size:13px}
.count{font-variant-numeric:tabular-nums}
.row-link::after{content:'';position:absolute;inset:0;border-radius:18px;z-index:1}
.row-link:focus-visible{outline:none}
.wall-card:has(.row-link:focus-visible){outline:2px solid var(--blue);outline-offset:4px}
.countdown{display:inline-block;vertical-align:1px;font-size:11px;font-weight:650;color:var(--blue-ink);background:#EAF3FA;border:1px solid #D2E5F3;border-radius:20px;padding:2px 9px}
/* the wall's own line is the action; the section footer under it is small print */
.auction-footer{display:flex;align-items:center;justify-content:space-between;margin-top:26px;padding-top:18px;border-top:1px solid #E3E0E6;gap:24px}
.auction-footer p{font-size:12.5px;max-width:540px;color:#7c7784}
.auction-footer .text-link{font-size:13.5px}

/* text links: drawn underline + arrow nudge */
.text-link{font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:11px;transition:color .3s var(--soft)}
.tl{position:relative}
.tl::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--out)}
.ta{width:15px;height:15px;flex:0 0 auto;transition:transform .6s var(--spring)}
.text-link:focus-visible,.mailing-link:focus-visible,.ul:focus-visible{border-radius:6px}

.selling-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:start}
.selling-intro>p{max-width:420px;margin:23px 0 29px;font-size:17px}
.service-list{margin-top:-24px}
.service-list article{position:relative;isolation:isolate;display:flex;gap:25px;padding:24px 0;border-bottom:1px solid var(--line)}
.service-list article::before{content:'';position:absolute;top:0;bottom:0;left:-14px;right:-14px;border-radius:18px;background:linear-gradient(90deg,#EEF6FC,#EEF6FC00 88%);opacity:0;z-index:-1;transition:opacity .5s var(--soft)}
.service-list article::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--blue),#7DB8E3);transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--out)}
.service-list article>span{color:var(--blue-ink);background:#eaf0f5;min-width:45px;height:45px;display:grid;place-items:center;border-radius:14px;font-size:25px;transition:transform .7s var(--spring),background-color .35s var(--soft),color .35s var(--soft)}
.service-list h3{font-size:23px;margin:0 0 9px;transition:transform .7s var(--spring),color .3s}
.service-list p{font-size:15px;max-width:400px;line-height:1.6}
.about-section{background:#f9f8fa}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}
.about-visual{height:540px;position:relative;border-radius:28px;overflow:hidden;isolation:isolate}
.about-visual img{object-position:center}
.about-stamp{display:flex;gap:20px;align-items:center;position:absolute;bottom:23px;left:23px;right:23px;background:#fffffff5;padding:24px;border-radius:18px;box-shadow:0 6px 24px #2622620d}
.about-stamp>span:last-child{font-size:14px;line-height:1.3;border-left:1px solid #CADCEB;padding-left:20px}
.about-copy>p{margin-top:22px;font-size:16px;max-width:465px}
.about-copy .text-link{margin-top:28px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:52px}
.step-number{position:relative;display:block;font-size:16px;color:var(--blue-ink);padding-bottom:16px;margin-bottom:23px;transition:color .3s}
.step-number::before,.step-number::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#CADCEB;transform-origin:0 50%;transition:transform 1.3s var(--out) calc(var(--rd,0s) + .15s)}
.step-number::after{height:2px;bottom:-.5px;background:linear-gradient(90deg,var(--blue),#7DB8E3);transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--out)}
.steps h3{font-size:24px;margin-bottom:12px;transition:transform .7s var(--spring)}
.steps p{font-size:16px;line-height:1.6}
.center-action{text-align:center;margin-top:42px}

/* FAQ */
.faq-section{background:#f4f6f7}
.faq-grid{display:grid;grid-template-columns:1fr 1.45fr;gap:100px}
.faq-grid>div>p{margin:25px 0 18px;font-size:16px}
.faqs details{border-bottom:1px solid #d5dce1}
.faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:21px 0;font-size:18px;font-weight:600}
.faqs details:first-child summary{padding-top:3px}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:focus-visible{outline-offset:2px;border-radius:8px}
.faqs .q{transition:transform .7s var(--spring),color .3s var(--soft)}
.pm{position:relative;flex:0 0 auto;align-self:flex-start;width:34px;height:34px;margin-top:-4px;border-radius:50%;transition:transform .7s var(--spring),background-color .3s var(--soft)}
.pm::before,.pm::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:var(--blue);transition:transform .6s var(--spring)}
.pm::after{transform:rotate(90deg)}
.faqs details[open]:not(.is-closing) .pm{transform:rotate(180deg);background:#E3EFF8}
.faqs details[open]:not(.is-closing) .pm::after{transform:rotate(0deg)}
.faqs details[open]:not(.is-closing) .q{color:var(--deep)}
.faq-body{overflow:hidden}
.faq-inner{padding:0 0 22px}
.faqs details p{font-size:15px;line-height:1.65;max-width:570px}

/* Closing CTA */
.contact-section{padding:60px 0}
.contact-box{position:relative;isolation:isolate;overflow:hidden;border-radius:32px;text-align:center;padding:65px 24px;background:radial-gradient(ellipse at 50% 140%,#7DB8E3 0%,#D3E7F5 45%,#EEF6FB 100%)}
.contact-box::before{content:'';position:absolute;left:-10%;top:-35%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#F7FBFEd9,#F7FBFE00);z-index:-1;pointer-events:none}
.contact-box::after{content:'';position:absolute;right:-12%;bottom:-55%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#7DB8E3a8,#7DB8E300);z-index:-1;pointer-events:none}
.contact-box .section-pill{background:#ffffff70;border-color:#ffffff90}
.contact-box h2{font-size:clamp(33px,4vw,52px)}
.mailing-link{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:14px;margin-top:30px;padding-bottom:4px;color:#2F5673;transition:color .3s}
.mailing-link::before,.mailing-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#5B85A6;transform-origin:100% 50%;transition:transform .55s var(--out)}
.mailing-link::after{height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:100% 50%}
.mailing-link .tl::after{display:none}
.mailing-link .ta{width:13px;height:13px}

/* Footer */
footer{padding-top:22px}
.footer-main{display:grid;grid-template-columns:1.1fr .9fr 1.1fr 1fr;gap:35px;padding:22px 0 45px;align-items:center}
.footer-main p,.footer-main>div{font-size:13px;color:#68606d}
.footer-main>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;padding:23px 0;font-size:11px;color:#776d7c}
.ul{position:relative;transition:color .3s var(--soft)}
.ul::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--out)}
.to-top{display:inline-flex;align-items:center;gap:5px}
.to-top svg{width:12px;height:12px;transition:transform .6s var(--spring)}

/* ================= Interaction states =================
   Hover lives only on fine pointers; focus-visible mirrors it for keyboards; :active gives touch a press. */
@media (hover:hover) and (pointer:fine){
  .brand:hover .brand-mark>span{transform:translateY(-3px) rotate(-12deg) scale(1.14);color:#3A93D1}
  .nav-links a:hover{color:var(--blue-ink)}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%;opacity:1}

  .button:hover,.wall-card:hover .button{transform:translateY(-3px)}
  .button:hover .btn-fx::before,.wall-card:hover .button .btn-fx::before{transform:translate(-50%,-50%) scale(1)}
  .button:hover .btn-fx::after,.wall-card:hover .button .btn-fx::after{transform:translateX(340%) skewX(-18deg);transition:transform .9s var(--soft) .08s}
  .button:hover .label,.wall-card:hover .button .label{transform:translateX(-2px)}
  .button:hover .round,.wall-card:hover .button .round,.tilt:hover .round{transform:scale(1.08)}
  .button:hover .round .a1,.wall-card:hover .button .round .a1,.tilt:hover .round .a1{transform:translate(170%,-170%)}
  .button:hover .round .a2,.wall-card:hover .button .round .a2,.tilt:hover .round .a2{transform:none}
  .button.dark:hover .round{color:var(--blue-ink)}
  .button.white:hover .round{background:var(--deep)}

  .photo-card:hover,.feature-card:hover{transform:translateY(-8px)}
  .tint-card:hover{transform:translateY(-5px);background-color:#D3E6F4}
  .tilt:hover{--zoom:1.09}
  .tilt:hover::before{opacity:1}
  .tilt:hover .card-shade::after{opacity:1}
  .tilt:hover .category-icon{transform:rotate(45deg) scale(1.06)}
  .tilt:hover .card-copy .round{background:#fff;color:var(--blue-ink)}
  .tint-card:hover .icon-circle svg{transform:translate(3px,-3px) scale(1.08)}

  .wall-card:hover{transform:translateY(-5px)}
  .wall-lot:hover{transform:translateY(-5px);border-color:#C6DDEF}
  .wall-lot:hover .wall-img img{transform:scale(1.06)}
  .wall-lot:hover .wall-cap b{color:var(--deep)}
  .wall-lot:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .remind-open:hover{color:#fff;background-color:#ffffff14}
  .remind-back:hover{color:#fff}
  .wall-open:hover{transform:translateY(-2px);border-color:#B7D3EA;background-color:#F7FBFE;box-shadow:0 6px 16px #26226212}
  .wall-open:hover svg{transform:rotate(90deg)}
  .chip:hover{border-color:#B7D3EA;color:var(--deep)}
  .chip.is-on:hover{border-color:var(--deep)}
  .browse-close:hover{background-color:#EAF3FA}
  .browse-lot:hover{transform:translateY(-4px);border-color:#C6DDEF;box-shadow:0 10px 22px #26226216}
  .browse-lot:hover .browse-img img{transform:scale(1.06)}
  .peek-close:hover{background-color:#3A3490}

  .text-link:hover,.mailing-link:hover{color:var(--blue-ink)}
  .text-link:hover .tl::after{transform:scaleX(1);transform-origin:0 50%}
  .text-link:hover .ta,.mailing-link:hover .ta{transform:translate(3px,-3px)}
  .mailing-link:hover::before{transform:scaleX(0)}
  .mailing-link:hover::after{transform:scaleX(1);transform-origin:0 50%;transition-delay:.12s}

  .service-list article:hover::before{opacity:1}
  .service-list article:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .service-list article:hover>span{background-color:var(--blue-ink);color:#fff;transform:rotate(-10deg) scale(1.1)}
  .service-list article:hover h3{transform:translateX(5px);color:var(--deep)}
  .steps article:hover .step-number{color:var(--deep)}
  .steps article:hover .step-number::after{transform:scaleX(1);transform-origin:0 50%}
  .steps article:hover h3{transform:translateX(5px)}

  .faqs summary:hover .q{transform:translateX(6px);color:var(--blue-ink)}
  .faqs summary:hover .pm{background:#E3EFF8}

  .ul:hover,.footer-main a:hover{color:var(--blue-ink)}
  .ul:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .to-top:hover svg{transform:translateY(-3px)}
  .menu-toggle:hover{border-color:#B7D3EA}
}
/* keyboard focus gets the same life as hover */
.brand:focus-visible .brand-mark>span{transform:translateY(-3px) rotate(-12deg) scale(1.14);color:#3A93D1}
.nav-links a:focus-visible::after{transform:scaleX(1);opacity:1}
.button:focus-visible{outline-offset:8px;transform:translateY(-3px)}
.button:focus-visible .btn-fx::before,.wall-card:has(.row-link:focus-visible) .button .btn-fx::before{transform:translate(-50%,-50%) scale(1)}
.button:focus-visible .round .a1,.tilt:focus-visible .round .a1,.wall-card:has(.row-link:focus-visible) .round .a1{transform:translate(170%,-170%)}
.button:focus-visible .round .a2,.tilt:focus-visible .round .a2,.wall-card:has(.row-link:focus-visible) .round .a2{transform:none}
.button.dark:focus-visible .round{color:var(--blue-ink)}
.tilt:focus-visible{transform:translateY(-6px)}
.tilt:focus-visible{--zoom:1.09}
.tilt:focus-visible .card-shade::after{opacity:1}
.tilt:focus-visible .category-icon{transform:rotate(45deg)}
.tilt:focus-visible .card-copy .round{background:#fff;color:var(--blue-ink)}
.photo-card:focus-visible,.feature-card:focus-visible,.tint-card:focus-visible{outline-offset:5px}
.wall-lot:focus-visible{outline-offset:3px}
.wall-lot:focus-visible::after{transform:scaleX(1)}
.text-link:focus-visible .tl::after{transform:scaleX(1)}
.text-link:focus-visible .ta,.mailing-link:focus-visible .ta{transform:translate(3px,-3px)}
.mailing-link:focus-visible::after{transform:scaleX(1)}
.faqs summary:focus-visible .q{transform:translateX(6px);color:var(--blue-ink)}
.faqs summary:focus-visible .pm{background:#E3EFF8}
.ul:focus-visible::after{transform:scaleX(1)}
/* press */
.button:active,.wall-card .button:active,.wall-card:hover .button:active{transform:translateY(0) scale(.965);transition:transform .14s var(--soft),translate .22s var(--out)}
.tilt:active{transform:translateY(-2px) scale(.985);transition:transform .16s var(--soft)}
.wall-card:has(.row-link:active){transform:scale(.99);transition:transform .16s var(--soft)}
.wall-lot:active{transform:scale(.985);transition:transform .16s var(--soft)}
.faqs summary:active .pm{transform:scale(.88)}
.service-list article:active>span{transform:scale(.92)}

/* JS-driven card physics: one rAF loop per active card sets transforms directly (no per-move CSS transition churn, no 3D) */
.js-physics .tilt{transition:none}
.js-physics .tint-card{transition:background-color .4s var(--soft)}
.js-physics .card-media img{transition:none}
.js-physics .photo-card:hover,.js-physics .feature-card:hover,.js-physics .tint-card:hover,.js-physics .tilt:active{transform:none}
.js-physics .tilt:hover{--zoom:1}
/* pause hover while the page scrolls under a still pointer (class lives on <main> for ~150ms after the last scroll event) */
main.is-scrolling{pointer-events:none}

/* ================= Entrance + reveals (only with html.motion) ================= */
@keyframes gf-rise{from{opacity:0;translate:0 18px}}
@keyframes gf-nav{from{opacity:0;translate:0 -16px}}
@keyframes gf-pop{from{opacity:0;translate:0 16px;scale:.9}}
@keyframes gf-word{from{opacity:0;translate:0 .45em}}
@keyframes gf-line{from{transform:scaleX(0)}}
@keyframes gf-deal{from{opacity:0;translate:0 96px;scale:.93}}
@keyframes gf-deal-x{from{opacity:0;translate:64px 0}}
.motion:not(.is-loaded) .enter,.motion:not(.is-loaded) .deal{opacity:0}
.motion:not(.is-loaded) h1.words .w>span{opacity:0}
.motion.is-loaded:not(.entered) .enter{animation:gf-rise .9s var(--out) calc(var(--i,0)*85ms) backwards}
.motion.is-loaded:not(.entered) .nav.enter{animation-name:gf-nav;animation-duration:.8s}
.motion.is-loaded:not(.entered) .actions .enter{animation:gf-pop .8s var(--spring) calc(var(--i,0)*85ms) backwards}
.motion.is-loaded:not(.entered) h1.words .w>span{animation:gf-word 1s var(--out) calc(110ms + var(--wi,0)*70ms) backwards}
.motion.is-loaded:not(.entered) .hero-rule:before,.motion.is-loaded:not(.entered) .hero-rule:after{animation:gf-line 1.3s var(--out) .8s backwards}
.motion.is-loaded:not(.entered) .deal{animation:gf-deal 1.05s var(--out) calc(620ms + var(--d,0)*95ms) backwards}

.motion .rv:not(.is-in){opacity:0;translate:0 24px}
.motion .rv.is-in{will-change:opacity,translate;transition:opacity .5s cubic-bezier(.2,.7,.3,1) var(--rd,0s),translate .75s var(--out) var(--rd,0s)}
.motion .steps .rv:not(.is-in) .step-number::before{transform:scaleX(0)}

/* ================= Breakpoints ================= */
@media(min-width:1450px){
  .hero{padding-top:42px}
  .category-grid{margin-top:35px}
}
@media(max-width:1100px){
  .shell{width:calc(100% - 40px)}
  .nav{gap:15px;padding:12px 16px}
  .nav-links{gap:13px;font-size:13px}
  .nav-phone{font-size:12px;gap:10px}
  .brand-name{font-size:14px}
  .category-grid{gap:10px}
  .card-copy{left:16px}
  .card-copy h2{font-size:20px}
  .feature-card .card-copy h2{font-size:21px}
  .little-card{padding:17px 12px;gap:8px}
  .little-card h3{font-size:14px}
  .icon-circle{font-size:21px}
  .tint-card .icon-circle svg{width:20px;height:20px}
  .wall-grid{grid-auto-rows:118px;gap:11px}
  .wall-card{padding:24px 22px 22px}
  .sale-clock{margin-top:20px}
  .wall-cap{padding:7px 12px 11px}
  .wall-cap b{font-size:12px}
  .selling-grid,.about-grid,.faq-grid{gap:55px}
  .steps{gap:35px}
  .footer-main{gap:20px}
  .footer-main .brand-name{font-size:13px}
}
@media(max-width:1040px){
  .wall-grid{grid-template-columns:repeat(4,1fr)}
}
/* nav collapses to the menu button below 960px (six links no longer fit on tablet portrait) */
@media(max-width:960px){
  html{scroll-padding-top:95px}
  .nav{min-height:76px}
  .nav-phone{display:none}
  .menu-toggle{display:flex;align-items:center;gap:12px;border:1px solid #dce2e7;border-radius:20px;background:#fff;padding:8px 13px;font-size:13px;transition:border-color .3s,transform .5s var(--spring)}
  .menu-toggle:active{transform:scale(.95)}
  .bars{position:relative;display:inline-block;width:14px;height:11px}
  .bars i{position:absolute;left:0;right:0;height:1.7px;border-radius:2px;background:currentColor;transition:transform .6s var(--spring),opacity .25s}
  .bars i:nth-child(1){top:0}.bars i:nth-child(2){top:4.65px}.bars i:nth-child(3){bottom:0}
  .menu-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(4.65px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0;transform:scaleX(.2)}
  .menu-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-4.65px) rotate(-45deg)}
  .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:calc(100% + 6px);left:0;right:0;padding:18px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 25px #101a2214;border-radius:18px;
    visibility:hidden;opacity:0;transform:translateY(-10px) scale(.98);transform-origin:50% 0;pointer-events:none;transition:opacity .22s var(--soft),transform .35s var(--out),visibility 0s linear .35s}
  .nav-links.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .25s var(--soft),transform .5s var(--out),visibility 0s}
  .nav-links a{padding:10px;font-size:16px;border-radius:10px;opacity:0;translate:0 -6px;transition:opacity .25s,translate .5s var(--out),background-color .2s,color .2s}
  .nav-links.open a{opacity:1;translate:none}
  .nav-links.open a:nth-child(2){transition-delay:.04s}.nav-links.open a:nth-child(3){transition-delay:.08s}.nav-links.open a:nth-child(4){transition-delay:.12s}.nav-links.open a:nth-child(5){transition-delay:.16s}
  .nav-links a::after{display:none}
  .nav-links a:active,.nav-links a.is-current{background:#EEF5FB}
}
@media(max-width:780px){
  .hero{padding-top:28px}
  .location-pill{font-size:10px;gap:7px}
  h1{font-size:54px;letter-spacing:-2.8px}
  .hero-copy>p{font-size:16px}
  .hero-rule{font-size:9px;letter-spacing:.3px}
  .hero-note{font-size:11px}
  .category-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;min-height:0;align-items:stretch}
  .category-stack.outer{display:none}
  .inner,.center{height:300px}
  .center{margin-top:22px}
  .card-copy h2,.feature-card .card-copy h2{font-size:23px}
  .category-icon{left:16px;top:16px}
  .card-copy p{font-size:12px}
  .card-copy .round{position:relative;right:auto;bottom:auto;margin-top:13px;width:29px;height:29px}
  .card-tag{display:none}
  .section{padding:70px 0}
  h2{font-size:40px;letter-spacing:-1.7px}
  .section-heading{margin-bottom:32px}
  .wall-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:132px}
  .wall-card h3{font-size:30px}
  .auction-footer{align-items:flex-start;flex-direction:column;gap:15px}
  .wall-foot{flex-direction:column;align-items:flex-start;gap:12px}
  .selling-grid,.about-grid,.faq-grid{grid-template-columns:1fr;gap:42px}
  .selling-intro>p{max-width:580px}
  .service-list{margin-top:-12px}
  .service-list article{gap:20px}
  .about-visual{height:440px}
  .about-copy>p{max-width:600px}
  .about-copy h2 br{display:none}
  .steps{gap:28px}
  .steps h3{font-size:20px}
  .steps p{font-size:14px}
  .contact-box{padding:48px 22px}
  .footer-main{grid-template-columns:1fr 1fr;gap:30px}
  .footer-bottom{flex-wrap:wrap}
  .footer-bottom span:nth-child(2){order:3;width:100%}
}
@media(max-width:480px){
  .shell{width:calc(100% - 32px)}
  .nav{padding:12px 14px}
  .brand-mark{font-size:34px}
  .brand-name{font-size:14px}
  .brand-name small{font-size:9px}
  .hero{padding-bottom:30px}
  .location-pill{font-size:9px}
  .location-pill .pill-divider{margin:0}
  .hero-copy h1{font-size:44px;letter-spacing:-2.4px;margin-top:20px}
  .hero-copy>p{font-size:15px;max-width:320px;margin:auto}
  .desktop-break{display:none}
  .actions{gap:14px;margin-top:23px}
  .button{--cc:24px;font-size:14px;gap:12px;padding:7px 7px 7px 19px;min-height:48px}
  .button .round{width:34px;height:34px}
  .hero-note{font-size:10px;gap:6px;letter-spacing:-.1px}
  .hero-rule{margin-top:17px;font-size:8px;gap:5px}
  .category-grid{gap:8px}
  .inner,.center{height:235px;border-radius:17px}
  .center{margin-top:19px}
  .card-copy{left:12px;right:10px;bottom:16px}
  .card-copy h2,.feature-card .card-copy h2{font-size:17px;letter-spacing:-.4px}
  .card-copy p{font-size:10px}
  .card-copy .round{height:23px;width:23px;margin-top:10px}
  .category-icon{width:31px;height:31px;font-size:20px;left:12px;top:12px}
  .feature-card .card-copy{bottom:16px}
  .feature-card .card-copy p{font-size:10px}
  h2{font-size:35px}
  .section-pill{font-size:12px;padding:6px 13px}
  .section-heading p{font-size:15px}
  .wall-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;gap:9px}
  .wall-card{grid-column:1/-1;padding:22px 20px 20px}
  .wall-card h3{margin-top:16px}
  .clock-time{gap:13px}
  .clock-time b{letter-spacing:-2px}
  .wall-card h3{font-size:28px}
  .auction-meta{font-size:12px}
  .wall-img{inset:0 0 50px;padding:12px 12px 2px}
  .wall-cap{padding:7px 12px 10px}
  .wall-cap b{font-size:12.5px}
  .wall-clock b{font-size:21px}
  .about-visual{height:350px}
  .steps{grid-template-columns:1fr;gap:30px}
  .steps p{font-size:16px}
  .steps h3{font-size:23px}
  .step-number{margin-bottom:17px}
  .faqs summary{font-size:16px}
  .contact-section{padding:32px 0}
  .contact-box{padding:38px 17px}
  .contact-box h2{font-size:30px;letter-spacing:-1.1px}
  .contact-box .actions{gap:16px}
  .contact-box .button{font-size:13px}
  .mailing-link{font-size:12px}
  .footer-main{gap:27px 15px;padding-bottom:30px}
  .footer-main>div{font-size:11px}
  .footer-main p{font-size:12px}
  .footer-main .brand-name{font-size:12px;padding-left:8px}
  .footer-main .brand{gap:7px}
  .footer-main .brand-mark{font-size:30px}
  .footer-main .brand-mark>span{font-size:20px}
  .footer-bottom{font-size:10px}
  /* readable card carousel on narrow screens */
  .category-grid{grid-template-columns:repeat(3,190px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 14px;align-items:end}
  .category-grid>.gf-col{scroll-snap-align:center}
  .inner,.center{height:295px}
  .center{margin-top:0}
  .card-copy h2,.feature-card .card-copy h2{font-size:24px}
  .card-copy p,.feature-card .card-copy p{font-size:14px}
  .card-copy{left:18px;bottom:21px}
  .category-icon{left:18px;top:18px;width:39px;height:39px}
  .card-copy .round{height:30px;width:30px}
  .card-tag{display:block;font-size:12px}
  .feature-card .card-copy{bottom:21px}
  .motion.is-loaded:not(.entered) .deal{animation-name:gf-deal-x}
  .category-grid>.gf-col:nth-child(2) .deal{--d:0!important}
  .category-grid>.gf-col:nth-child(3) .deal{--d:1!important}
  .category-grid>.gf-col:nth-child(4) .deal{--d:2!important}
}
/* photos sit on white with breathing room (lead's handoff overrides) */
.about-visual{background:#fff}
.about-visual img{object-fit:contain;padding:20px 25px 95px}


/* ======================================================================
   Story expansion (2026-09-14): logo, facts, finds, story, buying, Market,
   people, area, alerts, visit. Same tokens, same motion rules (transform/opacity).
   ====================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand-logo{width:auto;height:50px;object-fit:contain}
.brand .brand-name small{letter-spacing:.3px}
.hero-logo{display:block;width:auto;height:clamp(104px,10.4vw,140px);margin:0 auto 2px;object-fit:contain}
.hero-copy h1{margin-top:14px}
.hero-live{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:8px 14px 8px 13px;border-radius:99px;background:#fff;border:1px solid #DCE7F0;font-size:13px;font-weight:600;color:var(--deep);box-shadow:0 3px 12px #28384309;transition:border-color .3s var(--soft),transform .6s var(--spring)}
.hero-live .ta{width:13px;height:13px;color:var(--blue-ink)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #0568391f;flex:none}
.hero-live.is-quiet .live-dot{background:var(--blue);box-shadow:0 0 0 4px #0E76BC1f}
.confirm{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;color:#7A5200;background:#FFF5DB;border:1px dashed #D9A43B;border-radius:8px;padding:0 7px;vertical-align:1px;white-space:nowrap}

/* facts band */
.facts{background:#fff;padding:40px 0 42px;border-bottom:1px solid #EEF0F2}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:4px 30px;border-left:1px solid #E6EBEF}
.fact:first-child{border-left:0;padding-left:0}
.fact strong{display:block;font-size:clamp(28px,2.7vw,40px);font-weight:800;letter-spacing:-1.5px;line-height:1.05;color:var(--deep);font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:9px;font-size:14px;line-height:1.45;color:var(--muted);max-width:240px}
.fact strong span{display:inline;margin:0;font-size:inherit;line-height:inherit;color:inherit;max-width:none}
.fact-link{position:relative;display:block;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}   /* no radius: the strip's hairline stays straight */
.fact-link .fact-go{font-style:normal;white-space:nowrap}
.fact-link .fact-arrow{display:inline-block;width:1em;height:1em;margin-left:.1em;vertical-align:-.16em;color:var(--green);transition:transform .45s var(--spring)}
.fact.fact-link>span{display:block;-webkit-line-clamp:unset;overflow:visible}   /* WebKit added "…" after the arrow under the 3-line clamp */
.fact-link strong,.fact-link span{transition:color .3s var(--soft)}
@media (hover:hover) and (pointer:fine){.fact-link:hover strong{color:var(--green)}.fact-link:hover span{color:var(--deep)}.fact-link:hover .fact-arrow{transform:translateX(4px)}}
.fact-link:focus-visible{outline:0}
.fact-link:focus-visible::after{content:'';position:absolute;inset:-6px;border:2px solid var(--blue);border-radius:6px;pointer-events:none}
.fact-link:focus-visible strong{color:var(--green)}.fact-link:focus-visible .fact-arrow{transform:translateX(4px)}

/* sales: empty state */
.sale-empty{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;background:#fff;border-radius:28px;padding:36px 40px;margin-bottom:22px}
.sale-empty img{width:110px;height:auto}
.sale-empty h3{font-size:28px;font-weight:750;letter-spacing:-1px}
.sale-empty p{margin-top:8px;font-size:15px;max-width:520px}

/* great finds bento */
.finds-section{background:#fff}
/* ---------- The shop window (2026-10-14). Kyle: the lot mosaic looked like the auctions wall, and the house tour
   wasn't it either. Now the pieces sit on two long shelves that drift past, scaled against each other. ---------- */
.shelves{--k:1;position:relative;margin-top:-10px;padding:26px 0 8px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.shelf{position:relative;display:flex;width:max-content;padding:0 0 46px}
.shelf+.shelf{margin-top:14px}
.shelf::after{content:'';position:absolute;left:0;right:0;bottom:40px;height:1px;background:linear-gradient(90deg,#E1E7EE,#CBD6E2 30%,#CBD6E2 70%,#E1E7EE)}
.shelf-track{display:flex;align-items:flex-end;gap:64px;padding:0 32px;flex:none;will-change:transform;animation:shelf-left var(--dur,90s) linear infinite}
.shelf[data-dir=right] .shelf-track{animation-name:shelf-right}
@keyframes shelf-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes shelf-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.shelves.is-paused .shelf-track,.shelves.is-off .shelf-track,.shelves.is-held .shelf-track{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.shelves:hover .shelf-track{animation-play-state:paused}}
.piece{position:relative;display:block;flex:none;margin:0;transition:transform .7s var(--spring)}
.piece img{display:block;width:auto;height:calc(var(--h,180px)*var(--k));object-fit:contain;transition:transform .7s var(--spring)}
.piece.photo img{border-radius:14px;object-fit:cover}
.piece::after{content:'';position:absolute;left:8%;right:8%;bottom:-11px;height:18px;border-radius:50%;background:radial-gradient(closest-side,#0b1f3b2e,#0b1f3b00);transition:transform .7s var(--spring),opacity .4s;pointer-events:none}
.piece-cap{position:absolute;left:50%;top:calc(100% + 16px);transform:translate(-50%,6px);display:block;text-align:center;white-space:nowrap;
  padding:6px 13px 7px;border-radius:14px;background:#fff;border:1px solid #ECEFF2;box-shadow:0 8px 20px #0f1d2a16;
  font-size:13px;font-weight:650;color:var(--ink);line-height:1.25;opacity:0;transition:opacity .35s var(--soft),transform .6s var(--out);pointer-events:none;z-index:2}
.piece-cap b{display:block;font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--blue-ink);line-height:1.2}
.piece:hover .piece-cap,.piece:focus-visible .piece-cap,.piece.is-open .piece-cap{opacity:1;transform:translate(-50%,0)}
@media (hover:hover) and (pointer:fine){
  .piece:hover{transform:translateY(-8px)}
  .piece:hover::after{transform:translateY(8px) scaleX(1.08);opacity:.75}
}
a.piece:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:12px}
.shelf-pause{position:absolute;z-index:3;right:max(32px,calc((100% - 1240px)/2));top:-14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:30px;
  border:1px solid #DCE4EC;background:#fff;color:var(--deep);font-size:12.5px;font-weight:650;cursor:pointer;box-shadow:0 6px 16px #0b1f3b12;transition:border-color .3s,transform .5s var(--spring)}
.shelf-pause svg{width:13px;height:13px;fill:currentColor}
.shelf-pause .sp-play,.shelf-pause[aria-pressed=true] .sp-pause{display:none}
.shelf-pause[aria-pressed=true] .sp-play{display:block}
@media (hover:hover) and (pointer:fine){.shelf-pause:hover{border-color:#C6DDEF;transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){
  .shelf-track{animation:none}
  .shelf[data-dir=right] .shelf-track{transform:none}
  .shelf-track[aria-hidden]{display:none}
  .shelves{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin}
  .shelf-pause{display:none}
}
@media(max-width:960px){.shelves{--k:.78}.shelf-track{gap:44px}}
@media(max-width:640px){.shelves{--k:.56;padding-top:14px}.shelf-track{gap:30px;padding:0 16px}.shelf{padding-bottom:40px}.shelf::after{bottom:34px}.shelf+.shelf{margin-top:6px}
  .shelf-pause{right:16px;top:-8px;padding:7px 11px 7px 9px;font-size:12px}.shelf-pause .sp-txt{display:none}.piece-cap{font-size:12px}}
.finds-note{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px}
.finds-note p{font-size:13px;max-width:560px}

/* story */
.story-section{background:#f9f8fa}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.story-intro>p{margin-top:22px;font-size:17px;max-width:500px}
.story-photos{margin-top:38px}
.story-photos figure,.story-more figure{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#e9e6ea}
.story-more{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin:44px 0 0 128px}
.sp-main{aspect-ratio:1024/755}
.sp-a,.sp-b{aspect-ratio:4/3}
.story-photos figcaption,.story-more figcaption,.selling-photo figcaption,.area-photo figcaption,.area-wide figcaption{position:absolute;left:10px;bottom:10px;background:#fffffff2;border-radius:10px;padding:4px 9px;font-size:11px;font-weight:500;color:var(--ink);line-height:1.35}
.timeline{list-style:none;margin:6px 0 0;padding:0;position:relative}
.timeline::before{content:'';position:absolute;left:103px;top:10px;bottom:30px;width:2px;border-radius:2px;background:#D6E3EE}
.timeline li{position:relative;display:grid;grid-template-columns:84px 1fr;gap:0 44px;padding:0 0 38px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:'';position:absolute;left:97px;top:6px;width:10px;height:10px;border-radius:50%;background:#f9f8fa;border:2px solid var(--blue);transition:transform .6s var(--spring),background-color .3s}
.timeline li.key::before{background:var(--blue);box-shadow:0 0 0 5px #0E76BC24}
.ty{font-size:14px;font-weight:750;color:var(--blue-ink);text-align:right;padding-top:1px;letter-spacing:-.2px}
.timeline li.key .ty{font-size:22px;color:var(--deep);letter-spacing:-.8px;margin-top:-5px}
.timeline h3{font-size:22px;margin-bottom:8px;transition:transform .7s var(--spring),color .3s}
.timeline p{font-size:15.5px;line-height:1.62;max-width:470px}

/* buying */
.buy-section{background:#fff}
.buy-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.buy-steps article{position:relative;padding:24px 22px 26px;border-radius:22px;background:#F5F8FA;border:1px solid #EAEFF3;transition:transform .7s var(--spring),background-color .35s var(--soft),border-color .35s var(--soft)}
.bs-num{display:grid;place-items:center;width:40px;height:40px;margin-bottom:20px;border-radius:50%;background:#fff;border:1px solid #D7E5F0;color:var(--blue-ink);font-size:15px;font-weight:750;transition:background-color .35s var(--soft),color .35s var(--soft),border-color .35s,transform .7s var(--spring)}
.buy-steps h3{font-size:20px;margin-bottom:9px}
.buy-steps p{font-size:14.5px;line-height:1.58}
.good-to-know{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.gtk{padding-top:18px;border-top:2px solid #D6E3EE;transition:border-color .3s}
.gtk h3{font-size:16px;letter-spacing:-.3px;margin-bottom:7px;color:var(--deep)}
.gtk p{font-size:14px;line-height:1.58}

/* selling additions */
.selling-photo{position:relative;margin:44px 0 0;border-radius:24px;overflow:hidden;aspect-ratio:16/10;max-width:520px;background:#e9e6ea}
.seller-flow-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-top:86px;padding-bottom:22px}
.seller-flow-head h3{font-size:clamp(26px,2.6vw,34px);font-weight:750;letter-spacing:-1.2px}
.seller-flow-head p{font-size:14px;max-width:320px;text-align:right}
.seller-flow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:26px;background:#fff;overflow:hidden}
.seller-flow article{position:relative;padding:28px 26px 30px;border-left:1px solid var(--line);transition:background-color .35s var(--soft)}
.seller-flow article:first-child{border-left:0}
.seller-flow small{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--blue-ink);margin-bottom:14px}
.seller-flow h3{font-size:20px;margin-bottom:8px;transition:transform .7s var(--spring)}
.seller-flow p{font-size:14.5px;line-height:1.55}

/* market */
.market-section{background:#F3F7F4}
.market-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:80px;align-items:center}
.market-photos{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px}
.market-photos figure{margin:0;border-radius:22px;overflow:hidden;background:#e4e9e5}
.mp-store{grid-column:1/-1;aspect-ratio:1434/720}
.mp-a,.mp-b{aspect-ratio:1/1}
.market-photos img{transition:transform .9s var(--out)}
.section-pill.green{background:#E3F0E7;border-color:#CBE2D2;color:#0A5530}
.market-copy>p{margin-top:22px;font-size:17px;max-width:470px}
.market-facts{list-style:none;padding:0;margin:26px 0 32px;display:grid;gap:12px}
.market-facts li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:550;color:var(--ink)}
.market-facts svg,.visit-lines svg,.place svg{width:18px;height:18px;flex:none;color:var(--green)}
.market-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* people */
.people-section{background:#fff}
/* the two who run it, then the eight who make the sales happen (Cindy's list, 2026-09-17) */
.people-lead{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:900px;margin:0 auto}
.people-team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
/* team: full portrait cards (2026-10-14; Kyle: the 54px circles were "way too small"). Same card language as the lead pair. */
.mate{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  padding:12px 12px 22px;border-radius:24px;background:#fff;border:1px solid #ECEFF2;
  transition:transform .7s var(--spring),border-color .35s var(--soft),box-shadow .5s var(--soft)}
.mate .face{position:relative;display:block;width:100%;aspect-ratio:4/5;margin:0 0 16px;border-radius:16px;overflow:hidden;background:#E8F2FA}
.mate .face img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .9s var(--out)}
.mate .mono{display:grid;place-items:center;width:100%;aspect-ratio:4/5;margin:0 0 16px;border-radius:16px;
  background:linear-gradient(155deg,#EEF5FB,#D6E8F6);color:var(--deep);font-size:48px;font-weight:800;letter-spacing:-2px;
  transition:transform .7s var(--spring)}
.mate h3{font-size:18px;font-weight:700;letter-spacing:-.4px;margin:0;line-height:1.25}
.mate .role{font-size:13px;font-weight:650;color:var(--blue-ink);margin:5px 0 0;line-height:1.35}
.people-note{max-width:620px;margin:34px auto 0;text-align:center;font-size:16px;color:var(--muted)}
.people-note a{color:var(--deep);font-weight:650}
.people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.person{position:relative;padding:12px 12px 26px;border-radius:26px;background:#fff;border:1px solid #ECEFF2;transition:transform .7s var(--spring),border-color .35s var(--soft)}
.person-portrait{position:relative;display:grid;place-items:center;aspect-ratio:1/.68;border-radius:18px;overflow:hidden;background:linear-gradient(155deg,#EEF5FB 0%,#D6E8F6 100%)}
.person-portrait::after{content:'';position:absolute;inset:auto -20% -45% -20%;height:70%;border-radius:50%;background:radial-gradient(closest-side,#ffffffb0,#fff0)}
.person .mono{position:relative;z-index:1;font-size:62px;font-weight:800;letter-spacing:-3px;color:var(--deep);transition:transform .8s var(--spring)}
.person-portrait small{position:absolute;z-index:2;left:10px;bottom:10px;font-size:11px;font-weight:550;color:var(--muted);background:#fff;border-radius:20px;padding:3px 9px}
.person.market .person-portrait{background:linear-gradient(155deg,#F0F7F2 0%,#D3E8DA 100%)}
.person.market .mono{color:#0A5530}
.person h3{font-size:21px;margin:20px 10px 4px}
.person .role{font-size:13px;font-weight:650;color:var(--blue-ink);margin:0 10px}
.person.market .role{color:#0A5530}
.person p:not(.role){font-size:14.5px;line-height:1.55;margin:11px 10px 0}

/* area */
.area-section{background:#f4f6f7}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.area-photo{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/3.3;background:#dfe5e8}
.area-copy>p{margin-top:22px;font-size:17px;max-width:500px}
.places{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 22px}
.place{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 11px;border-radius:30px;background:#fff;border:1px solid #DCE7F0;font-size:14px;font-weight:650;color:var(--ink)}
.place small{font-size:12px;font-weight:500;color:var(--muted)}
.area-copy .area-note{font-size:14px;margin-top:0}

/* alerts */
.alerts-section{background:#fff;padding-bottom:40px}
.alert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.alert-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:236px;padding:28px 28px 26px;border-radius:24px;background:#F5F8FA;border:1px solid #EAEFF3;transition:transform .7s var(--spring),background-color .35s var(--soft),border-color .35s var(--soft)}
.ac-icon{display:grid;place-items:center;width:50px;height:50px;margin-bottom:6px;border-radius:15px;background:#fff;border:1px solid #DCE7F0;color:var(--blue-ink);transition:transform .7s var(--spring),background-color .35s,color .35s}
.ac-icon svg{width:23px;height:23px}
.alert-card h3{font-size:23px}
.alert-card p{font-size:14.5px;line-height:1.55}
.ac-go{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--deep)}

/* ---------- Logo dock (2026-09-15) ----------
   One logo on screen. At the top the full logo lives in the hero and the nav slot is empty; once the page
   scrolls, a fixed flier (only present for the ~0.8s flight) glides the mark under the nav line, rises into
   the brand slot and lands with a small knock. At rest the real images always show, never a half-flown logo. */
.dock-fly{position:fixed;left:0;top:0;z-index:30;pointer-events:none;transform-origin:0 0;visibility:hidden}
.dock-fly img{position:absolute;max-width:none;object-fit:fill}
.is-flying .dock-fly{visibility:visible;will-change:transform}
.brand{position:relative}
.dock-on .brand{visibility:hidden;transition:visibility 0s linear .25s}
.dock-on.is-docked .brand{visibility:visible;transition:none}
.dock-on.is-flying .brand-logo{visibility:hidden}
.dock-on.is-docked .hero-logo,.dock-on.is-flying .hero-logo{visibility:hidden}
.dock-on .brand-name{opacity:0;translate:-12px 0;transition:opacity .2s var(--soft),translate .3s var(--soft)}
.dock-on.is-docked:not(.is-flying) .brand-name{opacity:1;translate:0 0;transition:opacity .45s var(--soft) .08s,translate .8s var(--out) .08s}
/* Nav links sit in the empty brand slot at the top, then glide to center as the logo flies in.
   Going home they wait a beat so the mark clears the slot first. --links-x is set by site.js (0 when the links live in the phone menu). */
.dock-on .nav-links{translate:var(--links-x,0px) 0;transition:translate .7s var(--out) .3s}
.dock-on.links-center .nav-links{translate:0 0;transition:translate .56s var(--out) 0s}
.dock-instant .nav-links,.dock-instant .brand,.dock-instant .brand-name,.dock-instant .brand-logo{transition:none!important}
.brand::before{content:'';position:absolute;left:39px;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:2px solid var(--blue);opacity:0;pointer-events:none}
.brand.is-knock::before{animation:gf-knock .9s var(--out)}
@keyframes gf-knock{0%{opacity:.45;transform:scale(.5)}100%{opacity:0;transform:scale(1.55)}}

/* ---------- Contact (2026-09-15) ---------- */
button.button{border:0;font-family:inherit}
.contact-hub{background:#fff;padding:90px 0 40px}
.ch-head{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,.8fr);gap:56px;align-items:end;margin-bottom:38px}
.ch-head h2{text-wrap:balance}
.ch-head p{font-size:17px;max-width:400px;padding-bottom:6px}
.ch-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;padding:12px;border-radius:36px;background:#EEF3F7;border:1px solid #E3EAF0}

.ch-direct{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:24px;padding:34px 30px 28px;border-radius:26px;color:#fff;background:linear-gradient(160deg,#3A93D1 0%,#0E76BC 34%,#0B5C99 70%,#1D3F7A 100%)}
.ch-direct::before{content:'';position:absolute;right:-30%;top:-38%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#ffffff2e,#fff0);z-index:-1;pointer-events:none}
.ch-direct small{display:block;font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#D3E8F7}
.cd-big{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:24px;border-bottom:1px solid #ffffff33}
.cd-big strong{display:block;margin-top:10px;font-size:clamp(32px,3.2vw,46px);font-weight:800;letter-spacing:-1.8px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-go{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--blue-ink);box-shadow:0 8px 20px #0a2a4a33;transition:transform .7s var(--spring)}
.cd-go svg{width:22px;height:22px}
.cd-lines{display:grid;gap:18px}
.cd-line strong{display:block;margin-top:5px;font-size:20px;font-weight:700;letter-spacing:-.4px;line-height:1.2}
a.cd-line,.cd-mail-row a{align-self:start;transition:opacity .3s var(--soft)}
.cd-mail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cd-mail-row strong{overflow-wrap:anywhere}
.cd-copy{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border-radius:99px;border:1px solid #ffffff55;background:#ffffff14;color:#fff;font:600 12.5px/1 var(--font);cursor:pointer;transition:background-color .3s var(--soft),border-color .3s var(--soft),transform .5s var(--spring)}
.cd-copy svg{width:15px;height:15px}
.cd-copy .ok{display:none}
.cd-copy.is-done{background:#fff;color:var(--blue-ink);border-color:#fff}
.cd-copy.is-done svg{display:none}.cd-copy.is-done .ok{display:block}
.cd-copy:active{transform:scale(.94)}
.cd-copy:focus-visible,.cd-tabs button:focus-visible,.cd-map:focus-visible{outline:2px solid #fff;outline-offset:3px}

.cd-places{margin-top:auto;display:grid;gap:12px}
.cd-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:99px;background:#0a3f6b59;border:1px solid #ffffff26}
.cd-tabs button{position:relative;z-index:1;height:34px;border:0;border-radius:99px;background:none;color:#DCEBF7;font:650 13px/1 var(--font);cursor:pointer;transition:color .35s var(--soft)}
.cd-tabs button[aria-pressed="true"]{color:var(--deep)}
.cd-tab-ink{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:99px;background:#fff;box-shadow:0 4px 12px #0a2a4a26;transition:transform .6s var(--spring)}
.cd-tabs.is-market .cd-tab-ink{transform:translateX(100%)}
.cd-map{position:relative;display:block;height:236px;border-radius:18px;overflow:hidden;background:#DCEBF7;box-shadow:inset 0 0 0 1px #ffffff40}
.cd-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.cd-map-go{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:#fff;color:var(--deep);font-size:12.5px;font-weight:700;box-shadow:0 6px 16px #0f1d2a30;transition:transform .6s var(--spring)}
.cd-map-go svg{width:12px;height:12px;transition:transform .6s var(--spring)}
.cd-place{display:grid;gap:3px;font-size:14.5px;line-height:1.45}
.cd-place strong{font-size:15px}
.cd-place .cd-sub{font-size:13px;color:#D3E8F7}
.cd-place .confirm{margin-left:4px}

.ch-form{position:relative;padding:34px 36px 32px;border-radius:26px;background:#fff;box-shadow:0 1px 0 #e3eaf0,0 14px 34px #1b3a5410}
.ch-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ch-form-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ch-form-head h3{font-size:26px;font-weight:750;letter-spacing:-.9px}
.ch-form-head p{font-size:14px}
.ch-topics{margin:24px 0 0;padding:0;border:0;min-width:0}
.ch-topics legend{padding:0;margin-bottom:10px;font-size:13px;font-weight:650;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;gap:0;height:38px;padding:0 15px;border-radius:99px;border:1px solid #DCE4EA;background:#fff;font-size:13.5px;font-weight:600;color:#3d4450;transition:background-color .3s var(--soft),border-color .3s var(--soft),color .3s var(--soft),padding .45s var(--out),gap .45s var(--out)}
.chip svg{width:0;height:14px;flex:none;opacity:0;transition:width .45s var(--out),opacity .3s var(--soft)}
.chip input:checked+span{background:var(--deep);border-color:var(--deep);color:#fff;gap:6px;padding-left:11px}
.chip input:checked+span svg{width:14px;opacity:1}
.chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
.chip:active span{transform:scale(.97)}
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.fld{position:relative;display:grid;gap:7px}
.fld.wide{grid-column:1/-1}
.fl{font-size:13px;font-weight:650;color:var(--ink)}
.fld input,.fld textarea{width:100%;border:1px solid #DCE4EA;border-radius:14px;background:#F7FAFC;padding:13px 15px;font:500 15.5px/1.4 var(--font);color:var(--ink);transition:border-color .3s var(--soft),background-color .3s var(--soft),box-shadow .3s var(--soft)}
.fld textarea{resize:vertical;min-height:112px}
.fld input::placeholder,.fld textarea::placeholder{color:#8b909a}
.fld input:focus,.fld textarea:focus{outline:none;background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px #0E76BC1f}
.fld.is-bad input,.fld.is-bad textarea{border-color:#C2410C;box-shadow:0 0 0 4px #C2410C14}
.ch-error{margin-top:14px;font-size:14px;font-weight:600;color:#B03A0A}
.ch-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:24px}
.ch-actions p{font-size:14px}
.ch-form.is-sending .button{opacity:.7;pointer-events:none}
.ch-done{display:grid;justify-items:start;align-content:center;gap:10px;min-height:100%;padding:20px 4px}
.ch-done:not([hidden]){animation:gf-rise .7s var(--out) backwards}
.ch-tick{display:grid;place-items:center;width:62px;height:62px;margin-bottom:8px;border-radius:50%;background:#E3EFF8;color:var(--blue-ink)}
.ch-tick svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:0;animation:gf-tick .6s var(--out) .15s backwards}
@keyframes gf-tick{from{stroke-dashoffset:16}}
.ch-done h3{font-size:30px;font-weight:750;letter-spacing:-1px}
.ch-done p{font-size:16px;max-width:440px}
.ch-again{margin-top:10px;border:0;background:none;padding:0;cursor:pointer;color:var(--deep)}

/* closing CTA + footer logo */
.footer-main{grid-template-columns:auto 1fr 1fr 1fr .8fr;align-items:start}
.footer-brand{display:block}
.footer-brand img{width:auto;height:96px;object-fit:contain}
.footer-main>div strong{font-size:13px;color:var(--ink);margin-bottom:3px}
.footer-bottom{flex-wrap:wrap}

@media (hover:hover) and (pointer:fine){
  .hero-live:hover{border-color:#B7D3EA;transform:translateY(-2px)}
  .hero-live:hover .ta{transform:translate(3px,-3px)}
  .timeline li:hover::before{transform:scale(1.35)}
  .timeline li:hover h3{transform:translateX(5px);color:var(--deep)}
  .buy-steps article:hover{transform:translateY(-6px);background-color:#fff;border-color:#C6DDEF}
  .buy-steps article:hover .bs-num{background-color:var(--blue-ink);border-color:var(--blue-ink);color:#fff;transform:scale(1.08)}
  .gtk:hover{border-color:var(--blue)}
  .seller-flow article:hover{background-color:#F5F9FD}
  .seller-flow article:hover h3{transform:translateX(5px)}
  .market-photos figure:hover img{transform:scale(1.04)}
  .person:hover{transform:translateY(-6px);border-color:#C6DDEF}
  .mate:hover{transform:translateY(-6px);border-color:#C6DDEF;box-shadow:0 22px 44px #0b1f3b14}
  .mate:hover .mono{transform:scale(1.03)}
  .mate:hover .face img{transform:scale(1.05)}
  .person:hover .mono{transform:scale(1.08) rotate(-4deg)}
  .alert-card:hover{transform:translateY(-6px);background-color:#fff;border-color:#C6DDEF}
  .alert-card:hover .ac-icon{background-color:var(--blue-ink);color:#fff;transform:rotate(-8deg) scale(1.06)}
  .alert-card:hover .ac-go .ta{transform:translate(3px,-3px)}
}
a.find:focus-visible,.alert-card:focus-visible{outline-offset:4px}
a.find:focus-visible::after{transform:scaleX(1)}
.alert-card:focus-visible .ac-icon{background-color:var(--blue-ink);color:#fff}
a.find:active,.alert-card:active{transform:scale(.985);transition:transform .16s var(--soft)}

@media(max-width:1100px){
  .brand-logo{height:44px}
  .nav-links{gap:12px}
  .fact{padding:4px 18px}
  .story-grid,.market-grid,.area-grid{gap:50px}
  .buy-steps{grid-template-columns:repeat(3,1fr)}
  .good-to-know{grid-template-columns:repeat(2,1fr);gap:22px 28px}
  .footer-main{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .footer-brand{grid-row:span 2}
  .story-more{margin-left:0}
}
@media(max-width:920px){
  .people-grid{grid-template-columns:repeat(2,1fr)}
  .people-team{gap:12px}
  .mate{padding:10px 10px 18px}
  .mate h3{font-size:16px}
  .mate .role{font-size:12.5px}
  .visit-grid{grid-template-columns:1fr 1fr}
  .visit-card.reach{grid-column:1/-1}
  .alert-grid{gap:14px}
  .alert-card{padding:24px 22px}
  .seller-flow{grid-template-columns:repeat(2,1fr)}
  .seller-flow article:nth-child(3){border-left:0}
  .seller-flow article:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:780px){
  .facts{padding:28px 0 30px}
  .facts-grid{grid-template-columns:1fr 1fr;gap:22px 0}
  .fact:nth-child(3){border-left:0;padding-left:0}
  .fact{padding:2px 18px}
  .sale-empty{grid-template-columns:1fr;text-align:left;gap:18px;padding:28px}
  .finds-note{flex-direction:column;align-items:flex-start;gap:12px}
  .story-grid,.market-grid,.area-grid{grid-template-columns:1fr;gap:44px}
  .story-more{margin-left:128px}
  .buy-steps{grid-template-columns:1fr 1fr}
  .buy-steps article:last-child{grid-column:1/-1}
  .seller-flow-head{flex-direction:column;align-items:flex-start;gap:8px;margin-top:64px}
  .seller-flow-head p{text-align:left}
  .alert-grid{grid-template-columns:1fr}
  .alert-card{min-height:0}
  .visit-grid{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1;grid-row:auto}
  .cta-logo{height:92px}
}
@media(max-width:480px){
  .brand-logo{height:40px}
  .brand-name small{font-size:8.5px}
  .hero-logo{height:92px}
  .hero-live{font-size:12px;margin-top:20px}
  .fact strong{font-size:27px;letter-spacing:-1px}
  .fact span{font-size:13px}
  .timeline::before{left:7px}
  .timeline li{grid-template-columns:1fr;padding-left:34px;gap:4px}
  .timeline li::before{left:1px}
  .ty{text-align:left}
  .timeline li.key .ty{margin-top:0}
  .story-more{margin-left:0}
  .buy-steps{grid-template-columns:1fr}
  .buy-steps article:last-child{grid-column:auto}
  .good-to-know{grid-template-columns:1fr;gap:18px}
  .seller-flow{grid-template-columns:1fr}
  .seller-flow article{border-left:0}
  .seller-flow article+article{border-top:1px solid var(--line)}
  .selling-photo{margin-top:34px}
  .people-grid{grid-template-columns:1fr;gap:12px}
  .person{display:grid;grid-template-columns:150px 1fr;gap:0 16px;align-items:start;padding:12px 16px 18px 12px}
  .person-portrait{grid-row:span 3;aspect-ratio:1/1.1}
  .person .mono{font-size:36px;letter-spacing:-1.5px}
  .person-portrait small{display:none}
  .person h3{margin:8px 0 2px;font-size:19px}
  .person .role{margin:0}
  .person p:not(.role){margin:8px 0 0;font-size:14px}
  .place{font-size:13px}
  .visit-card{padding:24px 22px}
  .footer-brand img{height:84px}
  .footer-bottom span:nth-child(2){order:3;width:100%}
}


/* sourced-copy pass: quotes, pickup line, place list */
.story-quote{margin:30px 0 0;padding:20px 24px 20px 26px;border-left:3px solid var(--blue);border-radius:0 18px 18px 0;background:#fff}
.story-quote p{font-size:22px;font-weight:700;letter-spacing:-.6px;line-height:1.3;color:var(--deep)}
.story-quote cite,.sell-quote figcaption{display:block;margin-top:9px;font-size:13px;font-style:normal;line-height:1.5;color:var(--muted)}
.story-photos{margin-top:30px}
.pickup{display:block;margin-top:5px;font-size:12px;font-weight:550;color:var(--muted)}
.sell-quote{margin:34px 0 0;padding:28px 30px;border-radius:24px;background:linear-gradient(160deg,#EEF6FC,#DCEBF7)}
.sell-quote blockquote{margin:0;font-size:clamp(21px,1.9vw,25px);font-weight:700;letter-spacing:-.7px;line-height:1.3;color:var(--deep)}
ul.places{list-style:none;padding:0}
.place.home{border-color:#B9D9C5;background:#F1F8F3}
.area-note .confirm{margin-left:2px}
@media(max-width:480px){.story-quote p{font-size:19px}.sell-quote{padding:22px}}


/* area: towns from B&H sale titles + Danville heritage strip */
.place-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin:28px 0 22px}
.pg{padding-top:14px;border-top:2px solid #D6E3EE}
.pg h3{font-size:14px;font-weight:750;letter-spacing:-.2px;color:var(--deep);margin-bottom:5px}
.pg p{font-size:14px;line-height:1.55}
/* the town itself, wide, between the map copy and the history cards */
.area-wide{position:relative;margin:64px auto 0;border-radius:28px;overflow:hidden;aspect-ratio:2.2/1;background:#dfe5e8}
.area-wide img{width:100%;height:100%;object-fit:cover}
.heritage{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.hc{padding:24px 24px 26px;border-radius:22px;background:#fff;border:1px solid #E4EAEE}
.hc>small{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--blue-ink);margin-bottom:10px}
.hc h3{font-size:20px;margin-bottom:8px}
.hc p{font-size:14.5px;line-height:1.58}
.hc p a{color:var(--deep);font-weight:600}
@media(max-width:920px){.heritage{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.place-groups{grid-template-columns:1fr;gap:14px}.heritage{grid-template-columns:1fr;margin-top:44px}}

/* ---------- Floating nav capsule (2026-09-15) ----------
   Kyle: the nav read as a card cropped at its bottom corners against a full-width white strip. The nav is now a fully
   rounded capsule floating just below the top over the hero ground; the strip behind it is gone, and clicks around the
   capsule reach the page. The logo dock reads its geometry from layout, so it follows automatically. */
:root{--nav-gap:12px;--nav-h:72px;--hero-pad:30px}
.nav-wrap{background:none;padding-top:var(--nav-gap);margin-bottom:calc(-1 * (var(--nav-h) + var(--nav-gap)));pointer-events:none}
.nav{pointer-events:auto;min-height:var(--nav-h);padding:10px 12px 10px 22px;border:1px solid #E7EAF0;border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 1px 2px rgba(23,28,40,.04),0 8px 24px rgba(23,28,40,.05)}
.nav::after{box-shadow:0 18px 40px rgba(23,28,40,.12)}
.hero{padding-top:calc(var(--hero-pad) + var(--nav-h) + var(--nav-gap))}
@media(min-width:1450px){:root{--hero-pad:42px}}
@media(max-width:1100px){.nav{padding:10px 10px 10px 16px}}
@media(max-width:960px){:root{--nav-h:64px;--nav-gap:10px}.nav{border-radius:20px}}
@media(max-width:780px){:root{--hero-pad:28px}}
@media(max-width:480px){:root{--nav-gap:8px;--nav-h:60px}.nav{padding:8px 8px 8px 14px;border-radius:18px}}
/* people: real headshots for Steve and Cindy (2026-09-15). Every portrait box is square so photo and initials cards line up. */
.person-portrait{aspect-ratio:4/5}
.person-portrait.has-photo{background:#E8F2FA}
.person-portrait.has-photo::after{display:none}
.person-portrait.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .9s var(--out)}
@media (hover:hover) and (pointer:fine){.person:hover .person-portrait.has-photo img{transform:scale(1.04)}}

/* horizontal nav lockup (logo v2, after Kyle's reference): the mark image, then the lockup's text image (divider, AUCTION,
   ESTABLISHED 1997) at the same height. Both are crops of one lockup, so they meet exactly; the dock still lands on the mark. */
.brand{gap:0}
.brand-name{display:block;border:0;padding:0;line-height:0}
.brand-word{display:block;width:auto;height:50px}
@media(max-width:1100px){.brand-word{height:44px}}
@media(max-width:480px){.brand-word{height:40px}}

/* contact: hover, tablet, phone */
@media (hover:hover) and (pointer:fine){
  .cd-big:hover .cd-go{transform:rotate(-14deg) scale(1.07)}
  a.cd-line:hover,.cd-mail-row a:hover{opacity:.8}
  .cd-copy:hover{background:#ffffff29;border-color:#ffffffa0}
  .cd-copy.is-done:hover{background:#fff}
  .cd-map:hover .cd-map-go{transform:translateY(-2px)}
  .cd-map:hover .cd-map-go svg{transform:translate(2px,-2px)}
  .cd-tabs button[aria-pressed="false"]:hover{color:#fff}
  .chip:hover input:not(:checked)+span{border-color:#B7D3EA;background:#F5F9FD;color:var(--deep)}
  .fld:hover input:not(:focus),.fld:hover textarea:not(:focus){border-color:#C5D3DE}
}
@media(max-width:1100px){
  .ch-head{gap:40px}
  .ch-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .ch-direct{padding:30px 26px 24px}
  .ch-form{padding:30px 28px 28px}
}
@media(max-width:920px){
  .ch-head{grid-template-columns:1fr;gap:14px}
  .ch-panel{grid-template-columns:1fr}
  .ch-direct{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px;align-items:start}
  .cd-big{grid-column:1/-1}
  .cd-places{margin-top:0}
}
@media(max-width:640px){
  .ch-direct{display:flex}
}
@media(max-width:480px){
  .contact-hub{padding:64px 0 24px}
  .ch-head{margin-bottom:26px}
  .ch-head p{font-size:15px}
  .ch-panel{padding:8px;gap:8px;border-radius:28px}
  .ch-direct{padding:26px 20px 20px;border-radius:22px;gap:22px}
  .cd-big strong{font-size:31px;letter-spacing:-1.2px}
  .cd-go{width:46px;height:46px}
  .cd-line strong{font-size:18px}
  .cd-map{height:170px}
  .ch-form{padding:26px 18px 22px;border-radius:22px}
  .ch-form-head h3{font-size:23px}
  .ch-grid{grid-template-columns:1fr}
  .chip span{height:36px;padding:0 13px;font-size:13px}
  .ch-actions{flex-direction:column;align-items:stretch}
  .ch-actions .button{justify-content:space-between}
  .brand::before{left:31px;width:50px;height:50px;margin:-25px 0 0 -25px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}


/* ---- the film (2026-09-16): sixteen seconds of the open catalog, built by _promo/build_promo.py ---- */
.film-section{background:#fff}
.film{position:relative;margin:0;border-radius:28px;overflow:hidden;background:#0A4F85;aspect-ratio:16/9;isolation:isolate;
  box-shadow:0 30px 70px #16233112}
.film video{display:block;width:100%;height:100%;object-fit:cover}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border:0;border-radius:50%;
  display:grid;place-items:center;background:#ffffffef;color:var(--deep);cursor:pointer;box-shadow:0 14px 34px #0a1c2a3d;
  transition:transform .6s var(--spring),background-color .3s var(--soft),opacity .35s var(--soft)}
.film-play svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.film.is-playing .film-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9)}
@media (hover:hover) and (pointer:fine){.film-play:hover{transform:translate(-50%,-50%) scale(1.06);background-color:#fff}}
@media(max-width:640px){.film{border-radius:20px}.film-play{width:70px;height:70px}.film-play svg{width:24px;height:24px}}

@media(max-width:700px){.area-wide{aspect-ratio:16/10;margin-top:44px}}

.film-sound{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 13px;
  border:1px solid #ffffff33;border-radius:40px;background:#0a1b2a8f;color:#fff;font-size:13px;font-weight:650;cursor:pointer;
  backdrop-filter:blur(6px);transition:background-color .3s var(--soft),border-color .3s var(--soft),transform .5s var(--spring)}
.film-sound svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.film-sound .spk{fill:currentColor;stroke:none}
.film-sound .on{opacity:0}
.film-sound[aria-pressed=true] .on{opacity:1}
.film-sound[aria-pressed=true] .off{opacity:0}
@media (hover:hover) and (pointer:fine){.film-sound:hover{background-color:#0a1b2ac4;border-color:#ffffff59;transform:translateY(-2px)}}
@media(max-width:640px){.film-sound{right:10px;bottom:10px;padding:8px 13px 8px 11px;font-size:12px}.film-sound b{display:none}}

@media(max-width:640px){
  .people-lead{grid-template-columns:1fr;max-width:none}
  .people-team{gap:10px}
  .mate{padding:8px 8px 16px;border-radius:20px}
  .mate .face,.mate .mono{margin-bottom:12px;border-radius:14px}
  .mate h3{font-size:15.5px}
  .mate .role{font-size:12px}
  .people-note{margin-top:22px;font-size:15px}
}

/* ---- Hot wall (2026-10-02): the live wall is dealt from HiBid's hottest lots ----
   Heat pill = bids and current bid on each tile. The big tile is one of the three hottest lots and
   says so. Shuffle deals a new hand outward from the sale card (wall-rotate.js). */
.wall-heat{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:20px;
  background:#ffffffe6;border:1px solid #E3E8EE;font-size:11px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums;letter-spacing:.1px;white-space:nowrap;
  box-shadow:0 2px 8px #26226210;transition:opacity .3s var(--soft)}
.wall-heat i{width:7px;height:7px;border-radius:50%;background:#9DB9D1}
.wall-heat.is-top i{background:#F26B1D;box-shadow:0 0 0 3px #F26B1D24}
.wall-heat[hidden]{display:none}
.wall-lot.is-turning .wall-heat{opacity:0}
.wall-lot.big .wall-heat{top:14px;left:14px;font-size:12.5px;padding:6px 12px 6px 9px}
.wall-heat .heat-tag{font-weight:700;margin-right:2px;padding-right:8px;border-right:1px solid #E3E8EE;color:#C2510F}
.wall-shuffle svg{transition:transform .6s var(--out)}
.sale-wall.is-dealing .wall-shuffle svg{transform:rotate(180deg)}
.sale-wall.is-dealing .wall-shuffle{pointer-events:none}
@media (hover:hover){ .wall-shuffle:hover svg{transform:rotate(-30deg)} }

/* ---- The sale card, fifth pass (2026-10-02, Kyle: "make this card look absolutely incredible") ----
   Everything sizes to the card itself (container units), so it reads the same in a narrow six-column
   wall and a full-width phone card. Three groups — who, how long, act — with real air between them.
   The title is a name and a line: "Great Gallery Treasure Hunt" big, "Vintage, Collectibles & Tools"
   under it. The clock is the hero: big numerals, the unit set small beneath, faint colons between. */
.wall-card{container-type:inline-size;padding:clamp(26px,8cqi,40px) clamp(18px,6cqi,32px)}
.wall-card .card-face{gap:0}
.wall-card h3{margin:clamp(16px,5cqi,22px) 0 0;font-size:clamp(28px,10.6cqi,46px);letter-spacing:-.035em;line-height:1;text-wrap:balance}
.wall-card h3.long{font-size:clamp(26px,9.2cqi,40px)}
.wall-card h3 .h-main,.wall-card h3 .h-sub{display:block}
.wall-card h3 .h-sub{margin-top:clamp(8px,2.6cqi,12px);font-size:clamp(15px,4.6cqi,19px);font-weight:600;letter-spacing:-.005em;line-height:1.3;color:#D6EAF8;text-wrap:balance}
.wall-card .wall-where{margin-top:clamp(10px,3.2cqi,14px);font-size:clamp(12px,3.5cqi,13.5px);color:#C3DEF2}
.wall-card .sale-clock{margin-top:clamp(24px,8.5cqi,40px)}
.wall-card .clock-kicker{font-size:clamp(10px,2.9cqi,11.5px);letter-spacing:.16em}
.clock-time{gap:0;margin-top:clamp(8px,2.6cqi,12px);align-items:flex-start}
.clock-time .t{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.4cqi,7px);min-width:1.25em;font-size:clamp(32px,12cqi,70px)}
.clock-time .t+.t::before{content:':';position:absolute;transform:translate(-50%,-.06em);font-family:var(--num);font-size:1em;font-weight:500;line-height:.92;color:#ffffff59}
.clock-time .t{position:relative;padding:0 .21em}
.clock-time .t+.t::before{left:0;top:0}
.clock-time b{font-size:1em;line-height:.92;letter-spacing:-.045em}
.clock-time i{font-size:clamp(9.5px,2.7cqi,11.5px);font-weight:700;letter-spacing:.16em;color:#BBDAF1}
.wall-card:is(.s-final,.s-closing) .clock-time .t{font-size:clamp(44px,17cqi,92px)}
.wall-card:is(.s-final,.s-closing) .clock-time b{font-size:1em}
.wall-card .clock-bar{margin-top:clamp(16px,5cqi,22px);height:3px;background:#ffffff24}
.wall-card .clock-when{margin-top:clamp(10px,3cqi,13px);font-size:clamp(12px,3.5cqi,13.5px);color:#DCEDFB}
.wall-card .card-acts{margin-top:clamp(22px,7.5cqi,34px);flex-wrap:wrap;row-gap:4px}
.sale-wall.is-bare .wall-card{container-type:normal}

/* ---- Place bands (2026-10-02): downtown Danville, big and bright ----
   Kyle: "don't make these photos small … really vibrant." Each band is nearly edge to edge, tall, and
   only the bottom edge carries a soft shade for the caption; the rest of the photo stays untouched. */
.place-band{padding:0 16px;margin:8px 0}
.pb-frame{position:relative;margin:0 auto;max-width:1760px;height:clamp(440px,80vh,860px);border-radius:30px;overflow:hidden;background:#cfe3f1;isolation:isolate}
.pb-frame img{width:100%;height:100%;object-fit:cover;display:block;scale:1.06;transition:scale 2.4s var(--out)}
.pb-frame.is-seen img{scale:1}
.pb-bridge img{object-position:56% 62%}
.pb-river img{object-position:50% 40%}
.pb-frame::after{content:'';position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to top,#0b1f3399,#0b1f3300);pointer-events:none}
.pb-cap{position:absolute;left:clamp(22px,4vw,64px);bottom:clamp(22px,4.5vw,60px);z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:#fff;max-width:min(760px,80%)}
.pb-kick{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:7px 13px;border-radius:30px;background:#ffffff26;border:1px solid #ffffff4d;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pb-title{font-size:clamp(30px,4.4vw,64px);font-weight:750;letter-spacing:-.035em;line-height:1.02;text-shadow:0 2px 24px #0b1f3366}
@media (max-width:760px){
  .place-band{padding:0 10px}
  .pb-frame{height:clamp(380px,68vh,560px);border-radius:22px}
  .pb-bridge img{object-position:60% 62%}
}
@media (prefers-reduced-motion:reduce){ .pb-frame img{scale:1;transition:none} }

/* Shuffle, promoted (2026-10-02, Kyle: "make that a little more obvious … up under it"): a big pill
   centered right under the wall. The icon turns while a new hand is being dealt. */
.wall-shuffle-row{display:flex;justify-content:center;margin:26px 0 4px}
.wall-shuffle-big{display:inline-flex;align-items:center;gap:14px;padding:10px 26px 10px 10px;border:0;border-radius:60px;cursor:pointer;
  background:linear-gradient(140deg,#3A93D1,#0E76BC 70%,#0A4F85);color:#fff;font:700 17px/1 var(--font);letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 #ffffff33,0 14px 30px #0a4f8530,0 0 0 6px #0E76BC14;transition:transform .6s var(--spring),box-shadow .4s var(--soft)}
.wall-shuffle-big .ws-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--blue)}
.wall-shuffle-big svg{width:20px;height:20px;transition:transform .7s var(--out)}
.wall-shuffle-big small{display:block;margin-top:5px;font-size:12px;font-weight:550;color:#D6EAF8;letter-spacing:0}
.wall-shuffle-big .ws-txt{text-align:left}
@media (hover:hover){
  .wall-shuffle-big:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #ffffff33,0 18px 36px #0a4f853d,0 0 0 8px #0E76BC1f}
  .wall-shuffle-big:hover svg{transform:rotate(-35deg)}
}
.wall-shuffle-big:active{transform:scale(.97);transition:transform .14s var(--soft)}
.sale-wall.is-dealing .wall-shuffle-big svg{transform:rotate(360deg)}
.sale-wall.is-dealing .wall-shuffle-big{pointer-events:none}
.sale-wall.is-browsing .wall-shuffle-row{display:none}

/* the contact form's topic chips share the .chip name with the wall's browse chips (line ~233), which drew a
   second pill around every topic; the contact chips draw their own pill on the inner span (2026-10-02) */
.ch-topics .chip{padding:0;border:0;background:none;border-radius:0}

/* line icons replace the text symbols (⌂ ◇ ↗ ✧ ⌖ +) — iPhones drew some of them as emoji (2026-10-02) */
.gi{display:block;width:22px;height:22px}
.category-icon .gi{width:20px;height:20px}
.feature-card .category-icon .gi{width:18px;height:18px}
.service-list article>span .gi{width:22px;height:22px}
.icon-circle .gi{width:26px;height:26px}
@media(max-width:760px){ .icon-circle .gi{width:20px;height:20px} .category-icon .gi{width:17px;height:17px} }
@media (hover:hover){ .photo-card.tilt:hover .category-icon{transform:scale(1.08)} }   /* the 45deg turn suits the arrow only, not the chair or sparkle */

/* ---- Facebook section, second design (2026-10-02): a phone showing a B&H sale post drawn in the site's own type ---- */
.fb-section{background:linear-gradient(180deg,#F4F7FB,#EAF1FA);overflow:hidden}
.fb-grid{display:grid;grid-template-columns:1fr minmax(0,440px);gap:80px;align-items:center;justify-content:space-between}
.fb-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:30px;background:#fff;border:1px solid #DCE6F2;font-size:13px;font-weight:650;color:#1B4E9B}
.fb-kicker svg{width:16px;height:16px;color:#1877F2}
.fb-copy h2{margin-top:18px;font-size:clamp(38px,4.6vw,62px);letter-spacing:-.04em;line-height:1}
.fb-copy>p{margin-top:20px;max-width:460px;font-size:17.5px;line-height:1.6}
.fb-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;margin-top:30px}
.fb-follow{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 26px 0 20px;border-radius:99px;background:#1877F2;color:#fff;font-weight:700;font-size:16px;
  box-shadow:0 12px 26px #1877F240,inset 0 1px 0 #ffffff33;transition:transform .6s var(--spring),box-shadow .4s var(--soft)}
.fb-follow svg{width:22px;height:22px}
@media (hover:hover){.fb-follow:hover{transform:translateY(-3px);box-shadow:0 18px 34px #1877F24d,inset 0 1px 0 #ffffff33}}
.fb-count{font-size:14.5px;color:var(--muted)}
.fb-count b{color:var(--ink);font-size:16px}

.fb-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.fb-stage::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;top:20px;background:radial-gradient(closest-side,#1877F222,#1877F200);z-index:0}
.fb-stack{position:relative;z-index:1;width:100%;max-width:440px}
.fb-card{background:#fff;border-radius:22px;border:1px solid #E1E8F0;overflow:hidden}
.fb-skel{display:flex;flex-direction:column;gap:7px;flex:1}.fb-skel i{height:9px;border-radius:5px;background:#E4E9F0;width:60%}.fb-skel i+i{width:35%}
.fb-card-front{position:relative;box-shadow:0 30px 70px #0b1f3b24,0 2px 0 #fff inset;transition:transform .8s var(--spring),box-shadow .6s var(--soft)}
@media (hover:hover){.fb-stage:hover .fb-card-front{transform:translateY(-6px);box-shadow:0 40px 80px #0b1f3b2e}}
.fb-new{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:20px;background:#E7F0FE;color:#1B4E9B;font-size:11.5px;font-weight:700}
.fb-new svg{width:13px;height:13px;color:#1877F2}
.fb-card-front .fb-post{margin:0;padding-top:16px}
.fb-post{margin-top:8px;background:#fff;padding:12px 0 4px}
.fb-head{display:flex;align-items:center;gap:10px;padding:0 14px}
.fb-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #E4E6EB;overflow:hidden;flex:none}
.fb-avatar img{width:30px;height:auto}
.fb-avatar.sm{width:32px;height:32px}.fb-avatar.sm img{width:24px}
.fb-who{display:flex;flex-direction:column;line-height:1.25}
.fb-who b{font-size:14.5px;color:#050505}
.fb-who small{display:flex;align-items:center;gap:4px;font-size:12px;color:#65676B;white-space:nowrap}
.fb-who small svg{width:11px;height:11px}
.fb-text{padding:10px 14px 10px;font-size:14px;line-height:1.42;color:#050505}
.fb-tags{color:#1B4E9B}
.fb-photos{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#fff}
.fb-ph{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.fb-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;background:#fff;transition:opacity .32s var(--soft),transform .45s var(--soft)}
.fb-ph.is-turning img{opacity:0;transform:scale(.96)}
.fb-ph em{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(160deg,#1877F2e6,#0E4FA8f0);color:#fff;font:800 30px/1 var(--font);font-style:normal;letter-spacing:-.03em;z-index:1}
.fb-ph em small{font:600 12px/1 var(--font);letter-spacing:.02em;opacity:.9}
.fb-acts{display:flex;justify-content:space-around;margin:4px 12px 0;padding:8px 0;border-top:1px solid #E4E6EB}
.fb-acts span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#65676B}
.fb-acts svg{width:17px;height:17px;fill:none;stroke:#65676B;stroke-width:1.5;stroke-linejoin:round}
.fb-next{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin-top:8px;padding:12px 14px 30px;background:#fff}
.fb-next .fb-avatar{grid-row:span 2}
.fb-line{height:10px;border-radius:6px;background:#E4E6EB;align-self:end}.fb-line.short{width:55%;align-self:start}
.fb-caption{position:relative;z-index:1;margin-top:20px;max-width:360px;text-align:center;font-size:13px;color:var(--muted)}
@media(max-width:900px){
  .fb-grid{grid-template-columns:1fr;gap:40px}
  .fb-stack{max-width:400px}
}