/* ==========================================================================
   Aari Realty — forms, guide prose, tables and the agent chip.
   Only what the client-facing pages need on top of the joinaari system.
   Every value comes from that system's tokens — no new colors or radii.
   ========================================================================== */

.page-wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.prose{max-width:760px;margin:0 auto}
.sec{padding:72px 24px}
.sec.alt{background:var(--off)}
.sec-head{max-width:720px;margin:0 auto 40px;text-align:center}
.sec-head .eb{display:block;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--lite);font-weight:700;margin-bottom:12px}
.sec-head h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(30px,4.4vw,48px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.sec-head h2 em{font-style:italic;font-weight:400}
.sec-head p{font-size:15px;line-height:1.7;color:var(--mid);margin:0}
.sec-head.left{text-align:left;margin-left:0}
.fine{font-size:12px;line-height:1.65;color:var(--lite)}

/* Long-form numbered steps */
.steps{max-width:820px;margin:0 auto}
.step{padding:30px 0;border-top:1px solid var(--border);display:grid;grid-template-columns:56px 1fr;gap:22px}
.step:first-child{border-top:none;padding-top:0}
.step .n{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;font-weight:500;color:var(--border);line-height:1;letter-spacing:-1.5px}
.step h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.step h3 em{font-style:italic;font-weight:400}
.step p{font-size:14.5px;line-height:1.75;color:var(--mid);margin:0 0 12px}
.step p:last-child{margin-bottom:0}
.step ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.step li{font-size:13.5px;line-height:1.65;color:var(--mid);padding-left:18px;position:relative}
.step li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--lite)}

/* Callout */
.note{background:var(--card);border-radius:var(--r);padding:20px 22px;margin-top:20px}
.note .lb{display:block;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--lite);margin-bottom:8px}
.note p{font-size:13.5px;line-height:1.7;color:var(--ink);margin:0}

/* Tables */
.tbl{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#fff}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl table{width:100%;border-collapse:collapse}
.tbl thead th{background:var(--black);color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700;padding:14px 18px;text-align:left}
.tbl tbody td{padding:14px 18px;font-size:13px;line-height:1.6;border-bottom:1px solid var(--border);vertical-align:top;color:var(--mid)}
.tbl tbody td:first-child{color:var(--ink);font-weight:600}
.tbl .cat td{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--lite);padding:15px 18px 5px;border-bottom:none;background:var(--off)}
.tbl tbody tr:last-child td{border-bottom:none}
@media(max-width:760px){.tbl table{min-width:620px}}

/* Forms */
.form{max-width:600px}
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:30px}
.sec.alt .form-card{background:#fff}
.fld{margin-bottom:16px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld label{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--lite);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--border);background:#fff;padding:13px 15px;font-family:'Montserrat',sans-serif;font-size:14.5px;color:var(--ink);border-radius:12px;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.5' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 15px center}
.fld textarea{resize:vertical;min-height:110px;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,18,16,.06)}
.fld-note{font-size:11px;color:var(--lite);margin-top:5px}
.consent{margin-top:16px;font-size:11.5px;color:var(--lite);line-height:1.65}
.consent a{color:var(--mid);text-decoration:underline;text-underline-offset:2px}
.form button{margin-top:8px}

/* Agent chip on the contact form */
.agent-chip{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r);padding:12px 14px;margin-bottom:18px}
.agent-chip img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.agent-chip span{font-size:12px;color:var(--mid);line-height:1.4}
.agent-chip strong{display:block;font-size:14px;color:var(--ink);font-weight:700}
.agent-chip a{margin-left:auto;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Two-column split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;max-width:1100px;margin:0 auto}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}.fld-row{grid-template-columns:1fr}.step{grid-template-columns:42px 1fr;gap:14px}.step .n{font-size:28px}}

/* Legal prose */
.legal h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:500;letter-spacing:-.02em;margin:46px 0 14px;color:var(--ink)}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:16px;font-weight:700;margin:26px 0 8px;color:var(--ink)}
.legal p{font-size:14.5px;line-height:1.8;color:var(--mid);margin-bottom:14px}
.legal ul{list-style:none;padding:0;display:grid;gap:8px;margin:12px 0 20px}
.legal li{font-size:14px;line-height:1.7;color:var(--mid);padding-left:18px;position:relative}
.legal li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--lite)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal .upd{font-size:11px;color:var(--lite);text-transform:uppercase;letter-spacing:1.6px;font-weight:700;margin-bottom:30px}

/* Simple page hero for inner pages */
.phero{padding:70px 24px 46px;text-align:center;max-width:900px;margin:0 auto}
.phero .eyebrow{margin-bottom:16px}
.phero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:0 0 18px}
.phero h1 em{font-style:italic;font-weight:400}
.phero .sub{font-size:16px;line-height:1.7;color:var(--mid);max-width:620px;margin:0 auto 26px}
.phero .cta-row{justify-content:center}

/* ==========================================================================
   Choose your agent — the joinaari face cluster is the trigger; the full
   searchable roster lives in a popup so it can hold hundreds of agents
   without taking over the page.
   ========================================================================== */

/* --- The face cluster doubles as the trigger --- */
.tm-cluster[data-open-agents]{cursor:pointer}
.tm-cluster[data-open-agents]:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:12px}
.tm-cluster[data-open-agents] .tm-slot img{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tm-cluster[data-open-agents]:hover .tm-slot img{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.tm-cluster[data-open-agents]:hover .tm-slot img{transform:none}}

/* --- Popup --- */
.br{position:fixed;inset:0;z-index:9998;display:none}
.br.on{display:block}
.br-back{position:absolute;inset:0;background:rgba(20,18,16,.74);backdrop-filter:blur(6px)}
.br-shell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;pointer-events:none}
.br-panel{position:relative;pointer-events:auto;background:#fff;border-radius:20px;width:100%;max-width:1080px;height:min(86vh,760px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}

.br-top{padding:20px 22px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.br-ttl{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.br-ttl h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:27px;line-height:1;letter-spacing:-.02em;margin:0}
.br-ttl h3 em{font-style:italic;font-weight:400}
.br-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--mid);cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.br-x:hover{border-color:var(--ink);color:var(--ink)}
.br-find{position:relative;margin-bottom:12px}
.br-find input{width:100%;border:1px solid var(--border);background:#fff;border-radius:var(--r-pill);padding:13px 42px 13px 44px;font-family:'Montserrat',sans-serif;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.br-find input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,18,16,.06)}
.br-find input::placeholder{color:var(--lite)}
.br-mag{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--lite);pointer-events:none}
.br-clr{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:none;background:var(--card);color:var(--mid);cursor:pointer;font-size:14px;display:none;align-items:center;justify-content:center}
.br-clr.on{display:flex}
.br-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.br-chips::-webkit-scrollbar{display:none}
.br-chip{flex-shrink:0;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:var(--mid);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;white-space:nowrap;transition:all .15s}
.br-chip:hover{border-color:var(--lite);color:var(--ink)}
.br-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

.br-body{flex:1;display:grid;grid-template-columns:296px 1fr;min-height:0}
.br-side{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.br-cnt{padding:11px 18px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lite);font-weight:700;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;flex-shrink:0}
.br-list{overflow-y:auto;flex:1;overscroll-behavior:contain}
.br-item{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;width:100%;padding:11px 16px;border:none;border-bottom:1px solid var(--border);background:#fff;cursor:pointer;text-align:left;font-family:inherit;transition:background .14s}
.br-item:hover{background:var(--off)}
.br-item.on{background:var(--ink)}
.br-item.on .br-nm{color:#fff}
.br-item.on .br-rl{color:rgba(255,255,255,.62)}
.br-ph{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--card);position:relative}
.br-ph img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.br-vd{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.br-item.on .br-vd{border-color:var(--ink);background:#fff}
.br-vd svg{width:7px;height:7px;color:#fff}
.br-item.on .br-vd svg{color:var(--ink)}
.br-nm{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:17px;line-height:1.15;margin:0;color:var(--ink)}
.br-rl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lite);font-weight:700;margin:2px 0 0}

.br-detail{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.br-hero{display:grid;grid-template-columns:230px 1fr;gap:26px;padding:26px 28px 0}
.br-media{border-radius:var(--r);overflow:hidden;background:var(--card);aspect-ratio:4/5}
.br-media img,.br-media video{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.br-media video{background:#000}
.br-info{padding-top:4px}
.br-kicker{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.br-pill{font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);background:var(--off);color:var(--mid)}
.br-pill.lead{background:var(--ink);color:#fff}
.br-detail h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:34px;line-height:1;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)}
.br-lead{font-size:14.5px;line-height:1.75;color:var(--mid);margin:0 0 18px}
.br-lead.e{font-style:italic;color:var(--lite)}
.br-facts{display:grid;gap:9px;padding:16px 0 0;border-top:1px solid var(--border);margin-bottom:20px}
.br-fact{display:flex;gap:12px;font-size:12.5px;line-height:1.5}
.br-fact b{flex:0 0 82px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lite);font-weight:700;padding-top:2px}
.br-fact span{color:var(--mid)}
.br-foot{padding:0 28px 28px}
.br-none{padding:40px 22px;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:18px;color:var(--mid)}

@media (max-width:860px){
  .br-shell{padding:0}
  .br-panel{border-radius:0;height:100%;max-width:none}
  .br-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .br-side{border-right:none;border-bottom:1px solid var(--border);max-height:38vh}
  .br-hero{grid-template-columns:1fr;gap:18px;padding:20px 20px 0}
  .br-media{max-width:220px;aspect-ratio:1/1}
  .br-detail h4{font-size:28px}
  .br-foot{padding:0 20px 24px}
}
@media (prefers-reduced-motion:reduce){.br-item{transition:none}}

/* ==========================================================================
   Inner-page motion kit — the homepage components, reused.
   Tabs carry the detail so a page shows ~50 words at a time instead of 1400.
   ========================================================================== */

/* Hint under a section head: "tap a step, it advances on its own" */
.sec-hint{font-size:13px;color:var(--lite);margin:10px auto 0;max-width:520px}

/* Two-card comparison (the wrong number vs the right one) */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin:0 auto}
.ncard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px 26px 28px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.ncard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,18,16,.09)}
.ncard-tag{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--lite);margin-bottom:12px}
.ncard h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:26px;line-height:1.1;
  color:var(--ink);margin:0 0 10px}
.ncard p{font-size:14.5px;line-height:1.7;color:var(--mid);margin:0}
.ncard-on{background:var(--ink);border-color:var(--ink)}
.ncard-on .ncard-tag{color:rgba(255,255,255,.5)}
.ncard-on h3{color:#fff}
.ncard-on p{color:rgba(255,255,255,.74)}
.sec.alt .ncard:not(.ncard-on){background:#fff}
@media(max-width:760px){.two-up{grid-template-columns:1fr}}

/* Compact bullets and fine print inside a tab pane */
.b5-list{list-style:none;margin:16px 0 0;padding:0;max-width:460px}
.b5-list li{position:relative;padding-left:18px;font-size:14px;line-height:1.65;color:var(--mid);margin-bottom:7px}
.b5-list li:before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--lite)}
.b5-list li em{font-style:italic;color:var(--ink)}
.b5-fine{font-size:11.5px;line-height:1.6;color:var(--lite);margin:18px 0 0;max-width:460px}

/* Definition rows inside a tab pane — replaces a wide table */
.spec{margin:4px 0 0;max-width:520px}
.spec dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--lite);
  margin-top:16px}
.spec dt:first-child{margin-top:0}
.spec dd{margin:5px 0 0;font-size:14.5px;line-height:1.65;color:var(--mid)}

/* The tab rail scrolls rather than wrapping once there are eight of them */
.b5-nav{scrollbar-width:none}
.b5-nav::-webkit-scrollbar{display:none}
.b5-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:900px){
  .b5-nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px}
  .b5-row{flex-shrink:0}
}

/* --- Ground alternation: never two sections of the same colour in a row --- */
.freebies.light{background:#fff}
.freebies.light .frb-panel{background:var(--card)}
.team.alt{background:var(--off)}
.team.alt .tm-slot img{border-color:var(--off)}
.team.alt .tm-face{border-color:var(--off)}

/* ==========================================================================
   Motion layer — the inner pages had no imagery and nothing moving.
   ========================================================================== */

/* Scroll progress across the top of every page */
.spro{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;background:var(--ink);
  transition:width .1s linear;pointer-events:none}

/* Inner-page hero gets the homepage dot field */
.phero{position:relative;overflow:hidden}
.phero > *{position:relative;z-index:1}
.phero .dots{z-index:0}

/* A word that swaps itself in the headline */
.rotw{display:inline-block;position:relative;color:var(--ink);font-style:italic;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.rotw.out{opacity:0;transform:translateY(-8px)}
.rotw:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ink);
  transform-origin:left;animation:rotwBar 2600ms linear infinite}
@keyframes rotwBar{0%{transform:scaleX(0)}88%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* Tab rail: show the auto-advance instead of hiding it */
.b5-row{position:relative;overflow:hidden}
.b5-row:after{content:'\2192';margin-left:auto;opacity:0;transform:translateX(-6px);
  transition:opacity .25s,transform .25s;font-size:13px}
.b5-row:hover:after,.b5-row.active:after{opacity:.55;transform:none}
.b5-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.42);
  transform:scaleX(0);transform-origin:left}
.b5-row.active .b5-prog{animation:b5prog linear forwards}
@keyframes b5prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.b5-row.active .b5-prog{animation:none;transform:scaleX(1)}}

/* Counting stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:900px;margin:0 auto;
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg)}
.sec.alt .stats{background:#fff}
.stat{padding:26px 18px;text-align:center;border-right:1px solid var(--border);
  transition:background .25s ease}
.stat:last-child{border-right:0}
.stat:hover{background:var(--card)}
.stat-n{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-l{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--lite);margin-top:10px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--border)}}

/* Real faces on a page that would otherwise be all type */
.facestrip{background:var(--ink);padding:44px 24px 48px;text-align:center;overflow:hidden}
.facestrip h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;color:#fff;
  font-size:clamp(26px,3.4vw,40px);line-height:1.05;margin:0 0 10px}
.facestrip h2 em{font-style:italic;color:rgba(255,255,255,.66)}
.facestrip p{font-size:14px;color:rgba(255,255,255,.6);margin:0 auto 24px;max-width:460px}
.fs-rail{display:flex;gap:0;justify-content:center;margin:0 0 26px;cursor:pointer}
.fs-face{width:74px;height:74px;border-radius:50%;overflow:hidden;border:3px solid var(--ink);
  margin-left:-18px;flex-shrink:0;background:#2a2a2a;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.fs-face:first-child{margin-left:0}
.fs-face img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.fs-rail:hover .fs-face{transform:translateY(-6px)}
.fs-rail .fs-face:hover{transform:translateY(-10px) scale(1.08);border-color:#fff;z-index:2}
.fs-more{width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);background:#fff;color:var(--ink);
  margin-left:-18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:600}
@media(prefers-reduced-motion:reduce){
  .fs-rail:hover .fs-face,.fs-rail .fs-face:hover{transform:none}
  .rotw:after{animation:none}
}

/* Hover payoff that was missing everywhere */
.btn{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-dark:hover{box-shadow:0 10px 26px rgba(20,18,16,.26)}
.frb-panel:hover{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.btn:hover,.ncard:hover,.frb-panel:hover{transform:none}}
.phero-rot{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(19px,2.3vw,26px);
  color:var(--lite);margin:2px 0 22px;line-height:1.4}
.phero-rot .rotw{min-width:5.5ch;text-align:left}

/* --- Hero: the communities we serve, in the aside card --- */
.areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.areas a{display:block;background:#fff;padding:11px 13px;text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:500;transition:background .18s ease,padding-left .18s ease}
.areas a:hover{background:var(--card);padding-left:17px}
.areas a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.areas a:hover{padding-left:13px}}

/* --- How choosing works: explains the Pick your Realtor button --- */
.ways{list-style:none;margin:0 auto 26px;padding:0;display:grid;gap:15px;max-width:440px;text-align:left}
.ways li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.ways .n{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;color:var(--lite);line-height:1.25}
.ways b{display:block;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;
  color:var(--ink);margin-bottom:3px}
.ways .d{display:block;font-family:'Montserrat',sans-serif;font-size:12.5px;line-height:1.6;color:var(--mid)}

/* Hero label and badge: the old sizes failed WCAG AA at 2.73:1 */
.aside-badge{font-size:10px;padding:7px 14px;top:-13px}
.aside-label{font-size:10.5px;color:var(--mid);letter-spacing:.14em}

/* Required brokerage disclosure, above the copyright line on every page */
.fdisc{max-width:1080px;margin:0 auto;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.55)}
.fdisc b{color:rgba(255,255,255,.8);font-weight:600}