/* Agent page (WOR-29). On top of works-web.css: same tokens, the seven layouts, brand v3 only
   (white, forest #244432, forest tints for lines and quiet text, Satoshi, 8px steps).
   The agent block's rules are appended at build from src/shared/AgentBlock/agent-block.css. */
.ap-banner { background: var(--forest); color: var(--white); text-align: center; padding: 12px var(--gutter); font-weight: 700; font-size: 18px; }
.ap-src { font-size: 18px; color: var(--quiet); }
.ap-narrow { max-width: 760px; }
.ap-serves { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 18px; max-width: 64ch; }
.card .btn { height: auto; min-height: 56px; padding: 12px 24px; text-align: center; line-height: 1.3; }

/* Hero (Full-bleed): the owned office photo, the panel with the heading and the agent block. */
.ap-hero { position: relative; }
.ap-hero-wrap { position: relative; margin-top: -48px; }
.ap-hero-panel { background: var(--white); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); display: grid; gap: 24px; max-width: 1120px; }
.ap-hero-panel .t-display { font-size: 36px; }
@media (min-width: 768px) { .ap-hero-wrap { margin-top: -160px; } .ap-hero-panel { padding: 48px; } .ap-hero-panel .t-display { font-size: 60px; } }
@media (min-width: 1024px) {.ap-hero-wrap { margin-top: -240px; } .ap-hero-panel { padding: 64px; } .ap-hero-panel .t-display { font-size: 96px; } }

/* Connect step after a QR scan, and the welcome after connecting. */
.ap-scan[hidden], .ap-thanks[hidden] { display: none; }
.ap-scan .btn, .ap-thanks .btn { background: var(--white); color: var(--forest); }
.ap-thanks-grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .ap-thanks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-mini { display: grid; gap: 8px; }
.ap-mini a, .card.forest .link { display: inline-flex; min-height: 44px; align-items: center; }
.card.forest .btn-quiet { background: transparent; color: var(--white); border-color: var(--white); }

/* The one Ask box */
.ap-ask { display: grid; gap: 16px; max-width: 960px; }
.ap-ask-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ap-ask-form input { min-height: 56px; padding: 12px 24px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); color: var(--forest); font: inherit; font-size: 18px; width: 100%; min-width: 0; }
.ap-ask-form input:focus { outline: 2px solid var(--forest); outline-offset: 0; border-color: var(--forest); }
.ap-ask-out { display: grid; gap: 16px; }
.ap-ask-out:empty { display: none; }
.ap-ask-out ul { display: grid; gap: 8px; }
.ap-ask-out a { font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }

/* The community board: a masonry of cards, filter chips, picks first. */
.ap-chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 32px; scrollbar-width: none; }
.ap-chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .ap-chips { flex-wrap: wrap; overflow: visible; } }
.ap-chips .chip { min-height: 48px; background: var(--white); color: var(--forest); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ap-chips .chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--white); }
.ap-chips .chip[hidden] { display: none; }
.bd-grid { columns: 1; column-gap: 24px; }
@media (min-width: 640px) { .bd-grid { columns: 2; } }
@media (min-width: 1024px) { .bd-grid { columns: 3; column-gap: 32px; } }
@media (min-width: 1360px) { .bd-grid { columns: 4; } }
.bd-card { break-inside: avoid; margin: 0 0 24px; display: grid; gap: 12px; padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (min-width: 1024px) { .bd-card { margin-bottom: 32px; } }
.bd-card[hidden] { display: none; }
.bd-kicker { font-size: 18px; font-weight: 700; color: var(--quiet); }
.bd-title { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.bd-title a { text-decoration: none; }
.bd-title a:hover, .bd-title a:focus-visible { text-decoration: underline; }
.bd-meta { font-size: 18px; color: var(--quiet); }
.bd-sum { font-size: 18px; line-height: 1.5; }
.bd-pick { background: var(--wash); border-color: var(--wash); box-shadow: none; }
.bd-pick .bd-title { font-size: 28px; }
.bd-happening .bd-title { font-size: 28px; }
.bd-forest { background: var(--forest); border-color: var(--forest); color: var(--white); }
.bd-forest .bd-kicker, .bd-forest .ap-src, .bd-forest a { color: var(--white); }
.bd-forest .bd-title { font-size: 28px; }
.bd-forest .btn { background: var(--white); color: var(--forest); }
.bd-photo { padding: 0; overflow: hidden; }
.bd-photo .bd-img img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; border-radius: 0; }
.bd-photo .bd-body { display: grid; gap: 12px; padding: 24px; }
.bd-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; border-top: 1px solid var(--line); }
.bd-forest .bd-actions { border-color: rgba(255, 255, 255, 0.3); }
.bd-act { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 18px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.bd-act[aria-pressed="true"] { text-decoration: none; }
.ap-pulse { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Follow and Search homes */
.ap-two { display: grid; gap: 48px; }
@media (min-width: 768px) { .ap-two { grid-template-columns: 1fr 1fr; } }
.ap-follow { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-follow .chip { min-height: 48px; text-decoration: none; }
.ap-follow .chip:hover { background: var(--wash); }
.ap-pros-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 768px) { .ap-pros-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ap-pros-list { grid-template-columns: repeat(3, 1fr); } }
.ap-pro { display: grid; gap: 8px; align-content: start; }
.ap-pro h3 a { display: inline-flex; min-height: 44px; align-items: center; }
.ap-pro-say { margin: 8px 0 0; display: grid; gap: 8px; }
.ap-pro-say blockquote { margin: 0; }
.ap-disclosure { margin-top: 24px; max-width: 72ch; }
.ap-reviews { display: grid; gap: 32px; }
@media (min-width: 1024px) { .ap-reviews { grid-template-columns: repeat(3, 1fr); } }
.ap-reviews blockquote { margin: 0; }

/* About Works */
.ap-pillars { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ap-pillars { grid-template-columns: repeat(3, 1fr); } }
.ap-offices { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ap-offices a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
.l-close .close-card .link { color: var(--white); }

/* Buying and selling, always one tap away on phones. */
.ap-sticky { visibility: hidden; transform: translateY(100%); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); }
.ap-sticky.is-on { visibility: visible; transform: none; }
@media (prefers-reduced-motion: no-preference) { .ap-sticky { transition: transform 240ms var(--ease), visibility 240ms; } }
.ap-sticky .btn { min-height: 48px; padding: 0 12px; font-size: 18px; }
body:has(.ap-sticky) .site-foot { padding-bottom: 96px; }
body:has(.ap-sticky) .cookie { bottom: 80px; }
@media (min-width: 768px) { .ap-sticky { display: none; } body:has(.ap-sticky) .site-foot { padding-bottom: 48px; } body:has(.ap-sticky) .cookie { bottom: 16px; } }

/* Dialogs: the optional details step and host an event */
.ap-dialog { border: 0; border-radius: 16px; padding: 32px; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); color: var(--forest); background: var(--white); box-shadow: var(--shadow); }
.ap-dialog::backdrop { background: rgba(36, 68, 50, 0.4); }
@media (max-width: 639px) { .ap-dialog { padding: 24px; } }
.ap-dialog .hint { font-size: 18px; color: var(--quiet); margin-top: -16px; }
.ap-dialog .error:empty, .ap-openhouse .error:empty { display: none; }
.ap-dialog .error, .ap-openhouse .error { font-weight: 700; }
.ap-kind { border: 0; padding: 0; margin: 0; display: grid; gap: 24px; min-width: 0; }
.ap-kind[hidden], .ap-kind [hidden] { display: none; }

/* Open house mode: tablet first */
.ap-openhouse .wrap { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) { .ap-openhouse .wrap { grid-template-columns: 7fr 5fr; gap: 64px; } }
.ap-oh-qr { margin: 0; display: grid; gap: 16px; justify-items: center; text-align: center; }
.ap-oh-qr svg { width: min(100%, 420px); height: auto; }
@media (min-width: 1024px) {
    .ap-hero-wrap { margin-top: -160px; }
    .ap-hero-panel { padding: 48px 64px; gap: 32px; }
    .ap-hero-panel .t-display { font-size: 60px; }
}
@media (max-width: 767px) { .ap-hero-panel { padding: 24px 16px; } .ap-hero-wrap { margin-top: -32px; } }

/* Round 2 (design critique): the photo carries the hero, the card overlaps less, the board breathes. */
.ap-hero-wrap { margin-top: -48px; }
@media (min-width: 768px) {.ap-hero-wrap { margin-top: -96px; } }
@media (min-width: 1024px) {.ap-hero-wrap { margin-top: -96px; } .ap-hero-panel { max-width: 960px; } }
.ap-voice { max-width: 40ch; }
.bd-title { font-size: 22px; }
.bd-pick .bd-title, .bd-happening .bd-title, .bd-forest .bd-title { font-size: 22px; }
.bd-photo .bd-title { font-size: 22px; }
.bd-actions { align-items: center; }
.bd-act.bd-quiet { font-weight: 400; color: var(--quiet); }
.bd-forest .bd-act.bd-quiet { color: var(--white); }
.ap-hero-head { display: grid; gap: 16px; align-content: start; }
.ap-hero-head .ap-serves { margin-top: 8px; }
@media (min-width: 1024px) {
    .ap-hero-panel { max-width: none; grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: start; }
}
/* Round 3 (design critique): actions on the phone's first screen, tighter block, quiet sticky labels. */
.ap-hero-panel .ap-serves { margin-top: 0; }
@media (min-width: 1024px) { .ap-hero-head { grid-column: 1; grid-row: 1; } .ap-hero-panel > .agent-block { grid-column: 2; grid-row: 1 / span 2; } .ap-hero-panel > .ap-serves { grid-column: 1; grid-row: 2; align-self: end; } }
.ap-sticky .btn { font-size: 18px; padding: 4px 8px; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; justify-content: center; }
.ap-voice { margin: 0; display: grid; gap: 8px; max-width: 40ch; }
.ap-voice blockquote { margin: 0; }
.ap-chips .chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--white); }

/* Round 4 (creative bar to 5): the signature picks strip, designed typographic cards, image-led tiles, a purposeful hero column. */
/* The signature: "[First]'s [City]", a numbered city guide on forest with the W unframed. */
.ap-picks { background: var(--forest); color: var(--white); padding: 64px 0; margin: 0 0 var(--section); }
@media (min-width: 1024px) { .ap-picks { padding: 96px 0; } }
.ap-picks a, .ap-picks .bd-act { color: var(--white); }
.ap-picks-head { display: flex; gap: 24px; align-items: flex-end; margin-bottom: 48px; }
.ap-picks-w { width: 64px; height: auto; flex: none; }
.ap-picks-list { display: grid; gap: 0; counter-reset: none; }
@media (min-width: 768px) { .ap-picks-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; } }
@media (min-width: 1360px) { .ap-picks-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; } }
.ap-picks-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.ap-picks-n { font-size: 60px; font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; }
.ap-picks-list .t-card { font-size: 22px; }
.ap-picks-list .t-card a { text-decoration: none; }
.ap-picks-list .t-card a:hover, .ap-picks-list .t-card a:focus-visible { text-decoration: underline; }
.ap-picks-list .bd-act { justify-self: start; }

/* Typographic cards by group: never a bare text box. */
.bd-card { padding: 0; overflow: hidden; }
.bd-body { display: grid; gap: 12px; padding: 24px; }
.bd-happening { background: var(--forest); border-color: var(--forest); color: var(--white); }
.bd-happening .bd-kicker, .bd-happening .bd-meta, .bd-happening .ap-src, .bd-happening a, .bd-happening .bd-act, .bd-happening .bd-act.bd-quiet { color: var(--white); }
.bd-happening .bd-actions { border-color: rgba(255, 255, 255, 0.3); }
.bd-day { font-size: 60px; font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; }
.bd-happening .bd-title { font-size: 28px; }
.bd-news { border-top: 8px solid var(--forest); }
.bd-news .bd-title { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.bd-resources { background: var(--wash); border-color: var(--wash); box-shadow: none; }
.bd-index { font-size: 36px; font-weight: 700; line-height: 1; color: var(--quiet); letter-spacing: -0.02em; }
.bd-businesses .bd-body { border-top: 2px solid var(--forest); }
.bd-businesses .bd-title { font-size: 22px; }
.bd-property .bd-title { font-size: 22px; }
/* Board photos stay landscape (16:9): a 343px card on a 3x phone needs 1029x579 device px, inside every 1600 file. */
.bd-photo-of { font-size: 16px; color: var(--quiet); }
.bd-tile .bd-title { font-size: 22px; }
.bd-forest .bd-body { padding: 32px 24px; }

/* Desktop hero: the left column carries the agent's headshot and their picks preview. */
.ap-hero-picks { display: none; }
@media (min-width: 1024px) {
    .ap-hero-picks { display: grid; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
    .ap-hero-picks ol { display: grid; gap: 8px; }
    .ap-hero-picks li { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; }
    .ap-hero-picks span { font-weight: 700; color: var(--quiet); }
    .ap-hero-picks a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; text-decoration: none; }
    .ap-hero-picks a:hover, .ap-hero-picks a:focus-visible { text-decoration: underline; }
}

/* Round 5: two card styles (white hairline, one forest feature), tidy numbering, a closer name row. */
.bd-card, .bd-news, .bd-resources, .bd-businesses .bd-body { background: var(--white); border: 1px solid var(--line); border-top-width: 1px; box-shadow: var(--shadow); }
.bd-businesses .bd-body { border: 0; box-shadow: none; }
.bd-feature { background: var(--forest); border-color: var(--forest); color: var(--white); }
.bd-feature .bd-kicker, .bd-feature .bd-meta, .bd-feature .ap-src, .bd-feature a, .bd-feature .bd-act, .bd-feature .bd-act.bd-quiet { color: var(--white); }
.bd-feature .bd-actions { border-color: rgba(255, 255, 255, 0.3); }
.bd-feature .bd-title { font-size: 28px; }
.bd-forest { background: var(--forest); border-color: var(--forest); }
.ap-picks { margin-top: 64px; }
.ap-picks-list li { grid-template-columns: 72px 1fr; }
.ap-picks-n { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .ap-hero-wrap { margin-top: -16px; } }
@media (min-width: 768px) { .ab-page { grid-template-columns: auto 1fr; column-gap: 16px; } .ab-page .ab-mark { justify-items: start; } .ab-page img.ab-photo { width: 120px; } }
.ap-hero-picks { display: none; }
@media (min-width: 1024px) { .ap-hero-picks { display: block; margin-top: 24px; } }
/* The left column ends where its content ends: the OR/WA/ID line sits under the picks link. */
@media (min-width: 1024px) { .ap-hero-panel > .ap-serves { grid-row: 2; align-self: start; } .ap-hero-panel > .agent-block { grid-row: 1 / span 3; } .ap-hero-head { align-self: start; } }

/* Here at every stage: four stage cards, two across on tablets, four on wide screens. */
@media (min-width: 1280px) { .ap-stages .cards { grid-template-columns: repeat(4, 1fr); } }
.ap-stages .card { padding: 32px; }
.ap-stage-lines { gap: 0; }
.ap-stage-lines li { padding: 8px 0; border-top: 1px solid var(--line); }
.ap-stage-lines .link { display: inline-flex; min-height: 44px; align-items: center; }

/* The agent's brand, only when they opt in (agent page standard, section 3): their logo beside the Works W,
   and one approved accent on their own name band. Default pages carry neither. */
.ap-cobrand { display: flex; align-items: center; gap: 16px; margin: 0; }
.ap-cobrand img { height: 36px; width: auto; max-width: 160px; object-fit: contain; }
.ap-accent .ab-name { border-bottom: 4px solid var(--ap-accent); padding-bottom: 8px; }

/* Type on the deck scale at phone width too (agent page standard, section 3): numerals step down to 48. */
@media (max-width: 767px) { .ap-picks-n, .bd-day { font-size: 48px; } }

/* Rework after the creative-bar review (site-critic, Nov 11): a taller hero at 1440 so the office reads,
   an honest caption when the photo is another market's office, the "this week" numeral at 36, and the
   board's Save and Share on one row. */
.bd-day { font-size: 36px; }
.bd-actions { flex-wrap: nowrap; }

/* Round 3 (site-critic, round 2): picks columns sized to their count, the band's spacing tightened,
   the hero card one column when there is nothing for its left side, and a focal point per hero shot. */
@media (min-width: 1360px) { .ap-picks-list { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.ap-picks { margin-bottom: 64px; }
@media (min-width: 1024px) { .ap-picks { padding: 96px 0 64px; } }
.ap-hero-voice { margin: 0; }
/* The story line sits under the headline on wide screens and opens the board on phones, so a phone's
   first screen keeps the agent's name and a way to reach them. The phone hero is shorter for the same reason. */
.ap-hero-voice { display: none; }
/* The story line opens the board at every width, so the hero keeps the agent, their name and the one action. */
/* Why sellers hire Works (Nov 12 2026): seller_proof stats, reasons, price bands. Tokens only. */
.ap-sell .cards { margin-top: 24px; display: grid; gap: 16px; }
@media (min-width: 1024px) { .ap-sell .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-sell-stats { list-style: none; margin: 32px 0 0; padding: 24px; display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--wash); }
@media (min-width: 1024px) { .ap-sell-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ap-sell-stats li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-sell-stats .ap-num { font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--forest); font-variant-numeric: tabular-nums; }
.ap-sell-bands { margin-top: 32px; max-width: 640px; }
.ap-sell-band { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) 3rem; gap: 12px; align-items: center; }
.ap-sell-band .ap-num { text-align: right; font-variant-numeric: tabular-nums; }
.ap-sell-bar { display: block; height: 12px; border-radius: 6px; background: var(--wash); overflow: hidden; }
.ap-sell-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--forest); }
.ap-sell .row { margin-top: 32px; }
.ap-sell .ap-src { margin-top: 24px; }

/* Works 100 live pass fixes (Nov 13 2026). */
/* Tap targets: every board action at least 44 by 44. */
.bd-act { min-width: 44px; padding-inline: 8px; }
.bd-actions { gap: 4px 8px; flex-wrap: wrap; }
.bd-act { white-space: nowrap; }
button.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-size: 18px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.card.forest .link, .bd-forest .link, .bd-feature .link { color: var(--white); }
/* The board opens on six cards; "See all" shows the rest. */
.ap-board-more { margin-top: 8px; }
.ap-board-more [hidden] { display: none; }
/* One button on the phone bar, phones only, and the page never sits under it. */
.ap-sticky { display: none; grid-template-columns: 1fr; }
@media (max-width: 767px) {
    .ap-sticky { display: grid; }
    .ap-sticky .btn { min-height: 48px; width: 100%; }
    body:has(.ap-sticky) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    body:has(.ap-sticky) .site-foot { padding-bottom: 48px; }
}
/* Dialogs: a close button at the top. */
.ap-dialog > .form { position: relative; }
.ap-dialog-x { position: absolute; top: -16px; right: -16px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--white); color: var(--forest); font: inherit; font-size: 32px; line-height: 1; cursor: pointer; }
.ap-dialog-x:hover { background: var(--wash); }
.ap-dialog-x:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.ap-dialog .stack:has(> [data-title]), .ap-dialog .stack:has(> #ap-host-title) { padding-right: 40px; }
.ap-dialog .field[hidden] { display: none; }

/* The hero, second pass (independent review, Nov 13 2026): the agent leads (headshot beside the name, the one
   action above the fold at 375x812 and 1440x900); the owned interior supports it beside the panel at its own
   width, never stretched; the header's Contact is an outline so only one filled button is on screen. */
.site-head .site-cta { background: var(--white); color: var(--forest); border: 1px solid var(--line-2); }
.site-head .site-cta:hover { background: var(--wash); box-shadow: none; }
.ap-hero { padding-top: 16px; }
.ap-hero .ap-hero-wrap { margin-top: 0; }
.ap-hero .ap-hero-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 0 0; box-shadow: none; border-radius: 0; max-width: none; }
.ap-hero .ap-hero-head { gap: 8px; }
.ap-hero .ap-hero-panel .t-display { font-size: 36px; line-height: 1.1; }
@media (min-width: 768px) {
    .ap-hero .ap-hero-panel .t-display { font-size: 48px; }
}
@media (min-width: 1024px) {
    .ap-hero { padding-top: 32px; }
    .ap-hero .ap-hero-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 48px; row-gap: 16px; align-items: start; }
    .ap-hero .ap-hero-head { grid-column: 1; grid-row: 1; }
    .ap-hero .ap-hero-panel > .agent-block { grid-column: 1; grid-row: 2; }
    .ap-hero .ap-hero-panel .t-display { font-size: 56px; }
    .ap-hero .ap-hero-picks { display: none; }
}
/* Tap targets: every link and button at least 44px tall (independent review, Nov 13 2026). */
.ap-picks-list .t-card a, .ap-src a, .ap-mini a, .bd-title a, .skip { display: inline-flex; align-items: center; min-height: 44px; }
/* A pressed filter chip is a tint with a forest edge, not a filled button (one filled button per screen). */
.ap-board .ap-chips .chip[aria-pressed="true"] { background: var(--wash); color: var(--forest); border: 2px solid var(--forest); }
/* The cookie choice, when it shows, offers yes and no with equal weight: both outlines. */
.cookie .btn { background: var(--white); color: var(--forest); border: 1px solid var(--line-2); }

/* The hero image, one rule set (third review, Nov 13 2026). With a headshot, the agent leads: the headshot
   first and largest (200px tall beside the office on phones; the full column height at 1440), the office
   interior second. With none, the interior leads (200px on phones; up to the column height at 1440). The
   1600 file only, object-fit: cover, capped at half the file's height (--h) so a 2x screen never upscales. */
.ap-hero .ab-connect-row { display: flex; flex-direction: column; gap: 12px; }
.ap-hero .ab-connect-row .ab-sentence { order: 2; }
.ap-hero .ap-hero-media { order: -1; position: relative; margin: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); height: 200px; }
.ap-hero .ap-hero-media.has-face { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.ap-hero .ap-hero-face, .ap-hero .ap-hero-office { position: relative; height: 100%; min-height: 0; max-height: var(--h, none); border-radius: 16px; overflow: hidden; background: var(--wash); }
.ap-hero .ap-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ap-hero .ap-hero-face img { object-position: center 20%; }
.ap-hero .ap-hero-office img { object-position: var(--focus, center 45%); }
.ap-hero .ap-hero-caption { position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 4px 8px; background: var(--white); color: var(--quiet); font-size: 16px; border-radius: 8px; }
.ap-hero .has-face .ap-hero-caption { left: 6px; right: 6px; bottom: 6px; padding: 2px 6px; font-size: 14px; line-height: 1.25; }
@media (min-width: 768px) { .ap-hero .ap-hero-media { height: 320px; } }
@media (min-width: 1024px) {
    .ap-hero .ap-hero-media { order: 0; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; height: auto; min-height: 480px; max-width: 560px; }
    /* No headshot: the interior sits beside the headline at its own half size (800 wide, at most 320
       tall, never upscaled on a 2x screen), and the block runs full width below, so nothing is left empty. */
    .ap-hero .ap-hero-panel:not(:has(.has-face)) { grid-template-columns: minmax(0, 1fr) minmax(0, 800px); grid-template-rows: auto auto; align-items: center; }
    .ap-hero .ap-hero-panel:not(:has(.has-face)) > .ap-hero-head { grid-column: 1; grid-row: 1; align-self: center; }
    .ap-hero .ap-hero-panel:not(:has(.has-face)) > .agent-block { grid-column: 1 / -1; grid-row: 2; }
    .ap-hero .ap-hero-panel:not(:has(.has-face)) .t-display { font-size: 64px; }
    .ap-hero .ap-hero-media:not(.has-face) { grid-column: 2; grid-row: 1; align-self: center; min-height: 0; max-width: 800px; }
    .ap-hero .ap-hero-media:not(.has-face) .ap-hero-office { height: min(var(--h, 320px), 320px); max-width: var(--w, 800px); width: 100%; justify-self: end; }
    .ap-hero .ap-hero-media.has-face { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .ap-hero .ap-hero-media.has-face .ap-hero-office { position: absolute; right: 16px; bottom: 16px; width: 200px; height: 140px; box-shadow: var(--shadow); border: 4px solid var(--white); }
}
/* At 1440 the hero column stays within the office photo's own height (no upscale): the block's rows sit
   closer, the call link shares the tour and value row, and the QR is compact. */
@media (min-width: 1024px) {
    .ap-hero .agent-block.ab-page { grid-template-columns: max-content minmax(0, 1fr); row-gap: 8px; column-gap: 24px; }
    .ap-hero .agent-block.ab-page .ab-text > .ab-name { grid-column: 1 / -1; }
    .ap-hero .ab-page .ab-text > .ab-primary { grid-column: 1; }
    .ap-hero .ab-page .ab-text > .ab-primary + .ab-actions { grid-column: 2; }
    .ap-hero .agent-block .ab-qr-wrap { grid-template-columns: 64px 1fr; }
    .ap-hero .agent-block .ab-foot { padding-top: 16px; }
}
/* The Ask box on the narrowest phones: a little less padding so the placeholder shows whole. */
@media (max-width: 359px) { .ap-ask-form input { padding: 12px 16px; } }

/* The standard agent block (WOR-29). Brand v3: white, forest only, Satoshi, 8px steps.
   Uses the shared token names (src/design/tokens.css and the Works site's works-web.css). */
.agent-block { --ab-ink: var(--works-forest); --ab-paper: var(--works-white); --ab-line: #DCE1DE; --ab-quiet: #597163; color: var(--ab-ink); }
.agent-block .ab-photo { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 16px; background: var(--ab-line); }
.agent-block .ab-mark { display: grid; place-items: center; background: var(--ab-paper); }
.agent-block .ab-mark img { width: 56%; max-width: 160px; height: auto; }
.agent-block .ab-identity { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ab-quiet); }
.agent-block .ab-name { font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin: 0; }
.agent-block .ab-phrase { font-weight: 700; line-height: 1.3; }
.agent-block .ab-legal { font-size: 18px; line-height: 1.5; color: var(--ab-quiet); }
.agent-block .ab-qr { display: block; width: 100%; height: auto; }
.agent-block .ab-qr-wrap { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.agent-block .ab-qr-wrap figcaption { display: grid; gap: 4px; font-size: 18px; line-height: 1.4; }
.agent-block .ab-scan { font-weight: 700; }
.agent-block .ab-short { color: var(--ab-quiet); overflow-wrap: anywhere; }

/* Page format: the photo beside the name at every width, then the lines and actions full width. */
.ab-page { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; row-gap: 16px; align-items: center; }
.ab-page .ab-media { grid-column: 1; grid-row: 1; }
.ab-page.ab-nophoto { grid-template-columns: 1fr; }
.ab-page.ab-nophoto .ab-text > .ab-name { grid-column: 1; }
.ab-page .ab-text { display: contents; }
.ab-page .ab-text > * { grid-column: 1 / -1; margin: 0; }
.ab-page .ab-text > .ab-name { grid-column: 2; grid-row: 1; font-size: 28px; }
.ab-page .ab-identity, .ab-page .ab-legal, .ab-page .ab-qr-wrap figcaption { font-size: 18px; }
.ab-page .ab-sentence { font-size: 18px; line-height: 1.5; color: var(--ab-quiet); max-width: 56ch; }
.ab-page .ab-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.ab-page .ab-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-page .ab-primary .btn { padding: 8px 12px; height: auto; min-height: 56px; text-align: center; line-height: 1.2; justify-content: center; }
/* Tour and value are links beside the one filled button (Nov 13 2026); 44px tall to tap. */
.ab-page .ab-primary { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.ab-page .ab-primary .link { min-height: 44px; }
.ab-page .ab-connect-row { display: grid; gap: 12px; }
/* The two paths into the agent's Follow Up Boss (Nov 10 2026): Zillow first, full width on phones; Let's connect beside it. */
.ab-page .ab-paths .btn, .ab-page .ab-paths .btn-quiet { padding: 8px 20px; height: auto; min-height: 48px; text-align: center; line-height: 1.2; justify-content: center; }
.ab-page .ab-paths .btn { flex: 1 1 100%; }
.ab-page .ab-foot { display: grid; gap: 24px; padding-top: 24px; border-top: 1px solid var(--ab-line); }
.ab-page .ab-mark img { width: 80%; }
@media (max-width: 359px) { .ab-page .ab-text > .ab-name { font-size: 22px; } .ab-page .ab-primary { grid-template-columns: 1fr; } }
@media (min-width: 768px) {
    .ab-page { grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 20px; }
    .ab-page img.ab-photo { width: 120px; }
    .ab-page .ab-text > .ab-name { font-size: 36px; }
    .ab-page .ab-primary { display: flex; flex-wrap: wrap; gap: 16px; }
    .ab-page .ab-primary .btn { padding: 0 32px; }
    .ab-page .ab-connect-row { grid-template-columns: 1fr; gap: 16px; }
    .ab-page .ab-paths .btn { flex: 0 0 auto; }
    .ab-page .ab-foot { grid-template-columns: 1fr; }
}

/* Card format: cards, sign riders, reports, email. */
.ab-card { display: grid; grid-template-columns: 80px 1fr 96px; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--ab-line); border-radius: 16px; background: var(--ab-paper); }
.ab-card .ab-text { display: grid; gap: 4px; }
.ab-card .ab-text > * { margin: 0; }
.ab-card .ab-name { font-size: 22px; }
.ab-card .ab-identity, .ab-card .ab-phrase, .ab-card .ab-phone, .ab-card .ab-connect { font-size: 16px; }
.ab-card .ab-qr-wrap { grid-template-columns: 1fr; }
.ab-card .ab-qr-wrap figcaption { display: none; }
/* Narrow screens: the descriptor wraps to its own line under the name; the name never breaks. */
.agent-block .ab-id-name { white-space: nowrap; }
@media (max-width: 375px) { .ab-card .ab-id-sep { display: none; } .ab-card .ab-id-desc { display: block; } }
/* The W stand-in stays small and unframed beside the name. */
.ab-page .ab-mark { aspect-ratio: auto; height: 48px; background: transparent; justify-items: start; }
.ab-page .ab-mark img { width: auto; height: 48px; max-width: none; }
@media (min-width: 768px) { .ab-page .ab-connect-row { grid-template-columns: 1fr; } .ab-page .ab-sentence { max-width: none; } }