, and the section heading is a div: the
FIRST leg came out "even" and a one-leg site got the second leg's look.
front-page.php now prints --a / --b from the leg's own index. The second
leg's outline was opacity .42, too faint to read as a town on a white card
(feedback_town_outlines_on_cards). */
.tyb-route3__leg--b .tyb-route3__shape svg * { fill: var(--tyb-coral); opacity: .7; }
.tyb-route3__name { font-family: var(--tyb-display); font-size: 1.3rem; line-height: 1.2; color: var(--tyb-ink); margin-bottom: .45rem; }
.tyb-route3__note { font-size: .86rem; color: var(--tyb-muted); line-height: 1.5; margin-bottom: 1rem; }
.tyb-route3__cta { margin-top: auto; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tyb-accent); }
@media (max-width: 900px) {
.tyb-route3__leg { grid-template-columns: minmax(0, 1fr); margin-top: 2.25rem; }
.tyb-route3__label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: center; }
.tyb-route3__label h3 { margin: 0; }
.tyb-route3__label p { grid-column: 1 / -1; margin-top: .5rem; }
.tyb-route3__stops { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.tyb-route3__stops::before { display: none; }
}
/* ── footer: the client's own logo on a white panel (assets/img/logo-full.png) */
.tyb-foot__plate { display: inline-block; background: #fff; border-radius: 12px; padding: .9rem 1.2rem; max-width: 17.5rem; margin-bottom: 1.1rem; }
.tyb-foot__plate img { display: block; width: 100%; height: auto; }
/* ── the single listing ─────────────────────────────────────────────────── */
/* The listing ask box follows you down the page: sticky on the COLUMN, not
the box inside it, desktop only. On a phone it would sit over the photographs. */
@media (min-width: 901px) {
.tyb-listing__aside { position: sticky; top: calc(var(--tyb-bar-min) + 1.5rem); align-self: start; }
}
/* ── things the lighter footer and the gold exposed (template pass) ─────── */
/* --deep is the brand darkened 22% now, not near-black, so the footer's
fine print at 48% white fell to ~4.3:1. Measured after the lift: 7+:1. */
.tyb-foot__legal-in { color: rgba(255, 255, 255, .74); }
.tyb-foot__legal-in a { color: rgba(255, 255, 255, .88); }
/* The fallback text lockup (no logo file yet) on the dark footer. */
.tyb-logo--footer .tyb-logo__sub { color: rgba(255, 255, 255, .82); }
/* Review stars are graphics: they need 3:1, which a pale second colour misses. */
.tyb-quote__stars { color: var(--tyb-dune-dk); }
.tyb-rev3__card .tyb-quote__stars { color: var(--tyb-dune-dk); }
/* ═══════════════════════════════════════════════════════════════════════════
PHONE STANDARD 2026-10-04
A prospect opens the link from a text, on a phone, and most see only the
home page. Proved on a live demo at 390x664 (iPhone Safari on
first load) and 390x844, then ported here so every new build starts with
it. The whole standard is this ONE block plus one block in
assets/js/theme.js with the same heading; tmp/audit-20261004/
PARENT-CHANGES.md lists every edit. It sits at the end of the sheet on
purpose (trap 51). A build's own overrides go BELOW it.
Parent gaps closed in the same pass:
G1 the creed's call line G2 town-card CTA on touch G5 two-box strip
(G4, G16 and one G1 line were wrong rules and were fixed IN PLACE above.)
P-A1 hero height P-A2 call pill P-A3 long stacks P-A4 face
P-A5 motion P-A6 type and thumbs P-A7 weight
═══════════════════════════════════════════════════════════════════════════ */
/* ── G1: the call line under the creed (Adam, 2026-10-04) ─────────────────
The phone glyph lives inside the number, so the two always sit on one
baseline. On a phone the sentence goes above and the number becomes a real
outlined button the same width as "Send a message", instead of a loose
icon over centered text. parts/creed.php prints the comma only when the
sentence ends in one (with a brokerage); it is hidden on a phone either
way, because the sentence ends above a button there. */
.tyb-creed__call { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .5rem; }
.tyb-creed__call-num { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
@media (max-width: 640px) {
.tyb-creed__actions { flex-direction: column; align-items: center; gap: 1.1rem; }
.tyb-creed__actions > .tyb-btn { width: min(100%, 19rem); }
.tyb-creed__call { display: flex; flex-direction: column; gap: .6rem; width: min(100%, 19rem); text-align: center; }
.tyb-creed__call-text { font-size: .92rem; line-height: 1.4; }
.tyb-creed__call-comma { display: none; }
.tyb-creed__call-num {
width: 100%; justify-content: center; padding: .85rem 1.2rem;
border: 1.5px solid var(--tyb-brand); border-radius: 4px; background: rgba(255, 255, 255, .6);
font-size: 1.05rem;
}
}
/* ── G5: two boxes in the figure strip ────────────────────────────────────
"Ship two boxes, never pad" (feedback_strip_no_modest_counts) is a normal
outcome, and two boxes stretched edge to edge at 1440. Narrow the LIST,
not the columns; the dark band still runs the full width. No phone rule is
needed: with --tyb-n = 2 the list is already two columns at every width. */
.tyb-creds3 .tyb-creds__list:has(> li:nth-child(2):last-child) { width: min(100%, 44rem); margin-inline: auto; }
/* ── P-A1 / P-A4: the eyebrow row ─────────────────────────────────────────
front-page.php wraps the eyebrow in .tyb-hero3__who and prints a full and
a short eyebrow plus, when assets/img/callbar-face.jpg exists, the face.
Above 640px the row is the eyebrow exactly as it was. */
.tyb-hero3__face,
.tyb-hero3__eye-short { display: none; }
@media (max-width: 640px) {
/* One line: the short eyebrow, no gold rule in front of a face. */
.tyb-hero3__eye-full { display: none; }
.tyb-hero3__eye-short { display: inline; }
.tyb-hero3__who { display: flex; align-items: center; gap: .8rem; margin-bottom: .45rem; }
.tyb-hero3__who .tyb-hero3__eyebrow { margin-bottom: 0; gap: .55rem; }
.tyb-hero3__who:not(.tyb-hero3__who--face) .tyb-hero3__eyebrow::before { width: 1.4rem; }
.tyb-hero3__who--face .tyb-hero3__eyebrow::before { display: none; }
/* The face: 52px, white ring then a brand ring, like the call pill's
(trap 59). The rings are box-shadow, so the margin keeps them inside
the row. A photo beside the eyebrow, never a panel behind the copy. */
.tyb-hero3__who--face .tyb-hero3__face {
display: block; flex: none; width: 52px; height: 52px; margin: 4px;
border-radius: 50%; object-fit: cover;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tyb-accent), 0 6px 16px rgba(10, 12, 16, .45);
}
/* ── P-A1: the hero, shortened ─────────────────────────────────────────
Target: the valuation field fully inside the first 664px, the H1
starting by 170px, the whole hero under 900px. */
.tyb-hero3 { padding-block: 1.5rem 1.6rem; }
.tyb-mast--transparent.tyb-home .tyb-hero3 { padding-top: calc(var(--tyb-header-h) + .35rem); }
/* LIGHT and DARK mastheads: the bar sits in the flow above the hero, so
the hero's own top padding is the whole gap. 1.5rem left the valuation
field 11px below a 664px first screen; .35rem gives exactly the
geometry of the transparent bar (the face 10px under the bar's edge). */
.tyb-mast--light .tyb-hero3,
.tyb-mast--dark .tyb-hero3 { padding-top: .35rem; }
.tyb-hero3__grid { gap: .75rem; }
.tyb-hero3 .tyb-hero__title { font-size: clamp(1.8rem, 1.2rem + 2.8vw, 2.05rem); line-height: 1.06; }
.tyb-hero3 .tyb-hero__lede { font-size: 1rem; line-height: 1.45; margin-top: .7rem; }
/* Chips: one wrapping row with hairline dividers, smaller type. */
.tyb-hero3__chips { flex-direction: row; flex-wrap: wrap; gap: .3rem 0; margin-top: .6rem; }
.tyb-hero3__chips li { gap: .3rem; padding: 0 .5rem; font-size: .75rem; border-left: 1px solid rgba(255, 255, 255, .45); }
.tyb-hero3__chips li:first-child { padding-left: 0; border-left: 0; }
.tyb-hero3__chips .tyb-li { width: .95rem; height: .95rem; }
/* The two buttons share the row, so each is a full thumb target. */
.tyb-hero3 .tyb-hero__actions { margin-top: .7rem; gap: .6rem; }
.tyb-hero3 .tyb-hero__actions .tyb-btn { flex: 1 1 0; justify-content: center; min-height: 46px; padding: .7rem .5rem; }
/* The call line: a 44px tap row (P-A6) that costs no more height than
the old 28px line plus its margin. */
.tyb-hero3 .tyb-hero__phone { margin-top: .2rem; min-height: 44px; align-items: center; font-size: 1rem; }
.tyb-hero3 .tyb-hero__phone .tyb-icon { margin-top: 0; }
/* The valuation card: the three ticks go (they stay on desktop), the
padding and gaps tighten. The input keeps 16px type so iOS never zooms. */
.tyb-hero3__card { padding: .8rem 1.1rem 1.1rem; gap: .5rem; }
.tyb-hero3__card-title { margin-bottom: 0; font-size: 1.4rem; }
.tyb-hero3__card input { padding-block: .75rem; line-height: 1.3; }
.tyb-hero3__card .tyb-btn { padding-block: .85rem; min-height: 44px; }
.tyb-hero3__card-points { display: none; }
}
/* The narrowest phones (360px): the chip icons go so the row stays one line
and the valuation field stays on the first screen. */
@media (max-width: 380px) {
.tyb-hero3__chips .tyb-li { display: none; }
}
/* ── P-A2: the call pill ──────────────────────────────────────────────────
theme.js adds .is-hidden while the hero, the creed band, an inline form,
the closer or the footer is on screen: over the hero it covered the
second button and the valuation field, over the creed its phone button,
on the contact page the Phone input, at the bottom the legal links, and
each of those has its own call or send control. Nothing here hides the
pill by itself, so a failed or blocked script leaves it visible, as
before. */
.tyb-callbar { bottom: calc(clamp(.9rem, 2vw, 1.5rem) + env(safe-area-inset-bottom, 0px)); }
@keyframes tyb-cb-in { from { opacity: 0; transform: translateY(140%); } to { opacity: 1; transform: none; } }
@keyframes tyb-cb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
.tyb-callbar { transition: transform .35s var(--tyb-ease), opacity .25s var(--tyb-ease), visibility 0s linear 0s; }
/* Until theme.js has taken over (.tyb-cb on ) the pill arrives a
moment after the page, so it never flashes over the hero before the
script hides it. `backwards` only: once run, it holds nothing. Scoped
to :not(.tyb-cb) so it cannot replay each time .is-hidden comes off. */
html:not(.tyb-cb) .tyb-callbar { animation: tyb-cb-in .4s var(--tyb-ease) .9s backwards; }
.tyb-callbar.is-hidden {
transform: translateY(140%); opacity: 0; visibility: hidden; pointer-events: none;
transition: transform .35s var(--tyb-ease), opacity .25s var(--tyb-ease), visibility 0s linear .35s;
}
/* JS off: the pill is always there, so the last lines of the footer get
room under it. theme.js puts .tyb-cb on once it is hiding the
pill over the footer, and the room is given back. */
html:not(.tyb-cb) .tyb-foot__legal-in { padding-bottom: calc(20px + 5.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
html:not(.tyb-cb) .tyb-callbar { animation-name: tyb-cb-fade; }
.tyb-callbar.is-hidden { transform: none; }
}
@media (max-width: 640px) {
/* Compact: the face and the agent's own number, the firm's name under it
(never an office number). "Call
" stays for a screen reader. */
.tyb-callbar__call { gap: .6rem; padding: .45rem 1rem .55rem .5rem; }
.tyb-callbar__txt strong {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tyb-callbar__txt em { font-size: .92rem; }
.tyb-callbar__firm.tyb-firmtag { font-size: .7rem; max-width: 9.5rem; white-space: normal; line-height: 1.2; }
}
/* ── P-A3: the long stacks ────────────────────────────────────────────────
Route: two towns per row, outline and name; the note and the per-card CTA
go, and one hint under the grid says what a tap does. No swipe rows. */
.tyb-route3__hint { display: none; }
@media (max-width: 640px) {
.tyb-route3__leg { margin-top: 1.4rem; }
.tyb-route3__stops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .75rem; padding-top: 1.35rem; }
/* An odd town out takes the full row rather than leaving a hole (trap 85). */
.tyb-route3__stops:has(> :last-child:nth-child(odd)) > :last-child { grid-column: 1 / -1; }
.tyb-route3__card { padding: 1.7rem .6rem 1rem; }
.tyb-route3__shape { height: 3.6rem; margin-bottom: .55rem; }
.tyb-route3__name { font-size: 1.1rem; margin-bottom: 0; }
.tyb-route3__note,
.tyb-route3__cta { display: none; }
.tyb-route3__hint {
display: block; margin: 1.1rem 0 0; text-align: center;
font-size: .9rem; font-weight: 600; color: var(--tyb-muted);
}
/* The page was 15 screens. Sections, their headings and the footer sit
a little closer on a phone; nothing is hidden to do it. */
.tyb-section { padding-block: 2.5rem; }
.tyb-closer { padding-block: 2.5rem; }
.tyb-head { margin-bottom: 1.25rem; }
.tyb-head--split { gap: .9rem; }
.tyb-head .tyb-lede { font-size: 1rem; line-height: 1.55; }
.tyb-split { gap: 1.5rem; }
.tyb-spec3__grid { gap: 1.5rem; }
.tyb-spec3__list { gap: .75rem; }
.tyb-spec3__item { padding: 1rem 1.05rem; }
.tyb-creds3 .tyb-creds__list li { padding-block: 1.25rem; }
.tyb-foot__in { gap: 20px; padding-block: 30px 24px; }
/* Services: compact rows. Icon left; title, body and link right. */
.tyb-svc3__grid { gap: .8rem; margin-top: .4rem; }
.tyb-svc3__card { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .9rem; align-items: start; padding: 1.05rem 1.1rem .95rem; border-top-width: 4px; }
.tyb-svc3__card:not(:has(.tyb-svc3__icon)) { grid-template-columns: minmax(0, 1fr); }
.tyb-svc3__icon { grid-column: 1; grid-row: 1 / span 3; width: 2.75rem; height: 2.75rem; margin: .15rem 0 0; }
.tyb-svc3__icon .tyb-li { width: 1.3rem; height: 1.3rem; }
.tyb-svc3__icon ~ .tyb-svc3__title,
.tyb-svc3__icon ~ .tyb-svc3__body,
.tyb-svc3__icon ~ .tyb-svc3__link { grid-column: 2; }
.tyb-svc3__num { display: none; }
.tyb-svc3__title { font-size: 1.25rem; margin-bottom: .2rem; }
.tyb-svc3__body { font-size: .94rem; line-height: 1.5; margin-bottom: .45rem; }
}
/* The whole service card is the tap target (it holds one link), every width. */
.tyb-svc3__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* ── P-A5: motion ─────────────────────────────────────────────────────────
The hero copy rises into place, once. CSS only; the H1 is left out so the
headline paints at once and nothing here waits on a script. `both` ends on
the visible state. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
@keyframes tyb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tyb-hero3__who,
.tyb-hero3 .tyb-hero__lede,
.tyb-hero3__chips,
.tyb-hero3 .tyb-hero__actions,
.tyb-hero3 .tyb-hero__phone,
.tyb-hero3__card { animation: tyb-rise .55s var(--tyb-ease) both; }
.tyb-hero3__who { animation-delay: .05s; }
.tyb-hero3 .tyb-hero__lede { animation-delay: .12s; }
.tyb-hero3__chips { animation-delay: .19s; }
.tyb-hero3 .tyb-hero__actions { animation-delay: .26s; }
.tyb-hero3 .tyb-hero__phone { animation-delay: .33s; }
.tyb-hero3__card { animation-delay: .30s; }
}
/* The figures count up (front-page.php adds data-tyb-count; the counter is
the existing one in theme.js). Fixed-width digits so the cell does not
jitter while they run. */
.tyb-creds__label--num { font-variant-numeric: tabular-nums; }
/* ── P-A6: legibility and thumbs ──────────────────────────────────────────
A press answers the thumb. Not on listing cards: they sit in a swipe row
and would flinch at the start of every swipe. */
.tyb-btn,
.tyb-callbar__call,
.tyb-route3__card,
.tyb-svc3__card,
.tyb-svc3__link { -webkit-tap-highlight-color: transparent; }
.tyb-btn:active,
.tyb-callbar__call:active { transform: scale(.975); transition-duration: .08s; }
.tyb-route3__card:active,
.tyb-svc3__card:active { transform: scale(.985); transition-duration: .08s; }
/* G2. No hover on a touch screen, so the town card's CTA is simply shown
(it was opacity 0 until :hover, so on a phone the default town grid read
as shapes and names with no cue that a card can be tapped). */
@media (hover: none) {
.tyb-market__cta { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
/* Nothing under 11px. */
.tyb-creds__label--num + .tyb-creds__note { font-size: .7rem; letter-spacing: .05em; }
.tyb-creds3 .tyb-creds__list:has(> li:nth-child(2):last-child) .tyb-creds__note { font-size: .76rem; }
.tyb-card__status,
.tyb-card__repd { font-size: .7rem; }
.tyb-foot__h { font-size: .72rem; }
/* 44px tap rows. The listing title's padding is taken back by its margin,
so the card does not grow. */
.tyb-card__title a { display: block; padding-block: 13px; margin-block: -13px; }
.tyb-nav__sub a { min-height: 44px; }
.tyb-slider__btn { width: 2.75rem; height: 2.75rem; }
.tyb-svc3__link { min-height: 44px; display: flex; align-items: center; gap: .35rem; margin-block: -.55rem; }
.tyb-foot__menu a,
.tyb-foot__link { padding-block: 11px; }
.tyb-foot__social a { display: inline-block; padding-block: 12px; }
.tyb-foot__legalnav { gap: 0 1.25rem; margin: 2px 0; }
.tyb-foot__legalnav a { display: inline-block; padding-block: 13px; }
/* The menu in two columns pays for the taller rows. */
.tyb-foot__menu { columns: 2; column-gap: 1.5rem; }
.tyb-foot__menu li { break-inside: avoid; }
}
/* ── P-A7: weight ─────────────────────────────────────────────────────────
Frames 2..n have no image until theme.js fills them in after window load
and adds .is-live. Until then nothing animates and frame 1 holds, at the
scale its animation starts from, so going live does not jump. The
keyframes, the duration and the delays are untouched (traps 58, 65, 83). */
.tyb-hero__kb:not(.is-live) .tyb-hero__frame { animation: none; }
.tyb-hero__kb:not(.is-live) .tyb-hero__frame:first-child { opacity: 1; transform: scale(var(--tyb-kb-s0, 1.012)); }
@media (prefers-reduced-motion: reduce) {
.tyb-hero__kb .tyb-hero__frame:first-child,
.tyb-hero__kb:not(.is-live) .tyb-hero__frame:first-child { transform: none; }
}
/* ── Review fixes (two reviewers, 2026-10-04). Part of the standard: port
these with the rest. They sit last in the block so they win (trap 51). */
@media (max-width: 900px) {
/* P-A2. On the front page, with scripting on, the pill waits 6s for
theme.js and not .9s: on a slow connection the footer script can run
more than .9s after first paint, and the pill slid in over the second
hero button before it was hidden. Still an arrival, not a hide: if the
script never runs the pill comes in at 6s, so the page is never left
without it. JS off keeps the .9s arrival (no .js on ). */
html.js:not(.tyb-cb) .tyb-front .tyb-callbar { animation-delay: 6s; }
}
@media (max-width: 640px) {
/* The creed's attribution: no single orphan word on the second line. */
.tyb-creed__attrib { text-wrap: balance; letter-spacing: .1em; }
/* The service title was 3px above its body and read as glued to it. */
.tyb-svc3__title { margin-bottom: .4rem; }
/* Explore: three columns, so seven links make three rows and not four. */
.tyb-foot__menu { columns: 3; column-gap: 1rem; }
/* Nothing under 11px, inner pages too (contact, home valuation). */
.tyb-contact__heading { font-size: .7rem; }
}
/* ═════════════════════════ end PHONE STANDARD 2026-10-04 ═════════════════ */
/* ═══════════════ ROUND 2 2026-10-04 — FORMS (F1-F7) ═══════════════════════
One simple form everywhere (modal, contact page, valuation page): Name,
Phone, Email, an optional short message, one button. No subject dropdown.
Inputs are 16px or more (no zoom on an iPhone) and 50px tall; on a phone
the whole modal form fits one 390 x 664 screen. */
.tyb-form { gap: .9rem; }
.tyb-field input,
.tyb-field textarea { font-size: max(1rem, 16px); }
.tyb-field input { min-height: 50px; padding-block: .65rem; }
.tyb-field textarea { min-height: 5.4rem; }
.tyb-field label .tyb-form__opt { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--tyb-muted); }
.tyb-field input[aria-invalid="true"] { border-color: #C0392B; }
.tyb-form__hint { margin: -.4rem 0 0; font-size: .86rem; line-height: 1.4; color: var(--tyb-muted); }
.tyb-form__lede { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--tyb-muted); }
.tyb-form__send { min-height: 52px; }
.tyb-form__note:empty { min-height: 0; }
.tyb-contact__form .tyb-alert { margin: 1.25rem 0 0; }
.tyb-contact__form .tyb-form { margin-top: 1.4rem; }
.tyb-modal__head { margin-bottom: 1.25rem; }
.tyb-modal__head h2 { margin-bottom: .45rem; padding-inline: 1.75rem; }
@media (max-width: 640px) {
.tyb-modal { padding: .75rem; }
.tyb-modal__panel { max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); padding: 1.6rem 1.1rem 1.1rem; }
.tyb-modal__head { margin-bottom: .85rem; }
.tyb-modal__head h2 { font-size: 1.35rem; line-height: 1.2; margin-bottom: .35rem; }
.tyb-modal__lede { font-size: .9rem; line-height: 1.4; }
.tyb-modal .tyb-form { gap: .6rem; }
.tyb-modal .tyb-field { gap: .25rem; }
.tyb-modal .tyb-field__row { gap: .6rem; }
.tyb-modal .tyb-field textarea { min-height: 4.6rem; }
.tyb-modal .tyb-form__hint { margin-top: -.2rem; }
}
/* ═══════════════ end ROUND 2 2026-10-04 — FORMS ═══════════════════════════ */
/* ═══════════════ ROUND 2 2026-10-04 — HOME (H1-H6) ═════════════════════════
The round-2 PHOTO BAND rules (.tyb-band3, parts/photo-band.php,
gallery()) stood here. Removed in the SLEEK HOME pass, 2026-10-04: the
owner called the band "random, like taking up space", the part is deleted
and nothing prints those classes.
The services-card grid is no longer rendered on the home page; its rules
(.tyb-svc3, .tyb-paths) are left in the sheet, unused there. */
/* ── Reviews (H5): the total as the heading, long reviews open in place ─────
Markup: front-page.php, section.tyb-rev4 (it keeps the tyb-rev3 classes,
so the card rules above still apply). The whole review is always in the
page. The clamp only applies once theme.js has added .tyb-clamp to ,
so with scripting off, or a script that failed to load, the full text
shows and the button stays hidden. */
.tyb-rev4__total { display: flex; align-items: baseline; justify-content: center; gap: .55rem; }
.tyb-rev4__total strong { font-family: var(--tyb-display); font-weight: 400; font-size: clamp(3.6rem, 2.4rem + 5vw, 6rem); line-height: .95; color: var(--tyb-brand); letter-spacing: -.01em; }
.tyb-rev4__total span { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.tyb-rev4__grid[data-n="1"] { grid-template-columns: minmax(0, 46rem); justify-content: center; }
.tyb-rev4__card { display: flex; flex-direction: column; align-items: flex-start; }
.tyb-rev4__card.tyb-rev3__card--lead { justify-content: center; }
.tyb-rev4__card blockquote { margin-bottom: 1.1rem; }
.tyb-rev4__card figcaption { margin-top: auto; }
.tyb-rev4__card.tyb-rev3__card--lead figcaption { margin-top: 0; }
html.tyb-clamp .tyb-rev4__text:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
html.tyb-clamp .tyb-rev3__card--lead .tyb-rev4__text:not(.is-open) { -webkit-line-clamp: 7; line-clamp: 7; }
.tyb-rev4__more { position: relative; margin: -.45rem 0 1.1rem; padding: .35rem 0; min-height: 2rem; background: none; border: 0; font: inherit; font-size: .9rem; font-weight: 600; color: var(--tyb-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tyb-rev4__more[hidden] { display: none; }
.tyb-rev4 .tyb-quotes__more { margin-top: 2.25rem; }
@media (max-width: 900px) {
.tyb-rev4__grid { gap: .85rem; margin-top: 1.5rem; }
.tyb-rev4__card.tyb-rev3__card--lead { padding: 1.7rem 1.35rem 1.4rem; }
.tyb-rev4__card.tyb-rev3__card--lead blockquote { font-size: 1.32rem; line-height: 1.32; }
html.tyb-clamp .tyb-rev3__card--lead .tyb-rev4__text:not(.is-open) { -webkit-line-clamp: 6; line-clamp: 6; }
/* the others: compact cards */
.tyb-rev4__card:not(.tyb-rev3__card--lead) { padding: 1.1rem 1.15rem 1rem; }
.tyb-rev4__card:not(.tyb-rev3__card--lead) .tyb-rev3__mark { display: none; }
.tyb-rev4__card:not(.tyb-rev3__card--lead) .tyb-quote__stars { margin-bottom: .45rem; font-size: .85rem; }
.tyb-rev4__card:not(.tyb-rev3__card--lead) blockquote { font-size: .95rem; line-height: 1.5; margin-bottom: .8rem; }
html.tyb-clamp .tyb-rev4__card:not(.tyb-rev3__card--lead) .tyb-rev4__text:not(.is-open) { -webkit-line-clamp: 4; line-clamp: 4; }
.tyb-rev4__more { margin-top: -.3rem; margin-bottom: .7rem; min-height: 2.75rem; }
.tyb-rev4 .tyb-quotes__more { margin-top: 1.4rem; }
.tyb-rev4 .tyb-quotes__more .tyb-btn { width: 100%; justify-content: center; text-align: center; }
}
/* ═══════════════ end ROUND 2 2026-10-04 — HOME ════════════════════════════ */
/* ═══════════════ ROUND 2 2026-10-04 — REVIEW FIXES ═════════════════════════
1. The modal's close button is a 44px tap target (it was 36px). It sits
closer to the corner so the larger box does not reach the heading, and
the heading keeps clear of it on both sides.
2. (A rule for the photo band after the listings stood here. The band was
removed in the SLEEK HOME pass, and the rule with it.) */
.tyb-modal__close { top: .35rem; right: .35rem; width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; }
.tyb-modal__head h2 { padding-inline: 2.4rem; }
/* ═══════════════ end ROUND 2 2026-10-04 — REVIEW FIXES ═════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
SLEEK HOME 2026-10-04
The home page becomes photo-led (DECISIONS-3). One appended block: every
rule here is either new (the "5" classes) or overrides an older rule of
equal specificity by coming later (trap 51).
Grammar, the same in every section:
.tyb-kick5 the tiny tracked caption with the four-color rule before it
.tyb-h5 the large thin serif heading
.tyb-tile5 a photograph with a 1-3 word label set on it (S2 and S7)
.tyb-arrow5 the thin arrow
Photo-backed text bands: S3 .tyb-nums5, S8 .tyb-creed5, S10 .tyb-lead5.
Each takes its photograph only with the --photo modifier; without it the
band falls back to a ground that needs no image.
Scrims are NEUTRAL (rgb 12 18 22) and their strength is one custom
property per band, so a build sets what its photograph measures, no more:
--tyb-scrim-nums, --tyb-scrim-creed, --tyb-scrim-lead
═══════════════════════════════════════════════════════════════════════════ */
:root {
--tyb-scrim5: 12, 18, 22;
--tyb-band5: clamp(5rem, 9vw, 8.5rem);
--tyb-radius5: 6px;
--tyb-rule4: linear-gradient(90deg,
var(--tyb-brand) 0 25%, var(--tyb-surf) 25% 50%,
var(--tyb-coral) 50% 75%, var(--tyb-dune) 75% 100%);
}
/* ------------------------------------------------------------ the grammar -- */
.tyb-kick5 {
display: flex;
align-items: center;
gap: .85rem;
margin: 0 0 1.25rem;
font-family: var(--tyb-body-font);
font-size: .6875rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--tyb-brand);
}
.tyb-kick5::before {
content: '';
flex: none;
width: 32px; height: 2px;
background: var(--tyb-rule4);
}
/* One or two lines, never a three-line stack in half the width. */
.tyb-h5 {
font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.75rem);
line-height: 1.04;
letter-spacing: -.022em;
max-width: 20ch;
text-wrap: balance;
}
.tyb-arrow5 { flex: none; display: block; width: 30px; height: 12px; overflow: visible; transition: transform .45s var(--tyb-ease); }
/* Desktop gets more air; under 641px the phone standard's padding stays. */
@media (min-width: 641px) {
.tyb-intro5, .tyb-meet5, .tyb-rev5, .tyb-list5, .tyb-towns5, .tyb-spec5 { padding-block: var(--tyb-band5); }
}
/* Light grounds alternate between white and the shell, so two neighbors
never need a rule between them. */
.tyb-intro5, .tyb-rev5, .tyb-towns5 { background: #fff; }
.tyb-meet5, .tyb-list5, .tyb-spec5 { background: var(--tyb-shell); }
/* -------------------------------------------------- the photo tile (S2, S7) -- */
.tyb-tile5 {
position: relative;
display: block;
isolation: isolate;
overflow: hidden;
aspect-ratio: 1 / 1;
border-radius: var(--tyb-radius5);
background: var(--tyb-deep);
color: #fff;
-webkit-tap-highlight-color: transparent;
transition: transform .25s var(--tyb-ease);
}
.tyb-tile5:hover, .tyb-tile5:focus-visible { color: #fff; }
.tyb-tile5__img {
position: absolute; inset: 0;
z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.6s var(--tyb-ease);
}
/* Bottom-up only, and only as tall as the label. The top two thirds of the
photograph are untouched. */
.tyb-tile5::after {
content: '';
position: absolute; inset: 0;
z-index: -1;
background: linear-gradient(to top,
rgba(var(--tyb-scrim5), .78) 0%,
rgba(var(--tyb-scrim5), .56) 16%,
rgba(var(--tyb-scrim5), .18) 34%,
rgba(var(--tyb-scrim5), 0) 50%);
transition: opacity .45s var(--tyb-ease);
}
.tyb-tile5__label {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
gap: 1rem;
padding: 0 clamp(1.1rem, 2vw, 1.75rem) clamp(1.15rem, 2vw, 1.7rem);
}
.tyb-tile5__name {
font-family: var(--tyb-display);
font-size: clamp(1.7rem, 1.15rem + 1.6vw, 2.4rem);
line-height: 1.02;
letter-spacing: -.015em;
text-shadow: 0 1px 14px rgba(var(--tyb-scrim5), .35);
}
.tyb-tile5__line {
flex: 1 1 auto;
height: 1px;
background: rgba(255, 255, 255, .5);
transform-origin: right center;
transition: background-color .45s var(--tyb-ease);
}
@media (hover: hover) {
.tyb-tile5:hover .tyb-tile5__img { transform: scale(1.06); }
.tyb-tile5:hover .tyb-arrow5 { transform: translateX(6px); }
.tyb-tile5:hover .tyb-tile5__line { background: #fff; }
}
.tyb-tile5:focus-visible { outline: 2px solid var(--tyb-brand); outline-offset: 4px; }
.tyb-tile5:focus-visible .tyb-tile5__img { transform: scale(1.06); }
.tyb-tile5:active { transform: scale(.985); }
/* ------------------------------------------- S2 intro + three photo tiles -- */
/* Heading and paragraph side by side and centered on each other, then the
tiles: the heading and the three labels are on one screen at 1440x900. */
.tyb-intro5__top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 6vw, 6rem);
}
.tyb-intro5__head .tyb-kick5 { margin-bottom: 1rem; }
.tyb-intro5__head .tyb-h5 { max-width: 18ch; }
.tyb-intro5__text {
margin: 0;
max-width: 46ch;
font-size: clamp(1rem, .95rem + .28vw, 1.15rem);
line-height: 1.75;
color: var(--tyb-body);
}
.tyb-tiles5 {
list-style: none;
margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
}
.tyb-tiles5__item { min-width: 0; }
@media (min-width: 901px) {
.tyb-intro5 { padding-top: clamp(4.5rem, 7vw, 6.5rem); }
}
@media (max-width: 900px) {
.tyb-intro5__top { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
}
/* Phone: one wide tile and two halves. Shorter than three stacked and it
reads as a composition, not a list. */
@media (max-width: 640px) {
.tyb-tiles5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.6rem; }
.tyb-tiles5__item:first-child { grid-column: 1 / -1; }
.tyb-tiles5 .tyb-tile5 { aspect-ratio: auto; height: 158px; }
/* A short tile: the label takes a third of it, so the gradient climbs
higher than on the tall desktop tile. Measured on a white sofa. */
.tyb-tiles5 .tyb-tile5::after {
background: linear-gradient(to top,
rgba(var(--tyb-scrim5), .74) 0%,
rgba(var(--tyb-scrim5), .56) 30%,
rgba(var(--tyb-scrim5), .2) 58%,
rgba(var(--tyb-scrim5), 0) 82%);
}
.tyb-tiles5__item:first-child .tyb-tile5 { height: 176px; }
.tyb-tiles5 .tyb-tile5__label { padding: 0 .9rem .85rem; gap: .7rem; }
.tyb-tiles5 .tyb-tile5__name { font-size: 1.6rem; }
.tyb-tiles5__item:not(:first-child) .tyb-tile5__line,
.tyb-tiles5__item:not(:first-child) .tyb-arrow5 { display: none; }
.tyb-intro5__text { font-size: 1rem; line-height: 1.6; }
}
/* --------------------------------- S3 by the numbers, over a photograph -- */
.tyb-nums5 {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(4.75rem, 9vw, 8.5rem);
background: var(--tyb-deep);
color: #fff;
}
.tyb-nums5__img {
position: absolute; inset: 0;
z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
}
.tyb-nums5--photo::before {
content: '';
position: absolute; inset: 0;
z-index: -1;
/* Light over the top of the photograph, stronger under the row of
figures, where 11px captions have to hold on roofs and sand. */
background: linear-gradient(to top,
rgba(var(--tyb-scrim5), calc(var(--tyb-scrim-nums, .36) + .2)) 0%,
rgba(var(--tyb-scrim5), calc(var(--tyb-scrim-nums, .36) + .16)) 46%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-nums, .36)) 76%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-nums, .36)) 100%);
}
/* Left-aligned: S8 is the page's one centered band. */
.tyb-nums5 .tyb-kick5 { color: #fff; }
.tyb-nums5__title {
max-width: 16ch;
font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
color: #fff;
}
.tyb-nums5__list {
list-style: none;
margin: clamp(2.75rem, 6vw, 5.5rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--tyb-n, 4), minmax(0, 1fr));
column-gap: clamp(1.25rem, 3vw, 3rem);
}
/* A hairline over each figure, in place of dividers between them. */
.tyb-nums5__list li { padding-top: clamp(1rem, 1.6vw, 1.4rem); border-top: 1px solid rgba(255, 255, 255, .45); }
.tyb-nums5__num {
display: block;
font-family: var(--tyb-display);
font-size: clamp(3.5rem, 1.7rem + 6vw, 6.75rem);
line-height: .92;
letter-spacing: -.035em;
font-variant-numeric: tabular-nums;
color: #fff;
}
.tyb-nums5__note {
display: block;
margin: 1rem 0 0;
max-width: 26ch;
font-size: .6875rem;
font-weight: 600;
line-height: 1.6;
letter-spacing: .2em;
text-transform: uppercase;
color: #fff;
}
/* Figures and captions are type on a photograph: a soft neutral shadow, never
a colored one. */
.tyb-nums5--photo .tyb-nums5__in { text-shadow: 0 1px 20px rgba(var(--tyb-scrim5), .5); }
@media (max-width: 640px) {
.tyb-nums5 { padding-block: 3.25rem; }
.tyb-nums5__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 1.75rem; margin-top: 2rem; }
/* An odd count: the last figure takes the full row. */
.tyb-nums5__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tyb-nums5__list li { padding-top: .85rem; }
.tyb-nums5__num { font-size: 3.6rem; }
.tyb-nums5__note { margin-top: .6rem; letter-spacing: .16em; max-width: none; }
}
/* ------------------------------------------------------ S4 meet the agent -- */
.tyb-meet5 .tyb-split {
grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
gap: clamp(3rem, 8vw, 8rem);
}
.tyb-meet5 .tyb-split__media--portrait { max-width: 31rem; margin-inline: 0; }
/* Every shape takes the frame; only a headshot ('portrait') is cut tall. A
'scene' or 'team' photograph keeps its own frame (the --scene / --team
rules earlier in the sheet). */
.tyb-meet5__media img {
border-radius: var(--tyb-radius5);
box-shadow: 14px 14px 0 0 var(--tyb-gold);
}
.tyb-meet5 .tyb-split__media--portrait img {
aspect-ratio: 5 / 7;
object-fit: cover;
}
.tyb-meet5 .tyb-meet5__name { max-width: none; font-size: clamp(2.6rem, 1.5rem + 4vw, 4.75rem); line-height: .98; }
.tyb-meet5__firm {
margin: .9rem 0 1.6rem;
font-size: .6875rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--tyb-muted);
}
.tyb-meet5 .tyb-prose { max-width: 46ch; font-size: clamp(1rem, .95rem + .28vw, 1.15rem); line-height: 1.75; }
.tyb-meet5 .tyb-prose p { margin: 0; }
/* Badges: a hairline list, not two filled discs. */
.tyb-meet5__badges { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 1.9rem 0 .6rem; max-width: 30rem; border-bottom: 1px solid var(--tyb-line); }
.tyb-meet5__badges li { align-items: center; padding: .85rem 0; border-top: 1px solid var(--tyb-line); font-weight: 500; font-size: .95rem; }
/* No check icons: the hairlines do the listing. */
.tyb-meet5__badges .tyb-li { display: none; }
@media (max-width: 900px) {
.tyb-meet5 .tyb-split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
.tyb-meet5 .tyb-split__media--portrait { max-width: 19rem; margin-inline: auto; }
.tyb-meet5__media img { box-shadow: 10px 10px 0 0 var(--tyb-gold); }
}
@media (max-width: 640px) {
.tyb-meet5 .tyb-split__media--portrait { max-width: 15.5rem; }
.tyb-meet5__firm { margin-bottom: 1.1rem; }
.tyb-meet5 .tyb-prose { line-height: 1.6; }
.tyb-meet5__badges { margin-top: 1.3rem; }
.tyb-meet5 .tyb-split__body .tyb-btn { margin-top: 1.1rem; width: 100%; }
}
/* ------------------------------------------------------------ S5 reviews -- */
.tyb-rev5__grid {
display: grid;
grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
grid-template-rows: auto 1fr;
column-gap: clamp(2.5rem, 7vw, 7rem);
align-items: start;
}
.tyb-rev5__head { grid-column: 1; grid-row: 1; }
.tyb-rev5__body { grid-column: 2; grid-row: 1 / span 2; }
.tyb-rev5 .tyb-rev5__all { grid-column: 1; grid-row: 2; }
.tyb-rev5__total { display: block; }
.tyb-rev5__total strong {
display: block;
font-family: var(--tyb-display);
font-weight: 400;
font-size: clamp(5.5rem, 3rem + 9vw, 10.5rem);
line-height: .82;
letter-spacing: -.045em;
color: var(--tyb-brand);
}
.tyb-rev5__total span {
display: block;
margin-top: 1.1rem;
font-family: var(--tyb-body-font);
font-size: .6875rem;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--tyb-muted);
}
.tyb-rev5__head .tyb-quote__stars { margin: .9rem 0 0; font-size: .95rem; letter-spacing: .3em; }
.tyb-rev5 .tyb-rev5__all { margin-top: 2.25rem; text-align: left; }
.tyb-rev5 .tyb-rev5__all .tyb-btn { border-color: var(--tyb-ink); color: var(--tyb-ink); }
.tyb-rev5 .tyb-rev5__all .tyb-btn:hover { background: var(--tyb-ink); border-color: var(--tyb-ink); color: #fff; }
.tyb-rev5__lead, .tyb-rev5__card { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tyb-rev5__lead blockquote {
margin: 0 0 1.4rem;
font-family: var(--tyb-display);
font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
line-height: 1.3;
letter-spacing: -.01em;
color: var(--tyb-ink);
}
.tyb-rev5__lead blockquote::before { content: '\201C'; }
.tyb-rev5__lead blockquote::after { content: '\201D'; }
html.tyb-clamp .tyb-rev5__lead .tyb-rev4__text:not(.is-open) { -webkit-line-clamp: 4; line-clamp: 4; }
.tyb-rev5__rest {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 4vw, 3.5rem);
margin-top: 2.25rem;
padding-top: 2rem;
border-top: 1px solid var(--tyb-line);
}
.tyb-rev5__card blockquote { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.7; color: var(--tyb-body); }
html.tyb-clamp .tyb-rev5__card .tyb-rev4__text:not(.is-open) { -webkit-line-clamp: 3; line-clamp: 3; }
.tyb-rev5 figcaption { display: flex; flex-direction: column; gap: .3rem; margin-top: auto; }
.tyb-rev5 .tyb-quote__name { font-family: var(--tyb-display); font-size: 1.15rem; color: var(--tyb-ink); }
.tyb-rev5 .tyb-quote__via { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tyb-muted); }
.tyb-rev5 .tyb-rev4__more { margin: -.5rem 0 1.1rem; }
@media (max-width: 900px) {
/* One column: the total, the reviews, then the button. */
.tyb-rev5__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 1.6rem; }
.tyb-rev5__head, .tyb-rev5__body, .tyb-rev5 .tyb-rev5__all { grid-column: 1; grid-row: auto; }
.tyb-rev5__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; align-items: center; }
.tyb-rev5__head .tyb-kick5 { grid-column: 1 / -1; }
.tyb-rev5__total { display: contents; }
.tyb-rev5__total strong { grid-column: 1; grid-row: 2 / span 2; font-size: 5.25rem; }
.tyb-rev5__total span { grid-column: 2; grid-row: 2; margin: 0; align-self: end; }
.tyb-rev5__head .tyb-quote__stars { grid-column: 2; grid-row: 3; margin: .3rem 0 0; align-self: start; }
.tyb-rev5 .tyb-rev5__all { margin-top: 0; }
.tyb-rev5 .tyb-rev5__all .tyb-btn { width: 100%; }
.tyb-rev5__rest { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin-top: 1.5rem; padding-top: 1.5rem; }
.tyb-rev5__rest .tyb-rev5__card + .tyb-rev5__card { padding-top: 1.4rem; border-top: 1px solid var(--tyb-line); }
.tyb-rev5__lead blockquote { font-size: 1.5rem; margin-bottom: 1.1rem; }
html.tyb-clamp .tyb-rev5__lead .tyb-rev4__text:not(.is-open) { -webkit-line-clamp: 5; line-clamp: 5; }
html.tyb-clamp .tyb-rev5__card .tyb-rev4__text:not(.is-open) { -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (max-width: 640px) {
/* A phone shows the lead review and one more; "Read all reviews" is right below. */
.tyb-rev5__rest .tyb-rev5__card + .tyb-rev5__card { display: none; }
}
/* ----------------------------------------------------------- S6 listings -- */
.tyb-list5 .tyb-head--split { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.tyb-list5 .tyb-kick5 { margin-bottom: 1.1rem; }
.tyb-list5 .tyb-slider__btn { width: 3rem; height: 3rem; background: transparent; border-color: var(--tyb-ink); color: var(--tyb-ink); }
.tyb-list5 .tyb-slider__btn:hover { background: var(--tyb-ink); border-color: var(--tyb-ink); color: #fff; }
.tyb-list5 .tyb-slider__btn[disabled], .tyb-list5 .tyb-slider__btn[disabled]:hover { background: transparent; border-color: var(--tyb-line); color: var(--tyb-faint); opacity: 1; }
.tyb-list5 .tyb-slider__controls { gap: .6rem; }
.tyb-list5 .tyb-slider__controls .tyb-btn { margin-left: .9rem; }
.tyb-list5 .tyb-slider__track { scrollbar-width: none; padding: 0; margin-inline: 0; scroll-padding-inline: 0; }
.tyb-list5 .tyb-slider__track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
/* Two large cards and the edge of the third. */
.tyb-list5 .tyb-slider__track { grid-auto-columns: calc((100% - 4rem) / 2.3); gap: 2rem; }
}
/* The photograph is the card. No border, no plate, no lift. */
.tyb-list5 .tyb-card { background: none; border: 0; border-radius: 0; overflow: visible; }
.tyb-list5 .tyb-card:hover { transform: none; box-shadow: none; }
.tyb-list5 .tyb-card__media { overflow: hidden; border-radius: var(--tyb-radius5); }
.tyb-list5 .tyb-figure--wide { aspect-ratio: 3 / 2; }
.tyb-list5 .tyb-card__media img { transition: transform 1.6s var(--tyb-ease); }
.tyb-list5 .tyb-card:hover .tyb-card__media img { transform: scale(1.05); }
.tyb-list5 .tyb-card__status {
top: 1rem; left: 1rem;
padding: .35rem .6rem;
border-radius: 2px;
background: rgba(255, 255, 255, .92);
color: var(--tyb-ink);
font-family: var(--tyb-body-font);
font-size: .6875rem;
font-weight: 600;
letter-spacing: .2em;
}
.tyb-list5 .tyb-card__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 1.5rem;
row-gap: .45rem;
align-items: baseline;
padding: 1.2rem 0 0;
}
.tyb-list5 .tyb-card__title { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1.1; }
.tyb-list5 .tyb-card__price { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1.1; color: var(--tyb-brand); }
.tyb-list5 .tyb-card__addr,
.tyb-list5 .tyb-card__specs {
margin: 0; padding: 0; border: 0;
font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--tyb-muted);
}
.tyb-list5 .tyb-card__addr { grid-column: 1; grid-row: 2; }
.tyb-list5 .tyb-card__specs { grid-column: 2; grid-row: 2; gap: 0; justify-content: flex-end; }
.tyb-list5 .tyb-card__addr .tyb-icon, .tyb-list5 .tyb-card__specs .tyb-icon { display: none; }
.tyb-list5 .tyb-card__specs li + li::before { content: '\00B7'; margin-inline: .55em; }
@media (max-width: 640px) {
.tyb-list5 .tyb-head--split { margin-bottom: 1.4rem; }
.tyb-list5 .tyb-slider__btn { width: 2.75rem; height: 2.75rem; }
.tyb-list5 .tyb-card__body { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; padding-top: .9rem; }
.tyb-list5 .tyb-card__price { grid-column: 1; grid-row: 1; font-size: 1.5rem; }
.tyb-list5 .tyb-card__title { grid-row: 2; font-size: 1.3rem; }
.tyb-list5 .tyb-card__addr { grid-row: 3; margin-top: .2rem; }
.tyb-list5 .tyb-card__specs { grid-column: 1; grid-row: 4; justify-content: flex-start; }
.tyb-list5 .tyb-card__addr, .tyb-list5 .tyb-card__specs { letter-spacing: .14em; }
}
/* ---------------------------------------------- S7 where they work: tiles -- */
.tyb-towns5__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.tyb-towns5__hint {
margin: 0 0 .6rem;
font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
color: var(--tyb-muted);
}
.tyb-towns5__grid {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(var(--tyb-cols, 4), minmax(0, 1fr));
gap: clamp(.75rem, 1.6vw, 1.5rem);
}
.tyb-towns5__item { min-width: 0; }
.tyb-tile5--town { aspect-ratio: 3 / 4; }
/* Three towns: wider tiles, so a little shorter than four across. */
.tyb-towns5__grid--n3 .tyb-tile5--town { aspect-ratio: 4 / 5; }
.tyb-tile5--town .tyb-tile5__name { font-size: clamp(1.4rem, 1rem + 1.1vw, 1.9rem); }
.tyb-tile5--town .tyb-tile5__label { gap: .8rem; padding: 0 clamp(.9rem, 1.5vw, 1.4rem) clamp(1rem, 1.5vw, 1.35rem); }
.tyb-tile5--town .tyb-arrow5 { width: 22px; }
/* A shallow top scrim, so the white outline holds on a bright sky. */
.tyb-tile5--town::before {
content: '';
position: absolute; inset: 0 0 auto 0;
height: 34%;
z-index: -1;
background: linear-gradient(to bottom, rgba(var(--tyb-scrim5), .42) 0%, rgba(var(--tyb-scrim5), 0) 100%);
}
/* The town's outline: small, white line, top left of the photograph. */
.tyb-tile5__shape {
position: absolute;
top: clamp(.9rem, 1.5vw, 1.35rem); left: clamp(.9rem, 1.5vw, 1.4rem);
width: 64px; height: 64px;
transition: transform .6s var(--tyb-ease);
}
.tyb-tile5__shape .tyb-shape { width: 100%; height: 100%; overflow: visible; }
.tyb-tile5__shape .tyb-shape path {
fill: rgba(255, 255, 255, .22);
stroke: #fff;
stroke-width: 1.5;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
/* No photograph: a brand-color tile with the outline large. Same label,
same arrow, so a row can mix both and still read as one set. */
.tyb-tile5--plain { background: linear-gradient(160deg, var(--tyb-brand-mid) 0%, var(--tyb-deep) 70%); }
.tyb-tile5--plain::before, .tyb-tile5--plain::after { content: none; }
.tyb-tile5--plain .tyb-tile5__shape {
top: 11%; left: 16%;
width: 68%; height: auto;
aspect-ratio: 1 / 1;
}
.tyb-tile5--plain .tyb-tile5__shape .tyb-shape path { fill: rgba(255, 255, 255, .1); stroke-width: 1.4; }
@media (hover: hover) {
.tyb-tile5--plain:hover .tyb-tile5__shape { transform: scale(1.05); }
}
@media (max-width: 1040px) {
.tyb-towns5__grid { grid-template-columns: repeat(var(--tyb-cols-md, 3), minmax(0, 1fr)); }
/* Narrow tiles: the name alone, so a two-word town stays on one line. */
.tyb-tile5--town .tyb-tile5__line, .tyb-tile5--town .tyb-arrow5 { display: none; }
}
@media (max-width: 780px) {
.tyb-towns5__grid { grid-template-columns: repeat(var(--tyb-cols-sm, 2), minmax(0, 1fr)); gap: .7rem; }
.tyb-towns5__head { flex-direction: column; align-items: flex-start; gap: .9rem; margin-bottom: 1.4rem; }
.tyb-towns5__hint { margin: 0; letter-spacing: .16em; }
.tyb-tile5--town, .tyb-towns5__grid--n3 .tyb-tile5--town { aspect-ratio: 4 / 5; }
/* An odd count on two columns: the last town takes the full row, wide. */
.tyb-towns5__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tyb-towns5__item:last-child:nth-child(odd) .tyb-tile5--town { aspect-ratio: 2 / 1; }
.tyb-towns5__item:last-child:nth-child(odd) .tyb-tile5--plain .tyb-tile5__shape { top: 9%; left: 50%; width: auto; height: 58%; transform: translateX(-50%); }
.tyb-tile5--town .tyb-tile5__name { font-size: 1.5rem; }
.tyb-tile5--town .tyb-tile5__line, .tyb-tile5--town .tyb-arrow5 { display: none; }
.tyb-tile5--town .tyb-tile5__label { padding: 0 .85rem .8rem; }
.tyb-tile5__shape { top: .75rem; left: .8rem; width: 44px; height: 44px; }
}
/* -------------------------------- S8 their words, over a photograph -- */
.tyb-creed5 { position: relative; isolation: isolate; overflow: hidden; }
.tyb-creed5 .tyb-kick5 { justify-content: center; }
.tyb-creed5 .tyb-kick5::after { content: ''; flex: none; width: 32px; height: 2px; background: var(--tyb-rule4); }
.tyb-creed5 .tyb-creed__inner { max-width: 60rem; }
.tyb-creed5 .tyb-creed__goal {
margin: 0 auto;
max-width: 24ch;
font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.6rem);
line-height: 1.1;
letter-spacing: -.02em;
text-wrap: balance;
}
.tyb-creed5 .tyb-creed__goal::before { content: '\201C'; }
.tyb-creed5 .tyb-creed__goal::after { content: '\201D'; }
.tyb-creed5 .tyb-creed__attrib {
margin-top: 1.75rem;
font-family: var(--tyb-body-font);
font-size: .6875rem; font-weight: 600; letter-spacing: .24em;
}
.tyb-creed5 .tyb-creed__actions { margin-top: 2.5rem; align-items: center; gap: 1rem 1.75rem; }
.tyb-creed5--photo { padding-block: clamp(5rem, 11vw, 10rem); background: var(--tyb-deep); border: 0; }
.tyb-creed5__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tyb-creed5--photo::before {
/* .tyb-section--dark::before is the 4px shore rule (height: 4px): take the
whole box back for the scrim, and drop the rule at the bottom edge. */
top: 0; bottom: 0; height: auto;
z-index: -1;
background: rgba(var(--tyb-scrim5), var(--tyb-scrim-creed, .46));
}
.tyb-creed5--photo::after { content: none; }
.tyb-creed5--photo .tyb-creed__inner { text-shadow: 0 1px 18px rgba(var(--tyb-scrim5), .4); }
.tyb-creed5--photo .tyb-kick5,
.tyb-creed5--photo .tyb-creed__goal,
.tyb-creed5--photo .tyb-creed__attrib,
.tyb-creed5--photo .tyb-creed__call,
.tyb-creed5--photo .tyb-creed__call:hover,
.tyb-creed5--photo .tyb-creed__call strong,
.tyb-creed5--photo .tyb-creed__call .tyb-icon { color: #fff; }
.tyb-creed5--photo .tyb-btn { text-shadow: none; }
@media (max-width: 640px) {
.tyb-creed5--photo { padding-block: 3.5rem; }
.tyb-creed5 .tyb-creed__goal { font-size: 1.95rem; }
.tyb-creed5 .tyb-creed__attrib { margin-top: 1.2rem; letter-spacing: .16em; }
.tyb-creed5 .tyb-creed__actions { margin-top: 1.75rem; }
.tyb-creed5--photo .tyb-creed__call-num { border-color: #fff; background: rgba(var(--tyb-scrim5), .28); }
}
/* --------------------------------------- S9 the one client-only section -- */
.tyb-spec5__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
}
.tyb-spec5--photo .tyb-spec5__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
gap: clamp(3rem, 8vw, 8rem);
align-items: center;
}
.tyb-spec5__intro .tyb-h5 { max-width: 16ch; }
.tyb-spec5__list { list-style: none; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; padding: 0; border-bottom: 1px solid var(--tyb-line); }
.tyb-spec5__item {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
column-gap: 2rem;
align-items: baseline;
padding: 1.3rem 0;
border-top: 1px solid var(--tyb-line);
}
.tyb-spec5__title { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.12; }
.tyb-spec5__text { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--tyb-body); }
.tyb-spec5__body > .tyb-btn { margin-top: 2rem; }
.tyb-spec5__media { margin: 0; overflow: hidden; border-radius: var(--tyb-radius5); aspect-ratio: 1 / 1; background: var(--tyb-tint-2); }
.tyb-spec5__media img { width: 100%; height: 100%; object-fit: cover; }
/* No photograph: the heading takes the left column and the list the right. */
@media (min-width: 901px) {
.tyb-spec5:not(.tyb-spec5--photo) .tyb-spec5__body {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
column-gap: clamp(3rem, 8vw, 8rem);
align-items: start;
}
.tyb-spec5:not(.tyb-spec5--photo) .tyb-spec5__list { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.tyb-spec5:not(.tyb-spec5--photo) .tyb-spec5__body > .tyb-btn { grid-column: 1; grid-row: 2; justify-self: start; }
}
@media (max-width: 900px) {
.tyb-spec5--photo .tyb-spec5__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.tyb-spec5__media { order: -1; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
.tyb-spec5__item { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; padding: 1rem 0; }
.tyb-spec5__list { margin-top: 1.3rem; }
.tyb-spec5__body > .tyb-btn { margin-top: 1.4rem; width: 100%; }
.tyb-spec5__media { aspect-ratio: 16 / 9; }
}
/* ------------------------------------ S10 the lead band, closes the page -- */
.tyb-lead5 {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(4.5rem, 8.5vw, 8rem);
background: linear-gradient(168deg, var(--tyb-surf-pale) 0%, var(--tyb-shell) 52%, var(--tyb-sand) 100%);
color: var(--tyb-body);
}
.tyb-lead5__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tyb-lead5--photo { background: var(--tyb-deep); color: #fff; }
/* A soft pool of scrim behind the words only. The top, the bottom and the
side behind the card stay close to the photograph as shot. */
.tyb-lead5--photo::before {
content: '';
position: absolute; inset: 0;
z-index: -1;
background: radial-gradient(ellipse 64% 72% at 18% 55%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-lead, .6)) 0%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-lead, .6)) 46%,
rgba(var(--tyb-scrim5), calc(var(--tyb-scrim-lead, .6) * .25)) 100%);
}
.tyb-lead5__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
gap: clamp(2.5rem, 7vw, 7rem);
align-items: center;
}
.tyb-lead5__title { max-width: none; font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5rem); line-height: .98; }
.tyb-lead5__text { margin: 1.4rem 0 0; max-width: 30ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.55; }
.tyb-lead5__call {
display: inline-flex;
align-items: center;
gap: .7rem;
margin-top: 2.1rem;
padding-block: .35rem;
font-family: var(--tyb-display);
font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
line-height: 1;
letter-spacing: -.01em;
color: var(--tyb-brand);
border-bottom: 1px solid currentColor;
}
.tyb-lead5__call .tyb-icon { width: .55em; height: .55em; }
.tyb-lead5__call:hover { color: var(--tyb-ink); }
.tyb-lead5 .tyb-lead5__firm { margin-top: 1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tyb-muted); }
.tyb-lead5--photo .tyb-lead5__copy { text-shadow: 0 1px 22px rgba(var(--tyb-scrim5), .55); }
.tyb-lead5--photo .tyb-kick5,
.tyb-lead5--photo .tyb-lead5__title,
.tyb-lead5--photo .tyb-lead5__text,
.tyb-lead5--photo .tyb-lead5__call,
.tyb-lead5--photo .tyb-lead5__call:hover,
.tyb-lead5--photo .tyb-lead5__call .tyb-icon,
.tyb-lead5--photo .tyb-lead5__firm { color: #fff; }
.tyb-lead5--photo .tyb-lead5__call:hover { border-bottom-width: 2px; }
.tyb-lead5__card {
scroll-margin-top: calc(var(--tyb-header-h, 4.5rem) + 1rem);
padding: clamp(1.4rem, 3vw, 2.5rem);
background: #fff;
border-radius: 8px;
box-shadow: 0 30px 70px -30px rgba(var(--tyb-scrim5), .55);
color: var(--tyb-body);
}
.tyb-lead5__card-title { margin-bottom: 1.2rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); }
.tyb-lead5__card .tyb-field textarea { height: 5.4rem; min-height: 0; }
@media (max-width: 900px) {
.tyb-lead5__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.tyb-lead5--photo::before { background: rgba(var(--tyb-scrim5), var(--tyb-scrim-lead, .58)); }
}
@media (max-width: 640px) {
.tyb-lead5 { padding-block: 2.75rem; }
.tyb-lead5__text { margin-top: .9rem; }
.tyb-lead5__call { margin-top: 1.3rem; font-size: 2rem; }
.tyb-lead5__card .tyb-form { gap: .65rem; }
.tyb-lead5__card .tyb-field { gap: .25rem; }
.tyb-lead5__card .tyb-field__row { gap: .65rem; }
.tyb-lead5__card-title { margin-bottom: .8rem; }
.tyb-lead5__card .tyb-field textarea { height: 4.6rem; }
/* The photograph sits behind the words only (a 4:5 phone crop), and fades
into the band's solid ground before the form card, which would hide it. */
.tyb-lead5--photo .tyb-lead5__img {
inset: 0 0 auto 0;
height: 30rem;
-webkit-mask-image: linear-gradient(#000 66%, transparent);
mask-image: linear-gradient(#000 66%, transparent);
}
.tyb-lead5--photo::before { bottom: auto; height: 30rem; -webkit-mask-image: linear-gradient(#000 66%, transparent); mask-image: linear-gradient(#000 66%, transparent); }
}
/* Desktop: the call pill sits over the right edge of the form card below
about 1500px wide. theme.js already marks it .is-hidden over a form, the
hero, the creed and the footer; until now only the phone layout acted on
that. Each of those zones prints the number itself. */
@media (min-width: 901px) {
.tyb-callbar { transition: opacity .25s var(--tyb-ease), visibility 0s linear 0s; }
.tyb-callbar.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--tyb-ease), visibility 0s linear .25s; }
/* Desktop: the header already carries the contact button, and a full pill
sat on the tile labels. It rests as the round face-and-phone button and
opens to the full pill on hover or keyboard focus. */
.tyb-callbar { right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.tyb-callbar__call { gap: 0; padding: .4rem; transition: transform .22s var(--tyb-ease), box-shadow .22s var(--tyb-ease), padding .3s var(--tyb-ease), gap .3s var(--tyb-ease); }
.tyb-callbar__call::after { opacity: 0; transition: opacity .2s var(--tyb-ease); }
.tyb-callbar__txt { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--tyb-ease), opacity .2s var(--tyb-ease); }
.tyb-callbar__call:hover, .tyb-callbar__call:focus-visible { gap: .7rem; padding: .7rem 1.15rem .8rem .7rem; }
.tyb-callbar__call:hover::after, .tyb-callbar__call:focus-visible::after { opacity: 1; }
.tyb-callbar__call:hover .tyb-callbar__txt, .tyb-callbar__call:focus-visible .tyb-callbar__txt { max-width: 16rem; opacity: 1; }
}
/* Phones: headings use the full column and balance their lines. */
@media (max-width: 640px) {
.tyb-h5, .tyb-intro5__head .tyb-h5, .tyb-spec5__intro .tyb-h5 { max-width: none; }
.tyb-kick5 { letter-spacing: .2em; gap: .7rem; }
}
/* The footer address measured 4.34:1; it takes its neighbors' text color. */
.tyb-foot__addr { color: rgba(255, 255, 255, .72); }
@media (prefers-reduced-motion: reduce) {
.tyb-tile5, .tyb-tile5__img, .tyb-tile5__shape, .tyb-arrow5, .tyb-list5 .tyb-card__media img,
.tyb-callbar__call, .tyb-callbar__txt { transition: none; }
.tyb-tile5:hover .tyb-tile5__img, .tyb-tile5:focus-visible .tyb-tile5__img,
.tyb-list5 .tyb-card:hover .tyb-card__media img { transform: none; }
}
/* ------------------------------------------------------------------------
Added when the mock became PHP (same block, same date). States the static
mock did not have: a route, one or two towns, one or two reviews, a figure
band with no heading, a plain reviews heading, the form's own anchor, and
a firm whose casing must be kept.
------------------------------------------------------------------------ */
/* S3: no kicker and no heading, so the row of figures starts the band. */
.tyb-nums5__list:first-child { margin-top: 0; }
/* S5: under five reviews the heading is words, not a count. */
.tyb-rev5__plain { max-width: 12ch; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); }
/* S5: two reviews in all, so one sits under the lead: full width. */
.tyb-rev5__rest--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
.tyb-rev5__plain { grid-column: 1 / -1; max-width: none; }
.tyb-rev5__head .tyb-rev5__plain ~ .tyb-quote__stars { grid-column: 1 / -1; grid-row: auto; }
}
/* S7: the ROUTE prints the same tiles in named legs, each under a hairline. */
.tyb-towns5__leg {
display: flex;
align-items: baseline;
gap: 1.25rem;
margin: clamp(2rem, 4vw, 3.25rem) 0 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--tyb-line);
}
.tyb-towns5__head + .tyb-towns5__leg { margin-top: 0; }
.tyb-towns5__leg-name { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; }
.tyb-towns5__leg-note {
margin: 0;
font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: var(--tyb-muted);
}
/* The client's complete logo above a route (assets/img/logo-full.*). */
.tyb-towns5__logo { display: block; width: auto; height: auto; max-width: min(100%, 22rem); max-height: 7rem; margin: 0 0 2rem; }
/* S7: one or two towns. Wide tiles, and a plain tile's outline centered in
them (the SVG centers its own drawing: preserveAspectRatio xMidYMid). */
@media (min-width: 781px) {
.tyb-towns5__grid--n2 .tyb-tile5--town { aspect-ratio: 3 / 2; }
.tyb-towns5__grid--n1 .tyb-tile5--town { aspect-ratio: 5 / 2; }
.tyb-towns5__grid--n2 .tyb-tile5--plain .tyb-tile5__shape,
.tyb-towns5__grid--n1 .tyb-tile5--plain .tyb-tile5__shape { top: 9%; left: 0; right: 0; width: auto; height: 58%; aspect-ratio: auto; }
}
@media (max-width: 780px) {
.tyb-towns5__leg { flex-direction: column; gap: .35rem; margin: 1.6rem 0 .9rem; padding-top: .9rem; }
.tyb-towns5__leg-note { letter-spacing: .14em; }
}
/* S9, no photograph: the note sits under the button, in the left column. */
@media (min-width: 901px) {
.tyb-spec5:not(.tyb-spec5--photo) .tyb-spec5__note { grid-column: 1; }
}
/* S10: with JavaScript off the handler redirects to #tyb-form, which is the
form's wrapper inside the card (trap 76). It has to clear the sticky header
and show the card's heading above it. */
.tyb-lead5__form { scroll-margin-top: calc(var(--tyb-header-h, 4.5rem) + 5rem); }
/* A firm whose brand casing must survive capitals (eXp): profile()['firm_case']
adds .tyb-firmcase to , and the three small capital lines that can
carry the firm print as typed. .tyb-nocase does the same for one span. */
.tyb-nocase { text-transform: none; }
.tyb-firmcase .tyb-meet5 .tyb-meet5__firm,
.tyb-firmcase .tyb-lead5 .tyb-lead5__firm,
.tyb-firmcase .tyb-creed5 .tyb-creed__attrib { text-transform: none; letter-spacing: .06em; font-size: .8rem; }
/* TEST SITE 2026-10-04 (found on demotemplate.brokerboost.com, the first real
render). The resting desktop pill is meant to be ROUND, but its hidden text
column (max-width 0) still had three lines of height, so the button was as
tall as the open pill: 59x60 with a face and a 50x60 egg with no face (the
phone-glyph fallback). At rest the text column takes no height either. */
@media (min-width: 901px) {
.tyb-callbar__call:not(:hover):not(:focus-visible) .tyb-callbar__txt { height: 0; }
}
/* TEST SITE 2026-10-04. The no-face pill (no callbar-face.jpg) is a phone glyph
on a colored disc. The disc sets color #fff, but the glyph is a .tyb-icon,
which carries its own light accent color, so it was drawn pale blue on the
disc. Trap 6: the fallback no site with a headshot ever renders. */
.tyb-callbar__ico:not(.tyb-callbar__ico--face) .tyb-icon { color: #fff; }
/* REVIEW 2026-10-04. A town count that does not fill its last row (5, 7, 10,
11) left that row at the left with a hole beside it. On desktop the short
last row is centered: twice the tracks, every tile spans two, and the first
tile of the last row starts at --tyb-off (parts/markets.php sets both). The
tile width is unchanged. Under 1041px the two- and three-column rules above
apply as before. */
@media (min-width: 1041px) {
.tyb-towns5__grid--center { grid-template-columns: repeat(calc(var(--tyb-cols, 4) * 2), minmax(0, 1fr)); }
.tyb-towns5__grid--center > .tyb-towns5__item { grid-column: span 2; }
.tyb-towns5__grid--center > .tyb-towns5__item--lead { grid-column: var(--tyb-off, auto) / span 2; }
}
/* ------------------------------------------------------------------------
REVIEW FIXES 2026-10-04 (two reviewers, the live test site). Same block,
same date. Every rule below is an override of an older rule or of a rule
earlier in this block, and wins by coming later (trap 51).
------------------------------------------------------------------------ */
/* INNER PAGES take the home page's grammar. They were still the round-2
look: a condensed-serif eyebrow, the four-color rule under every heading,
smaller headings and a boxed "Start here" panel. */
/* The banner's words start where the logo and the page content start. The
max-width was on the wrap itself, so the wrap centered and the title began
192px to the right of the logo at 1440. */
.tyb-banner__inner { max-width: var(--tyb-wrap); text-shadow: 0 1px 22px rgba(var(--tyb-scrim5), .55); }
.tyb-banner__inner > * { max-width: 46rem; }
/* The banner scrim: a pool in the neutral, under the words (bottom left),
fading to nothing toward the top right. The old one washed the whole
photograph grey-green from two directions. Strength is one number,
--tyb-scrim-banner, MEASURED on the test site's five banner photographs
with the text hidden, brightest 1% of the ground: at .55 the lowest small
text reads about 4.7:1 on the two bright interiors. A plain bottom-up
gradient (.62 to .08) was tried first and failed the kicker at 2.7:1. A
phone's words run the full width, so there the scrim is bottom-up. */
.tyb-banner__scrim {
background:
radial-gradient(ellipse 115% 150% at 0% 100%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-banner, .55)) 0%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-banner, .55)) 55%,
rgba(var(--tyb-scrim5), 0) 100%),
linear-gradient(to top, rgba(var(--tyb-scrim5), .2), rgba(var(--tyb-scrim5), 0) 70%);
}
@media (max-width: 900px) {
.tyb-banner__scrim {
background: linear-gradient(to top,
rgba(var(--tyb-scrim5), calc(var(--tyb-scrim-banner, .55) + .05)) 0%,
rgba(var(--tyb-scrim5), calc(var(--tyb-scrim-banner, .55) + .05)) 78%,
rgba(var(--tyb-scrim5), calc(var(--tyb-scrim-banner, .55) - .13)) 100%);
}
}
.tyb-banner__lede { color: #fff; }
/* The old eyebrow becomes the kicker: tiny tracked sans capitals with the
small four-color rule before it. (The home page prints .tyb-kick5 itself;
this reaches the inner templates without touching each one.) */
.tyb-banner .tyb-eyebrow,
.tyb-section .tyb-eyebrow {
display: inline-flex;
align-items: center;
gap: .85rem;
font-family: var(--tyb-body-font);
font-size: .6875rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: .26em;
text-transform: uppercase;
}
.tyb-banner .tyb-eyebrow::before,
.tyb-section .tyb-eyebrow::before {
content: '';
flex: none;
width: 32px; height: 2px;
background: var(--tyb-rule4);
}
/* The rule under a heading goes: the kicker carries the four colors now.
What followed the rule keeps the space the rule gave it. */
.tyb-banner .tyb-rule,
.tyb-section :is(h1, h2) + .tyb-rule { display: none; }
.tyb-banner .tyb-rule + *,
.tyb-section :is(h1, h2) + .tyb-rule + * { margin-top: 1.15rem; }
/* Inner section headings at the home page's size. */
.tyb-head h2:not(.tyb-h5),
.tyb-valuecta h2 {
font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
line-height: 1.06;
letter-spacing: -.02em;
}
/* "Start here" on the buyer and seller pages: no box, no fill, no stripe.
Two hairlines, like the home page's lists. */
.tyb-valuecta {
padding-inline: 0;
background: transparent;
border: 0;
border-top: 1px solid var(--tyb-line);
border-bottom: 1px solid var(--tyb-line);
border-radius: 0;
box-shadow: none;
}
/* S2 with NO tile photographs. Three 376px squares of solid dark color read
as three images that failed to load. A tile with no ![]()
is a short label
bar on the brand gradient. The item is a grid so that, in a row that mixes
both, the plain tile still fills the row beside a photograph. */
.tyb-tiles5__item { display: grid; }
.tyb-tiles5 .tyb-tile5:not(:has(.tyb-tile5__img)) {
aspect-ratio: auto;
min-height: 7.5rem;
background: linear-gradient(160deg, var(--tyb-brand-mid) 0%, var(--tyb-deep) 70%);
}
.tyb-tiles5 .tyb-tile5:not(:has(.tyb-tile5__img))::before,
.tyb-tiles5 .tyb-tile5:not(:has(.tyb-tile5__img))::after { content: none; }
@media (max-width: 640px) {
.tyb-tiles5 .tyb-tile5:not(:has(.tyb-tile5__img)),
.tyb-tiles5__item:first-child .tyb-tile5:not(:has(.tyb-tile5__img)) { height: auto; min-height: 5.5rem; }
}
/* S6 on desktop: the row of cards runs off the right edge of the screen, as
on the reference sites. It used to stop at the content column, slicing the
third card mid-word with 128px of empty ground beside it. The section
clips, so nothing scrolls sideways. */
@media (min-width: 901px) {
.tyb-list5 { overflow-x: clip; }
.tyb-list5 .tyb-slider__track {
margin-right: calc(-1 * max(var(--tyb-gutter), (100vw - var(--tyb-wrap)) / 2 + var(--tyb-gutter)));
padding-right: var(--tyb-gutter);
scroll-padding-right: var(--tyb-gutter);
}
}
/* S6 on a phone: every card is as tall as the tallest, and a sold card's
"Represented the seller" line added a row, leaving about 70px of blank
ground under a for-sale card. That line now shares the town's row. */
@media (max-width: 640px) {
.tyb-list5 .tyb-card__body { grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; }
.tyb-list5 .tyb-card__price,
.tyb-list5 .tyb-card__title,
.tyb-list5 .tyb-card__specs { grid-column: 1 / -1; }
.tyb-list5 .tyb-card__addr { grid-column: 1; }
.tyb-list5 .tyb-card__repd { grid-column: 2; grid-row: 3; align-self: end; margin: 0; white-space: nowrap; }
.tyb-list5 { padding-bottom: 2rem; }
}
/* S7: the white outline was lost on bright or busy photographs. */
.tyb-tile5--town:not(.tyb-tile5--plain) .tyb-tile5__shape { filter: drop-shadow(0 1px 6px rgba(var(--tyb-scrim5), .55)); }
.tyb-tile5--town:not(.tyb-tile5--plain) .tyb-tile5__shape .tyb-shape path { fill: rgba(255, 255, 255, .3); }
/* S7 from 781 to 1040px: a short last row is centered here too (the desktop
rule below does it from 1041px). parts/markets.php sets --tyb-off-md on
the first tile of the last row at this width's column count. */
@media (min-width: 781px) and (max-width: 1040px) {
.tyb-towns5__grid--center-md { grid-template-columns: repeat(calc(var(--tyb-cols-md, 3) * 2), minmax(0, 1fr)); }
.tyb-towns5__grid--center-md > .tyb-towns5__item { grid-column: span 2; }
.tyb-towns5__grid--center-md > .tyb-towns5__item--lead-md { grid-column: var(--tyb-off-md, auto) / span 2; }
}
/* S10 on desktop: the pool of scrim sits on the words and lets the sky go.
It was an oval 72% of the band tall that never fell below a quarter
strength, which greyed the sky above the heading and left a soft edge
beside the form card. Now it is smaller, centered on the copy and fades to
NOTHING; the top of the band keeps about a third of the old cover. (A
lower, weaker oval at 16% 64% was measured first and failed the kicker at
2.2:1 and the heading at 2.3:1: the words start at 31% of the band.) The
phone rule (a flat scrim under a masked photograph) is unchanged. */
@media (min-width: 901px) {
.tyb-lead5--photo::before {
background:
radial-gradient(ellipse 60% 62% at 20% 50%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-lead, .6)) 0%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-lead, .6)) 45%,
rgba(var(--tyb-scrim5), 0) 100%),
linear-gradient(to top, rgba(var(--tyb-scrim5), .18), rgba(var(--tyb-scrim5), 0) 55%);
}
}
/* S10: hover no longer thickens the border (it moved the firm line 1px). */
.tyb-lead5--photo .tyb-lead5__call:hover { border-bottom-width: 1px; box-shadow: 0 1px 0 0 currentColor; }
/* On a photograph the brand-color focus ring is dark on dark. */
.tyb-lead5--photo .tyb-lead5__call:focus-visible,
.tyb-creed5--photo .tyb-creed__call:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Single listing on a phone: three facts in two columns left an empty fourth
cell. The last odd fact takes the row. Only where the grid really is two
columns (a 9rem minimum fits three from about 460px up). */
@media (max-width: 460px) {
.tyb-facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
.tyb-tile5__line, .tyb-tile5::after { transition: none; }
.tyb-tile5:hover .tyb-arrow5,
.tyb-tile5--plain:hover .tyb-tile5__shape,
.tyb-tile5:active { transform: none; }
}
/* ═════════════════════════ end SLEEK HOME 2026-10-04 ═════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
SIMPLE HERO 2026-10-04
Round 4. Adam, on the round-3 test site: "hero feels way too jam packed...
keep only one [call to action] and it looks like the strongest is home
valuation... take a look at my best heroes and see they have one thing in
common thats simplicity and great design."
.tyb-hero6 replaces .tyb-hero3 (whose rules above are now dead and are left
in place on purpose). The hero is a kicker, the H1, one optional sentence
and ONE action. This block also holds the light figures strip that sits
under the hero (the order is data now: TYB_Content::home_order()), the
listings-row scroll fix (B1) and the filled-icon alignment (H6).
Three compositions were drawn and judged (tmp/audit-20261004/round4/hero/).
This is A: copy on the left with the bar under it, and on a phone the copy
sits low so the top of the photograph stays clear. B (centered) and C (copy
low, bar at the right) were not carried into the sheet.
A scrim belongs to its photographs. The values below were measured on the
test site's three frames at 1440 and 390. Re-measure on every build, in
both directions (trap 111). A build's own overrides go BELOW this block.
═══════════════════════════════════════════════════════════════════════════ */
.tyb-hero6 {
display: flex; align-items: stretch;
padding-block: 0;
min-height: clamp(36rem, 82vh, 47rem);
background: var(--tyb-deep);
}
.tyb-hero6 > .tyb-wrap { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; }
/* The masthead is drawn over the hero in the transparent mode: the hero
reserves its height once, here. (.tyb-home .tyb-hero__inner reserves it a
second time further up the sheet; the three-class rule below replaces that
at every width.) */
.tyb-mast--transparent.tyb-home .tyb-hero6 { padding-top: var(--tyb-header-h); }
html:not(.js) .tyb-mast--transparent.tyb-home .tyb-hero6 { padding-top: 0; }
.tyb-hero6.tyb-hero6--a .tyb-hero__inner {
max-width: none; width: 100%;
padding-block: clamp(2.5rem, 6.5vh, 4rem) clamp(3rem, 8.5vh, 5.25rem);
}
/* Light and dark mastheads are in the flow above the hero, so the hero gives
that height back and still ends inside the first screen. */
.tyb-mast--light .tyb-hero6, .tyb-mast--dark .tyb-hero6 { min-height: clamp(30rem, calc(82vh - var(--tyb-header-h) - 2.5rem), 44rem); }
/* ONE wash for the masthead, owned by the hero. It used to be two (one on the
bar, one continuing below it) and they met in a visible hairline at the
bar's bottom edge on a bright sky. The bar keeps only the white layer that
arrives on scroll. The hero's own scrim is masked down under the masthead
so the two do not stack into a dark lid over the top of the photograph. */
.tyb-mast--transparent.tyb-home .tyb-hero6::before {
content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0;
height: calc(var(--tyb-header-h) + 7rem); pointer-events: none;
background: linear-gradient(to bottom,
rgba(16, 18, 22, .56) 0,
rgba(16, 18, 22, .46) calc(var(--tyb-header-h) * .7),
rgba(16, 18, 22, .24) var(--tyb-header-h),
rgba(16, 18, 22, .1) calc(var(--tyb-header-h) + 3rem),
rgba(16, 18, 22, 0) 100%);
}
.tyb-mast--transparent.tyb-home .tyb-header__bar {
/* The second layer is a shade that exists only WHILE the bar is arriving
(nothing at rest, nothing once it is white), so the white nav still reads
in the few pixels of scroll before it turns dark. */
background:
linear-gradient(rgba(255, 255, 255, var(--tyb-shrink)), rgba(255, 255, 255, var(--tyb-shrink))),
linear-gradient(rgba(16, 18, 22, calc(1.6 * var(--tyb-shrink) * (1 - var(--tyb-shrink)))), rgba(16, 18, 22, calc(1.6 * var(--tyb-shrink) * (1 - var(--tyb-shrink)))));
border-bottom-color: rgba(228, 222, 210, var(--tyb-shrink));
}
.tyb-mast--transparent.tyb-home .tyb-hero6 .tyb-hero__scrim {
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) calc(var(--tyb-header-h) * .7), #000 calc(var(--tyb-header-h) + 2.5rem));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) calc(var(--tyb-header-h) * .7), #000 calc(var(--tyb-header-h) + 2.5rem));
}
/* The scrim: a neutral shade under the copy column that is gone before the
middle of the photograph, and almost nothing top to bottom. */
.tyb-hero6 .tyb-hero__scrim {
background:
linear-gradient(to right, rgba(12, 18, 22, .62) 0%, rgba(12, 18, 22, .58) 34%, rgba(12, 18, 22, .38) 50%, rgba(12, 18, 22, .12) 66%, rgba(12, 18, 22, 0) 82%),
linear-gradient(to bottom, rgba(12, 18, 22, .1) 0%, rgba(12, 18, 22, 0) 36%, rgba(12, 18, 22, .12) 70%, rgba(12, 18, 22, .12) 100%);
}
.tyb-hero6__copy { max-width: 40rem; }
/* Kicker: the page's small tracked capitals, white, behind a short rule. */
.tyb-hero6__kicker {
display: flex; align-items: center; gap: .85rem;
margin: 0 0 1.5rem;
font-family: var(--tyb-body-font);
font-size: .6875rem; font-weight: 600; line-height: 1.4;
letter-spacing: .26em; text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 2px rgba(10, 12, 16, .55);
}
.tyb-hero6__kicker::before { content: ''; flex: none; width: 32px; height: 2px; background: var(--tyb-gold-lt); }
.tyb-hero6__face { display: none; }
.tyb-hero6 .tyb-hero__title {
margin: 0;
font-size: clamp(2.4rem, 1.2rem + 3vw, 3.75rem);
line-height: 1.09;
letter-spacing: -.014em;
text-wrap: balance;
color: #fff;
text-shadow: 0 1px 2px rgba(10, 12, 16, .35), 0 2px 22px rgba(10, 12, 16, .3);
}
/* Over about 90 characters the H1 steps down, so four lines are not a slab. */
.tyb-hero6--long .tyb-hero__title { font-size: clamp(2.2rem, 1.05rem + 2.7vw, 3.3rem); }
.tyb-hero6 .tyb-hero__lede {
margin: 1.4rem 0 0;
max-width: 30rem;
font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
line-height: 1.55;
color: #fff;
text-wrap: balance;
text-shadow: 0 1px 2px rgba(10, 12, 16, .45);
}
/* The optional credentials: one quiet line of words. Empty by default. */
.tyb-hero6__chips {
list-style: none; margin: 1.15rem 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .3rem 0;
font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
color: #fff; text-shadow: 0 1px 2px rgba(10, 12, 16, .55);
}
/* The dot follows its item, so a row that wraps on a phone never starts a line with one. */
.tyb-hero6__chips li:not(:last-child)::after { content: '\00B7'; margin: 0 .7rem; opacity: .8; }
/* THE ONE ACTION: one white bar, an address and a button. */
.tyb-hero6__act { margin-top: 2.75rem; max-width: 35rem; }
.tyb-hero6__bar {
display: flex; align-items: center;
width: 100%; max-width: 35rem;
padding: 6px;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(8, 26, 41, .18), 0 22px 44px -20px rgba(8, 26, 41, .6);
transition: box-shadow .2s var(--tyb-ease);
}
.tyb-hero6__bar:focus-within { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--tyb-gold-lt), 0 22px 44px -20px rgba(8, 26, 41, .6); }
.tyb-hero6__pin { flex: none; width: 20px; height: 20px; margin-left: .95rem; color: var(--tyb-faint); }
.tyb-hero6__bar input {
flex: 1 1 auto; min-width: 0;
height: 52px; padding: 0 .9rem 0 .7rem;
border: 0; outline: 0; background: transparent; box-shadow: none; border-radius: 0;
font: 400 1.0625rem/1.2 var(--tyb-body-font);
color: var(--tyb-ink);
}
.tyb-hero6__bar input::placeholder { color: var(--tyb-muted); opacity: 1; }
.tyb-hero6__go {
flex: none;
height: 52px; padding: 0 1.5rem;
border: 0; border-radius: 5px;
background: var(--tyb-coral); color: #fff;
font: 600 .8125rem/1 var(--tyb-body-font);
letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .2s var(--tyb-ease), transform .08s var(--tyb-ease);
}
.tyb-hero6__go:hover { background: var(--tyb-coral-dk); }
.tyb-hero6__go:focus-visible { background: var(--tyb-coral-dk); outline: 2px solid var(--tyb-deep); outline-offset: 2px; }
.tyb-hero6__go:active { transform: scale(.985); }
.tyb-hero6__note {
width: fit-content; max-width: 100%;
margin: .9rem 0 0;
font-size: .8125rem; font-weight: 500; line-height: 1.4;
color: #fff; opacity: .92;
text-shadow: 0 1px 2px rgba(10, 12, 16, .6), 0 0 14px rgba(10, 12, 16, .35);
}
/* 'contact': one button is the whole action, so it is given the bar's weight. */
.tyb-hero6__go--solo {
display: inline-flex; align-items: center; justify-content: center;
min-width: 15rem; height: 58px; padding: 0 2.2rem;
font-size: .84rem; border-radius: 6px; text-decoration: none;
box-shadow: 0 18px 36px -18px rgba(8, 26, 41, .6);
}
.tyb-hero6__go--solo:focus-visible { outline-color: #fff; }
/* 'search' (IDX sites): the search panel keeps to the copy's side. */
.tyb-hero6.tyb-hero6--search .tyb-hero6__act { max-width: 46rem; }
/* The copy arrives once. The H1 is left out so the headline paints at once. */
@media (prefers-reduced-motion: no-preference) {
@keyframes tyb-rise6 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tyb-hero6__kicker, .tyb-hero6 .tyb-hero__lede, .tyb-hero6__chips, .tyb-hero6__act { animation: tyb-rise6 .55s var(--tyb-ease) both; }
.tyb-hero6__kicker { animation-delay: .04s; }
.tyb-hero6 .tyb-hero__lede { animation-delay: .1s; }
.tyb-hero6__chips { animation-delay: .14s; }
.tyb-hero6__act { animation-delay: .18s; }
}
/* Up to 900px the photograph is the portrait crop and the copy runs most of
the width, so the shade is top to bottom: light over the top of the
picture, full strength only where the words are. */
@media (max-width: 900px) {
.tyb-hero6 .tyb-hero__scrim {
background: linear-gradient(to bottom, rgba(12, 18, 22, .12) 0%, rgba(12, 18, 22, .22) 14%, rgba(12, 18, 22, .54) 28%, rgba(12, 18, 22, .6) 100%);
}
/* The bar while it is arriving on a phone: the hero's white kicker scrolls
up behind a half-white bar and used to overprint the firm name in the
logo. A blur that exists only mid-fade (nothing at rest, nothing once
the bar is white) turns it into a soft shade. */
.tyb-mast--transparent.tyb-home .tyb-header__bar {
-webkit-backdrop-filter: blur(calc(var(--tyb-shrink) * (1 - var(--tyb-shrink)) * 48px));
backdrop-filter: blur(calc(var(--tyb-shrink) * (1 - var(--tyb-shrink)) * 48px));
}
.tyb-mast--transparent.tyb-home .tyb-hero6::before {
background: linear-gradient(to bottom,
rgba(16, 18, 22, .6) 0,
rgba(16, 18, 22, .52) calc(var(--tyb-header-h) * .7),
rgba(16, 18, 22, .28) var(--tyb-header-h),
rgba(16, 18, 22, .12) calc(var(--tyb-header-h) + 3rem),
rgba(16, 18, 22, 0) 100%);
}
.tyb-mast--transparent.tyb-home .tyb-header__bar {
background:
linear-gradient(rgba(255, 255, 255, var(--tyb-shrink)), rgba(255, 255, 255, var(--tyb-shrink))),
linear-gradient(rgba(16, 18, 22, calc(1.6 * var(--tyb-shrink) * (1 - var(--tyb-shrink)))), rgba(16, 18, 22, calc(1.6 * var(--tyb-shrink) * (1 - var(--tyb-shrink)))));
}
}
@media (min-width: 641px) and (max-width: 900px) {
.tyb-hero6 { min-height: min(78vh, 40rem); }
}
/* PHONE. The first screen is 390x664: kicker, H1, the sentence and the whole
bar are inside it. The copy starts at a FIXED distance under the masthead
(kicker at 165px, H1 at 196px with the 96px bar), so the top of the
photograph is clear and the H1 is inside the top 200px whatever the copy:
no sentence, a two-line headline or one button all leave the H1 where it
is and shorten the hero, down to a floor of 26rem. (It was a 34rem floor
with the copy at the bottom, which held the H1 at 196px for the sample's
copy only: with no sentence it sat at 260px.) */
@media (max-width: 640px) {
.tyb-hero6 { min-height: 26rem; }
.tyb-mast--light .tyb-hero6, .tyb-mast--dark .tyb-hero6 { min-height: 26rem; }
.tyb-hero6 > .tyb-wrap { align-items: flex-start; }
.tyb-hero6.tyb-hero6--a .tyb-hero__inner { padding-block: 4.3125rem 2.1rem; }
/* The copy is at fixed heights now, so the shade is too: a third lighter
between the masthead and the kicker than it was (frame 2 read as a flat
grey-blue lid), full strength from the kicker down. */
.tyb-hero6 .tyb-hero__scrim {
background: linear-gradient(to bottom, rgba(12, 18, 22, .1) 0, rgba(12, 18, 22, .14) 84px, rgba(12, 18, 22, .32) 140px, rgba(12, 18, 22, .54) 172px, rgba(12, 18, 22, .6) 100%);
}
.tyb-mast--transparent.tyb-home .tyb-hero6 .tyb-hero__scrim {
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) calc(var(--tyb-header-h) * .6), #000 calc(var(--tyb-header-h) + .75rem));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) calc(var(--tyb-header-h) * .6), #000 calc(var(--tyb-header-h) + .75rem));
}
.tyb-hero6__kicker { margin-bottom: 1rem; gap: .7rem; letter-spacing: .22em; }
.tyb-hero6__kicker::before { width: 22px; }
/* The face (assets/img/callbar-face.jpg): 44px with a white ring, in place of the rule. */
.tyb-hero6__kicker--face::before { display: none; }
.tyb-hero6__kicker--face .tyb-hero6__face {
display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(10, 12, 16, .4);
}
.tyb-hero6 .tyb-hero__title { font-size: clamp(2rem, 1.2rem + 3.6vw, 2.35rem); line-height: 1.1; }
/* A headline's hand-set breaks are for desktop; a phone balances the lines itself. */
.tyb-hero6 .tyb-hero__title br { display: none; }
.tyb-hero6--long .tyb-hero__title { font-size: clamp(1.8rem, 1.1rem + 3.2vw, 2.1rem); }
.tyb-hero6 .tyb-hero__lede { margin-top: 1rem; max-width: none; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.tyb-hero6__chips { margin-top: .85rem; font-size: .78rem; }
.tyb-hero6__act { margin-top: 1.6rem; max-width: none; }
/* The bar stacks into one two-row control: the field, then a full-width button. */
.tyb-hero6__bar { flex-wrap: wrap; max-width: none; padding: 5px; }
.tyb-hero6__pin { margin-left: .7rem; }
.tyb-hero6__bar input { flex: 1 1 0; height: 50px; font-size: 1rem; }
.tyb-hero6__go { flex: 1 1 100%; height: 50px; margin-top: 5px; font-size: .8125rem; }
.tyb-hero6__go--solo { width: 100%; height: 54px; margin-top: 0; }
.tyb-hero6__note { display: none; }
}
/* ── The figures directly under a photo band: a white strip ───────────────
parts/figures.php adds .tyb-nums5--light when the band sits directly under
another photo band, which with the default order is the hero. Numerals in
the brand's dark color, hairlines between them, no photograph. The hero's
four-color stripe is the only seam. */
.tyb-nums5--light {
padding-block: clamp(2.25rem, 4.2vw, 3.6rem);
background: #fff;
color: var(--tyb-ink);
border-bottom: 1px solid var(--tyb-line);
}
.tyb-nums5--light .tyb-nums5__list { margin-top: 0; column-gap: 0; }
.tyb-nums5--light .tyb-nums5__list li {
padding: .35rem 0 .35rem clamp(1.25rem, 2.6vw, 2.5rem);
border-top: 0;
border-left: 1px solid var(--tyb-line);
}
.tyb-nums5--light .tyb-nums5__list li:first-child { padding-left: 0; border-left: 0; }
.tyb-nums5--light .tyb-nums5__num { font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem); line-height: 1; color: var(--tyb-deep); }
.tyb-nums5--light .tyb-nums5__note { margin-top: .7rem; color: var(--tyb-muted); }
@media (max-width: 640px) {
.tyb-nums5--light { padding-block: 1.9rem; }
.tyb-nums5--light .tyb-nums5__list { row-gap: 0; column-gap: 0; margin-top: 0; }
.tyb-nums5--light .tyb-nums5__list li { padding: 1.05rem 0 1.05rem 1.25rem; }
.tyb-nums5--light .tyb-nums5__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
.tyb-nums5--light .tyb-nums5__list li:nth-child(n+3) { border-top: 1px solid var(--tyb-line); }
.tyb-nums5--light .tyb-nums5__list li:nth-child(-n+2) { padding-top: 0; }
.tyb-nums5--light .tyb-nums5__list li:nth-last-child(-n+2):nth-child(odd),
.tyb-nums5--light .tyb-nums5__list li:last-child { padding-bottom: 0; }
.tyb-nums5--light .tyb-nums5__num { font-size: 2.75rem; }
.tyb-nums5--light .tyb-nums5__note { margin-top: .5rem; }
}
/* ── The plain sections take turns on the two light grounds ───────────────
front-page.php adds one of these to each plain section in the order it
renders them, so reordering never puts two sections on the same ground
back to back. They replace the fixed grounds set per section in the SLEEK
HOME block. */
.tyb-ground--shell { background: var(--tyb-shell); }
.tyb-ground--white { background: #fff; }
/* ── B1: a row of cards never scrolls up and down inside itself ───────────
Adam, on his phone: "i can scroll up and down within an inner section of
the properties." Measured at 390 on the listings row: scrollHeight 368
against clientHeight 352, overflow-y computed `auto`. Two causes together.
(1) overflow-x: auto on the track turns overflow-y into auto as well.
(2) Each card waits for its scroll-reveal 16px below its place, and the
cards still off to the right never get revealed, so the row's content was
16px taller than its box for good.
So the track is closed top to bottom, and a card inside a row fades in
without moving. Swiping sideways and the snap are untouched, and a finger
moving up or down on a card scrolls the page (touch-action is left alone). */
.tyb-slider__track { overflow-y: hidden; }
html.js .tyb-slider__track [data-tyb-reveal],
html.js .tyb-slider__track [data-tyb-reveal].is-in { transform: none; }
/* ── The logo over the home hero is quieter ───────────────────────────────
The lockup's name and the H1 begin with the same two words, one directly
above the other, and at its full size the logo was as large as the H1: the
name read as printed twice. Over the hero (transparent masthead, home page
only) the logo starts smaller: about 210px wide for the generated 3:1
lockup, 150px on a phone. It still eases down to the scrolled size, and the
bar's own height does not change, so nothing below moves. */
.tyb-mast--transparent.tyb-home { --tyb-logo-max: 70px; }
@media (max-width: 900px) {
.tyb-mast--transparent.tyb-home { --tyb-logo-max: 50px; }
}
/* ── Inner banners speak the hero's language ──────────────────────────────
One short gold line before the kicker, as on the home hero (it was the
four-color dash: two versions of one element). The sentence is balanced
and kept to a measure, so it never leaves one word alone on a line. */
.tyb-banner .tyb-eyebrow::before { width: 32px; height: 2px; background: var(--tyb-gold-lt); }
.tyb-banner__lede { max-width: 38rem; text-wrap: balance; }
/* A bright photograph used to fade to bare white at the banner's right edge
(the scrim pools bottom left and was nothing at the far side), so the
banner looked unfinished against the page. A light shade grows toward the
right edge; the words' side is unchanged. */
@media (min-width: 901px) {
.tyb-banner__scrim {
background:
radial-gradient(ellipse 115% 150% at 0% 100%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-banner, .55)) 0%,
rgba(var(--tyb-scrim5), var(--tyb-scrim-banner, .55)) 55%,
rgba(var(--tyb-scrim5), 0) 100%),
linear-gradient(to top, rgba(var(--tyb-scrim5), .2), rgba(var(--tyb-scrim5), 0) 70%),
linear-gradient(to right, rgba(var(--tyb-scrim5), 0) 45%, rgba(var(--tyb-scrim5), .22) 100%);
}
}
/* ── The valuation page says the address back ─────────────────────────────
templates/home-valuation.php prints "Your valuation for " as the
form's heading when the visitor arrives from the hero's bar. An address can
be one long unbroken string. */
.tyb-val-addr { text-wrap: balance; overflow-wrap: anywhere; }
/* ── H6: the filled phone and envelope sit on the text's baseline ─────────
tyb_icon( 'phone' ) and ( 'mail' ) are filled drawings now (functions.php). */
/* ═════════════════════════ end SIMPLE HERO 2026-10-04 ═════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — the page lock
(The round-5 tile menu that filled this block was removed in ROUND 9
2026-10-05. The phone menu is now the four blocks headed "ROUND 9
2026-10-05 — the phone menu" at the end of this file.) What is left is
shared with the popup: theme.js locks the page behind either of them.
═══════════════════════════════════════════════════════════════════════════ */
/* The lock both sheets (the menu and the popup) put on the page behind. */
html.tyb-lock { overflow: hidden; }
html.tyb-lock body { padding-right: var(--tyb-sbw, 0px); }
/* the burger is a link to #tyb-menu, so the menu opens with JavaScript off */
.tyb-burger { text-decoration: none; }
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — the popup
parts/enquiry-modal.php. The enquiry form as the agent's own card: their
color, name and face (when assets/img/callbar-face.jpg exists) on one side,
the short form on the other. NO phone number anywhere in it.
Every rule is scoped under .tyb-pop (the modal root carries "tyb-modal
tyb-pop"), so it outranks the older .tyb-modal rules without !important and
touches no inline form and not the search notice.
Three shapes, one markup:
<= 640px a bottom sheet, the same family as the phone menu: 28px top
corners, a grab handle, in over .42s and out over .26s
641-899px the same stack as a centered card
>= 900px two columns: the agent on the color panel, the form beside it
WHAT A BUILD MAY SET (on .tyb-pop, in its own block after this one):
--tyb-pop-ground the color of the agent's side (default the brand). This one
and --tyb-pop-star (the stars on it) are in the first
:root, written by scripts/set-palette.py
--tyb-pop-band the band at the join (default the palette's other
three colors; a black-and-white palette sets one
accent color here)
--tyb-pop-wash how much brand covers the desktop photograph (.88)
Motion is transform + opacity only, and is off under reduced motion.
═══════════════════════════════════════════════════════════════════════════ */
.tyb-pop {
/* --tyb-pop-ground and --tyb-pop-star are in the first :root (round 7). */
/* three colors, not four: the fourth is the ground the band sits on */
--tyb-pop-band: linear-gradient(90deg, var(--tyb-surf) 0 33.34%, var(--tyb-coral) 33.34% 66.67%, var(--tyb-dune) 66.67% 100%);
--tyb-pop-wash: .88;
--tyb-pop-out: cubic-bezier(.16, 1, .3, 1);
--tyb-pop-in: cubic-bezier(.5, 0, .9, .4);
z-index: 310;
padding: 24px;
transition: opacity .26s linear, visibility .26s linear;
-webkit-tap-highlight-color: transparent;
}
.tyb-pop .tyb-modal__veil {
background: rgba(var(--tyb-ink-rgb), .62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ------------------------------------------------------------- the card -- */
.tyb-pop .tyb-modal__panel {
display: flex;
flex-direction: column;
width: 100%;
max-width: 30rem;
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
padding: 0;
overflow: hidden;
background: var(--tyb-shell);
border-radius: 20px;
box-shadow: 0 2px 6px rgba(var(--tyb-ink-rgb), .12), 0 32px 72px -24px rgba(var(--tyb-ink-rgb), .55);
outline: 0;
opacity: 0;
transform: translateY(18px) scale(.975);
transition: transform .26s var(--tyb-pop-in), opacity .2s linear;
}
.tyb-pop.is-open .tyb-modal__panel {
opacity: 1;
transform: none;
transition: transform .42s var(--tyb-pop-out), opacity .22s linear;
}
.tyb-pop .tyb-modal__panel::before { content: none; }
.tyb-pop .tyb-modal__panel.is-dragging { transition: none !important; }
/* -------------------------------------------------- the identity (color) -- */
.tyb-pop__id {
position: relative;
flex: none;
display: flex;
align-items: center;
min-height: 88px;
padding: 20px 68px 18px 20px;
color: #fff;
background-color: var(--tyb-pop-ground);
overflow: hidden;
}
/* The palette, as one band along the join between color and form. */
.tyb-pop__id::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 6px;
background: var(--tyb-pop-band);
}
/* A soft light, top left, so the color has depth and is not a flat block. */
.tyb-pop__id::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(160deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .16) 100%);
pointer-events: none;
}
.tyb-pop__card { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; }
.tyb-pop__scene { display: none; }
.tyb-pop__handle { display: none; }
.tyb-pop__face {
flex: none;
display: block;
width: 58px; height: 58px;
border-radius: 50%;
object-fit: cover;
background: var(--tyb-brand-pale);
box-shadow: 0 0 0 2px var(--tyb-pop-ground), 0 0 0 4px var(--tyb-dune);
margin-left: 4px;
}
.tyb-pop__who { min-width: 0; }
.tyb-pop__name {
margin: 0;
font-family: var(--tyb-display);
font-size: 1.625rem;
font-weight: 400;
line-height: 1.08;
letter-spacing: -.005em;
color: #fff;
overflow-wrap: anywhere;
}
.tyb-pop__firm {
margin: 5px 0 0;
font-family: var(--tyb-body-font);
font-size: .6875rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: .18em;
text-transform: uppercase;
color: #fff;
opacity: .9;
}
.tyb-firmcase .tyb-pop__firm { text-transform: none; letter-spacing: .04em; font-size: .8125rem; }
/* The agent's one line belongs to the wide card only. */
.tyb-pop__about { display: none; }
.tyb-pop__proof {
display: flex;
align-items: center;
gap: 8px;
margin: 7px 0 0;
font-family: var(--tyb-body-font);
font-size: .8125rem;
font-weight: 600;
line-height: 1;
color: #fff;
}
.tyb-pop__stars { display: flex; color: var(--tyb-dune); }
.tyb-pop__stars svg { display: block; width: 70px; height: 14px; }
/* ------------------------------------------------------------- the close -- */
.tyb-pop .tyb-modal__close {
top: 18px; right: 12px;
z-index: 2;
width: 48px; height: 48px;
min-width: 48px; min-height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
color: #fff;
font-size: 0;
transition: background .18s linear, transform .18s var(--tyb-ease);
}
.tyb-pop .tyb-modal__close:hover { background: rgba(255, 255, 255, .3); color: #fff; border-color: transparent; }
.tyb-pop .tyb-modal__close:active { transform: scale(.92); }
.tyb-pop .tyb-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* -------------------------------------------------------------- the form -- */
.tyb-pop__body {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 18px 20px 20px;
background: var(--tyb-shell);
}
.tyb-pop .tyb-modal__head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; text-align: left; }
.tyb-pop__headtxt { min-width: 0; flex: 1 1 auto; }
.tyb-pop .tyb-modal__head h2 {
margin: 0;
padding: 0;
font-family: var(--tyb-display);
font-size: 1.75rem;
font-weight: 400;
line-height: 1.12;
letter-spacing: -.01em;
color: var(--tyb-ink);
text-wrap: balance;
}
.tyb-pop__line {
margin: 4px 0 0;
font-family: var(--tyb-body-font);
font-size: .9375rem;
line-height: 1.4;
color: var(--tyb-muted);
}
.tyb-pop__line[hidden], .tyb-pop__thumb[hidden], .tyb-pop [hidden] { display: none !important; }
/* In the listing context the line is the address: it reads as a label, with
the listing's own photograph beside the heading. */
.tyb-pop__line.is-address {
display: flex;
align-items: flex-start;
gap: 5px;
font-size: .875rem;
font-weight: 600;
line-height: 1.35;
color: var(--tyb-brand);
text-wrap: balance;
}
.tyb-pop__line.is-address::before {
content: '';
flex: none;
width: 15px; height: 15px;
margin-top: 2px;
background: var(--tyb-coral);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8a5.2 5.2 0 0 0-5.2 5.2c0 3.7 4.3 8.5 4.7 8.9a.7.7 0 0 0 1 0c.4-.4 4.7-5.2 4.7-8.9A5.2 5.2 0 0 0 8 .8zm0 7.1a1.9 1.9 0 1 1 0-3.8 1.9 1.9 0 0 1 0 3.8z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8a5.2 5.2 0 0 0-5.2 5.2c0 3.7 4.3 8.5 4.7 8.9a.7.7 0 0 0 1 0c.4-.4 4.7-5.2 4.7-8.9A5.2 5.2 0 0 0 8 .8zm0 7.1a1.9 1.9 0 1 1 0-3.8 1.9 1.9 0 0 1 0 3.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tyb-pop__thumb {
flex: none;
width: 56px; height: 56px;
border-radius: 12px;
object-fit: cover;
background: var(--tyb-tint);
box-shadow: 0 0 0 1px var(--tyb-line);
}
.tyb-pop .tyb-form { display: grid; gap: 9px; margin: 0; }
.tyb-pop .tyb-form.is-sending { opacity: 1; }
.tyb-pop .tyb-field { gap: 4px; margin: 0; }
.tyb-pop .tyb-field__row { display: grid; grid-template-columns: 1fr; gap: 9px; }
/* The order on screen: address (a valuation), name, phone + email, the line
about them, the message, a failed send's note, the button. The note about
a missing phone or email takes the hint's own slot, under the two fields
it is about. Visual order only: the note is a live region, read out
wherever it sits. */
.tyb-pop .tyb-form > .tyb-field--addr { order: 1; }
.tyb-pop .tyb-form > .tyb-field--name { order: 2; }
.tyb-pop .tyb-form > .tyb-field__row { order: 3; }
.tyb-pop .tyb-form > .tyb-form__hint { order: 4; }
.tyb-pop .tyb-form > .tyb-field--message { order: 5; }
.tyb-pop .tyb-form > .tyb-form__note { order: 6; }
.tyb-pop .tyb-form > .tyb-form__note[data-tyb-reach-note] { order: 4; }
.tyb-pop .tyb-form > .tyb-form__send { order: 7; }
.tyb-pop .tyb-field label {
font-family: var(--tyb-body-font);
font-size: .8125rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--tyb-ink);
transition: color .15s linear;
}
.tyb-pop .tyb-field label span { color: inherit; }
.tyb-pop .tyb-field label .tyb-form__opt { font-weight: 400; font-style: normal; color: var(--tyb-muted); }
/* the field you are in: its label and its edge take the brand color */
.tyb-pop .tyb-field:focus-within > label { color: var(--tyb-brand); }
.tyb-pop .tyb-field input,
.tyb-pop .tyb-field textarea {
width: 100%;
margin: 0;
padding: 0 14px;
border: 1px solid var(--tyb-stone);
border-radius: 10px;
background: #fff;
box-shadow: none;
font-family: var(--tyb-body-font);
font-size: max(1rem, 16px);
line-height: 1.35;
color: var(--tyb-ink);
-webkit-appearance: none;
appearance: none;
transition: border-color .15s linear, box-shadow .15s linear, background .15s linear;
}
.tyb-pop .tyb-field input { height: 48px; min-height: 48px; }
/* one line tall; theme.js grows it with what is typed */
.tyb-pop .tyb-field textarea {
height: 48px; min-height: 48px; max-height: 132px;
padding-block: 12px;
resize: none;
overflow-y: auto;
}
.tyb-pop .tyb-field input::placeholder,
.tyb-pop .tyb-field textarea::placeholder { color: var(--tyb-faint); opacity: 1; }
.tyb-pop .tyb-field input:hover,
.tyb-pop .tyb-field textarea:hover { border-color: var(--tyb-brand); }
.tyb-pop .tyb-field input:focus,
.tyb-pop .tyb-field textarea:focus {
outline: 0;
border-color: var(--tyb-brand);
box-shadow: 0 0 0 1px var(--tyb-brand), 0 0 0 4px var(--tyb-surf);
}
.tyb-pop .tyb-field input[aria-invalid="true"] {
border-color: #B4301F;
box-shadow: 0 0 0 1px #B4301F;
background: #FFF8F6;
}
/* The line under phone and email, and the note that replaces it when both
are empty, share one slot that is always two lines tall: the sheet does not
move when the note appears. */
.tyb-pop .tyb-form__hint,
.tyb-pop .tyb-form__note[data-tyb-reach-note] {
min-height: 2.8em;
margin: -3px 0 -2px;
font-size: .8125rem;
line-height: 1.4;
}
.tyb-pop .tyb-form__hint { color: var(--tyb-muted); }
.tyb-pop .tyb-form:has(.tyb-form__note[data-tyb-reach-note]) .tyb-form__hint { display: none; }
.tyb-pop .tyb-form__note { min-height: 0; margin: 0; font-size: .8125rem; line-height: 1.4; }
.tyb-pop .tyb-form__note:empty { display: none; }
/* "Sending..." is said to a screen reader and shown on the button instead. */
.tyb-pop .tyb-form__note:not(.is-bad) {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.tyb-pop .tyb-form__note.is-bad {
display: flex;
align-items: flex-start;
gap: 7px;
font-weight: 600;
color: #A3281A;
}
.tyb-pop .tyb-form__note.is-bad::before {
content: '!';
flex: none;
width: 16px; height: 16px;
margin-top: 1px;
border-radius: 50%;
background: #B4301F;
font-size: .6875rem;
font-weight: 700;
line-height: 16px;
text-align: center;
color: #fff;
}
.tyb-pop .tyb-form__send {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 54px; min-height: 54px;
margin-top: 2px;
padding: 0 20px;
border: 0;
border-radius: 12px;
background: var(--tyb-coral);
box-shadow: 0 10px 22px -12px var(--tyb-coral-dk);
font-family: var(--tyb-body-font);
font-size: .875rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
transition: background .18s linear, transform .1s var(--tyb-ease), box-shadow .18s linear;
}
.tyb-pop .tyb-form__send:hover {
background: var(--tyb-coral-dk);
border-color: transparent;
color: #fff;
transform: none;
box-shadow: 0 12px 24px -12px var(--tyb-coral-dk);
}
.tyb-pop .tyb-form__send:active { transform: scale(.985); }
.tyb-pop .tyb-form__send:focus-visible { outline: 2px solid var(--tyb-deep); outline-offset: 3px; }
/* The arrow: drawn, so it takes the button's own color and loads nothing. */
.tyb-pop .tyb-form__send::after {
content: '';
flex: none;
width: 18px; height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h11M10 4.5L14.5 9 10 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h11M10 4.5L14.5 9 10 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s var(--tyb-ease);
}
.tyb-pop .tyb-form__send:hover::after { transform: translateX(3px); }
/* Sending: the arrow becomes a spinner; the button cannot be pressed twice. */
.tyb-pop .tyb-form.is-sending .tyb-form__send { pointer-events: none; background: var(--tyb-coral-dk); }
.tyb-pop .tyb-form.is-sending .tyb-form__send::after {
-webkit-mask: none; mask: none;
background: none;
border: 2px solid rgba(255, 255, 255, .45);
border-top-color: #fff;
border-radius: 50%;
width: 16px; height: 16px;
animation: tyb-pop-spin .7s linear infinite;
}
@keyframes tyb-pop-spin { to { transform: rotate(360deg); } }
/* --------------------------------------------------------- the thank-you -- */
.tyb-pop__done { display: none; }
.tyb-pop.is-sent .tyb-pop__head,
.tyb-pop.is-sent .tyb-form { display: none; }
.tyb-pop.is-sent .tyb-pop__done {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 1 auto;
padding: 20px 8px;
text-align: center;
outline: 0;
}
.tyb-pop__tick {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 76px; height: 76px;
border-radius: 50%;
background: var(--tyb-surf-pale);
color: var(--tyb-coral);
}
.tyb-pop__tick svg { display: block; width: 76px; height: 76px; }
.tyb-pop__tick-ring { stroke: var(--tyb-surf); stroke-dasharray: 158; stroke-dashoffset: 0; transform-origin: 50% 50%; transform: rotate(-90deg); }
.tyb-pop__tick-mark { stroke-dasharray: 34; stroke-dashoffset: 0; }
/* With a face, the agent is the one thanking them: the face, and the check as
a badge on it. */
.tyb-pop__tick--face { background: none; box-shadow: 0 0 0 3px var(--tyb-shell), 0 0 0 5px var(--tyb-dune); }
.tyb-pop__tick--face img { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.tyb-pop__tick--face svg {
position: absolute;
right: -8px; bottom: -6px;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--tyb-coral);
box-shadow: 0 0 0 3px var(--tyb-shell);
color: #fff;
}
.tyb-pop__tick--face .tyb-pop__tick-ring { stroke: transparent; }
.tyb-pop__tick--face .tyb-pop__tick-mark { stroke-width: 5; }
.tyb-pop.is-sent .tyb-pop__tick { animation: tyb-pop-pop .5s var(--tyb-pop-out) both; }
.tyb-pop.is-sent .tyb-pop__tick-ring { animation: tyb-pop-ring .6s .1s var(--tyb-ease) both; }
.tyb-pop.is-sent .tyb-pop__tick-mark { animation: tyb-pop-mark .34s .5s var(--tyb-ease) both; }
.tyb-pop.is-sent .tyb-pop__done-title,
.tyb-pop.is-sent .tyb-pop__done-text,
.tyb-pop.is-sent .tyb-pop__done-rule,
.tyb-pop.is-sent .tyb-pop__done-btn { animation: tyb-pop-rise .5s .28s var(--tyb-pop-out) both; }
.tyb-pop.is-sent .tyb-pop__done-text { animation-delay: .34s; }
.tyb-pop.is-sent .tyb-pop__done-rule { animation-delay: .4s; }
.tyb-pop.is-sent .tyb-pop__done-btn { animation-delay: .46s; }
@keyframes tyb-pop-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes tyb-pop-ring { from { stroke-dashoffset: 158; } to { stroke-dashoffset: 0; } }
@keyframes tyb-pop-mark { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes tyb-pop-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tyb-pop__done-title {
margin: 20px 0 0;
font-family: var(--tyb-display);
font-size: 2rem;
font-weight: 400;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--tyb-ink);
overflow-wrap: anywhere;
}
.tyb-pop__done-text {
max-width: 22em;
margin: 10px 0 0;
font-size: 1rem;
line-height: 1.5;
color: var(--tyb-body);
}
.tyb-pop__done-rule {
display: block;
width: 72px; height: 4px;
margin: 22px 0 0;
border-radius: 2px;
background: var(--tyb-rule4);
}
.tyb-pop__done-btn {
min-width: 168px;
height: 52px;
margin: 24px 0 0;
padding: 0 28px;
border: 0;
border-radius: 12px;
background: var(--tyb-brand);
font-family: var(--tyb-body-font);
font-size: .875rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
cursor: pointer;
transition: background .18s linear, transform .1s var(--tyb-ease);
}
.tyb-pop__done-btn:hover { background: var(--tyb-deep); color: #fff; }
.tyb-pop__done-btn:active { transform: scale(.985); }
.tyb-pop__done-btn:focus-visible { outline: 2px solid var(--tyb-deep); outline-offset: 3px; }
/* ------------------------------------------------- the stagger on opening -- */
.tyb-pop .tyb-pop__card,
.tyb-pop .tyb-pop__head,
.tyb-pop .tyb-form {
opacity: 0;
transform: translateY(10px);
transition: none;
}
.tyb-pop.is-open .tyb-pop__card,
.tyb-pop.is-open .tyb-pop__head,
.tyb-pop.is-open .tyb-form {
opacity: 1;
transform: none;
transition: opacity .32s linear, transform .5s var(--tyb-pop-out);
}
.tyb-pop.is-open .tyb-pop__card { transition-delay: .1s; }
.tyb-pop.is-open .tyb-pop__head { transition-delay: .16s; }
.tyb-pop.is-open .tyb-form { transition-delay: .22s; }
/* ------------------------------------------------ phones: a bottom sheet -- */
@media (max-width: 640px) {
.tyb-pop { align-items: flex-end; padding: 0; }
.tyb-pop .tyb-modal__panel {
max-width: none;
max-height: calc(100vh - 10px);
max-height: calc(100dvh - 10px);
border-radius: 28px 28px 0 0;
box-shadow: 0 -18px 50px -18px rgba(var(--tyb-ink-rgb), .5);
opacity: 1;
transform: translateY(104%);
transition: transform .26s var(--tyb-pop-in);
}
.tyb-pop.is-open .tyb-modal__panel {
transform: none;
transition: transform .42s var(--tyb-pop-out);
}
/* the color bar is what the sheet is pulled down by */
.tyb-pop__id { min-height: 92px; padding: 22px 68px 18px 16px; touch-action: none; -webkit-user-select: none; user-select: none; }
.tyb-pop__handle {
display: block;
position: absolute;
top: 8px; left: 50%;
width: 40px; height: 4px;
margin-left: -20px;
border-radius: 2px;
background: #fff;
opacity: .42;
}
.tyb-pop .tyb-modal__close { top: 22px; }
.tyb-pop__body {
padding: 12px 16px 16px;
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.tyb-pop .tyb-modal__head { margin-bottom: 10px; }
.tyb-pop .tyb-modal__head h2 { font-size: 1.625rem; }
.tyb-pop .tyb-form { gap: 8px; }
.tyb-pop .tyb-field__row { gap: 8px; }
}
/* Short phones (an iPhone SE in Safari, about 550px of page): tighten a
little so the sheet still does not scroll. */
@media (max-width: 640px) and (max-height: 620px) {
.tyb-pop__id { min-height: 68px; padding-top: 18px; padding-bottom: 14px; }
.tyb-pop__name { font-size: 1.375rem; }
.tyb-pop__face { width: 44px; height: 44px; }
.tyb-pop .tyb-modal__close { top: 12px; }
.tyb-pop__body { padding-top: 10px; }
.tyb-pop .tyb-modal__head { margin-bottom: 8px; }
.tyb-pop .tyb-modal__head h2 { font-size: 1.4375rem; }
.tyb-pop .tyb-form { gap: 7px; }
.tyb-pop .tyb-field__row { grid-template-columns: 1fr 1fr; gap: 8px; }
.tyb-pop .tyb-field input, .tyb-pop .tyb-field textarea { height: 46px; min-height: 46px; }
.tyb-pop .tyb-field textarea { padding-block: 11px; }
.tyb-pop .tyb-form__send { height: 50px; min-height: 50px; }
}
/* A phone on its side, or any short window: the form is taller than the
screen, so the form scrolls under the color bar (which, with the close
button, stays put). Phone and email share a row to shorten the trip. */
@media (min-width: 641px) and (max-width: 899px) and (max-height: 620px) {
.tyb-pop .tyb-field__row { grid-template-columns: 1fr 1fr; }
}
/* ------------------------------------------ wide screens: the two columns -- */
@media (min-width: 900px) {
.tyb-pop .tyb-modal__panel {
flex-direction: row;
max-width: 880px;
min-height: 548px;
background: #fff;
}
.tyb-pop__id {
flex: 0 0 328px;
align-items: center;
min-height: 0;
padding: 44px 40px 44px 36px;
}
/* the band runs down the join */
.tyb-pop__id::after {
left: auto; top: 0; right: 0; bottom: 0;
width: 6px; height: auto;
background: linear-gradient(180deg,
var(--tyb-surf) 0 33.34%, var(--tyb-coral) 33.34% 66.67%, var(--tyb-dune) 66.67% 100%);
}
.tyb-pop__id::before {
background:
radial-gradient(90% 60% at 0% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .2) 100%);
}
/* face, name, firm, the one line and the review total: one group, centered
in the height of the panel */
.tyb-pop__card { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
.tyb-pop__face {
width: 120px; height: 120px;
margin: 0 0 28px 5px;
box-shadow: 0 0 0 3px var(--tyb-pop-ground), 0 0 0 5px var(--tyb-dune);
}
.tyb-pop__name { font-size: 2.375rem; line-height: 1.02; letter-spacing: -.015em; }
.tyb-pop__firm { margin-top: 12px; font-size: .75rem; letter-spacing: .2em; }
.tyb-pop__about {
display: block;
margin: 24px 0 0;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .26);
font-family: var(--tyb-body-font);
font-size: 1.0625rem;
line-height: 1.5;
color: #fff;
}
.tyb-pop__proof { margin-top: 20px; font-size: .875rem; gap: 10px; }
.tyb-pop__stars svg { width: 80px; height: 16px; }
/* No face: the market's own photograph under the brand color, and the name
set larger. Never initials. */
.tyb-pop__panel--scene .tyb-pop__scene {
display: block;
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.tyb-pop__panel--scene .tyb-pop__id::before {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .22) 100%),
var(--tyb-pop-ground);
opacity: var(--tyb-pop-wash);
z-index: 1;
}
.tyb-pop__panel--scene .tyb-pop__card { z-index: 2; }
.tyb-pop__panel--scene .tyb-pop__id::after { z-index: 2; }
.tyb-pop__panel:not(.tyb-pop__panel--face) .tyb-pop__name { font-size: 2.75rem; }
.tyb-pop .tyb-modal__close {
top: 16px; right: 16px;
background: var(--tyb-brand-pale);
color: var(--tyb-ink);
}
.tyb-pop .tyb-modal__close:hover { background: var(--tyb-brand-lt); color: var(--tyb-ink); }
.tyb-pop .tyb-modal__close:focus-visible { outline-color: var(--tyb-deep); }
.tyb-pop__body {
justify-content: center;
padding: 44px 48px 40px;
background: #fff;
}
.tyb-pop .tyb-modal__head { margin-bottom: 20px; padding-right: 40px; }
.tyb-pop .tyb-modal__head h2 { font-size: 2.125rem; }
.tyb-pop__line { margin-top: 8px; font-size: 1rem; }
.tyb-pop__line.is-address { font-size: .9375rem; }
.tyb-pop__thumb { width: 64px; height: 64px; }
.tyb-pop .tyb-form { gap: 13px; }
.tyb-pop .tyb-field { gap: 6px; }
.tyb-pop .tyb-field__row { grid-template-columns: 1fr 1fr; gap: 14px; }
.tyb-pop .tyb-field input { height: 50px; min-height: 50px; }
.tyb-pop .tyb-field textarea { height: 76px; min-height: 76px; }
.tyb-pop .tyb-form__hint,
.tyb-pop .tyb-form__note[data-tyb-reach-note] { min-height: 1.4em; margin: -5px 0 -2px; }
.tyb-pop .tyb-form__send { height: 56px; min-height: 56px; }
.tyb-pop__tick--face { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tyb-dune); }
.tyb-pop__tick--face svg { box-shadow: 0 0 0 3px #fff; }
}
/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
.tyb-pop,
.tyb-pop .tyb-modal__panel,
.tyb-pop.is-open .tyb-modal__panel,
.tyb-pop .tyb-pop__card,
.tyb-pop .tyb-pop__head,
.tyb-pop .tyb-form,
.tyb-pop.is-open .tyb-pop__card,
.tyb-pop.is-open .tyb-pop__head,
.tyb-pop.is-open .tyb-form,
.tyb-pop .tyb-form__send,
.tyb-pop .tyb-form__send::after,
.tyb-pop .tyb-modal__close,
.tyb-pop .tyb-field label,
.tyb-pop__done-btn { transition: none !important; }
.tyb-pop .tyb-modal__panel { transform: none; opacity: 0; }
.tyb-pop.is-open .tyb-modal__panel { opacity: 1; }
.tyb-pop .tyb-pop__card,
.tyb-pop .tyb-pop__head,
.tyb-pop .tyb-form { transform: none; }
.tyb-pop.is-sent .tyb-pop__tick,
.tyb-pop.is-sent .tyb-pop__tick-ring,
.tyb-pop.is-sent .tyb-pop__tick-mark,
.tyb-pop.is-sent .tyb-pop__done-title,
.tyb-pop.is-sent .tyb-pop__done-text,
.tyb-pop.is-sent .tyb-pop__done-rule,
.tyb-pop.is-sent .tyb-pop__done-btn { animation: none !important; }
.tyb-pop .tyb-form.is-sending .tyb-form__send::after { animation-duration: 1.6s; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — the review cards
Adam: "colored testimonial cards... use the brokers color palette... less
fancy, frigid, and more inviting to read and browse, but still impressive."
One solid brand card and pale washes of the other palette colors, by
position (c1 to c4), so no two neighbors share a color in three columns,
two or one. Sans-serif text. No shadows. The tokens (--tyb-rvb-*,
--tyb-rvs2..4-*, --tyb-rv-star) are in :root, written as hex by
scripts/set-palette.py.
Markup (parts/reviews.php, parts/review-card.php, templates/testimonials.php):
section.tyb-rv[.tyb-rv--one | .tyb-rv--page] > .tyb-wrap.tyb-rv__in >
header.tyb-rv__head > .tyb-kick5 + .tyb-rv__line > h2.tyb-rv__total + .tyb-rv__stars
.tyb-rv__grid.tyb-rv__grid--n{1-6} | --all > figure.tyb-rvc.tyb-rvc--c{1-4}[.tyb-rvc--lead]
p.tyb-rv__more > a.tyb-rv__all
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
.tyb-rv { padding-block: var(--tyb-band5); }
.tyb-rv.tyb-rv--page { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--tyb-band5); }
}
.tyb-rv.tyb-rv--page { padding-top: 2rem; }
.tyb-rv__in {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "grid" "more";
}
.tyb-rv__head { grid-area: head; min-width: 0; margin-bottom: 1.25rem; }
.tyb-rv__grid { grid-area: grid; }
.tyb-rv .tyb-rv__more { grid-area: more; margin: 0; padding-top: 1rem; }
/* ------------------------------------------------------------- the heading -- */
.tyb-rv__head .tyb-kick5 { margin-bottom: .75rem; }
.tyb-rv__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; }
/* The total, as a heading the size of the other section headings: a number
AND its word on one line, not a numeral standing alone. */
.tyb-rv__total {
margin: 0;
font-family: var(--tyb-display);
font-weight: 400;
font-size: clamp(2.75rem, 1.5rem + 3.6vw, 4.5rem);
line-height: .95;
letter-spacing: -.025em;
color: var(--tyb-ink);
}
.tyb-rv__total strong { font-weight: 400; color: var(--tyb-coral-dk); }
.tyb-rv__plain { margin: 0; }
.tyb-rv__stars {
flex: none;
font-size: 1.1rem;
line-height: 1;
letter-spacing: .14em;
color: var(--tyb-coral-dk);
white-space: nowrap;
transform: translateY(-.2em);
}
/* "Read all reviews": one link. A full-width button under the cards on a
phone, a pill beside the heading from 641px. */
.tyb-rv__all {
display: flex;
align-items: center;
justify-content: center;
gap: .7rem;
min-height: 52px;
padding: 0 1.25rem;
border: 1px solid var(--tyb-ink);
border-radius: 999px;
font-family: var(--tyb-body-font);
font-size: .9375rem;
font-weight: 600;
color: var(--tyb-ink);
transition: background-color .25s var(--tyb-ease), color .25s var(--tyb-ease);
}
.tyb-rv__all .tyb-arrow5 { width: 22px; }
@media (hover: hover) {
.tyb-rv__all:hover { background: var(--tyb-ink); color: #fff; }
.tyb-rv__all:hover .tyb-arrow5 { transform: translateX(4px); }
}
.tyb-rv__all:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: 3px; }
/* ---------------------------------------------------------------- the card -- */
.tyb-rvc {
--rv-bg: #fff;
--rv-line: transparent;
--rv-ink: var(--tyb-ink);
--rv-meta: var(--tyb-body);
--rv-accent: var(--tyb-brand);
--rv-on-accent: #fff;
--rv-star: var(--tyb-rv-star);
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
padding: 1.5rem;
border: 1px solid var(--rv-line);
border-radius: 16px;
background: var(--rv-bg);
color: var(--rv-ink);
}
/* c1: the solid brand card. The disc is the light ink with the brand as its letter. */
.tyb-rvc--c1 {
--rv-bg: var(--tyb-rvb-bg); --rv-line: var(--tyb-rvb-bg);
--rv-ink: var(--tyb-rvb-ink); --rv-meta: var(--tyb-rvb-ink);
--rv-accent: var(--tyb-rvb-ink); --rv-on-accent: var(--tyb-rvb-bg);
--rv-star: var(--tyb-rvb-ink);
}
.tyb-rvc--c2 { --rv-bg: var(--tyb-rvs2-bg); --rv-line: var(--tyb-rvs2-line); --rv-accent: var(--tyb-rvs2-accent); }
.tyb-rvc--c3 { --rv-bg: var(--tyb-rvs3-bg); --rv-line: var(--tyb-rvs3-line); --rv-accent: var(--tyb-rvs3-accent); }
.tyb-rvc--c4 { --rv-bg: var(--tyb-rvs4-bg); --rv-line: var(--tyb-rvs4-line); --rv-accent: var(--tyb-rvs4-accent); }
.tyb-rvc__top {
align-self: stretch;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 1.5rem;
margin-bottom: .85rem;
}
.tyb-rvc__stars { font-size: 1rem; line-height: 1; letter-spacing: .12em; color: var(--rv-star); white-space: nowrap; }
/* The quote mark, on the lead card only. The glyph hangs below its box so the
row stays one line tall. */
.tyb-rvc__mark {
margin-left: auto;
font-family: var(--tyb-display);
font-size: 4.5rem;
line-height: 1;
height: 1.5rem;
color: var(--rv-accent);
opacity: .55;
}
.tyb-rvc__text {
margin: 0 0 1.25rem;
padding: 0;
border: 0;
font-family: var(--tyb-body-font);
font-style: normal;
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.6;
color: var(--rv-ink);
overflow-wrap: break-word;
}
.tyb-rvc__more {
margin: -.9rem 0 .75rem;
padding: 0;
min-height: 44px;
background: none;
border: 0;
font: inherit;
font-family: var(--tyb-body-font);
font-size: .9375rem;
font-weight: 600;
color: var(--rv-ink);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
cursor: pointer;
}
.tyb-rvc__more[hidden] { display: none; }
.tyb-rvc__more:focus-visible { outline: 2px solid var(--rv-ink); outline-offset: 2px; border-radius: 4px; }
/* The name row is pinned to the bottom, so cards in a row end on one line. */
.tyb-rvc__by {
margin-top: auto;
display: flex;
align-items: center;
gap: .75rem;
min-width: 0;
}
.tyb-rvc__av {
flex: none;
display: grid;
place-items: center;
width: 2.5rem; height: 2.5rem;
border-radius: 50%;
background: var(--rv-accent);
color: var(--rv-on-accent);
font-family: var(--tyb-body-font);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1;
}
.tyb-rvc__who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tyb-rvc .tyb-quote__name { font-family: var(--tyb-body-font); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--rv-ink); }
.tyb-rvc .tyb-quote__via { font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--rv-meta); }
/* The Google G keeps its own four colors, on a white disc so it reads on any card. */
.tyb-rvc .tyb-gmark { box-sizing: content-box; width: .95em; height: .95em; padding: 2px; border-radius: 50%; background: #fff; transform: none; }
/* ---------------------------------------------------------------- the grid -- */
.tyb-rv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
/* Clamps, only with scripting on (theme.js adds html.tyb-clamp and shows
"Read more" only where the clamp cuts something). Phone first. */
html.tyb-clamp .tyb-rvc__text:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
html.tyb-clamp .tyb-rvc--lead .tyb-rvc__text:not(.is-open) { -webkit-line-clamp: 6; line-clamp: 6; }
html.tyb-clamp .tyb-rv__grid--all .tyb-rvc__text:not(.is-open) { -webkit-line-clamp: 7; line-clamp: 7; }
@media (max-width: 640px) {
/* On the home page a phone gets three cards; the rest are one tap away. */
.tyb-rv:not(.tyb-rv--page) .tyb-rv__grid > .tyb-rvc:nth-child(n+4) { display: none; }
}
@media (min-width: 641px) {
.tyb-rv__in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head more" "grid grid"; column-gap: 1.5rem; }
.tyb-rv--page .tyb-rv__in { display: block; }
.tyb-rv__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.tyb-rv__head .tyb-kick5 { margin-bottom: 1rem; }
.tyb-rv .tyb-rv__more { align-self: end; margin: 0; padding-bottom: calc(clamp(1.5rem, 3vw, 2.5rem) + .5rem); }
.tyb-rv__all { display: inline-flex; min-height: 46px; font-size: .9rem; }
.tyb-rv__stars { font-size: 1.2rem; }
.tyb-rv__grid { gap: 1rem; }
.tyb-rvc { padding: 1.75rem; border-radius: 18px; }
.tyb-rv__grid--n2, .tyb-rv__grid--n3, .tyb-rv__grid--n4, .tyb-rv__grid--n5, .tyb-rv__grid--n6, .tyb-rv__grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tyb-rv__grid--n3 > .tyb-rvc--lead, .tyb-rv__grid--n5 > :first-child { grid-column: 1 / -1; }
.tyb-rv__grid--n1 { grid-template-columns: minmax(0, 52rem); }
.tyb-rvc--lead { padding: clamp(1.75rem, 3.2vw, 2.5rem); }
.tyb-rvc--lead .tyb-rvc__text { font-size: clamp(1.2rem, .85rem + .75vw, 1.5rem); line-height: 1.48; letter-spacing: -.008em; }
.tyb-rvc--lead .tyb-rvc__mark { font-size: 6rem; }
html.tyb-clamp .tyb-rvc__text:not(.is-open) { -webkit-line-clamp: 5; line-clamp: 5; }
html.tyb-clamp .tyb-rvc--lead .tyb-rvc__text:not(.is-open) { -webkit-line-clamp: 7; line-clamp: 7; }
html.tyb-clamp .tyb-rv__grid--n2 .tyb-rvc__text:not(.is-open),
html.tyb-clamp .tyb-rv__grid--all .tyb-rvc__text:not(.is-open) { -webkit-line-clamp: 7; line-clamp: 7; }
}
@media (min-width: 1041px) {
.tyb-rv__grid { gap: 1.25rem; }
.tyb-rvc { padding: 2rem; }
/* One large and two: the lead takes the left and both rows. */
.tyb-rv__grid--n3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.tyb-rv__grid--n3 > .tyb-rvc--lead { grid-column: 1; grid-row: 1 / span 2; }
html.tyb-clamp .tyb-rv__grid--n3 .tyb-rvc--lead .tyb-rvc__text:not(.is-open) { -webkit-line-clamp: 9; line-clamp: 9; }
html.tyb-clamp .tyb-rv__grid--n3 .tyb-rvc:not(.tyb-rvc--lead) .tyb-rvc__text:not(.is-open) { -webkit-line-clamp: 4; line-clamp: 4; }
/* Five: the first is twice as wide, then four. Six and the page: three across. */
.tyb-rv__grid--n5, .tyb-rv__grid--n6, .tyb-rv__grid--all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tyb-rv__grid--n5 > :first-child { grid-column: span 2; }
/* One review: the heading at the left, the card at the right. */
.tyb-rv--one .tyb-rv__in {
grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
grid-template-areas: "head grid" "more grid";
column-gap: clamp(2rem, 5vw, 5rem);
}
.tyb-rv--one .tyb-rv__head { align-self: end; margin-bottom: 1.5rem; }
.tyb-rv.tyb-rv--one .tyb-rv__more { align-self: start; margin: 0; padding: 0; }
.tyb-rv--one .tyb-rv__grid--n1 { grid-template-columns: minmax(0, 1fr); }
html.tyb-clamp .tyb-rv__grid--n1 .tyb-rvc__text:not(.is-open) { -webkit-line-clamp: 8; line-clamp: 8; }
}
@media (prefers-reduced-motion: reduce) {
.tyb-rv__all, .tyb-rv__all .tyb-arrow5 { transition: none; }
.tyb-rv__all:hover .tyb-arrow5 { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — the three tiles
Adam: "the individual boxes need to be restyled i dont like that. keep it
modern simple sleek functional, not too much... remove that same section
from mobile. keep it on desktop though just change spot."
A clean photograph; under it the label and a small arrow on one line.
Nothing is printed on the photograph. New classes (.tyb-intro6, .tyb-tile6)
so the town tiles, which share .tyb-tile5, are untouched.
Markup (parts/intro-tiles.php):
section.tyb-intro5.tyb-intro6 > .tyb-wrap > .tyb-intro5__top + ul.tyb-tiles6 >
li.tyb-tiles6__item > a.tyb-tile6 > span.tyb-tile6__ph > img.tyb-tile6__img
+ span.tyb-tile6__label > span.tyb-tile6__name + svg.tyb-arrow5
═══════════════════════════════════════════════════════════════════════════ */
/* Not on phones. The three images are loading="lazy", so with the section
not displayed a phone never requests them. */
@media (max-width: 640px) { .tyb-intro6 { display: none; } }
@media (min-width: 641px) {
/* Near the bottom of the page: shorter than the sections above it. */
.tyb-intro6 { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
}
.tyb-intro6 .tyb-intro5__top { align-items: end; }
.tyb-intro6 .tyb-intro5__text { max-width: 44ch; }
.tyb-tiles6 {
list-style: none;
margin: clamp(2rem, 3.4vw, 3rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.25rem, 2.4vw, 2rem);
}
.tyb-tiles6__item { min-width: 0; display: grid; }
.tyb-tiles6__item:nth-child(1) { --t6: var(--tyb-brand); }
.tyb-tiles6__item:nth-child(2) { --t6: var(--tyb-surf-dk); }
.tyb-tiles6__item:nth-child(3) { --t6: var(--tyb-coral-dk); }
.tyb-tile6 {
position: relative;
display: block;
border-radius: var(--tyb-radius5);
color: var(--tyb-ink);
-webkit-tap-highlight-color: transparent;
}
.tyb-tile6:hover, .tyb-tile6:focus-visible { color: var(--tyb-ink); }
.tyb-tile6__ph {
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--tyb-radius5);
background: var(--tyb-tint-2);
}
.tyb-tile6__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--tyb-ease); }
.tyb-tile6__label {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem .1rem .95rem;
border-bottom: 1px solid var(--tyb-line);
}
/* The line that draws itself under the label, in this tile's palette color. */
.tyb-tile6__label::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--t6, var(--tyb-brand));
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .4s var(--tyb-ease);
}
.tyb-tile6__name {
font-family: var(--tyb-display);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.15;
letter-spacing: -.01em;
}
.tyb-tile6 .tyb-arrow5 { width: 26px; margin-top: .5rem; color: var(--t6, var(--tyb-brand)); stroke-width: 1.4; transition: transform .4s var(--tyb-ease); }
.tyb-tile6:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: 5px; }
.tyb-tile6:focus-visible .tyb-tile6__label::after { transform: scaleX(1); }
@media (hover: hover) {
.tyb-tile6:hover .tyb-tile6__img { transform: scale(1.04); }
.tyb-tile6:hover .tyb-arrow5 { transform: translateX(4px); }
.tyb-tile6:hover .tyb-tile6__label::after { transform: scaleX(1); }
}
@media (max-width: 1040px) {
.tyb-intro6 .tyb-intro5__top { grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.tyb-intro6 .tyb-intro5__text { max-width: 60ch; }
.tyb-tiles6 { gap: 1rem; }
.tyb-tile6__name { font-size: 1.25rem; }
.tyb-tile6 .tyb-arrow5 { width: 22px; margin-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
.tyb-tile6__img, .tyb-tile6 .tyb-arrow5 { transition: none; }
.tyb-tile6__label::after { transition: none; }
.tyb-tile6:hover .tyb-tile6__img, .tyb-tile6:hover .tyb-arrow5 { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — the properties archive
Adam: "move those tabs up, theres currently a big block above them. remove
that unneeded white space."
The block was an empty section (archive-properties.php, now gone). This is
the one section left: the tabs sit directly under the banner, as plain
sans-serif pills a thumb can hit, and the cards follow closely.
═══════════════════════════════════════════════════════════════════════════ */
.tyb-arch { padding-block: 1.5rem clamp(3.5rem, 7vw, 6rem); }
.tyb-arch .tyb-search__result { margin: 0 0 1.25rem; }
.tyb-arch .tyb-filters {
gap: .5rem;
margin-bottom: 1.5rem;
padding-bottom: 0;
border-bottom: 0;
}
.tyb-arch .tyb-filter {
min-height: 44px;
padding: 0 1.1rem;
font-family: var(--tyb-body-font);
font-size: .9375rem;
font-weight: 600;
color: var(--tyb-ink);
}
.tyb-arch .tyb-filter.is-on { background: var(--tyb-brand); border-color: var(--tyb-brand); color: #fff; }
.tyb-arch .tyb-filter:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: 2px; }
@media (hover: hover) {
.tyb-arch .tyb-filter:not(.is-on):hover { border-color: var(--tyb-brand); color: var(--tyb-brand); }
}
@media (min-width: 641px) {
.tyb-arch { padding-top: 2.25rem; }
.tyb-arch .tyb-filters { margin-bottom: 2rem; }
}
@media (max-width: 640px) {
/* One row that slides sideways if a site has five tabs; never two rows of pills. */
.tyb-arch .tyb-filters {
flex-wrap: nowrap;
margin-inline: calc(var(--tyb-gutter) * -1);
padding-inline: var(--tyb-gutter);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.tyb-arch .tyb-filters::-webkit-scrollbar { display: none; }
.tyb-arch .tyb-filter { flex: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — the footer's agent sign-in
Adam: "have agent sign in link just there... make the button for it really
nice. maybe put it on the line above the legal pages."
One pill on its own line, directly above the legal links (footer.php):
a lock, the words, a small arrow. White type on the dark footer, a fine
light edge; it fills in on hover. 44px tall everywhere.
═══════════════════════════════════════════════════════════════════════════ */
.tyb-foot__legal-in .tyb-foot__signin { margin: 14px 0 6px; }
.tyb-foot__legal-in .tyb-signin {
display: inline-flex;
align-items: center;
gap: .6rem;
min-height: 44px;
padding: 0 1.1rem 0 .95rem;
border: 1px solid rgba(255, 255, 255, .34);
border-radius: 999px;
background: rgba(255, 255, 255, .06);
font-family: var(--tyb-body-font);
font-size: .875rem;
font-weight: 600;
letter-spacing: .01em;
line-height: 1;
color: #fff;
text-decoration: none;
transition: background-color .25s var(--tyb-ease), border-color .25s var(--tyb-ease), color .25s var(--tyb-ease);
}
.tyb-signin__lock { flex: none; color: var(--tyb-gold-lt); transition: color .25s var(--tyb-ease); }
.tyb-signin__go { flex: none; opacity: .7; transition: transform .25s var(--tyb-ease), opacity .25s var(--tyb-ease); }
.tyb-foot__legal-in .tyb-signin:focus-visible { outline: 3px solid var(--tyb-gold-lt); outline-offset: 3px; }
@media (hover: hover) {
.tyb-foot__legal-in .tyb-signin:hover { background: #fff; border-color: #fff; color: var(--tyb-deep); }
.tyb-signin:hover .tyb-signin__lock { color: var(--tyb-deep); }
.tyb-signin:hover .tyb-signin__go { transform: translateX(3px); opacity: 1; }
}
.tyb-foot__legal-in .tyb-signin:active { background: rgba(255, 255, 255, .16); }
@media (prefers-reduced-motion: reduce) {
.tyb-signin, .tyb-signin__lock, .tyb-signin__go { transition: none; }
.tyb-signin:hover .tyb-signin__go { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — the single property page
Adam: "add a property too so we know its perfect."
single-properties.php, in the home page's grammar: a large thin serif
address, the photographs, the facts on one hairline row, the description,
and the ask box. Phone first.
Markup:
article.tyb-prop >
header.tyb-prop__head > .tyb-crumb + .tyb-prop__titles > .tyb-prop__name + .tyb-prop__money
.tyb-prop__media > .tyb-pg.tyb-pg--n{1-5}[.is-live] > ul.tyb-pg__track > li.tyb-pg__item > button.tyb-pg__open > img
+ .tyb-pg__count + button.tyb-pg__all
dialog.tyb-lb > .tyb-lb__bar + .tyb-lb__track > figure.tyb-lb__slide + button.tyb-lb__nav
.tyb-prop__body > ul.tyb-prop__facts + aside.tyb-prop__aside > .tyb-ask + .tyb-prop__prose
section.tyb-pmore > .tyb-pmore__head + .tyb-pmore__grid > .tyb-card
═══════════════════════════════════════════════════════════════════════════ */
.tyb-prop { padding-block: 1.25rem 0; }
.tyb-prop__head { margin-bottom: 1.1rem; }
.tyb-prop .tyb-crumb { margin: 0 0 .9rem; font-size: .8125rem; color: var(--tyb-muted); }
.tyb-prop .tyb-crumb a { color: var(--tyb-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tyb-line); }
.tyb-prop__titles { display: flex; flex-direction: column; gap: .9rem; }
.tyb-prop__title {
margin: 0;
font-family: var(--tyb-display);
font-weight: 400;
font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.5rem);
line-height: 1.02;
letter-spacing: -.022em;
color: var(--tyb-ink);
text-wrap: balance;
}
.tyb-prop__town {
margin: .55rem 0 0;
font-size: .75rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tyb-muted);
}
.tyb-prop__money { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.tyb-prop__price {
order: -1;
margin: 0;
font-family: var(--tyb-display);
font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.75rem);
line-height: 1;
letter-spacing: -.015em;
color: var(--tyb-brand);
}
.tyb-prop__status {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
padding: 0 .65rem;
border-radius: 2px;
background: var(--tyb-brand);
font-size: .6875rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: #fff;
}
.tyb-prop__status--closed { background: var(--tyb-ink); }
.tyb-prop__status--sale_pending, .tyb-prop__status--coming_soon { background: var(--tyb-coral-dk); }
.tyb-prop__repd { flex: 1 1 100%; margin: 0; font-size: .875rem; color: var(--tyb-muted); }
/* ------------------------------------------------------- the photographs -- */
.tyb-prop__media { margin-bottom: 0; }
/* No photograph: the address plate. Its ratio and its minimum height together
made it wider than a phone (427px in a 350px column, measured), so here it
is as wide as the column and as tall as it needs to be. */
.tyb-prop__media .tyb-plate { width: 100%; max-width: 100%; aspect-ratio: auto; min-height: clamp(13rem, 34vw, 24rem); border-radius: 10px; }
.tyb-pg { position: relative; }
.tyb-pg__track { list-style: none; margin: 0; padding: 0; }
.tyb-pg__item { min-width: 0; margin: 0; }
.tyb-pg__open {
display: block;
width: 100%; height: 100%;
margin: 0; padding: 0;
border: 0;
border-radius: 0;
background: var(--tyb-tint-2);
overflow: hidden;
cursor: default;
-webkit-tap-highlight-color: transparent;
}
.tyb-pg.is-live .tyb-pg__open { cursor: zoom-in; }
.tyb-pg__img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tyb-pg__open:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: -3px; }
.tyb-pg__count, .tyb-pg__all {
position: absolute;
right: .75rem; bottom: .75rem;
display: inline-flex;
align-items: center;
gap: .5rem;
border-radius: 999px;
font-family: var(--tyb-body-font);
font-size: .8125rem;
font-weight: 600;
line-height: 1;
}
.tyb-pg__count { padding: .5rem .75rem; background: rgba(12, 18, 22, .72); color: #fff; pointer-events: none; font-variant-numeric: tabular-nums; }
.tyb-pg__count b { font-weight: 600; }
.tyb-pg__all { display: none; }
@media (max-width: 899px) {
/* One photograph at a time, edge to edge, swiped sideways. The row scrolls
sideways ONLY (overflow-y hidden, no touch-action override), so a finger
moving up or down on a photograph scrolls the page. */
.tyb-pg { margin-inline: calc(var(--tyb-gutter) * -1); }
.tyb-pg__track {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.tyb-pg__track::-webkit-scrollbar { display: none; }
.tyb-pg__item { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.tyb-pg__open { height: auto; }
}
@media (min-width: 900px) {
/* One large photograph and up to four beside it. With scripting on the
rest are in the viewer; with it off they simply follow in more rows. */
.tyb-pg { --pg-row: clamp(150px, 16.2vw, 236px); }
.tyb-pg__track {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
grid-auto-rows: var(--pg-row);
gap: 8px;
border-radius: 10px;
overflow: hidden;
}
.tyb-pg__item:first-child { grid-column: 1; grid-row: 1 / span 2; }
.tyb-pg__img { aspect-ratio: auto; transition: transform .6s var(--tyb-ease), filter .3s var(--tyb-ease); }
.tyb-pg.is-live .tyb-pg__item:nth-child(n+6) { display: none; }
/* Fewer than five: the grid still closes into one clean rectangle. */
.tyb-pg--n1 .tyb-pg__track { grid-template-columns: minmax(0, 1fr); }
.tyb-pg--n1 .tyb-pg__img { aspect-ratio: 16 / 9; max-height: 72vh; }
.tyb-pg--n1 .tyb-pg__item:first-child { grid-row: auto; }
.tyb-pg--n1 .tyb-pg__track { grid-auto-rows: auto; }
.tyb-pg--n2 .tyb-pg__track { grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr); }
.tyb-pg--n2 .tyb-pg__item:nth-child(2) { grid-row: 1 / span 2; }
.tyb-pg--n3 .tyb-pg__track { grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr); }
.tyb-pg--n4 .tyb-pg__item:nth-child(2) { grid-column: 2 / span 2; }
.tyb-pg__count { display: none; }
.tyb-pg.is-live .tyb-pg__all:not([hidden]) {
display: inline-flex;
right: 1rem; bottom: 1rem;
min-height: 44px;
padding: 0 1.1rem;
border: 0;
background: #fff;
color: var(--tyb-ink);
font-size: .875rem;
cursor: pointer;
box-shadow: 0 1px 2px rgba(12, 18, 22, .18), 0 6px 18px -8px rgba(12, 18, 22, .45);
transition: background-color .25s var(--tyb-ease), color .25s var(--tyb-ease);
}
.tyb-pg__all:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: 3px; }
}
@media (min-width: 900px) and (hover: hover) {
.tyb-pg.is-live .tyb-pg__open:hover .tyb-pg__img { transform: scale(1.03); filter: brightness(.94); }
.tyb-pg.is-live .tyb-pg__all:hover { background: var(--tyb-ink); color: #fff; }
}
/* ----------------------------------------------------------- the viewer -- */
.tyb-lb {
width: 100vw; height: 100vh; height: 100dvh;
max-width: none; max-height: none;
margin: 0; padding: 0;
border: 0;
background: rgb(10, 14, 18);
color: #fff;
overflow: hidden;
}
.tyb-lb::backdrop { background: rgb(10, 14, 18); }
.tyb-lb[open] { display: flex; flex-direction: column; animation: tyb-lb-in .22s ease-out both; }
@keyframes tyb-lb-in { from { opacity: 0; } to { opacity: 1; } }
.tyb-lb__bar {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: max(.5rem, env(safe-area-inset-top)) .75rem .5rem 1.25rem;
}
.tyb-lb__count { font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tyb-lb__count b { font-weight: 600; }
.tyb-lb__close, .tyb-lb__nav {
display: grid;
place-items: center;
width: 48px; height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
cursor: pointer;
transition: background-color .2s var(--tyb-ease);
}
.tyb-lb__close:focus-visible, .tyb-lb__nav:focus-visible, .tyb-lb__track:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tyb-lb__track:focus-visible { outline-offset: -3px; }
.tyb-lb__track {
flex: 1 1 auto;
min-height: 0;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior: contain;
}
.tyb-lb__track::-webkit-scrollbar { display: none; }
.tyb-lb__slide {
flex: 0 0 100%;
min-width: 0;
margin: 0;
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
padding: 0 0 max(1rem, env(safe-area-inset-bottom));
scroll-snap-align: center;
scroll-snap-stop: always;
}
.tyb-lb__slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tyb-lb__nav { position: absolute; top: 50%; margin-top: -24px; display: none; }
.tyb-lb__nav--prev { left: 1rem; }
.tyb-lb__nav--next { right: 1rem; }
.tyb-lb__nav[disabled] { opacity: .3; cursor: default; }
@media (min-width: 900px) {
.tyb-lb__nav { display: grid; }
.tyb-lb__slide { padding: 0 5.5rem 1.5rem; }
.tyb-lb__bar { padding: 1rem 1rem .75rem 1.75rem; }
}
@media (hover: hover) {
.tyb-lb__close:hover, .tyb-lb__nav:not([disabled]):hover { background: rgba(255, 255, 255, .26); }
}
/* ---------------------------------- the facts, the ask box, the description -- */
.tyb-prop__body { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 1.5rem 3.5rem; }
/* Only the facts the listing has, in a row of equal columns that wraps. No
boxes: one hairline above and one below, so there is never an empty cell. */
.tyb-prop__facts {
list-style: none;
margin: 0;
padding: 1.1rem 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1rem .75rem;
border-block: 1px solid var(--tyb-line);
}
.tyb-prop__facts li { min-width: 0; }
.tyb-prop__fact {
display: block;
font-family: var(--tyb-display);
font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
line-height: 1.05;
letter-spacing: -.01em;
color: var(--tyb-ink);
overflow-wrap: break-word;
}
.tyb-prop__factlabel {
display: block;
margin-top: .35rem;
font-size: .6875rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--tyb-muted);
}
.tyb-prop__aside { margin-top: 1.5rem; }
.tyb-ask {
border: 1px solid var(--tyb-line);
border-radius: 14px;
background: #fff;
overflow: hidden;
}
/* Whose listing it is, on the brand color with the four-color rule under it. */
.tyb-ask__who {
position: relative;
display: flex;
align-items: center;
gap: .8rem;
padding: 1rem 1.25rem 1.1rem;
background: var(--tyb-brand);
color: #fff;
}
.tyb-ask__who::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tyb-rule4); }
.tyb-ask__face { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--tyb-gold-lt); }
.tyb-ask__id { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.tyb-ask__name { font-family: var(--tyb-display); font-size: 1.375rem; line-height: 1.1; color: #fff; }
.tyb-ask__firm { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
body.tyb-firmcase .tyb-ask__firm { text-transform: none; letter-spacing: .02em; font-size: .8125rem; }
.tyb-ask__in { padding: 1.25rem 1.25rem 1.35rem; }
.tyb-ask__title { margin: 0 0 .45rem; font-family: var(--tyb-display); font-weight: 400; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.01em; color: var(--tyb-ink); }
.tyb-ask__text { margin: 0 0 1.1rem; font-size: .9375rem; line-height: 1.55; color: var(--tyb-body); }
.tyb-ask .tyb-ask__go { width: 100%; min-height: 52px; justify-content: center; }
.tyb-ask__call {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 48px;
margin-top: .6rem;
border: 1px solid var(--tyb-line);
border-radius: 999px;
font-family: var(--tyb-body-font);
font-size: .9375rem;
font-weight: 600;
color: var(--tyb-ink);
transition: border-color .25s var(--tyb-ease);
}
.tyb-ask__call .tyb-icon { color: var(--tyb-brand); }
.tyb-ask__call:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: 2px; }
@media (hover: hover) { .tyb-ask__call:hover { border-color: var(--tyb-ink); color: var(--tyb-ink); } }
.tyb-prop__prose { margin-top: 2.25rem; }
.tyb-prop__h {
margin: 0 0 1rem;
font-family: var(--tyb-display);
font-weight: 400;
font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
line-height: 1.08;
letter-spacing: -.015em;
color: var(--tyb-ink);
}
.tyb-prop__prose .tyb-prose { max-width: 66ch; font-size: 1.0625rem; line-height: 1.7; color: var(--tyb-body); }
.tyb-prop__prose .tyb-prose p { margin: 0 0 1.1em; }
.tyb-prop__prose .tyb-prose p:last-child { margin-bottom: 0; }
@media (min-width: 641px) {
.tyb-prop { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.tyb-prop__head { margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); }
.tyb-prop__titles { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.tyb-prop__money { flex: none; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: .6rem; text-align: right; }
.tyb-prop__price { order: 0; }
.tyb-prop__repd { flex: none; }
/* From a tablet up: one row at natural widths, spread edge to edge. It
wraps only when a listing's facts are too long for the line. */
.tyb-prop__facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 2rem; padding: 1.4rem 0; }
.tyb-prop__facts li { flex: 0 1 auto; }
.tyb-prop__fact { font-size: clamp(1.5rem, 1.1rem + .9vw, 1.875rem); white-space: nowrap; }
}
@media (min-width: 900px) {
.tyb-prop__body {
grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
grid-template-rows: auto 1fr;
column-gap: clamp(2.5rem, 5vw, 4.5rem);
align-items: start;
padding-block: clamp(2rem, 3.5vw, 3rem) clamp(4rem, 7vw, 6.5rem);
}
.tyb-prop__facts { grid-column: 1; grid-row: 1; }
.tyb-prop__prose { grid-column: 1; grid-row: 2; margin-top: clamp(2.25rem, 4vw, 3.25rem); }
/* The ask box stays in view while the text beside it scrolls. */
.tyb-prop__aside {
grid-column: 2; grid-row: 1 / span 2;
position: sticky;
top: calc(var(--tyb-bar-min) + 1.5rem);
align-self: start;
margin-top: 0;
}
.tyb-ask__in { padding: 1.5rem 1.5rem 1.6rem; }
.tyb-ask__who { padding: 1.1rem 1.5rem 1.2rem; }
}
/* --------------------------------------------------------- more listings -- */
.tyb-pmore { background: var(--tyb-shell); padding-block: clamp(3.5rem, 7vw, 6rem); }
.tyb-pmore__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.tyb-pmore__head .tyb-h5 { margin: 0; }
.tyb-pmore__all {
flex: none;
display: inline-flex;
align-items: center;
gap: .7rem;
min-height: 46px;
padding: 0 1.25rem;
border: 1px solid var(--tyb-ink);
border-radius: 999px;
font-size: .9rem;
font-weight: 600;
color: var(--tyb-ink);
transition: background-color .25s var(--tyb-ease), color .25s var(--tyb-ease);
}
.tyb-pmore__all .tyb-arrow5 { width: 22px; }
.tyb-pmore__all:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: 3px; }
@media (hover: hover) {
.tyb-pmore__all:hover { background: var(--tyb-ink); color: #fff; }
.tyb-pmore__all:hover .tyb-arrow5 { transform: translateX(4px); }
}
/* Three across the cards are narrow: price, street, town and the numbers
stack, as they do on a phone. */
.tyb-pmore .tyb-card__body { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; padding-top: 1rem; }
.tyb-pmore .tyb-card__price { grid-column: 1; grid-row: 1; }
.tyb-pmore .tyb-card__title { grid-column: 1; grid-row: 2; }
.tyb-pmore .tyb-card__addr { grid-column: 1; grid-row: 3; margin-top: .25rem; }
.tyb-pmore .tyb-card__specs { grid-column: 1; grid-row: 4; justify-content: flex-start; }
.tyb-pmore__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
@media (min-width: 641px) { .tyb-pmore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
@media (min-width: 1041px) { .tyb-pmore__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
/* Two across on a tablet: the third card would sit alone, so it waits for three columns. */
@media (min-width: 641px) and (max-width: 1040px) { .tyb-pmore__grid > .tyb-card:nth-child(3) { display: none; } }
@media (max-width: 640px) {
.tyb-pmore__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.tyb-lb[open] { animation: none; }
.tyb-pg__img, .tyb-pg__all, .tyb-lb__close, .tyb-lb__nav, .tyb-ask__call, .tyb-pmore__all, .tyb-pmore__all .tyb-arrow5 { transition: none; }
.tyb-pg.is-live .tyb-pg__open:hover .tyb-pg__img { transform: none; }
.tyb-pmore__all:hover .tyb-arrow5 { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — forms match the popup
Two form styles were visible on one site: the popup (bold sans labels,
rounded fields, a coral sans button with an arrow) and every form on a page
(serif small-cap labels, square fields, a navy serif small-cap button). The
popup is the newer and the one Adam asked for, so the inline form
(.tyb-form--inline: the contact page, the valuation page, the home page's
lead band) and the listing ask box's button take its label, field and
button. Sizes that belong to each place (the lead band's short message box)
are left alone.
Rendered markup:
form.tyb-form.tyb-form--inline > .tyb-field > label + input|textarea
… > p.tyb-form__hint, button.tyb-btn.tyb-form__send, p.tyb-form__note
.tyb-ask button.tyb-btn.tyb-btn--accent.tyb-ask__go
═══════════════════════════════════════════════════════════════════════════ */
.tyb-form--inline .tyb-field { gap: 5px; }
.tyb-form--inline .tyb-field label {
font-family: var(--tyb-body-font);
font-size: .8125rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--tyb-ink);
transition: color .15s linear;
}
.tyb-form--inline .tyb-field label span { color: inherit; }
.tyb-form--inline .tyb-field label .tyb-form__opt { font-weight: 400; font-style: normal; color: var(--tyb-muted); }
.tyb-form--inline .tyb-field:focus-within > label { color: var(--tyb-brand); }
.tyb-form--inline .tyb-field input,
.tyb-form--inline .tyb-field textarea {
padding-inline: 14px;
border: 1px solid var(--tyb-stone);
border-radius: 10px;
background: #fff;
box-shadow: none;
font-family: var(--tyb-body-font);
font-size: max(1rem, 16px);
line-height: 1.35;
color: var(--tyb-ink);
transition: border-color .15s linear, box-shadow .15s linear, background .15s linear;
}
.tyb-form--inline .tyb-field input { height: 50px; min-height: 50px; padding-block: 0; }
.tyb-form--inline .tyb-field textarea { padding-block: 12px; }
.tyb-form--inline .tyb-field input::placeholder,
.tyb-form--inline .tyb-field textarea::placeholder { color: var(--tyb-faint); opacity: 1; }
@media (hover: hover) {
.tyb-form--inline .tyb-field input:hover,
.tyb-form--inline .tyb-field textarea:hover { border-color: var(--tyb-brand); }
}
.tyb-form--inline .tyb-field input:focus,
.tyb-form--inline .tyb-field textarea:focus {
outline: 0;
border-color: var(--tyb-brand);
box-shadow: 0 0 0 1px var(--tyb-brand), 0 0 0 4px var(--tyb-surf);
}
.tyb-form--inline .tyb-field input[aria-invalid="true"] {
border-color: #B4301F;
box-shadow: 0 0 0 1px #B4301F;
background: #FFF8F6;
}
.tyb-form--inline .tyb-form__hint { font-size: .8125rem; line-height: 1.4; color: var(--tyb-muted); }
/* The button: the popup's. Sans, tracked, the palette's warm color, an arrow
that is drawn (so it takes the button's own color and loads nothing). */
.tyb-form--inline .tyb-form__send,
.tyb-ask .tyb-ask__go {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 54px;
padding: 0 20px;
border: 0;
border-radius: 12px;
background: var(--tyb-coral);
box-shadow: 0 10px 22px -12px var(--tyb-coral-dk);
filter: none;
font-family: var(--tyb-body-font);
font-size: .875rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
transition: background .18s linear, transform .1s var(--tyb-ease), box-shadow .18s linear;
}
.tyb-form--inline .tyb-form__send:hover,
.tyb-ask .tyb-ask__go:hover {
background: var(--tyb-coral-dk);
border-color: transparent;
filter: none;
color: #fff;
transform: none;
box-shadow: 0 12px 24px -12px var(--tyb-coral-dk);
}
.tyb-form--inline .tyb-form__send:active,
.tyb-ask .tyb-ask__go:active { transform: scale(.985); }
.tyb-form--inline .tyb-form__send:focus-visible,
.tyb-ask .tyb-ask__go:focus-visible { outline: 2px solid var(--tyb-deep); outline-offset: 3px; }
.tyb-form--inline .tyb-form__send::after,
.tyb-ask .tyb-ask__go::after {
content: '';
flex: none;
width: 18px; height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h11M10 4.5L14.5 9 10 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h11M10 4.5L14.5 9 10 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s var(--tyb-ease);
}
@media (hover: hover) {
.tyb-form--inline .tyb-form__send:hover::after,
.tyb-ask .tyb-ask__go:hover::after { transform: translateX(3px); }
}
.tyb-form--inline.is-sending { opacity: 1; }
.tyb-form--inline.is-sending .tyb-form__send { pointer-events: none; background: var(--tyb-coral-dk); }
@media (prefers-reduced-motion: reduce) {
.tyb-form--inline .tyb-form__send, .tyb-form--inline .tyb-form__send::after,
.tyb-ask .tyb-ask__go, .tyb-ask .tyb-ask__go::after { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — the call pill on phones (review fix)
The full pill (face or phone, the number, the firm) is about 215px wide at
the bottom right of a phone, and as the page scrolled it sat on whatever
passed under it: review bylines, the listing facts, the ask box's header.
On a phone it now folds to its round face-or-phone button while the page
is being scrolled DOWN past the first 200px, and opens again the moment the
page is scrolled back up (theme.js adds .is-mini; the "call pill" block).
Nothing is laid out again: the pill keeps its size, slides right by its own
text and is clipped to the circle around its icon (transform + clip-path).
theme.js measures it once: --tyb-cb-x (how far to slide), --tyb-cb-l and
--tyb-cb-r (the clip either side of the circle).
On a single listing the pill also stays away while the facts row or the
ask box is on screen (two more of theme.js's "stay" zones, phones only).
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.tyb-callbar__call {
clip-path: inset(-40px -40px -40px -40px round 999px);
transition: transform .34s var(--tyb-ease), clip-path .34s var(--tyb-ease), box-shadow .22s var(--tyb-ease);
}
.tyb-callbar__txt { transition: opacity .18s linear; }
.tyb-callbar__call::after { transition: opacity .18s linear; }
.tyb-callbar.is-mini { filter: drop-shadow(0 6px 10px rgba(var(--tyb-ink-rgb), .32)); }
.tyb-callbar.is-mini .tyb-callbar__call {
transform: translateX(var(--tyb-cb-x, 0px));
clip-path: inset(0 var(--tyb-cb-r, 0px) 0 var(--tyb-cb-l, 0px) round 999px);
box-shadow: none;
}
.tyb-callbar.is-mini .tyb-callbar__txt,
.tyb-callbar.is-mini .tyb-callbar__call::after { opacity: 0; }
.tyb-callbar.is-mini .tyb-callbar__call:active { transform: translateX(var(--tyb-cb-x, 0px)) scale(.96); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
.tyb-callbar__call, .tyb-callbar__txt, .tyb-callbar__call::after { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 5 2026-10-04 — review stars and the testimonials page total (review fix)
Stars are graphics, not text, so 3:1 is their bar (WCAG 1.4.11). Held to
4.5:1 the gold came out a muddy olive brown on the pale cards. Each card
now has its own star color, written by scripts/set-palette.py
(--tyb-rvb-star, --tyb-rvs2..4-star): the palette's gold, bright. A theme
scaffolded before these tokens falls back to the old one.
The testimonials page prints the home section's header row (the total and
its stars) above the cards: header.tyb-rv__head.tyb-rv__head--page.
═══════════════════════════════════════════════════════════════════════════ */
.tyb-rvc--c1 { --rv-star: var(--tyb-rvb-star, var(--tyb-rvb-ink)); }
.tyb-rvc--c2 { --rv-star: var(--tyb-rvs2-star, var(--tyb-rv-star)); }
.tyb-rvc--c3 { --rv-star: var(--tyb-rvs3-star, var(--tyb-rv-star)); }
.tyb-rvc--c4 { --rv-star: var(--tyb-rvs4-star, var(--tyb-rv-star)); }
.tyb-rv__head--page { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.tyb-rv--page .tyb-filters + .tyb-rv__head--page { margin-top: 1.5rem; }
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 7 2026-10-05 — the For Sellers and For Buyers pages
templates/sellers.php and templates/buyers.php, in the home page's language.
New pieces: the page's ONE action as a white card half on the banner
(parts/page-action.php, .tyb-pact7), the four steps (parts/steps.php,
.tyb-steps7) and the questions (parts/faq-list.php, .tyb-faq7). The figures
strip, the listings row, the review card, the town tiles and the lead band
are the home page's own parts and keep their rules.
Markup:
div.tyb-pg7.tyb-pg7--sellers|--buyers
section.tyb-pact7 > .tyb-wrap > .tyb-pact7__card > .tyb-pact7__copy + .tyb-pact7__act
section.tyb-steps7 > .tyb-wrap > .tyb-steps7__head + ol.tyb-steps7__list > li.tyb-steps7__item
section.tyb-faq7 > .tyb-wrap.tyb-faq7__in > .tyb-faq7__head + .tyb-faq7__list > details.tyb-faq7__item
═══════════════════════════════════════════════════════════════════════════ */
/* The two light grounds, given in turn by tyb_page_stack(). Two classes, so
they win over each part's own ground wherever it was set. */
.tyb-pg7 > .tyb-ground--shell { background: var(--tyb-shell); }
.tyb-pg7 > .tyb-ground--white { background: #fff; }
.tyb-pg7 > .tyb-nums5--light { border-top: 1px solid var(--tyb-line); }
/* The banner makes room for the card that sits half on it, and a long
headline (three towns) breaks into even lines. */
.tyb-banner:has(+ .tyb-pg7) { padding-bottom: calc(clamp(2rem, 5vh, 3rem) + 3.75rem); }
.tyb-banner:has(+ .tyb-pg7) .tyb-banner__title { text-wrap: balance; }
/* ------------------------------------------------------- the one action -- */
.tyb-pact7 {
position: relative;
z-index: 3;
margin-top: -3.75rem;
padding-bottom: clamp(.5rem, 2vw, 1.5rem);
background: linear-gradient(to bottom, transparent 3.75rem, var(--tyb-shell) 3.75rem);
}
.tyb-pact7__card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 35rem);
gap: clamp(1.5rem, 4vw, 4.5rem);
align-items: center;
padding: clamp(1.9rem, 3.2vw, 3rem) clamp(1.5rem, 3.6vw, 3.5rem);
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(var(--tyb-scrim5), .08), 0 34px 64px -36px rgba(var(--tyb-scrim5), .5);
overflow: hidden;
}
/* The four palette colors along its top edge. */
.tyb-pact7__card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--tyb-rule4);
}
.tyb-pact7__copy .tyb-kick5 { margin-bottom: .9rem; }
.tyb-pact7__title {
font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.75rem);
line-height: 1.06;
letter-spacing: -.02em;
text-wrap: balance;
}
.tyb-pact7__text { margin: .8rem 0 0; max-width: 36ch; color: var(--tyb-muted); line-height: 1.55; }
.tyb-pact7__act { min-width: 0; }
/* The hero's bar on a light ground: a hairline edge, a quieter shadow, and
the note under it in ink. */
.tyb-hero6__bar--light {
box-shadow: 0 0 0 1px var(--tyb-line), 0 16px 32px -22px rgba(var(--tyb-scrim5), .45);
background: var(--tyb-shell);
}
.tyb-hero6__bar--light:focus-within { box-shadow: 0 0 0 2px var(--tyb-brand), 0 16px 32px -22px rgba(var(--tyb-scrim5), .45); }
.tyb-hero6__note--light { color: var(--tyb-muted); opacity: 1; text-shadow: none; }
/* The Buyers page's one button. */
.tyb-pact7__go {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
width: 100%;
min-height: 64px;
padding: .95rem 1.6rem;
border: 0;
border-radius: 8px;
background: var(--tyb-coral);
color: #fff;
font: 600 .875rem/1.3 var(--tyb-body-font);
letter-spacing: .08em;
text-transform: uppercase;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .2s var(--tyb-ease), transform .08s var(--tyb-ease);
}
.tyb-pact7__go .tyb-arrow5 { width: 26px; }
@media (hover: hover) {
.tyb-pact7__go:hover { background: var(--tyb-coral-dk); }
.tyb-pact7__go:hover .tyb-arrow5 { transform: translateX(5px); }
}
.tyb-pact7__go:focus-visible { background: var(--tyb-coral-dk); outline: 2px solid var(--tyb-deep); outline-offset: 3px; }
.tyb-pact7__go:active { transform: scale(.99); }
@media (max-width: 899px) {
.tyb-banner:has(+ .tyb-pg7) { padding-bottom: calc(clamp(2rem, 5vh, 3rem) + 2.75rem); }
.tyb-pact7 { margin-top: -2.75rem; background: linear-gradient(to bottom, transparent 2.75rem, var(--tyb-shell) 2.75rem); }
.tyb-pact7__card { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.tyb-pact7__card .tyb-hero6__bar { max-width: none; }
.tyb-pact7__text { max-width: none; }
}
/* ---------------------------------------------------------- the four steps -- */
@media (min-width: 641px) {
.tyb-steps7, .tyb-faq7 { padding-block: var(--tyb-band5); }
}
.tyb-steps7__head { margin-bottom: clamp(2.25rem, 4.6vw, 4.25rem); }
.tyb-steps7__list {
--gap7: clamp(1.25rem, 2.8vw, 3rem);
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(var(--tyb-n, 4), minmax(0, 1fr));
column-gap: var(--gap7);
row-gap: 2.75rem;
}
.tyb-steps7__item { position: relative; min-width: 0; }
/* The icon in a disc of one palette color, by position. The icon itself is
the dark ink on a pale wash, so it reads in any palette. */
.tyb-steps7__mark {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 76px; height: 76px;
border-radius: 50%;
background: var(--tyb-brand-pale);
color: var(--tyb-deep);
}
.tyb-steps7__mark .tyb-li { width: 30px; height: 30px; stroke-width: 1.4; }
.tyb-steps7__item:nth-child(4n+2) .tyb-steps7__mark { background: var(--tyb-rvs2-bg, var(--tyb-surf-pale)); }
.tyb-steps7__item:nth-child(4n+3) .tyb-steps7__mark { background: var(--tyb-rvs3-bg, var(--tyb-coral-pale)); }
.tyb-steps7__item:nth-child(4n+4) .tyb-steps7__mark { background: var(--tyb-rvs4-bg, var(--tyb-dune-pale)); }
/* One hairline through the row, from each disc to the next. */
.tyb-steps7__item::before {
content: '';
position: absolute;
top: 38px;
left: 92px;
right: calc(16px - var(--gap7));
height: 1px;
background: var(--tyb-line);
}
.tyb-steps7__item:last-child::before { right: 0; background: linear-gradient(to right, var(--tyb-line), transparent); }
.tyb-steps7__num {
display: block;
margin-top: 1.6rem;
font-family: var(--tyb-body-font);
font-size: .6875rem; font-weight: 600; line-height: 1.4; letter-spacing: .26em;
color: var(--tyb-muted);
}
.tyb-steps7__title {
margin: .45rem 0 .65rem;
font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem);
line-height: 1.08;
letter-spacing: -.015em;
}
.tyb-steps7__text { margin: 0; max-width: 32ch; font-size: .975rem; line-height: 1.6; color: var(--tyb-muted); }
@media (max-width: 1040px) and (min-width: 641px) {
.tyb-steps7__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tyb-steps7__item:nth-child(even)::before { right: 0; background: linear-gradient(to right, var(--tyb-line), transparent); }
}
/* A phone: the steps go down one line, the icon at the left of each. */
@media (max-width: 640px) {
.tyb-steps7__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.tyb-steps7__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1.15rem; padding-bottom: 2rem; }
.tyb-steps7__item:last-child { padding-bottom: 0; }
.tyb-steps7__mark { width: 56px; height: 56px; }
.tyb-steps7__mark .tyb-li { width: 24px; height: 24px; }
.tyb-steps7__item::before,
.tyb-steps7__item:last-child::before {
top: 64px; bottom: 8px; left: 28px; right: auto;
width: 1px; height: auto;
background: var(--tyb-line);
}
.tyb-steps7__item:last-child::before { display: none; }
.tyb-steps7__num { margin-top: .35rem; }
.tyb-steps7__title { margin: .3rem 0 .45rem; font-size: 1.5rem; }
.tyb-steps7__text { max-width: none; font-size: 1rem; }
}
/* ------------------------------------------------------------ the questions -- */
.tyb-faq7__in {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(2rem, 6vw, 6.5rem);
align-items: start;
}
.tyb-faq7__photo {
margin-top: clamp(1.75rem, 3.2vw, 2.75rem);
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--tyb-radius5);
background: var(--tyb-tint);
}
.tyb-faq7__img { width: 100%; height: 100%; object-fit: cover; }
.tyb-faq7__list { border-top: 1px solid var(--tyb-line); }
/* With no photograph the left column is only a heading: line the first
question up with it. */
.tyb-faq7:not(.tyb-faq7--photo) .tyb-faq7__list { margin-top: .4rem; }
.tyb-faq7__item { border-bottom: 1px solid var(--tyb-line); }
.tyb-faq7__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: 76px;
padding: 1.1rem 0;
list-style: none;
cursor: pointer;
font-family: var(--tyb-display);
font-size: clamp(1.3rem, 1.12rem + .65vw, 1.7rem);
line-height: 1.18;
letter-spacing: -.01em;
color: var(--tyb-ink);
-webkit-tap-highlight-color: transparent;
}
.tyb-faq7__q::-webkit-details-marker { display: none; }
.tyb-faq7__q::marker { content: ''; }
.tyb-faq7__q .tyb-li {
flex: none;
width: 24px; height: 24px;
padding: 9px;
box-sizing: content-box;
border: 1px solid var(--tyb-line);
border-radius: 50%;
color: var(--tyb-ink);
stroke-width: 1.4;
transition: transform .3s var(--tyb-ease), background-color .2s var(--tyb-ease), color .2s var(--tyb-ease), border-color .2s var(--tyb-ease);
}
.tyb-faq7__item[open] > .tyb-faq7__q .tyb-li { transform: rotate(45deg); background: var(--tyb-ink); border-color: var(--tyb-ink); color: #fff; }
@media (hover: hover) {
.tyb-faq7__q:hover .tyb-li { border-color: var(--tyb-ink); }
}
.tyb-faq7__q:focus-visible { outline: 2px solid var(--tyb-brand); outline-offset: 4px; border-radius: 4px; }
.tyb-faq7__a { margin: 0; padding: 0 4rem 1.75rem 0; max-width: 60ch; color: var(--tyb-body); line-height: 1.65; }
.tyb-faq7__more { margin: 2rem 0 0; }
.tyb-faq7__ask {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .8rem;
min-height: 52px;
padding: 0 1.5rem;
border: 1px solid var(--tyb-ink);
border-radius: 999px;
background: transparent;
font-family: var(--tyb-body-font);
font-size: .9375rem;
font-weight: 600;
color: var(--tyb-ink);
cursor: pointer;
transition: background-color .25s var(--tyb-ease), color .25s var(--tyb-ease);
}
.tyb-faq7__ask .tyb-arrow5 { width: 22px; }
@media (hover: hover) {
.tyb-faq7__ask:hover { background: var(--tyb-ink); color: #fff; }
.tyb-faq7__ask:hover .tyb-arrow5 { transform: translateX(4px); }
}
.tyb-faq7__ask:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: 3px; }
@media (max-width: 899px) {
.tyb-faq7__in { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.tyb-faq7__photo { aspect-ratio: 16 / 9; margin-top: 1.5rem; }
.tyb-faq7__a { padding-right: 0; }
.tyb-faq7__q { min-height: 68px; }
.tyb-faq7__ask { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.tyb-faq7__q .tyb-li, .tyb-pact7__go, .tyb-pact7__go .tyb-arrow5, .tyb-faq7__ask, .tyb-faq7__ask .tyb-arrow5 { transition: none; }
}
/* The listings row with only one or two homes (an agent's sold-as-listing-
side set is often that small). The home page's row is two large cards and
the edge of a third; with no third, two cards share the content column and
one card is a single large picture, and the arrows have nothing to do. */
@media (min-width: 901px) {
.tyb-pg7 .tyb-list5 .tyb-slider__track:has(> .tyb-slider__slide:nth-child(2):last-child) {
grid-auto-columns: calc((100% - 2rem) / 2);
margin-right: 0; padding-right: 0;
}
.tyb-pg7 .tyb-list5 .tyb-slider__track:has(> .tyb-slider__slide:only-child) {
grid-auto-columns: min(100%, 52rem);
margin-right: 0; padding-right: 0;
}
.tyb-pg7 .tyb-slider:has(.tyb-slider__slide:nth-child(2):last-child) .tyb-slider__btn { display: none; }
}
.tyb-pg7 .tyb-slider:has(.tyb-slider__slide:only-child) .tyb-slider__btn { display: none; }
/* ═════════════ end ROUND 7 2026-10-05 — the For Sellers and For Buyers pages ═════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 7 2026-10-05 — the solo About page and the headshot frames
templates/about-solo.php (one About page when team() has ONE member) and
the places a face goes. The reviews, the listings row, the town tiles, the
questions and the lead band on that page are the home page's own parts and
keep their rules; only the top of the page is new.
Markup (parts/about-hero.php):
div.tyb-pg7.tyb-pg7--about
section.tyb-ab7.tyb-ab7--portrait|--scene|--team|--nophoto > .tyb-wrap.tyb-ab7__in
.tyb-ab7__media > figure.tyb-ab7__frame > img
.tyb-ab7__body > .tyb-kick5 + h1.tyb-ab7__name + .tyb-ab7__role + .tyb-ab7__lic
+ .tyb-ab7__bio + ul.tyb-ab7__badges + .tyb-ab7__acts > a.tyb-ab7__btn
THE FRAME FOLLOWS THE FILE (feedback_headshot_frames). The portrait file is
4:5 (1200x1500), so the frame is 4:5 here AND on the home page's "meet"
section (it was 5:7, which cut the sides of a 4:5 file). object-position is
top, so if a build drops in a taller file the cut comes off the bottom,
never the crown.
═══════════════════════════════════════════════════════════════════════════ */
/* The home page's portrait: 4:5, the shape of the file. */
.tyb-meet5 .tyb-split__media--portrait img { aspect-ratio: 4 / 5; object-position: 50% 0; }
/* The phone hero's kicker with the face. The 44px disc made the kicker row
26px taller than the words alone, which pushed the H1 to 225px (the first
screen wants it inside 200). The row moves up by that much, into the clear
photograph under the masthead, so the H1 sits where it does with no face. */
@media (max-width: 640px) {
.tyb-hero6__kicker--face { margin-top: -1.75rem; }
/* The shade follows the kicker up by the same 28px, so the small capitals
keep the strength they were measured at. */
.tyb-hero6:has(.tyb-hero6__kicker--face) .tyb-hero__scrim {
background: linear-gradient(to bottom, rgba(12, 18, 22, .1) 0, rgba(12, 18, 22, .14) 56px, rgba(12, 18, 22, .32) 112px, rgba(12, 18, 22, .54) 144px, rgba(12, 18, 22, .6) 100%);
}
}
.tyb-ab7 { padding-block: clamp(2.75rem, 5.5vw, 5.25rem) clamp(3.5rem, 7vw, 6.5rem); }
.tyb-ab7__in {
display: grid;
grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
gap: clamp(3rem, 7vw, 7.5rem);
align-items: center;
}
/* No photograph at all: the words alone, on a readable measure. */
.tyb-ab7--nophoto .tyb-ab7__in { grid-template-columns: minmax(0, 46rem); }
/* The offset color frame is a shadow, so the column keeps 14px for it. */
.tyb-ab7__media { max-width: 31rem; padding: 0 14px 14px 0; }
.tyb-ab7--scene .tyb-ab7__media,
.tyb-ab7--team .tyb-ab7__media { max-width: none; }
.tyb-ab7__frame { margin: 0; }
.tyb-ab7__frame img {
display: block;
width: 100%;
height: auto;
border-radius: var(--tyb-radius5);
box-shadow: 14px 14px 0 0 var(--tyb-gold);
}
.tyb-ab7--portrait .tyb-ab7__frame img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
.tyb-ab7__body { min-width: 0; }
.tyb-ab7__body .tyb-kick5 { margin-bottom: 1.1rem; }
.tyb-ab7 .tyb-ab7__name {
max-width: none;
font-size: clamp(2.7rem, 1.5rem + 4.3vw, 5.1rem);
line-height: .98;
}
.tyb-ab7__role {
margin: 1rem 0 0;
font-size: .6875rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--tyb-muted);
}
/* A firm whose casing must survive (profile()['firm_case']). */
.tyb-firmcase .tyb-ab7__role { text-transform: none; letter-spacing: .04em; font-size: .9rem; }
.tyb-ab7__lic { margin: .45rem 0 0; font-size: .875rem; color: var(--tyb-muted); }
.tyb-ab7__bio {
margin-top: 1.7rem;
max-width: 48ch;
font-size: clamp(1rem, .95rem + .28vw, 1.15rem);
line-height: 1.7;
color: var(--tyb-body);
}
.tyb-ab7__bio p { margin: 0; }
.tyb-ab7__bio p + p { margin-top: .85em; }
/* Badges: the home page's hairline list. */
.tyb-ab7__badges {
list-style: none;
margin: 1.8rem 0 0;
padding: 0;
max-width: 30rem;
border-bottom: 1px solid var(--tyb-line);
}
.tyb-ab7__badges li {
padding: .8rem 0;
border-top: 1px solid var(--tyb-line);
font-size: .95rem;
font-weight: 500;
line-height: 1.35;
color: var(--tyb-ink);
}
/* Call and email: two buttons, a filled icon in each. */
.tyb-ab7__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.tyb-ab7__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .7rem;
min-height: 56px;
padding: 0 1.6rem;
border: 1px solid transparent;
border-radius: 8px;
font-family: var(--tyb-body-font);
font-size: 1rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
transition: background-color .25s var(--tyb-ease), color .25s var(--tyb-ease), border-color .25s var(--tyb-ease);
}
.tyb-ab7__btn svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
/* The icon class carries its own pale color; in a button it takes the button's. */
.tyb-ab7__btn .tyb-icon { color: inherit; }
.tyb-ab7__btn--call { background: var(--tyb-coral); color: #fff; font-variant-numeric: tabular-nums; }
.tyb-ab7__btn--mail { border-color: var(--tyb-ink); color: var(--tyb-ink); background: transparent; }
@media (hover: hover) {
.tyb-ab7__btn--call:hover { background: var(--tyb-coral-dk); color: #fff; }
.tyb-ab7__btn--mail:hover { background: var(--tyb-ink); color: #fff; }
}
.tyb-ab7__btn:focus-visible { outline: 3px solid var(--tyb-brand); outline-offset: 3px; }
.tyb-ab7__firm.tyb-firmtag { display: block; margin-top: .9rem; }
@media (max-width: 900px) {
.tyb-ab7__in { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
.tyb-ab7__media { max-width: 21rem; margin-inline: auto; padding: 0 10px 10px 0; }
.tyb-ab7--scene .tyb-ab7__media,
.tyb-ab7--team .tyb-ab7__media { max-width: none; margin-inline: 0; }
.tyb-ab7__frame img { box-shadow: 10px 10px 0 0 var(--tyb-gold); }
}
@media (max-width: 640px) {
.tyb-ab7 { padding-top: 2rem; }
.tyb-ab7__media { max-width: 16.5rem; }
.tyb-ab7__bio { margin-top: 1.3rem; line-height: 1.6; }
.tyb-ab7__badges { margin-top: 1.4rem; }
.tyb-ab7__acts { flex-direction: column; margin-top: 1.5rem; }
.tyb-ab7__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.tyb-ab7__btn { transition: none; }
}
/* ═══════ end ROUND 7 2026-10-05 — the solo About page and the headshot frames ═══════ */
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 7 2026-10-05 — color templates
The pieces a color template recolors read TOKENS and nothing else. The
popup's panel color lives in the first :root (the phone menu's tile colors
did too, until round 9 removed the tiles), and the ink in the round 5 and round 7 shadows is
rgba(var(--tyb-ink-rgb), …). The rule below takes the popup stars off
the raw fourth color and onto a pair scripts/set-palette.py measures:
--tyb-pop-star on --tyb-pop-ground. (The two rules that did the same for
the menu's icon discs went with the discs in round 8.)
═══════════════════════════════════════════════════════════════════════════ */
.tyb-pop__stars { color: var(--tyb-pop-star); }
/* ═══════ end ROUND 7 2026-10-05 — color templates ═══════ */
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 7 2026-10-05 — the Buyers page search action (review fix)
An IDX site (hero()['action'] = 'search') prints the property search in the
action card (.tyb-pact7--search). Beside the heading it had 35rem: the
price and bedroom fields were cut to "No" and "An", and the form's own
glass panel drew a card inside the card. Here the heading sits above and
the search takes the card's full width, with no panel of its own.
═══════════════════════════════════════════════════════════════════════════ */
.tyb-pact7--search .tyb-pact7__card { grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.tyb-pact7--search .tyb-pact7__text { max-width: 60ch; }
.tyb-pact7--search .tyb-search--hero {
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.tyb-pact7--search .tyb-search--hero .tyb-search__field input,
.tyb-pact7--search .tyb-search--hero .tyb-search__field select { border-color: var(--tyb-line); }
/* ═══════ end ROUND 7 2026-10-05 — the Buyers page search action (review fix) ═══════ */
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 7 2026-10-05 — the questions accordion in Safari (review fix)
Safari draws a 's disclosure triangle through its own
pseudo-element, which ::marker does not reach (the search form's "More
filters" already hides it the same way). Without this an iPhone can show
a small triangle before every question beside the plus icon.
═══════════════════════════════════════════════════════════════════════════ */
.tyb-faq7__q::-webkit-details-marker { display: none; }
/* ═══════ end ROUND 7 2026-10-05 — the questions accordion in Safari (review fix) ═══════ */
/* ═══════════════════════════════════════════════════════════════════════
ROUND 7 2026-10-05 — review fixes on phones: the accordion's plus and the
footer's Explore links
1. The folded call pill sits bottom right, exactly where the accordion's
plus buttons were, so at most scroll positions it covered one of them.
At 760px and under the plus moves to the LEFT of the question and the
answer lines up under the question's words. Nothing a thumb has to hit
is under the pill any more.
Markup: details.tyb-faq7__item > summary.tyb-faq7__q > span + svg.tyb-li,
then p.tyb-faq7__a.
2. (The footer's Explore list: two equal columns in reading order. ROUND 8
2026-10-05 redid the phone footer and those rules moved into its block,
"ROUND 8 2026-10-05 — simpler menu, footer", F8.)
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
.tyb-faq7__q { flex-direction: row-reverse; justify-content: flex-end; gap: 1rem; }
.tyb-faq7__a { padding-left: calc(44px + 1rem); }
}
/* ROUND 7 2026-10-05 — review fixes on phones: the accordion's plus and the footer's Explore links ═══════ */
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 8 2026-10-05 — simpler menu, footer
(The menu half of this block, the soft-tint tiles, was removed in ROUND 9
2026-10-05 with the rest of the tile menu: see the four "ROUND 9 2026-10-05
— the phone menu" blocks at the end of this file.) THE FOOTER (F8) is what
is left here.
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────── F8: the footer on phones, the sign-in pill
Adam: "I also don't like how the menu is positioned on the footer in the
mobile version. The 'Home Sell About Buy Properties Contact' just looks
kind of off." and "The color of the lock on the agent sign-in… I don't know
why it's yellow."
F8.1 (phones). One arrangement, and the ONLY rules for it (round 7's
two-column fix was folded in here and removed there): Explore is two even
columns in MENU order (Home, Buy / Sell, Properties / …), every row 44px
with a hairline under it, on the same left edge and the same width as
"Get in touch", whose phone and email rows keep the same rhythm. About
24px shorter, by spacing alone.
F8.2 (every width). The lock, the arrow and the pill's edge follow the
label's own ink: white on the dark footer, the deep color on hover. No gold.
─────────────────────────────────────────────────────────────────────────── */
.tyb-signin__lock { color: currentColor; opacity: .82; }
.tyb-signin__go { opacity: .82; }
.tyb-foot__legal-in .tyb-signin { border-color: rgba(255, 255, 255, .42); }
.tyb-foot__legal-in .tyb-signin:focus-visible { outline-color: currentColor; }
@media (hover: hover) {
.tyb-signin:hover .tyb-signin__lock { color: currentColor; opacity: 1; }
}
/* 641px to 760px: still two columns, in reading order (never CSS columns, which run down first) */
@media (max-width: 760px) {
.tyb-foot__menu { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 640px) {
/* both blocks take the whole width: one left edge, one measure */
.tyb-foot__col { flex: 1 1 100%; }
.tyb-foot__in { gap: 24px; padding-block: 34px 30px; }
.tyb-foot__h { margin-bottom: 8px; }
.tyb-foot__menu li { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.tyb-foot__menu li:nth-child(-n+2) { border-top: 1px solid rgba(255, 255, 255, .13); }
/* REVIEW 2026-10-05: an odd count (seven links) left the last one alone in the left column over a
half-width rule. It takes both columns, so the closing rule runs the full width. */
.tyb-foot__menu li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tyb-foot__menu a,
.tyb-foot__link { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
/* the contact rows: the same 44px and the same hairlines as the links above */
.tyb-foot .tyb-firmtag { margin-bottom: 8px; }
.tyb-foot__link { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.tyb-foot__link:first-of-type { border-top: 1px solid rgba(255, 255, 255, .13); }
.tyb-foot__addr { margin-top: 12px; }
}
/* ═══════ end ROUND 8 2026-10-05 — simpler menu, footer ═══════ */
/* ═══════════════════════════════════════════════════════════════════════════
ROUND 9 2026-10-05 — the phone menu: what the three styles share
parts/mobile-menu.php, tyb_menu() in functions.php, the menu block of
theme.js. ONE markup, three looks. The round-5 / round-8 tile menu is gone
(Adam: "a little bit too much… too many buttons crowd the space… these are
getting a bit too colorful i just want hints of color… this is a real estate
website for a realtor broker or brokerage not a daycare website").
A build picks a style in the content class: profile()['menu'] =
'slate' a full-screen charcoal ground, white capitals in one column
'paper' an ivory panel from the right, large serif names on ruled lines
'sheet' a compact white card rising from the bottom edge
and the root element takes .tyb-menu--