/*
 * Minimal theme — public microsites.
 *
 * Every colour and shape comes from a custom property so one stylesheet can
 * serve every site on this theme; the per-site values are injected inline by
 * the layout from Site::themeTokens().
 */

/* --------------------------------------------------------------------------
   Roboto — self-hosted
   --------------------------------------------------------------------------
   Declared in the base stylesheet so any theme can use it, and only fetched
   when something actually sets the family: an unused @font-face costs nothing.

   Self-hosted rather than requested from fonts.gstatic.com, because the font
   picker tells agencies their font sends nothing to third parties and a
   Google-hosted file would hand every visitor's IP address to Google.

   One variable file per subset covers 100-900, so weights cost no extra
   requests. latin-ext is not optional: a, s and t with diacritics live there,
   and without it a Romanian page changes font in the middle of a word.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --brand: #1f4b3f;
    --brand-ink: #ffffff;
    --accent: #c2703d;
    --radius: 10px;
    --font: system-ui, -apple-system, "Segoe UI", sans-serif;

    --ink: #16191c;
    --ink-muted: #5f6a72;
    --line: #e3e6e8;
    --surface: #ffffff;
    --surface-alt: #f6f7f8;
    --max: 1180px;

    /* The space under a hero, carried by the section after it. */
    --hero-gap: 35px;

    /*
     * A rule across the page: the line under the footer's block of property
     * links, and the line a Divider section draws. One definition, so the two
     * cannot come to look like different decisions — and a theme changes both
     * by changing this.
     */
    --rule: 1px solid var(--line);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--surface);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: 2.5rem; }

/*
 * A divider's spacing is the agency's, so the section contributes none of its
 * own: the two numbers on the form are the whole of the room around the line.
 *
 * Two classes, so it wins against a theme's one-class `.section` in a file
 * loaded after this one — estate's sets padding-block on every section, and a
 * single class here would lose the tie there and nowhere else.
 */
.section.section-divider { padding-block: 0; }

/*
 * And with no space asked for, the divider takes NO HEIGHT.
 *
 * A section is a band the width of the screen. One pixel tall, that band shows
 * the page background either side of the line it holds — a white thread across
 * the join between two coloured sections, which reads as the line running edge
 * to edge. At height zero the sections above and below meet, and the line is
 * drawn ON that join.
 *
 * `height` rather than a negative margin: box-sizing is border-box here, so a
 * zero height still grows to whatever padding the agency asks for, and the two
 * spacing numbers go on working.
 */
.section-divider > .wrap { height: 0; }

/*
 * Positioned, so the line paints over the section that follows it rather than
 * under: it now overflows its own box by a pixel, and a later sibling's
 * background is painted after an earlier sibling's content.
 */
.divider { position: relative; z-index: 1; margin: 0; border: 0; border-top: var(--rule); }
.plain { list-style: none; margin: 0; padding: 0; }
.muted { color: var(--ink-muted); }

.skip {
    position: absolute; left: -9999px;
    background: var(--brand); color: var(--brand-ink); padding: .6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ---------- Header ---------- */

.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: sticky; top: 0; z-index: 5;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-block: .85rem; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; }
.brand-mark {
    width: 36px; height: 36px; border-radius: var(--radius);
    background: var(--brand); color: var(--brand-ink);
    display: grid; place-items: center; font-weight: 700;
}
.nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.nav a { text-decoration: none; font-size: .95rem; }
.nav a:hover { color: var(--brand); }

/* ---------- Buttons & chips ---------- */

.btn {
    display: inline-block; border: 1px solid var(--brand); background: var(--brand);
    color: var(--brand-ink); border-radius: var(--radius);
    padding: .6rem 1.1rem; font: inherit; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-sm { padding: .35rem .75rem; font-size: .85rem; }
.btn-ghost { background: transparent; color: var(--brand); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    display: inline-block; border: 1px solid var(--line); border-radius: 999px;
    padding: .3rem .8rem; font-size: .88rem; text-decoration: none; background: var(--surface-alt);
}
a.chip:hover { border-color: var(--brand); }

.badge {
    display: inline-block; border-radius: 999px; padding: .2rem .6rem;
    font-size: .78rem; font-weight: 600; background: var(--surface); color: var(--ink);
}
.badge-brand { background: var(--brand); color: var(--brand-ink); }
.badge-accent { background: var(--accent); color: #fff; }

/* ---------- Hero ---------- */

.hero { background: var(--surface-alt); border-bottom: 1px solid var(--line); padding-block: 2.85rem; }

/*
 * The space under the hero belongs to the section AFTER it, as that section's
 * padding — never as the hero's own margin.
 *
 * A margin is transparent, so it can only ever show the page background: put
 * 35px under a hero followed by a red band and what you get is a white stripe
 * between the two. Padding takes the colour of the section it belongs to,
 * whatever the agency chose for it.
 *
 * Stated per theme, and after each one's `.section`, because that rule and
 * this one are both one class: whichever is written last decides, and estate's
 * `.section` is in a file loaded after this one.
 */
.hero + * { padding-top: calc(2.5rem + var(--hero-gap)); }
/*
 * The hero's own type, in the BASE so every theme opens the same way — and
 * because the section already offers the agency a size, a weight and a leading
 * for both lines: those fields are empty until somebody fills them, and empty
 * means whatever is written here.
 */
.hero h1 { max-width: 20ch; font-weight: 400; font-size: 50px; line-height: 55px; }
/*
 * Two classes for the subtitle, which the h1 above does not need: estate
 * declares `.hero-sub` at one class in a file loaded after this one, so a
 * one-class rule here would hold on three themes and lose on the fourth.
 */
.hero .hero-sub { font-weight: 300; font-size: 18px; line-height: 27px; color: var(--ink-muted); max-width: 55ch; }
.hero-stats { font-size: .95rem; }

/* ---------- Cards ---------- */

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-head a { font-size: .95rem; }

.grid {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card {
    border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: var(--surface); display: flex; flex-direction: column;
}
/* Only the photograph reacts: hovering a price is not hovering the listing. */
.card-media:hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.card-media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--surface-alt); }
.card-media-link { display: block; height: 100%; }
.card-media-link picture { display: block; height: 100%; }

/*
 * Hidden until site-cards.js announces itself: without the script these are
 * two buttons that do nothing. Shown on hover on a pointer, always on touch —
 * there is no hover to reveal them with a finger.
 */
.card-arrow { display: none; }

.has-card-galleries .card-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .85);
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
}

.card-arrow-prev { left: .5rem; }
.card-arrow-next { right: .5rem; }

.card-media:hover .card-arrow, .card-arrow:focus-visible { opacity: 1; }

@media (hover: none) {
    .has-card-galleries .card-arrow { opacity: 1; }
}

/*
 * Two overlays along the bottom of the photo: the headline figures on the
 * left, the photo count on the right. Both on the same dark pill so they read
 * as one band rather than two unrelated stickers.
 */
/*
 * One rule for both, so the two ends of the band cannot drift apart.
 *
 * The figures list carries no `plain` class on purpose: estate redeclares
 * `.plain { padding: 0 }` at the same specificity and loads second, which
 * silently flattened this pill while the count beside it — not a list — kept
 * its padding.
 */
.card-figures, .card-photo-count {
    position: absolute;
    bottom: .6rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: rgb(0 0 0 / .55);
    color: #fff;
    font-size: .78rem;
    line-height: 1.4;
    list-style: none;
}

/* Only the position and the space between figures differ from the count. */
/* Room is left for the count on the other side, and a long street plus three
   figures wraps upward rather than running under it. */
.card-figures { left: .6rem; gap: .8rem; flex-wrap: wrap; max-width: calc(100% - 5rem); }
.card-figures li { display: flex; align-items: center; gap: .3rem; }
.card-photo-count { right: .6rem; }

.card-figure-icon { width: .95rem; height: .95rem; flex: none; }
.card-figure-icon svg { width: 100%; height: 100%; display: block; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-empty { display: grid; place-items: center; height: 100%; color: var(--ink-muted); font-size: .9rem; }
.card-badges { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .4rem; }
.card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.card-price { font-size: 17px; font-weight: 500; line-height: 17px; margin: .35rem 0 0; color: var(--brand); }
.card-title { font-size: 18px; font-weight: 500; line-height: 23px; margin: 0; }
.card-title a { text-decoration: none; }
/* Kept for bold and editorial, which still print the location in the card body
   rather than over the photograph. */
.card-location { font-size: .9rem; margin: 0; }
.card-title a:hover { text-decoration: underline; }
.card-specs { display: flex; flex-wrap: wrap; gap: .7rem; font-size: .88rem; line-height: 30px; margin-top: .4rem; }
.card-specs li { display: flex; align-items: center; gap: .3rem; color: #595959; }
.card-spec-icon { width: .95rem; height: .95rem; flex: none; }
.card-spec-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Listing index ---------- */

/*
 * The heading of a page that lists things — the search, the contact page, the
 * owner's invitation. Stated rather than left to --heading-weight, which is
 * 600 in two of the four themes and 700 in one.
 *
 * The articles index overrides it further down: its own title is larger,
 * because it is the front page of everything the agency has written rather
 * than the label on a result set.
 */
.page-head { margin-bottom: 1.5rem; }
/* No bottom margin of its own: the block around it already carries the space,
   and with both the chips under a heading sat a line and a half away. */
.page-head h1 { font-weight: 500; font-size: 34px; line-height: 44px; margin-bottom: 0; }
.pagination { margin-top: 2rem; }
.pager { display: flex; flex-wrap: wrap; gap: .4rem; }
.pager-link {
    display: inline-block; padding: .45rem .8rem; border: 1px solid var(--line);
    border-radius: var(--radius); text-decoration: none; font-size: .9rem; background: var(--surface);
}
.pager-link.is-current { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.pager-link.is-disabled { color: var(--ink-muted); background: var(--surface-alt); }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
/* `display: flex` above beats the browser's own [hidden] rule, so a field the
   script hides stayed on screen. This is what hidden has to mean here. */
.field[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field label, .field legend { font-size: .85rem; font-weight: 600; color: var(--ink-muted); }
input, select, textarea {
    font: inherit; padding: .55rem .7rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface); color: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0 0 .85rem; }

.check { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; margin-bottom: .6rem; }
/* flex:none and flex:1 rather than relying on width alone: a theme that styles
   `.lead-form input` at the same specificity as `.check input` wins on load
   order, and the box then eats half the row. */
.check input { width: auto; flex: none; margin-top: .25rem; }
.check > span { flex: 1; }
.check-grid { display: grid; gap: .2rem; }

/* Honeypot — kept out of the accessibility tree and off screen, not display:none,
   because some bots skip hidden inputs. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; }
.notice-ok { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.notice-error { border-color: #c0392b; background: #fdf1ef; color: #7d241a; }
.notice-error li { margin-left: 1rem; list-style: disc; }

/* ---------- Listing detail ---------- */

.breadcrumbs { font-size: .88rem; margin-bottom: 1rem; }
.listing-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.listing-price { text-align: right; }
.listing-price .price { font-size: 1.8rem; font-weight: 700; color: var(--brand); margin: 0; }
.listing-price p { margin: 0; font-size: .9rem; }

.gallery { margin: 1.5rem 0 2rem; }
.gallery-main { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--surface-alt); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-top: .6rem; }
.gallery-thumbs img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

.layout-aside { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.listing-aside {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; background: var(--surface-alt); position: sticky; top: 5rem;
}
.agent-card { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.agent-name { font-weight: 600; margin: 0; }

/*
 * Three columns of "Label: value" on one line each. The pair is a flex row so
 * a long value wraps under its own label rather than dragging the column wide
 * enough to break the other two.
 */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem 2rem; margin: 0; }
.spec-grid > div { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .95rem; }
.spec-grid dt { font-weight: 600; color: var(--ink); }
.spec-grid dt::after { content: ":"; }
.spec-grid dd { margin: 0; color: var(--ink-muted); }
/* A heading over its own block of ticks, so it reads as a group label rather
   than as a caption trailing the list above it. */
.group-title { font-size: .95rem; color: var(--ink); font-weight: 600; margin: 0 0 .6rem; }
.amenity-group + .amenity-group { margin-top: 1.5rem; }
/* Subheadings inside a card need air above them; the first one follows the
   card's own text rather than opening the card. */
.card-block > .group-title { margin-top: 1.5rem; }

.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .55rem 2rem; margin: 0; }
.amenity { display: flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--ink-muted); }
.amenity-icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--brand); }
.amenity-icon svg { width: 100%; height: 100%; display: block; }
.prose { max-width: 68ch; margin-bottom: 2rem; }

/*
 * How wide an editorial page's text runs. `narrow` is the reading measure
 * above and needs no rule of its own — it is what every page did before there
 * was a choice, so nothing an agency has published moves.
 *
 * Only the TEXT is released. A hero or a gallery already runs the width of the
 * theme's own container, and a page setting has no business making them wider
 * than the site around them.
 */
.page-medium .prose { max-width: 1040px; }
.page-full .prose { max-width: none; }

/*
 * The same three on a free-text block that was given a width of its own — for
 * one on the home page, which has no width control at all, and for a block that
 * wants a different measure from the page around it.
 *
 * Two classes, and after the page's rules, so the block's own choice beats the
 * page's; no class at all leaves the page deciding. `narrow` needs a rule here
 * where the page's did not, because on a page set wider it has something to
 * undo — and it is the measure of THIS stylesheet, so a theme with a measure of
 * its own says so again in its own file.
 */
.prose.prose-narrow { max-width: 68ch; }
.prose.prose-medium { max-width: 1040px; }
.prose.prose-full { max-width: none; }

/* The title above the sections belongs to the same column as they do. */
.page-medium .section > .wrap { max-width: 1040px; }
/* The card already carries the gap below it; a second one leaves dead space
   inside the border. */
/*
 * Inside a card the measure comes off: the card is already the column, and
 * capping the text at ~68 characters left it ending well short of the border
 * with nothing beside it.
 */
.card-block .prose { max-width: none; margin-bottom: 0; }
.card-block > :last-child { margin-bottom: 0; }
.legal { margin-top: 2rem; }
.legal li { margin-bottom: .2rem; }

.panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.75rem; background: var(--surface-alt);
}

/* ---------- Footer ---------- */

/*
 * No margin above it and no rule across the top. This file is loaded under
 * EVERY theme, so both were drawn on the dark footers too: the margin as a
 * white band between two dark surfaces, and the border as a pale line across
 * it. The footer's own background and top padding are what separate it from
 * what comes before.
 */
.site-footer { padding-block: 2.5rem 1.5rem; background: var(--surface-alt); }
/*
 * Who the agency is on the left, their own columns on the right.
 *
 * Flex rather than a grid of named tracks, because the number of columns is
 * the AGENCY's — one by default, up to ten — and a `1fr 1fr 1fr` written for
 * the picture would leave two empty tracks on a footer with one column and
 * crush four. The brand block takes the slack, so the columns sit against the
 * right-hand edge whatever there are of them.
 */
.footer-main { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.footer-brand { flex: 1 1 300px; max-width: 34rem; }
.footer-column { flex: 0 1 auto; min-width: 9.5rem; }
.footer-logo { display: inline-flex; align-items: center; gap: .5rem; }
.footer-logo img { height: 2.4rem; width: auto; }
.footer-about { margin: 1rem 0 0; color: var(--ink-muted); font-size: .95rem; line-height: 1.6; }
/* Padding above rather than more margin: the block is a list of its own under
   the description, and the lines sit closer together than they read at — four
   details are one address, not four paragraphs. */
.footer-contact { display: grid; gap: .35rem; margin-top: 1.25rem; padding-top: 1rem; font-size: .95rem; }
.footer-contact li { display: flex; align-items: center; gap: .6rem; }
/* The agent page's icon rule paints these in the brand colour; in a footer
   they are beside the words and belong to them. */
.site-footer .contact-icon { color: inherit; }
.footer-title { font-weight: 600; margin-bottom: .4rem; }
.footer-column li { padding: .2rem 0; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
/*
 * The bottom row: whose site it is, the links an agency has to carry, and
 * where else they can be found — one line, wrapping into three centred rows
 * rather than overflowing when there is no room for it.
 */
/*
 * The bottom row: whose site it is on the left, the links an agency has to
 * carry in the MIDDLE, and where else they can be found on the right.
 *
 * Three named columns rather than `space-between`, and each part placed in its
 * own: with space-between the middle group is only centred when all three are
 * present and the outer two happen to be the same width — an agency with no
 * social links had its terms pushed against the right-hand edge. Placed
 * explicitly, too, because auto-placement would move the social icons into the
 * middle column the moment the legal row was emptied.
 */
.footer-legal {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: .75rem 2rem;
    border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.25rem;
    font-size: .85rem; color: var(--ink-muted);
}
.footer-copy { grid-column: 1; justify-self: start; margin: 0; }
.footer-legal-links { grid-column: 2; justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.footer-legal .social { grid-column: 3; justify-self: end; margin: 0; }

/*
 * One type scale for the whole footer.
 *
 * Set on `.site-footer` so everything inherits it, and then again on the four
 * blocks that declare a size of their own — inheritance loses to any rule that
 * names the element, so a list left out here keeps whatever it had. Each is
 * written two classes deep, which beats the single-class rules in every theme
 * whatever order the files are loaded in.
 */
.site-footer,
.site-footer .footer-about,
.site-footer .footer-contact,
.site-footer .footer-legal,
.site-footer .social,
.site-footer .footer-links-column li { font-size: 13px; line-height: 23px; }

/* A column's heading — the agency's own columns and the stock-link ones,
   which share the class. Tighter than the lines under it: it is one line. */
.site-footer .footer-title { font-size: 14px; line-height: 15px; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .layout-aside, .panel { grid-template-columns: 1fr; }
    .listing-aside { position: static; }
}

@media (max-width: 560px) {
    .listing-price { text-align: left; }
    .field-row { grid-template-columns: 1fr; }
    /*
     * The columns wrap on their own; what has to be said here is that the
     * bottom row stops trying to be a row. One column, everything in it,
     * each part told where to sit — a grid-column written for three
     * columns puts the icons in a column that no longer exists.
     */
    .footer-legal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .footer-copy,
    .footer-legal-links,
    .footer-legal .social { grid-column: 1; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Facets ---------- */


.active-filters { margin-top: .6rem; }
.chip-removable { text-decoration: none; }
.chip-removable:hover { border-color: var(--accent); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Map ---------- */

.map-block { margin: 2rem 0; }
.map {
    height: 380px; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line); background: var(--surface-alt);
}
.map-note { font-size: 12px; line-height: 20px; margin-top: .5rem; color: var(--ink); }
.map-pin {
    background: var(--brand); color: var(--brand-ink); border-radius: 999px;
    padding: .25rem .6rem; font-size: .8rem; font-weight: 600; text-decoration: none;
    white-space: nowrap; box-shadow: 0 1px 4px rgb(0 0 0 / .3);
}
.map-pin--area { background: var(--accent); opacity: .9; }

/* ---------- Mortgage calculator ---------- */

.mortgage {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; background: var(--surface-alt); margin: 2rem 0;
}
.mortgage-result { font-size: 1.1rem; margin-top: .5rem; }
.mortgage-note { font-size: .82rem; }

/* ---------- Testimonials, pages, consent ---------- */

.testimonial {
    margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; background: var(--surface-alt); height: 100%;
}
.testimonial p { font-size: 1.02rem; }
.contact-list li { margin-bottom: .5rem; }
.social { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; font-size: .9rem; }

.consent {
    position: fixed; inset: auto 1rem 1rem 1rem; z-index: 20;
    max-width: 560px; margin-inline: auto;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: 1rem 1.25rem;
    box-shadow: 0 6px 24px rgb(0 0 0 / .12);
}
.consent p { font-size: .9rem; }
.consent-actions { display: flex; gap: .5rem; }

/* Sections added after the theme was written; kept plain, in keeping. */
.tab-input { position: absolute; opacity: 0; pointer-events: none; }
.tab-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.tab-label { padding: .45rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.tab-panel { display: none; }
/* Ten, because the strip is bounded at ten: a list written to three
   silently stops switching at the fourth tab. */
.tab-input:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1),
.tab-input:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2),
.tab-input:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3),
.tab-input:nth-of-type(4):checked ~ .tab-panel:nth-of-type(4),
.tab-input:nth-of-type(5):checked ~ .tab-panel:nth-of-type(5),
.tab-input:nth-of-type(6):checked ~ .tab-panel:nth-of-type(6),
.tab-input:nth-of-type(7):checked ~ .tab-panel:nth-of-type(7),
.tab-input:nth-of-type(8):checked ~ .tab-panel:nth-of-type(8),
.tab-input:nth-of-type(9):checked ~ .tab-panel:nth-of-type(9),
.tab-input:nth-of-type(10):checked ~ .tab-panel:nth-of-type(10) { display: block; }
.tab-input:nth-of-type(1):checked ~ .tab-list .tab-label:nth-of-type(1),
.tab-input:nth-of-type(2):checked ~ .tab-list .tab-label:nth-of-type(2),
.tab-input:nth-of-type(3):checked ~ .tab-list .tab-label:nth-of-type(3),
.tab-input:nth-of-type(4):checked ~ .tab-list .tab-label:nth-of-type(4),
.tab-input:nth-of-type(5):checked ~ .tab-list .tab-label:nth-of-type(5),
.tab-input:nth-of-type(6):checked ~ .tab-list .tab-label:nth-of-type(6),
.tab-input:nth-of-type(7):checked ~ .tab-list .tab-label:nth-of-type(7),
.tab-input:nth-of-type(8):checked ~ .tab-list .tab-label:nth-of-type(8),
.tab-input:nth-of-type(9):checked ~ .tab-list .tab-label:nth-of-type(9),
.tab-input:nth-of-type(10):checked ~ .tab-list .tab-label:nth-of-type(10) { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/*
 * A category is a line, not a poster: a small photograph, the name, and how
 * many there are. The photograph earns its place by telling somebody which
 * kind of thing they are looking at, and it does not need half the page to do
 * that.
 */
.tile {
    display: flex; align-items: center; gap: .75rem;
    /* A floor rather than a fixed width: "Proprietate specială" needs more
       room than "Teren", and cards of one size would either crop the long name
       or leave the short one half empty. */
    min-width: 210px;
    padding: .5rem .95rem .5rem .5rem;
    border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px);
    background: var(--surface); color: var(--ink); text-decoration: none;
}
.tile:hover { text-decoration: none; border-color: var(--brand); }

/* The tint lives on the thumbnail now: an agency with no photographs still
   gets a deliberate-looking row rather than six empty squares. */
.tile-thumb {
    width: 70px; height: 70px; flex: none;
    border-radius: calc(var(--radius) - 2px); overflow: hidden;
}
.tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tile-label { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.tile-count { display: block; padding-top: 8px; font-weight: 400; font-size: .85rem; color: var(--ink-muted); }

.mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 160px; gap: .75rem; }
.mosaic > * { border-radius: var(--radius); overflow: hidden; margin: 0; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }

.band-dark { background: #14181d; color: #e6eaee; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: center; }
.feature-list { display: grid; gap: .6rem; }
.feature-list li { padding-bottom: .6rem; border-bottom: 1px solid rgb(255 255 255 / .12); }

/*
 * The advantages band's own scale, which is the About band's: 30/35 at 500 for
 * the heading and 16/26 at 400 for the introduction under it. The two bands sit
 * on the same home page, so one answer rather than two — and stated rather than
 * left to --heading-weight, which is 600 or 700 depending on the theme.
 */
.section-feature-band h2 { font-weight: 500; font-size: 30px; line-height: 35px; margin-bottom: 10px; }
.section-feature-band .muted { font-weight: 400; font-size: 16px; line-height: 26px; }

/*
 * The advantages themselves, a size down from the introduction that leads into
 * them: they are a list somebody scans, not a paragraph. Two classes deep so it
 * decides in every theme — estate declares `.feature-list li` of its own, and a
 * rule at one class would lose to it in the file loaded after this one.
 */
.section-feature-band .feature-list li { font-size: 14px; }

/*
 * 700 × 469, and proportional below that rather than cropped, exactly as the
 * About band's photograph: the ratio keeps the second number true when the
 * first cannot be, on a phone and in a theme whose column is narrower.
 */
.section-feature-band .band-grid img { width: 700px; max-width: 100%; aspect-ratio: 700 / 469; height: auto; object-fit: cover; }

.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.trio-panel { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); }

/* A category tile with no photograph: tinted panel rather than an empty box. */
/*
 * Every section's subtitle, one grey.
 *
 * Stated here rather than left to the `muted` class beside it in the markup:
 * --ink-muted differs per theme, and this line sits directly under a heading
 * on the same white surface in all four. It has to win over `.muted`, which is
 * why the rule is written after it — and it deliberately does NOT win over
 * `.band-dark .muted`, where this grey would be unreadable.
 */
.section-sub { text-align: center; margin: -.5rem 0 1.5rem; color: #595959; }
.tile-tint-0 { background: #2f4858; }
.tile-tint-1 { background: #33658a; }
.tile-tint-2 { background: #55828b; }
.tile-tint-3 { background: #6b705c; }
.tile-tint-4 { background: #7f5539; }
.tile-tint-5 { background: #4a4e69; }

/* --------------------------------------------------------------------------
   Photo lightbox
   --------------------------------------------------------------------------
   Driven by :target so it works without JavaScript. The overlay is shown when
   one of the slides inside it is the current target — :has() is what lets the
   parent react to that, which is why there is no wrapper class to toggle.
   -------------------------------------------------------------------------- */

.lightbox { display: none; }

.lightbox:has(.lightbox-slide:target) {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 380px);
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #0b0f14;
    color: #e8ecf1;
}

/* Stops the page behind from scrolling under the overlay. Set by the script;
   without it the overlay still works, it just scrolls the page underneath. */
body.has-lightbox { overflow: hidden; }

.lightbox-stage { position: relative; background: #0b0f14; overflow: hidden; }

.lightbox-slide { display: none; margin: 0; height: 100%; }
.lightbox-slide:target { display: block; }
.lightbox-slide:focus { outline: none; }

.lightbox-slide picture { display: block; height: 100%; }
.lightbox-slide img { width: 100%; height: 100%; object-fit: contain; }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.6rem;
    line-height: 1;
    background: rgb(0 0 0 / .5);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
}

.lightbox-nav:hover { background: rgb(0 0 0 / .75); text-decoration: none; }
.lightbox-prev { left: .75rem; }
.lightbox-next { right: .75rem; }

.lightbox-count {
    position: absolute;
    left: 50%;
    bottom: .75rem;
    transform: translateX(-50%);
    padding: .25rem .7rem;
    border-radius: 999px;
    background: rgb(0 0 0 / .5);
    font-size: .82rem;
}

.lightbox-aside {
    position: relative;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--surface, #fff);
    color: var(--ink, #14181d);
}

.lightbox-close {
    position: absolute;
    top: .75rem;
    right: 1rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink-muted);
    text-decoration: none;
}

.lightbox-title { margin: 0 2rem .25rem 0; font-size: 1.25rem; }
.lightbox-price { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 700; color: var(--brand); }
.lightbox-lede { margin: 1.25rem 0 .75rem; font-weight: 600; }
.lightbox-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }

/*
 * Narrow screens: the photo takes the top of the screen and the form sits
 * under it, reachable by scrolling. Side by side, neither would be usable.
 */
@media (max-width: 860px) {
    .lightbox:has(.lightbox-slide:target) {
        grid-template-columns: 1fr;
        grid-template-rows: 55vh 1fr;
        overflow-y: auto;
    }

    .lightbox-stage { min-height: 0; }
}

/* Thumbnails are links now, and a link must not underline a photograph. */
.gallery a { display: block; }
.gallery a:hover { text-decoration: none; }
.gallery-main-link { cursor: zoom-in; }

/* --------------------------------------------------------------------------
   Listing body: gallery, overview and contact card
   -------------------------------------------------------------------------- */

/*
 * The gallery, the body and the sidebar are siblings in the grid so themes can
 * place them differently. Minimal runs the gallery the full width above both
 * columns, which is where it has always been.
 */
.layout-aside > .gallery { grid-column: 1 / -1; }
.listing-main { grid-column: 1; min-width: 0; }

/* One card shell for both blocks on the listing body, so they cannot drift. */
.overview, .card-block {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.overview h2, .card-block h2 { margin-top: 0; }

/*
 * A <summary> that carries a heading: the default triangle is replaced with a
 * chevron on the right, and list-style is cleared in both dialects because
 * WebKit still uses its own pseudo-element for it.
 */
.card-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    margin-bottom: 1.1rem;
}

.card-summary::-webkit-details-marker { display: none; }
.card-summary h2 { margin: 0; }

.card-summary::after {
    content: "";
    width: .6rem;
    height: .6rem;
    margin-left: auto;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(-135deg) translate(-.15rem, .15rem);
    transition: transform .2s ease;
}

details:not([open]) > .card-summary { margin-bottom: 0; }
details:not([open]) > .card-summary::after { transform: rotate(45deg) translate(-.15rem, -.15rem); }

.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.1rem; }

/* Icon in its own column, label and value stacked beside it: the value lines up
   with the words it belongs to rather than starting back under the icon. */
.overview-item { display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; }
.overview-icon { width: 1.3rem; height: 1.3rem; color: var(--ink-muted); }
.overview-icon svg { width: 100%; height: 100%; display: block; }
.overview-label { align-self: center; font-size: .85rem; color: var(--ink-muted); }
.overview-value { grid-column: 2; font-weight: 600; }

.agent-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* Initials, because there is nowhere to upload a photograph yet. A grey square
   would read as a picture that failed to load. */
.agent-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 1.3rem;
    font-weight: 700;
}

.agent-name { display: block; font-weight: 600; }
.agent-role { display: block; font-size: .85rem; }
.aside-title { margin-top: 0; }

.aside-actions { display: grid; gap: .5rem; margin-top: .75rem; }
.btn-icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: .4rem; }
.btn-icon svg { width: 100%; height: 100%; display: block; }

/* An agent's photograph, or their initials where there is none. */
.agent-avatar { object-fit: cover; }
.agent-avatar-empty { font-size: 1.1rem; }

/* Shared with the tile below: only the shape differs, and that is set there. */
.agent-photo-empty {
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 1.5rem;
    font-weight: 700;
}

/*
 * Echipa: one card per agent.
 *
 * A photograph the width of the card, then name, role and two lines of the
 * biography, then a row of links pinned to the bottom — social on the left,
 * the two that matter on the right. The face is the point of this section, so
 * it gets the room a round thumbnail never gave it.
 */
/*
 * Flex rather than grid, and a fixed card width, because the photograph is
 * specified at 331x213 rather than "whatever a quarter of the row comes to".
 * 331 + 6px of inset either side + the 1px border is 345; four of them with a
 * 16px gutter is 1428, which is what estate's 1460 wrap holds. A narrower
 * theme wraps to three and centres them, rather than shrinking the picture.
 */
.agent-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 16px;
}

.agent-tile {
    display: flex;
    flex-direction: column;
    /* 0 1: never wider than the picture it was sized around, and free to
       shrink on a phone narrower than one card. */
    flex: 0 1 345px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 6px 6px .9rem;
}

.agent-tile-cover { display: block; margin-bottom: .9rem; }

/* The words sit further in than the picture does, as they do on the reference:
   the photograph is the card's edge, the text is inside it. */
.agent-tile > :not(.agent-tile-cover) { padding-inline: 12px; }

.agent-tile-photo {
    display: block;
    width: 100%;
    /* 331 x 213 at full size, and that ratio at any width below it. */
    aspect-ratio: 331 / 213;
    object-fit: cover;
    border-radius: calc(var(--radius) - 4px);
    background: var(--surface-alt);
}

/* Its own selector rather than .agent-photo-empty, which sets `display: grid`
   and would be read after this block. */
.agent-tile-photo.is-empty {
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 2.2rem;
    font-weight: 700;
}

/* Weight set here rather than left to --heading-weight: a theme whose headings
   are 600 or 700 would make four names shout across the row. */
.agent-tile-name { font-size: 18px; font-weight: 500; line-height: 23px; margin: 0; }
.agent-tile-name a { color: inherit; text-decoration: none; }
.agent-tile-name a:hover { color: var(--brand); }
/* A fixed grey rather than --ink-muted: the role and the biography are the two
   lines that must stay quieter than the name whatever an agency recolours. */
.agent-tile-role { font-size: 14px; line-height: 23px; margin: .2rem 0 0; color: #595959; }
.agent-tile-bio { font-size: 14px; line-height: 23px; margin: .8rem 0 0; color: #595959; }

/* margin-top: auto is what lines the icons up across the row: without it a
   short biography pulls its card's icons a line higher than its neighbour's. */
.agent-tile-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1rem;
}

.agent-tile-social, .agent-tile-contact { display: flex; flex-wrap: wrap; align-items: center; }
/* auto rather than space-between, which would move the phone and the email to
   the left of the card for an agent who has filled in no social links. */
.agent-tile-contact { margin-left: auto; }
.agent-tile-links .social-link { width: 1.65rem; height: 1.65rem; color: var(--ink); }
.agent-tile-contact .social-link { color: var(--ink-muted); }
.agent-tile-links .social-icon { width: .95rem; height: .95rem; }

/*
 * Icons rather than words. Six network names in a row is a wall of text that
 * nobody reads; the mark is what people recognise. The name stays in the
 * markup for a screen reader and in the title for a hover.
 */
.agent-social, .social { display: flex; flex-wrap: wrap; gap: .35rem; }

.social-link {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--ink-muted);
    text-decoration: none;
}

.social-link:hover { color: var(--brand); background: var(--surface-alt); }
.social-icon { width: 1.05rem; height: 1.05rem; }
.social-icon svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   Contact card: enquiry and viewing on tabs
   -------------------------------------------------------------------------- */

/*
 * Full-width tabs that read as a folder, rather than the pill row the showcase
 * uses: in a narrow sidebar two pills leave a ragged gap beside them.
 */
.aside-tabs { margin: -1.25rem -1.25rem 0; }

.aside-tabs .tab-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0 0 1.25rem;
}

.aside-tabs .tab-label {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: .8rem .5rem;
    text-align: center;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-muted);
    background: var(--surface-alt);
}

.aside-tabs .tab-panel { padding: 0 1.25rem 1.25rem; }

.aside-tabs .tab-input:nth-of-type(1):checked ~ .tab-list .tab-label:nth-of-type(1),
.aside-tabs .tab-input:nth-of-type(2):checked ~ .tab-list .tab-label:nth-of-type(2) {
    background: var(--surface);
    border-bottom-color: transparent;
    color: var(--ink);
}

.form-legend { font-weight: 600; margin: 0 0 .25rem; padding: 0; }
.field-group { border: 0; padding: 0; margin: 0 0 .25rem; }

/* Days as chips: no date picker, no month to page through, no JavaScript. */
.day-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .9rem; }

.day-chip {
    display: grid;
    justify-items: center;
    gap: .05rem;
    padding: .5rem .2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 1.2;
}

/* The radio itself is hidden, not removed: it is still what the label toggles
   and what the keyboard moves between. */
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip:has(input:checked) { border-color: var(--brand); color: var(--brand); }
.day-chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.day-name, .day-month { font-size: .72rem; }
.day-number { font-size: 1.05rem; font-weight: 700; }

.mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .9rem 0; }

.mode-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    font-size: .9rem;
    cursor: pointer;
}

.mode-icon { width: 1rem; height: 1rem; flex: none; }
.mode-icon svg { width: 100%; height: 100%; display: block; }

.mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.mode-option:has(input:checked) { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.mode-option:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Agent page
   -------------------------------------------------------------------------- */

.agent-hero { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.agent-hero-photo { width: 200px; height: 200px; border-radius: var(--radius); object-fit: cover; flex: none; }
.agent-hero-body { flex: 1 1 320px; }
.agent-hero h1 { margin-bottom: .35rem; }
.agent-hero p { margin: 0 0 .3rem; }
.agent-hours { margin: .6rem 0 .4rem; }
.agent-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.agent-tags { margin-bottom: 1.25rem; }
/* Two to a row: four single lines left a column of mostly empty sidebar. */
.agent-contact { margin-bottom: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
/* min-width:0 lets a cell shrink under its content, and the break lets a long
   address wrap inside it rather than pushing the grid wider than the card. */
.agent-contact li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.agent-contact a { overflow-wrap: anywhere; }
.contact-icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--brand); }
.contact-icon svg { width: 100%; height: 100%; display: block; }
.agent-layout > .listing-main { grid-column: 1; }

/* The filter row: pills, with the current one filled so it reads as where you
   are rather than as one more thing to press. */
.agent-type-filters { margin-bottom: 1.5rem; }
.agent-type-filters .chip { padding: .5rem 1.1rem; }
.chip.is-active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 600; }
.load-more { margin-top: 1.5rem; }

@media (max-width: 560px) {
    .agent-hero-photo { width: 120px; height: 120px; }
    /* Two columns of 150px is not two columns, it is two truncations. */
    .agent-contact { grid-template-columns: 1fr; }
}

/*
 * The stock link block: four columns of "Apartamente de vânzare Alba Iulia".
 * Smaller and quieter than the rest of the footer — it is a directory, read by
 * somebody who already knows what they are looking for, and by crawlers.
 */
.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: var(--rule);
}
.footer-links-column .footer-title { margin-bottom: .5rem; }
.footer-links-column li { margin-bottom: .35rem; font-size: .875rem; line-height: 1.4; }
.footer-links-column a { color: var(--muted); }
.footer-links-column a:hover { color: var(--ink); }

@media (max-width: 900px) {
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .footer-links { grid-template-columns: 1fr; }
}

/* The same block inside a search: separated from the results above it. */
.stock-links-inline { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.stock-links-inline .footer-links { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.stock-links-inline .section-title { margin-bottom: 1rem; }

/* Two links where a select would contradict the address. */
.filters .label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.filters .switch { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.filters .switch-option { flex: 1; padding: .5rem .25rem; text-align: center; font-size: .85rem; text-decoration: none; }
.filters .switch-option.is-active { background: var(--brand); color: var(--brand-ink); }

/* ---------- Header submenus ---------- */

/*
 * Opens on hover and on :focus-within, so it works with JavaScript off and
 * from a keyboard. site-nav.js adds .is-open for touch, where hover does not
 * exist.
 */
.nav-item { position: relative; display: inline-flex; }
.nav-parent {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; font-size: .95rem; color: inherit; cursor: pointer; text-decoration: none;
}
/*
 * A triangle drawn out of borders, which only works on a BLOCK: width and
 * height do not apply to an inline box, so the left border of the sideways
 * one was drawn down the whole line and came out as a vertical bar.
 *
 * At the top level the parent is an inline-flex, which blockifies its children
 * and hid this; inside a submenu the parent is a plain anchor.
 */
.nav-caret {
    display: block; flex: none;
    width: 0; height: 0; border-left: .28rem solid transparent; border-right: .28rem solid transparent;
    border-top: .3rem solid currentColor; opacity: .6;
}

/*
 * The panel carries its own colours, at a specificity that beats a theme's
 * `.site-header a`. In bold the header is dark chrome with white links, and a
 * white panel inherited white text: a submenu nobody could read.
 */
/*
 * The panel carries its own colours, at a specificity that beats a theme's
 * `.site-header a`. In bold the header is dark chrome with white links, and a
 * white panel inherited white text: a submenu nobody could read.
 *
 * Its own colour is also what separates it from the header above and the page
 * behind — three white surfaces stacked, and nobody could see where one ended
 * and the next began. The second level is a shade off the first, so a flyout
 * reads as a new list rather than more of the same one.
 */
.submenu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 40;
    min-width: 12rem; padding: .4rem 0; margin-top: .4rem;
    background: var(--submenu-bg, var(--surface)); color: var(--submenu-ink, var(--ink));
    border: 1px solid color-mix(in srgb, var(--submenu-ink, var(--ink)) 14%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgb(15 23 42 / .22);
}
.site-header .submenu a,
.site-header .submenu .nav-parent { color: var(--submenu-ink, var(--ink)); }
.site-header .submenu a { display: block; padding: .45rem 1rem; font-size: .9rem; white-space: nowrap; }

/* The row under the cursor, and the row holding a flyout open: without it,
   which entry the second panel belongs to was a guess. */
.site-header .submenu a:hover,
.site-header .submenu .nav-item:hover > .nav-parent,
.site-header .submenu .nav-item:focus-within > .nav-parent,
.site-header .submenu .nav-item.is-open > .nav-parent { background: var(--submenu-hover, #eef2f6); }


.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.nav-item.is-open > .submenu { display: block; }

/*
 * The language switcher, which is an ordinary menu entry with a flag in it.
 * The flag is drawn inline (partials/flags), so it costs no request and cannot
 * come back as a broken image on the agency's own header.
 */
/*
 * inline-block rather than a flex item, and NOT by widening `.submenu a`:
 * that selector dresses every link in every panel, and a rule written for the
 * new case is how the old ones quietly move.
 */
.nav-flag { display: inline-block; flex: none; width: 1.15rem; vertical-align: -.15em; line-height: 0; }
.nav-flag svg { display: block; width: 100%; height: auto; border-radius: 1px; }
.site-header .submenu .nav-flag { margin-right: .5rem; }
/* Which language is being read, marked in the panel: without it the open list
   is two identical rows and the current one is a guess. */
.site-header .submenu a.is-current { font-weight: 600; }

/* The gap between a parent and its submenu is not a place to lose the pointer. */
.nav-item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .4rem; }

/*
 * A submenu inside a submenu opens to the SIDE, the way every desktop menu
 * does: downwards it would cover the list it came from.
 */
.submenu .nav-item { display: block; }
/*
 * Three classes deep, because `.site-header .submenu a` is two-and-a-tag and
 * was winning: the parent rendered as a block instead of a flex row, so the
 * caret never reached the right-hand edge and never became a flex item.
 * The colour rule above already had to be written this way, for the same
 * reason and against the same selector.
 */
.site-header .submenu .nav-parent {
    display: flex; align-items: center; width: 100%;
    padding: .45rem 1rem; font-size: .9rem; justify-content: space-between; gap: 1rem;
}
.submenu .nav-caret { border: 0; border-top: .28rem solid transparent; border-bottom: .28rem solid transparent; border-left: .3rem solid currentColor; }
.submenu .submenu {
    top: 0; left: 100%; margin: -.4rem 0 0 .35rem;
    background: color-mix(in srgb, var(--submenu-bg, var(--surface)) 92%, var(--submenu-ink, var(--ink)));
}
/* Same hazard one level down: the gap is not a place to lose the pointer. */
.submenu .nav-item::after { content: ""; position: absolute; top: 0; left: 100%; width: .45rem; height: 100%; }

/* Which entry the panel belongs to, marked on the entry itself: the panel
   opens below the header and could belong to any of them. */
.nav > .nav-item:hover > .nav-parent,
.nav > .nav-item:focus-within > .nav-parent,
.nav > .nav-item.is-open > .nav-parent { box-shadow: inset 0 -2px 0 var(--accent); }

/* Right-hand entries would push their flyout off the screen. */
.nav-item:last-child .submenu .submenu { left: auto; right: 100%; margin: -.4rem .25rem 0 0; }

.nav .nav-parent:hover { color: var(--brand); }

/* ---------- Contact section: text and details beside the form ---------- */

.section-contact { background: var(--brand); color: var(--brand-ink); }
.section-contact h2 { color: var(--brand-ink); }

/* The block's title, at the size asked for rather than the theme's heading
   scale: --heading-weight is 600 by default and this one is 500. */
.section-contact .contact-intro h2 { font-weight: 500; font-size: 32px; line-height: 39px; }
/* One number for both surfaces: the strip on a home page and the page
   that IS this block open at the same rhythm, and the contact page's own
   rule no longer says a second one. */
.contact-intro h2 { margin-bottom: 12px; }
.contact-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .contact-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.contact-intro { padding-top: 50px; }
.contact-intro .rich-text { font-size: 15px; line-height: 24px; }
/* The rule between the words and the details, as its own element: the two
   halves of that column say different things. */
.contact-rule { margin: 2rem 0 1.5rem; border: 0; border-top: 1px solid currentColor; opacity: .25; }
.contact-details { display: grid; gap: .3rem; font-size: 15px; line-height: 23px; }
.contact-details li { display: flex; align-items: center; gap: .6rem; }
.contact-details a { color: inherit; }
/*
 * The agent page already defines .contact-icon, in the BRAND colour, which is
 * this block's background — brand on brand, and the icons were simply not
 * there. They take the block's own ink instead, and the ink of a button when
 * they sit inside one.
 */
.section-contact .contact-icon { color: inherit; }
.contact-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.contact-actions .btn { display: inline-flex; align-items: center; gap: .5rem; }
/*
 * The buttons on this block, inverted.
 *
 * `.btn` is the brand colour on the brand colour here — the same collision the
 * icons had, and "Sunați-ne" was a button you could only find by hovering.
 * Inverted is the one pair guaranteed to read: the agency already promises
 * --brand-ink is legible against --brand, which is what makes the text above
 * it legible too. Scoped to .contact-actions, because the form's own submit
 * sits on the white card and is right as it is.
 */
.section-contact .contact-actions .btn {
    background: var(--brand-ink); border-color: var(--brand-ink); color: var(--brand);
    /* Uppercase rather than `capitalize`: the labels are capitalised already,
       so that would have changed nothing on screen. */
    text-transform: uppercase;
    font-weight: 400; font-size: 14px; line-height: 14px;
}
.section-contact .contact-actions .btn-ghost {
    background: none; border-color: currentColor; color: var(--brand-ink);
}
/*
 * The same block without the band, for a page that IS this block: the accent
 * is a strip's way of standing out from what surrounds it, and on the contact
 * page there is nothing to stand out from.
 *
 * Written as a second, more specific selector rather than as an edit to the
 * rules above: every site already published with the band keeps it.
 */
.section-contact.is-plain { background: var(--surface-alt); color: var(--ink); }
.section-contact.is-plain h2 { color: var(--ink); }
/*
 * The three buttons on this page — Sunați-ne, Scrieți-ne and the form's own
 * submit — are one shell: a pale fill, a dark rule around it, and the brand
 * kept for the hover.
 *
 * On the home page's band the pair is inverted instead, because there the
 * background IS the brand and a brand-coloured button on it cannot be seen.
 * Here nothing needs escaping from, so the button can be quiet until somebody
 * reaches for it.
 */
.section-contact.is-plain .contact-actions .btn,
.section-contact.is-plain .contact-actions .btn-ghost,
.section-contact.is-plain .contact-card .btn,
.section-about .contact-actions .btn,
.section-about .contact-actions .btn-ghost {
    background: #e6eaf0;
    border-color: #222222;
    color: rgb(34, 34, 34);
}

/*
 * The agency's own colour, on the way in. The LABEL has to move with it: the
 * brand is a colour they chose and may be dark, and #222 on it is a button you
 * can only find by hovering — which is what hovering already is. `--brand-ink`
 * is the one pair the agency has already promised reads.
 */
.section-contact.is-plain .contact-actions .btn:hover,
.section-contact.is-plain .contact-actions .btn-ghost:hover,
.section-contact.is-plain .contact-card .btn:hover,
.section-about .contact-actions .btn:hover,
.section-about .contact-actions .btn-ghost:hover {
    background: var(--brand);
    color: var(--brand-ink);
}

/*
 * And the submit reads like the two beside it. Those get their type from
 * `.section-contact .contact-actions .btn`, which this page inherits but the
 * card is outside of — so it is said again here rather than left to look
 * like a different kind of button on the same page.
 *
 * Not scoped to `.is-plain` any more: the same form, the same button and the
 * same words are drawn by this section wherever it is put, and it read one way
 * on the contact page and another on a home page's band.
 */
.section-contact .contact-card .btn {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
}


/* The form sits on its own surface, the way a card does. */
.contact-card {
    background: var(--surface); color: var(--ink);
    border-radius: var(--radius); padding: 1.8rem;
    box-shadow: 0 18px 40px rgb(15 23 42 / .18);
}
/*
 * Three across, each taking its share of the card — but only above the width
 * where .field-row stacks. That rule sits earlier in the file, so an
 * unconditional three-column rule here would win on a phone and squeeze three
 * inputs into a screen's width.
 */
@media (min-width: 561px) {
    .field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/*
 * The card's controls. The placeholder is what was asked for; the control
 * itself carries the same size, or the text changes size the moment somebody
 * types into it. A select has no placeholder — its empty first option is one,
 * and it follows the control.
 */
.contact-card input,
.contact-card select,
.contact-card textarea { font-size: 14px; line-height: 20px; }
.contact-card ::placeholder { font-size: 14px; line-height: 20px; color: #222222a1; }
/*
 * A select has no placeholder — its empty first option is one, and it is the
 * select's own colour until something is chosen. `:has` gives it the same grey
 * as the boxes beside it; a browser without `:has` simply shows it in the
 * ordinary ink.
 */
.contact-card select:has(option[value=""]:checked) { color: #222222a1; }
.contact-card select option { color: var(--ink); }
/*
 * Four controls on one line, of which one is always hidden — the rooms and the
 * surface take turns. Flex rather than four grid columns, so the three that
 * are on screen share the width instead of leaving the fourth column empty,
 * and so they wrap in pairs when the card is too narrow for four.
 */
.contact-card .field-row-4 { display: flex; flex-wrap: wrap; }
.contact-card .field-row-4 > .field { flex: 1 1 8rem; min-width: 0; }
.contact-card h3 { margin: 0 0 1.2rem; font-weight: 500; font-size: 24px; line-height: 28px; }

/*
 * The type scale of a block that IS the page.
 *
 * `.section-contact` is two things: a strip partway down a long home page, and
 * the whole body of the contact page. A heading with a page of its own around
 * it and a heading that is the first thing under the band want different
 * sizes, so the page-sized one is scoped to the plain surface — which is what
 * the contact page uses and the strip does not.
 *
 * More specific selectors beside the rules above rather than edits to them:
 * every home page already published keeps the strip it was designed with.
 */
/*
 * The band above ends where this begins, so the space between them is set
 * here rather than left to `--section-gap` — which is a theme token an agency
 * can move, and estate opens at 64px where minimal opens at 40px.
 */
.section-contact.is-plain { padding-top: 40px; }

/*
 * One ink for everything the block says: rgb(34, 34, 34).
 *
 * Set on the section and INHERITED, so a paragraph added to this block
 * tomorrow is the same colour without anybody remembering to say so. What
 * follows is only the things that carry a colour of their own and would
 * otherwise ignore it: the headings, the card, and form controls — which
 * never inherit a page's colour, they have their own.
 *
 * The placeholder was already this colour at 63% alpha, which is where the
 * value came from; asked for in full, it is the same ink as the text a person
 * types over it.
 */
.section-contact.is-plain { color: rgb(34, 34, 34); }
.section-contact.is-plain h2,
.section-contact.is-plain h3,
.section-contact.is-plain .contact-card,
.section-contact.is-plain .contact-actions .btn-ghost,
.section-contact.is-plain input,
.section-contact.is-plain select,
.section-contact.is-plain textarea,
.section-contact.is-plain select option,
.section-contact.is-plain .form-legend,
/*
 * A heading the agency wrote INSIDE the introductory text. Its rule is the
 * brand's ink, for the band this block is on a home page — which on this
 * page is white on a light surface, and would have been an invisible line
 * nobody could explain. Same specificity as the plain h2 rule above and
 * declared later in the file, so it has to be named here to be beaten.
 */
.section-contact.is-plain .rich-text h2,
.section-contact.is-plain .rich-text h3,
.section-contact.is-plain .rich-text h4 { color: rgb(34, 34, 34); }
.section-contact.is-plain ::placeholder,
.section-contact.is-plain select:has(option[value=""]:checked) { color: rgb(34, 34, 34); }
/* 19.2px is the 1.2rem the card's own heading sits on, so the two columns
   open at the same rhythm as well as on the same line. */
.section-contact.is-plain .contact-intro h2 { font-size: 35px; line-height: 42px; }
.section-contact.is-plain .contact-intro .rich-text { font-size: 16px; line-height: 26px; }
.section-contact.is-plain .contact-card h3 { font-size: 30px; line-height: 35px; }

/*
 * The two headings on one line: "Cum ne găsiți" and the card's own title.
 *
 * `baseline` rather than a margin worked out by hand. The columns carry
 * different padding — the intro's 50px, the card's 1.8rem — and the headings
 * different sizes, so any number written here would be wrong the moment
 * either of those changed. The grid measures the first baseline of each
 * column and works the offset out itself.
 *
 * Only where there ARE two columns. Below 900px they stack one per row and
 * there is nothing to align.
 */
@media (min-width: 900px) {
    .section-contact.is-plain .contact-split { align-items: baseline; }
}
/* The group headings inside the card. Weight and size are set here rather than
   on .form-legend itself, which the viewing tab on a listing page also uses. */
.contact-card .form-legend { color: var(--ink); font-weight: 500; font-size: 15px; line-height: 25px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* Agency rich text: sanitised on save, so these are the only tags it can be. */
/* Highlighted text. A tint of the theme's accent rather than the browser's
   yellow, which belongs to no agency's palette. */
.rich-text mark, .post-body mark {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    color: inherit;
    padding: 0 .15em;
    border-radius: .15em;
}

.rich-text s, .post-body s { text-decoration: line-through; }

/* A picture the agency dropped into the text. Never wider than its column,
   whatever it was uploaded at. */
.rich-text img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1rem 0; }
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }
.rich-text h2, .rich-text h3, .rich-text h4 { margin: 1.6rem 0 .6rem; }
.rich-text ul, .rich-text ol { margin: 0 0 1rem 1.2rem; }
.rich-text li { margin-bottom: .3rem; }
.rich-text blockquote {
    margin: 1.2rem 0; padding-left: 1rem;
    border-left: 3px solid var(--accent); font-style: italic;
}
.section-contact .rich-text h2,
.section-contact .rich-text h3,
.section-contact .rich-text h4 { color: var(--brand-ink); }
.section-contact .rich-text a { color: inherit; }

/* ---------- Header: centred menu, transparent over a hero ---------- */

/*
 * Three groups rather than two: the brand, the menu, and the one thing the
 * header asks for. 1fr auto 1fr keeps the menu centred on the page rather than
 * centred on what is left after the logo, which moves every time an agency
 * uploads a wider one.
 */
.header-inner {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 1rem; padding-block: .85rem;
}
.header-inner > .nav { justify-content: center; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }

.site-header { transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.site-header.is-stuck { box-shadow: 0 6px 20px rgb(15 23 42 / .08); }

/*
 * On the hero, the bar is the photograph. A scrim under it rather than a
 * colour: the agency's own photograph decides how dark the top of the page is,
 * and white text on a bright sky is unreadable without one.
 */
.site-header.is-overlay {
    position: absolute; left: 0; right: 0; top: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / .55), rgb(0 0 0 / .15) 70%, transparent);
    border-bottom-color: transparent;
    color: #fff;
}
/*
 * The TOP level only — `.nav a` also matches every link inside a submenu, and
 * a submenu is a white panel: those links went white on white and the panel
 * opened empty.
 *
 * The shadow is not decoration. A hero is somebody's photograph and the top of
 * it may be bright sky, where white text on a scrim alone is a guess.
 */
.site-header.is-overlay .brand,
.site-header.is-overlay .nav > a,
.site-header.is-overlay .nav > .nav-item > .nav-parent {
    color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .55);
}
.site-header.is-overlay .brand-mark { background: rgb(255 255 255 / .18); color: #fff; }
.site-header.is-overlay .nav > a:hover,
.site-header.is-overlay .nav > .nav-item > .nav-parent:hover { color: #fff; opacity: .8; }
.site-header.is-overlay .btn {
    background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}

/* Scrolled: the ordinary bar, wherever it started. */
.site-header.is-overlay.is-stuck {
    position: sticky;
    background: var(--surface);
    border-bottom-color: var(--line);
    color: inherit;
}
.site-header.is-overlay.is-stuck .brand,
.site-header.is-overlay.is-stuck .nav > a,
.site-header.is-overlay.is-stuck .nav > .nav-item > .nav-parent { color: inherit; text-shadow: none; }
.site-header.is-overlay.is-stuck .brand-mark { background: var(--brand); color: var(--brand-ink); }

/* An overlay header takes no space, so whatever opens the page has to start
   under it — the hero, or the valuation band that opens the same way. */
.site-header.is-overlay + main .hero,
.site-header.is-overlay + main .section-valuation { padding-top: 7rem; }

@media (max-width: 860px) {
    /* Three columns need a screen. Below one, the row wraps as it always did. */
    .header-inner { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .header-inner > .nav { justify-content: flex-start; }
    .site-header.is-overlay + main .hero,
    .site-header.is-overlay + main .section-valuation { padding-top: 5rem; }
}

/* ---------- Hero: where the words sit ---------- */

/*
 * The title had a max-width and no margin, so on a centred hero the text was
 * centred inside a block that was not. Alignment is one class on the section
 * and everything inside follows it.
 */
.hero h1, .hero .hero-sub { margin-inline: auto; }

.hero-left { text-align: left; place-items: center start; }
.hero-left h1, .hero-left .hero-sub { margin-inline: 0; }

.hero-center { text-align: center; place-items: center; }

.hero-right { text-align: right; place-items: center end; }
.hero-right h1, .hero-right .hero-sub { margin-inline: 0 0; margin-left: auto; }

/* ---------- Hero search: a card of the filters people open with ---------- */

.hero-search {
    /* One column of rows. Said out loud because this class had an older rule
       with columns of its own, and a property left undeclared is a property
       the earlier rule keeps. */
    display: grid; grid-template-columns: 1fr; gap: .75rem;
    width: min(100%, 1100px);
    margin: 2rem auto 0; padding: 1rem;
    background: var(--surface); color: var(--ink);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: 0 24px 60px rgb(15 23 42 / .22);
    text-align: left;
}
.hero-search-row { display: grid; gap: .75rem; grid-template-columns: 2fr 1fr 1fr; }
/* The second row ends in the button, which needs less room than a field. */
.hero-search-row:last-child { grid-template-columns: 1fr 1fr 1fr auto; }
.hero-search .field { margin-bottom: 0; }
/*
 * One type scale for this card wherever it is drawn — the hero and the band
 * under the search page's map.
 *
 * Stated rather than `font: inherit`, which copies the SIZE, WEIGHT and
 * LINE-HEIGHT of whatever surrounds the card: the same markup then reads
 * differently on a hero and inside a section, and neither is wrong enough to
 * point at.
 */
.hero-search input, .hero-search select {
    width: 100%; padding: .7rem .85rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: .95rem; font-weight: 400; line-height: 1.5;
}

.hero-search ::placeholder { font-size: .95rem; line-height: 1.5; opacity: 1; color: #595959; }
.hero-search-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}

/*
 * Two classes deep, so it beats every theme's own `.btn` — which is weight 600
 * in two of them, and which brightens and lifts on hover — and the button
 * reads the same on the hero and in the band.
 *
 * No minimum width and no inline padding of its own: it is as wide as the
 * words in it plus the padding every other button has.
 */
.hero-search .hero-search-submit {
    font-weight: 500; font-size: 14px; line-height: 28px;
    min-width: auto; padding-inline: 1.1rem;
    border: 1px solid var(--brand);
    transition: background-color .15s ease, color .15s ease;

    /*
     * No vertical padding, so the button is SHORTER than the controls beside
     * it and stretches to their height instead of setting the row's.
     *
     * The alternative is arithmetic — the inputs' height is their padding plus
     * their line-height plus a border — and arithmetic that has to be redone
     * the next time either type scale moves.
     */
    padding-block: 0;
}

/*
 * Inverted rather than brightened: white inside the same blue border, with the
 * words and the magnifier taking the border's colour. The icon follows because
 * it is drawn in currentColor.
 *
 * The theme's own hover is undone explicitly — `filter` and `transform` are
 * not properties this rule would otherwise mention, and a property left
 * undeclared is a property the earlier rule keeps.
 */
.hero-search .hero-search-submit:hover {
    background: var(--surface);
    color: var(--brand);
    border-color: var(--brand);
    filter: none;
    transform: none;
    box-shadow: none;
}
/* The button's own ink. `.contact-icon` is declared in the brand colour for
   the agent page, and this button's background IS the brand colour. */
.hero-search-icon { display: inline-flex; width: 1.05rem; height: 1.05rem; flex: none; color: inherit; }
.hero-search-icon svg { width: 100%; height: 100%; display: block; }

@media (max-width: 860px) {
    /* Below this, a row of three is three boxes nobody can read. */
    .hero-search-row,
    .hero-search-row:last-child { grid-template-columns: 1fr; }
    .hero-search-submit { width: 100%; }
}

/*
 * The search card straddles the bottom edge of the hero: half on the
 * photograph, half on the section below it.
 *
 * Positioned rather than pushed with a margin, because the card's height
 * depends on how a browser lays out seven controls — translating it by half of
 * ITS OWN height is the only way to sit on the edge without measuring
 * anything.
 *
 * Wide screens only. Stacked on a phone the card is taller than the hero, and
 * half of that hanging over the next section would swallow it.
 */
@media (min-width: 861px) {
    .hero { position: relative; padding-bottom: 6.65rem; }

    /*
     * Scoped to the hero, because the card is drawn elsewhere too — under the
     * map on the search page — and there it must sit in the flow. Unscoped it
     * kept its absolute positioning there, escaped the band and landed on top
     * of the first row of listings: a property left undeclared is a property
     * the earlier rule keeps, which is the note above this block as well.
     */
    .hero .hero-search {
        position: absolute; left: 50%; bottom: 0;
        transform: translate(-50%, 50%);
        width: min(92%, 1100px); margin: 0; z-index: 3;
    }

    /* Room for the half that hangs over whatever comes next — or, on a page
       whose only section is the hero, over nothing at all. */
    .hero + * { padding-top: calc(var(--section-gap) + 3rem + var(--hero-gap)); }
    main > .hero:last-child { margin-bottom: 5rem; }
}

/* The logo's box. `contain` because an agency's file is whatever shape it is,
   and a logo stretched to our numbers is worse than one that fits inside them. */
.brand-logo { width: 156px; height: 44px; object-fit: contain; object-position: left center; }

/* ---------- Categories: its own type scale ---------- */

.section-categories h2,
.section-agents h2,
.section-posts h2,
.section-featured h2 { font-weight: 500; font-size: 32px; line-height: 37px; text-align: center; }
/* No rule under this heading: estate draws one under every section title, and
   here the row of cards is the thing that separates it from what follows. */
.section-categories > .wrap > h2::after { content: none; }
/* Same reasoning: the row of cards separates the heading from what follows. */
.section-agents > .wrap > h2::after { content: none; }
.section-posts > .wrap > h2::after { content: none; }
/* No max-width here: the subtitle runs the width of the section, like the row
   of cards under it. */
/*
 * `.section-sub` carries a NEGATIVE top margin: it is written to tuck under the
 * rule this theme draws below a section heading. With that rule suppressed
 * there is nothing to tuck under, and the subtitle climbed on top of the
 * title.
 */
.section-categories .section-sub,
.section-agents .section-sub,
.section-posts .section-sub,
.section-featured .section-sub { margin-top: .5rem; max-width: none; text-align: center; font-size: 15px; line-height: 24px; }

.tile-label { font-weight: 500; line-height: 23px; }
.tile-count { line-height: 18px; }

/* ---------- Proprietăți: heading, subtitle, tabs ---------- */

/* The tab strip is the line under this heading; a second rule above it is one
   line too many. */
.section-featured > .wrap > h2::after { content: none; }
/* Every section's own "see all", not just the listings one: the articles
   section had no rule at all here and its button sat against the left edge. */
.section-more { text-align: center; margin-top: 2rem; }

/* Specific enough to beat any theme's .btn, so this is stated once for all
   four rather than copied per stylesheet. */
.section-more .btn { font-weight: 500; font-size: 14px; line-height: 28px; }

/*
 * Proprietăți keeps text tabs rather than the pills the showcase uses: they sit
 * on a line that runs the width of the section, and the chosen one is a box
 * open at the bottom, joined to the panel below it.
 *
 * Scoped, and the active state is written out ten times, because the pill's own
 * active rule is ten selectors of the same specificity — a shorter one here
 * would lose.
 */
.section-featured .tab-list {
    gap: 0; justify-content: center; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
}
.section-featured .tab-label {
    /* -1px at the bottom so the box sits on the strip's line; 5px either side
       so the tabs read as separate boxes rather than one run. */
    margin: 0 5px -1px;
    padding: .75rem 1.15rem;
    /* A full box, bottom edge included: the strip's own line runs behind it. */
    border: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    background: #E7E7E721;
    color: var(--ink-muted);
    font-weight: 500; font-size: .95rem;
}
.section-featured .tab-label:hover { background: #F4F7FE; border-color: var(--line); color: var(--ink); }
.section-featured .tab-input:nth-of-type(1):checked ~ .tab-list .tab-label:nth-of-type(1),
.section-featured .tab-input:nth-of-type(2):checked ~ .tab-list .tab-label:nth-of-type(2),
.section-featured .tab-input:nth-of-type(3):checked ~ .tab-list .tab-label:nth-of-type(3),
.section-featured .tab-input:nth-of-type(4):checked ~ .tab-list .tab-label:nth-of-type(4),
.section-featured .tab-input:nth-of-type(5):checked ~ .tab-list .tab-label:nth-of-type(5),
.section-featured .tab-input:nth-of-type(6):checked ~ .tab-list .tab-label:nth-of-type(6),
.section-featured .tab-input:nth-of-type(7):checked ~ .tab-list .tab-label:nth-of-type(7),
.section-featured .tab-input:nth-of-type(8):checked ~ .tab-list .tab-label:nth-of-type(8),
.section-featured .tab-input:nth-of-type(9):checked ~ .tab-list .tab-label:nth-of-type(9),
.section-featured .tab-input:nth-of-type(10):checked ~ .tab-list .tab-label:nth-of-type(10) {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    font-weight: 600;
}

/* The card's one line of description, under the price. */
/* One grey for both lines under the price — the same #595959 the article
   cards and the section subtitles use, rather than each theme's --ink-muted,
   which is a different grey in all four. */
.card-excerpt { margin: .4rem 0 0; font-size: .9rem; line-height: 1.45; color: #595959; }

/* ---------- Card footer: who is selling it, and what to do with it ---------- */

.card-agent {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: 0.2rem; padding-top: .75rem;
    border-top: 1px solid var(--line);
}
.card-agent-who { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; min-width: 0; }
.card-agent-who a, .card-agent-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-agent-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.card-agent-avatar-empty {
    display: grid; place-items: center;
    background: var(--surface-alt, #eef2f6); color: var(--ink-muted);
    font-size: .72rem; font-weight: 600;
}

.card-actions { display: inline-flex; gap: .4rem; flex: none; }
.card-action {
    display: grid; place-items: center; width: 30px; height: 30px;
    border: 1px solid var(--line); border-radius: calc(var(--radius) - 2px);
    color: var(--ink-muted);
}
.card-action svg { width: 15px; height: 15px; }
.card-action:hover { border-color: var(--brand); color: var(--brand); }
/* Chosen, and told to a screen reader by aria-pressed rather than by colour. */
.card-action.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.card-action.is-copied { border-color: var(--brand); color: var(--brand); }

/* ---------- The comparison tray and its page ---------- */

.compare-bar {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .9rem; z-index: 30;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 12px 30px rgb(15 23 42 / .18);
    font-size: .9rem;
}
.compare-bar[hidden] { display: none; }

.compare-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare th[scope="row"] { width: 12rem; color: var(--ink-muted); font-weight: 600; }
.compare img { width: 100%; max-width: 220px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: .4rem; }
.compare-title { font-weight: 600; }

/* A listing of another type cannot join a comparison already under way. */
.card-action.is-disabled { opacity: .35; cursor: not-allowed; }
.card-action.is-disabled:hover { border-color: var(--line); color: var(--ink-muted); }

.compare-clear {
    border: 0; background: none; padding: 0 .1rem; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: var(--ink-muted);
}
.compare-clear:hover { color: var(--ink); }

/* The comparison table */
.compare thead td { vertical-align: bottom; }
.compare-head { display: block; text-decoration: none; }
.compare-price { display: block; margin-top: .2rem; font-weight: 600; color: var(--brand); }
.compare-heading th { padding-top: 1.4rem; font-size: 1.05rem; color: var(--ink); }
.compare-mark { font-weight: 700; }
.compare-mark.is-yes { color: #16a34a; }
.compare-mark.is-no { color: #dc2626; }
.compare tbody tr:nth-child(odd) td, .compare tbody tr:nth-child(odd) th { background: rgb(127 127 127 / .05); }

/* ---------- Comparison page type ---------- */

.compare thead img { width: 311px; height: 201px; max-width: 100%; object-fit: cover; }
.compare-title { display: block; font-weight: 500; font-size: 18px; line-height: 23px; }
.compare-price { display: block; margin-top: .2rem; font-weight: 400; font-size: 18px; line-height: 22px; color: var(--brand); }
.compare th[scope="row"] { font-weight: 400; font-size: 14px; line-height: 23px; }
.compare td { font-weight: 400; font-size: 12px; line-height: 23px; }
/* The column heads are the listings themselves, and they keep their own scale. */
.compare thead td { font-size: inherit; line-height: inherit; }
.compare-heading-main { font-weight: 500; font-size: 34px; line-height: 44px; margin: 2rem 0 1rem; }
.compare-map + .wrap .compare-heading-main { margin-top: 0; }

/* ---------- A map that opens a page: comparison, and search ---------- */

.compare-map .map-block, .search-map .map-block { position: relative; margin: 0; border-radius: 0; }
/* Edge to edge, and taller than an inline map because it is the first thing
   on the page rather than a footnote to a list. */
.compare-map .map, .search-map .map { height: 440px; border: 0; border-radius: 0; }

/*
 * The privacy note belongs ON the map: it explains what the pins mean, and a
 * line of grey text under a full-width map reads as a caption for the page.
 */
.compare-map .map-note, .search-map .map-note {
    position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0;
    padding: .45rem .9rem;
    background: var(--surface);
    /* The page's own ink, not the muted grey: it is a sentence explaining what
       the pins mean, printed over a photograph of a map. Declared here as well
       as beating `.muted` in the markup, which resolves to the grey. */
    color: var(--ink);
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 6px 18px rgb(15 23 42 / .14);
    font-size: 12px; line-height: 20px; max-width: calc(100% - 2rem);
}

@media (max-width: 640px) {
    .compare-map .map { height: 320px; }
    .compare-map .map-note, .search-map .map-note { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; }
}

/* ---------- Proprietăți recomandate ---------- */

.section-recommended h2 { font-weight: 500; font-size: 32px; line-height: 37px; text-align: center; }
.section-recommended > .wrap > h2::after { content: none; }
.section-recommended .section-sub { margin-top: .5rem; max-width: none; text-align: center; font-size: 15px; line-height: 24px; }

/*
 * A row that scrolls sideways. Scroll-snap is what makes it usable with no
 * script: a finger, a trackpad and a scrollbar all page through it, and the
 * padding on either side lets the first and last card sit where the wrap
 * would have put them.
 */
/*
 * The rail scrolls, the page does not. `overflow-x: clip` on the section is
 * the belt to that brace: a row wider than the window used to give the whole
 * document a horizontal scrollbar, which is the one thing a full-width row
 * must never do.
 */
.section-recommended { overflow-x: clip; }
/*
 * And the document itself, because a single stray pixel anywhere gives every
 * page a horizontal scrollbar and nobody can tell which element did it.
 * `clip` rather than `hidden`: hidden would make the body a scroll container
 * and the sticky header would stop sticking.
 */
body { overflow-x: clip; }

/* ---------- Featured properties, style 2: one at a time ---------- */

/*
 * A row of full-width slides that snaps, so it pages with no script at all —
 * the arrows and the counter under it are the enhancement. `overflow-x: clip`
 * on the section is the belt to that brace: a row wider than the window must
 * never give the document a horizontal scrollbar.
 */
.section-split { overflow-x: clip; }

.split-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    margin-top: 2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Dragged, swiped or paged with the arrows; a scrollbar under a photograph
       reads as a mistake. */
    scrollbar-width: none; -ms-overflow-style: none;
}
.split-rail::-webkit-scrollbar { display: none; }

.split-card {
    scroll-snap-align: start;
    display: grid;
    /* The photograph takes two thirds; the case for the property takes what is
       left, and never less than a readable column. */
    grid-template-columns: 2fr minmax(260px, 1fr);
    background: var(--surface);
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgb(15 23 42 / .1));
}

.split-photo { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--surface-alt); }
.split-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-photo-empty { display: block; width: 100%; height: 100%; }
.split-badge { position: absolute; top: 1rem; right: 1rem; }

/* Centred against the photograph rather than pinned to the top: the body is
   four short blocks and the picture is tall, and level with the middle is the
   only place the two read as one card. */
.split-body { align-self: center; padding: 2rem; min-width: 0; }

.split-price { margin: 0; font-size: .95rem; color: var(--ink-muted); }
/* The name of the property, at the scale of a page heading rather than a
   card's: on this layout it is the one thing being made a case for. */
.split-title { margin: .35rem 0 0; font-weight: 400; font-size: 34px; line-height: 39px; }
.split-title a:hover { color: var(--brand); }
.split-excerpt { margin: 1rem 0 0; color: #595959; font-weight: 400; font-size: 15px; line-height: 24px; }

.split-specs {
    display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
    margin-top: 1.25rem; font-size: 15px; color: #595959;
}

/*
 * TWO classes for the padding, and not because it needs the weight.
 *
 * The list is printed `class="split-specs plain"`, and estate redeclares
 * `.plain { padding: 0 }` at one class in a file loaded after this one — so a
 * one-class rule here loses the tie and the space is there on three themes and
 * gone on the one agentpilot.ro runs. The same collision flattened the pill on
 * a listing card, a few hundred lines up.
 */
.split-specs.plain { padding-top: .5rem; }
.split-specs li { display: inline-flex; align-items: center; gap: .4rem; }

/*
 * The arrows sit under the specs, in the bottom right corner of the card.
 *
 * One set for the row, laid over the card rather than printed inside each
 * slide — a control per slide is the same two buttons announced once per
 * listing — so the rail gets a positioned stage to hang them on. Absolute
 * rather than in the body's flow for the same reason: the body is centred
 * against a tall photograph, and a row pinned under it would ride up and down
 * with the length of somebody's description.
 */
.split-stage { position: relative; }
.split-foot {
    position: absolute; right: 2rem; bottom: 2rem; z-index: 1;
    display: flex; align-items: center; gap: .75rem;
}
.split-foot[hidden] { display: none; }
.split-foot button {
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px);
    background: var(--surface); color: var(--ink); font-size: 1rem; cursor: pointer;
}
.split-foot button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
/* Told rather than hidden: a button that disappears moves the pair under the
   cursor, and the counter beside them is what says where the row is. */
.split-foot button:disabled { opacity: .35; cursor: default; }
.split-count { font-size: .8rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    /* Side by side, neither half is worth looking at. */
    .split-card { grid-template-columns: 1fr; }
    .split-body { padding: 1.25rem 1.25rem 4.5rem; }
    .split-title { font-size: 24px; line-height: 30px; }
    /* Still the bottom right corner, but of a card that is now a column. */
    .split-foot { right: 1.25rem; bottom: 1.25rem; }
}

.recommended-rail {
    display: flex; gap: 1rem; margin-top: 2rem;
    max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    /*
     * The drag stops at the end of the row instead of continuing into the
     * page. Without this a pull past the last card scrolls the DOCUMENT
     * sideways, which is a white strip down the right of every screenshot and
     * cannot be clipped away — the page really has scrolled.
     */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 0 1rem 1rem;
    /* No scrollbar of its own: it is dragged, swiped or paged with the arrows,
       and a second scrollbar under a photograph reads as a mistake. */
    scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab;
}
.recommended-rail::-webkit-scrollbar { display: none; }
.recommended-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
/* Snapping off for the instant the loop jumps by one set, or the browser
   animates the jump and the seam becomes visible. */
.recommended-rail.is-jumping { scroll-snap-type: none; scroll-behavior: auto; }
/* A drag must not end in following the link it started on. */
.recommended-rail.is-dragging a { pointer-events: none; }

.recommended-card { flex: 0 0 min(86%, 1100px); scroll-snap-align: center; }
.recommended-card > a {
    position: relative; display: block; aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius) + 4px); overflow: hidden;
    color: #fff; text-decoration: none; background: var(--surface-alt);
}
.recommended-card img { width: 100%; height: 100%; object-fit: cover; }
.recommended-empty { display: block; width: 100%; height: 100%; background: var(--surface-alt); }

/* The words sit on a photograph nobody chose for its contrast. */
.recommended-body {
    position: absolute; inset: auto 0 0 0; display: block;
    padding: 4rem 1.6rem 1.4rem;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .78));
}
.recommended-title { display: block; font-size: 28px; line-height: 34px; font-weight: 500; }
.recommended-specs { display: block; margin-top: .35rem; font-size: 15px; opacity: .9; }
.recommended-price { display: block; margin-top: .5rem; font-size: 20px; font-weight: 600; }

.recommended-badge, .recommended-status {
    position: absolute; top: 1rem; padding: .3rem .8rem;
    border-radius: 999px; font-size: .8rem; font-weight: 600;
}
.recommended-badge { left: 1rem; background: var(--accent); color: #fff; }
.recommended-status { right: 1rem; background: var(--brand); color: var(--brand-ink); }

.recommended-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.recommended-arrows { display: inline-flex; gap: .5rem; }
.recommended-arrows[hidden] { display: none; }
.recommended-arrows button {
    width: 40px; height: 40px; border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-size: 1.1rem; cursor: pointer;
}
.recommended-arrows button:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 640px) {
    .recommended-title { font-size: 20px; line-height: 26px; }
    .recommended-body { padding: 3rem 1rem 1rem; }
    .recommended-card { flex-basis: 92%; }
}

/* ---------- Explorează: big tiles with a name and a count ---------- */

.section-explore h2 { font-weight: 500; font-size: 32px; line-height: 37px; text-align: center; }
.section-explore > .wrap > h2::after { content: none; }
.section-explore .section-sub { margin-top: .5rem; max-width: none; text-align: center; font-size: 15px; line-height: 24px; }

/*
 * Four across, and every other tile taller — the rows interlock rather than
 * lining up, which is what makes a grid of photographs look composed. Dense
 * packing fills the gap the tall ones leave.
 */
/*
 * Tiles of 342x350 and 342x433, interlocking.
 *
 * One-pixel rows with no row gap, and each tile spanning its own height plus
 * the 16px that separates it from the one below — which is the only way to
 * hold exact pixel heights AND have the rows interlock. A row gap would be
 * multiplied by every one of those rows.
 */
.explore-grid {
    display: grid; margin-top: 2rem;
    grid-template-columns: minmax(0, 342px);
    justify-content: center;
    column-gap: 1rem; row-gap: 0;
    grid-auto-rows: 1px;
    /*
     * Dense, or a column waits for the cursor.
     *
     * Auto-placement moves forward only: once a tile has been put low down in
     * one column, the next tile starts looking from there — even in a column
     * that has been free since much higher up. That is a hole under the short
     * tile of every column whose neighbour is tall. Dense packing looks back
     * and fills it, and it cannot reorder anything here because every tile
     * already names its own column.
     */
    grid-auto-flow: dense;
}
.explore-tile {
    position: relative; display: block; overflow: hidden;
    height: 350px; grid-row: span 366; margin-bottom: 16px;
    border-radius: calc(var(--radius) + 2px);
    color: #fff; text-decoration: none;
}

/*
 * The checkerboard: a column starts short and its neighbour starts tall, so
 * the rows never line up.
 *
 * Written per column count, because which tile is the tall one depends on how
 * many columns there are — with three columns the pattern is simply every
 * other tile, with two and four it repeats over four and eight. That is also
 * why the count is fixed per breakpoint instead of auto-fit: `nth-child` has
 * to agree with it.
 */
.explore-tile:nth-child(even) { height: 433px; grid-row: span 449; }

@media (min-width: 730px) {
    .explore-grid { grid-template-columns: repeat(2, 342px); }
    /*
     * Each tile is told which column it is in.
     *
     * Auto-placement will not do it: with tiles of two different row spans the
     * cursor skips cells it cannot fit, so the sixth tile is not necessarily
     * in the second column — and a checkerboard written with `nth-child` then
     * describes a layout the browser did not build. With the column fixed,
     * each column packs down its own tiles and index and position agree.
     */
    .explore-tile:nth-child(2n + 1) { grid-column: 1; }
    .explore-tile:nth-child(2n) { grid-column: 2; }
    /*
     * `:nth-child(n)` rather than the bare class: this has to undo the
     * previous breakpoint's tall tiles, and a class selector loses to the
     * `:nth-child` that made them tall. Same specificity, later in the file,
     * so it wins — and then the rules below make the right ones tall again.
     */
    .explore-tile:nth-child(n) { height: 350px; grid-row: span 366; }
    .explore-tile:nth-child(4n + 2),
    .explore-tile:nth-child(4n + 3) { height: 433px; grid-row: span 449; }
}

@media (min-width: 1090px) {
    .explore-grid { grid-template-columns: repeat(3, 342px); }
    .explore-tile:nth-child(3n + 1) { grid-column: 1; }
    .explore-tile:nth-child(3n + 2) { grid-column: 2; }
    .explore-tile:nth-child(3n) { grid-column: 3; }
    .explore-tile:nth-child(n) { height: 350px; grid-row: span 366; }
    .explore-tile:nth-child(even) { height: 433px; grid-row: span 449; }
}

@media (min-width: 1440px) {
    .explore-grid { grid-template-columns: repeat(4, 342px); }
    .explore-tile:nth-child(4n + 1) { grid-column: 1; }
    .explore-tile:nth-child(4n + 2) { grid-column: 2; }
    .explore-tile:nth-child(4n + 3) { grid-column: 3; }
    .explore-tile:nth-child(4n) { grid-column: 4; }
    .explore-tile:nth-child(n) { height: 350px; grid-row: span 366; }
    .explore-tile:nth-child(8n + 2),
    .explore-tile:nth-child(8n + 4),
    .explore-tile:nth-child(8n + 5),
    .explore-tile:nth-child(8n + 7) { height: 433px; grid-row: span 449; }
}
.explore-tile img { width: 100%; height: 100%; object-fit: cover; }

/*
 * A dark veil at rest, lifted under the cursor: the tile somebody is pointing
 * at is the one in full colour. It sits above the photograph and below the
 * words, which keep their own gradient — the label has to stay readable at
 * both ends of the fade, not only at one.
 */
.explore-tile::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: #000; opacity: .3;
    transition: opacity .25s ease;
}
.explore-tile:hover::before,
.explore-tile:focus-visible::before { opacity: 0; }

/* The words sit on somebody's photograph, so they carry their own backing. */
.explore-body {
    position: absolute; inset: auto 0 0 0; z-index: 2; display: block;
    padding: 3rem 1rem 1rem; text-align: center;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .7));
}
.explore-label { display: block; font-weight: 500; font-size: 20px; line-height: 23px; }
.explore-count { display: block; margin-top: .15rem; font-size: .85rem; line-height: 21px; opacity: .9; }

/* No photograph anywhere in that category: a tint rather than an empty box. */
.explore-tint-0 { background: #2f4858; }
.explore-tint-1 { background: #33658a; }
.explore-tint-2 { background: #86bbd8; }
.explore-tint-3 { background: #758e4f; }
.explore-tint-4 { background: #b56576; }
.explore-tint-5 { background: #6d597a; }

@media (max-width: 640px) {
    /* One column, and shorter: a 433px tile is most of a phone screen. */
    .explore-tile:nth-child(n) { height: 260px; grid-row: span 276; }
    .explore-tile:nth-child(even) { height: 320px; grid-row: span 336; }
}

/* --------------------------------------------------------------------------
   Articles — the card, the list and the page
   -------------------------------------------------------------------------- */

/*
 * One card design, drawn in three places: /articole, the strip on a page and
 * "citește și" under an article. Sized like the team card and for the same
 * reason — a photograph at a fixed ratio is what makes a row of them read as
 * a row rather than as three unrelated things.
 */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.post-card-cover { display: block; }

.post-card-cover img,
.post-card-blank {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--surface-alt);
}

.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.1rem; }

/* Only on the article itself now: on a card they were three chips over every
   title, which turned a row of articles into a row of taxonomy. */
.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }

.post-tag {
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    border-radius: 999px;
    padding: .15rem .6rem;
}

.post-tag:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }

.post-card-title { font-size: 18px; font-weight: 500; line-height: 26px; margin: 0; }
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { color: var(--brand); }

.post-card-summary { font-size: 14px; line-height: 22px; margin: .6rem 0 0; color: #595959; }

/* Directly under the title, which is where somebody who has just read one
   looks next. */
.post-card-meta { font-size: 13px; line-height: 20px; margin: .35rem 0 0; color: #595959; }

/* Pushed to the bottom, so the link sits on one line across the row whatever
   length the summaries above it are. */
.post-card-more { font-size: 14px; line-height: 22px; font-weight: 500; margin: 1rem 0 0; margin-top: auto; padding-top: .75rem; }
.post-card-more a { color: var(--brand); text-decoration: none; }
.post-card-more a:hover { text-decoration: underline; }

/* The index's own title, larger than a page heading: this is the front page of
   everything the agency has written. Weight and leading are stated here rather
   than left to --heading-weight, which is 600 or 700 in two themes. */
.post-index-head h1 { font-weight: 500; font-size: 50px; line-height: 65px; }

/* Under the articles rather than over them: somebody arrives to read, and
   narrows by subject once they have seen what there is. */
.post-filters { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.post-filters-label { font-size: 14px; line-height: 23px; margin: 0 0 .6rem; color: #595959; }

/* The sections, OVER the articles: they are navigation, not a filter, so they
   stand off the grid under them rather than sitting on it. */
.post-categories { padding-bottom: 24px; }

/*
 * The article page.
 *
 * A band carries the title, and the photograph hangs off the bottom of it —
 * half in, half out. The two are siblings rather than nested, so the band
 * cannot clip the thing that is meant to escape it, and the overlap is one
 * negative margin rather than absolute positioning that has to be undone at
 * every width.
 */
.post-hero {
    background: var(--surface-alt);
    text-align: center;
    padding: 3.5rem 0 7rem;
}

/* No photograph, nothing to hang: the band closes up rather than leaving the
   article floating below an empty stripe. */
.post-hero-plain { padding-bottom: 3rem; }

.post-hero h1 { margin: 0 auto; max-width: 30ch; font-size: 34px; line-height: 44px; }

.post-cover-wrap { margin-top: -5.5rem; }

.post-cover {
    display: block;
    width: 100%;
    /* 1300x500 where the theme's wrap is wide enough for it, and that ratio at
       every width below — the shape is the point, the pixels are the ceiling. */
    max-width: 1300px;
    margin-inline: auto;
    aspect-ratio: 1300 / 500;
    object-fit: cover;
    background: var(--surface-alt);
}

/* The measure, not the page: about 80 characters, which is what a column of
   prose can be before the eye loses the start of the next line. */
.post { max-width: 720px; padding-block: 3.5rem; }

/* The summary, set larger than the body: it is the paragraph that decides
   whether anybody reads the rest. */
.post-lead { font-size: 17px; line-height: 28px; font-weight: 500; margin: 0 0 1.5rem; }

.post-body { font-size: 15px; line-height: 26px; }
.post-body h2, .post-body h3, .post-body h4 { margin: 2rem 0 .75rem; line-height: 1.3; }
.post-body h2 { font-size: 22px; }
.post-body h3 { font-size: 19px; }
.post-body h4 { font-size: 17px; }
.post-body p, .post-body ul, .post-body ol { margin-bottom: 1.1rem; }
.post-body ul, .post-body ol { padding-left: 1.4rem; }
.post-body ul li { list-style: disc; }
.post-body ol li { list-style: decimal; }
.post-body li { margin-bottom: .3rem; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* A quotation is set apart by a rule and a slant, not by a box: it is still
   the article's own voice. */
.post-body blockquote {
    margin: 1.5rem 0;
    padding-left: 1.1rem;
    border-left: 3px solid var(--brand);
    font-style: italic;
    font-size: 14px;
    line-height: 24px;
    color: #595959;
}

.post-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

/* Who wrote it and when. The photograph is round at every size it appears in,
   like every other place an agent's face is shown. */
.post-byline { display: flex; align-items: center; gap: .6rem; margin: 0; }
.post-byline-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.post-byline-name { display: block; font-size: 14px; line-height: 22px; font-weight: 500; }
.post-byline-name a { color: inherit; text-decoration: none; }
.post-byline-name a:hover { color: var(--brand); }
.post-byline-date { display: block; font-size: 13px; line-height: 20px; color: #595959; }

/* Its own line under both, so a long list of labels never pushes the share
   icons off the end of the row. */
.post-foot .post-tags { flex-basis: 100%; margin: 0; }

.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }

.post-share-label {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #595959;
    margin-right: .35rem;
}

.post-share .social-link { width: 1.75rem; height: 1.75rem; color: var(--ink); }
.post-share .social-icon { width: 1rem; height: 1rem; }

/* The article before and the one after, on a band of their own: the end of one
   article is exactly where somebody decides whether to read another. */
.post-nav { background: var(--surface-alt); border-block: 1px solid var(--line); }

.post-nav-inner {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.75rem;
}

/* The divider is the middle column, so it sits in the centre of the page
   rather than after whichever title happens to be longer. */
.post-nav-inner::before {
    content: '';
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    background: var(--line);
}

.post-nav-side { grid-row: 1; min-width: 0; }
.post-nav-side:first-of-type { grid-column: 1; }
.post-nav-next { grid-column: 3; text-align: right; }

.post-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
    max-width: 100%;
}

.post-nav-link:hover .post-nav-title { color: var(--brand); }
.post-nav-arrow { font-size: 1.5rem; line-height: 1; color: #595959; }

.post-nav-label {
    display: block;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #595959;
}

.post-nav-title { display: block; font-size: 14px; line-height: 22px; font-weight: 500; }

@media (max-width: 640px) {
    /* One under the other, both to the left: two half-width columns of title
       on a phone is four words a line. */
    .post-nav-inner { grid-template-columns: 1fr; gap: 1rem; }
    .post-nav-inner::before { display: none; }
    .post-nav-side, .post-nav-next { grid-column: 1; text-align: left; }
    .post-nav-side { grid-row: auto; }
    .post-cover-wrap { margin-top: -3rem; }
    .post-hero { padding-bottom: 4.5rem; }
}


/* --------------------------------------------------------------------------
   The search page: map, band, three columns and the advanced panel
   -------------------------------------------------------------------------- */

/*
 * The band under the map is the home page's own search card, restyled rather
 * than rewritten: it sits flush here instead of floating over a photograph,
 * so the card's margin, shadow and rounding are undone and nothing else is.
 */
/*
 * The theme's second surface, not white: between a full-width map and a white
 * page the strip had nothing to mark it as its own thing, and its controls are
 * white — on grey they read as controls rather than as outlines drawn on the
 * page.
 */
.search-band { background: var(--surface-alt); border-bottom: 1px solid var(--line); padding-block: 1rem; }

/* Two controls in the first row, not three, when the page's own address
   already says the direction. Specific enough to beat a theme's own
   .hero-search-row, so it is stated once here for all four. */
.hero-search.is-directed .hero-search-row:first-child { grid-template-columns: 2fr 1fr; }
.search-band .hero-search {
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

/*
 * One row here, where the hero uses two.
 *
 * The hero's card is a block on a photograph and can be two rows deep; this is
 * a strip under a map, and a strip that is two controls tall pushes the
 * listings off the screen.
 *
 * `display: contents` on the rows, so the fields inside them become children
 * of this flex line — the alternative is a second copy of the partial with the
 * same controls in one div, which is two places to add the next control to.
 *
 * They WRAP rather than shrink past reading: a landing page has five controls
 * and fits, /proprietati has the direction select as well and may not, and a
 * row of six unreadable boxes is worse than two readable lines.
 */
/*
 * Smaller type than the hero's card. There the search is the thing on the
 * screen; here it is a strip between a map and the listings, and the controls
 * carry six placeholders across one line.
 *
 * SIZE only — the family and the weight stay with the shared rule, so the two
 * cannot end up in different faces.
 */
.search-band .hero-search input,
.search-band .hero-search select { font-size: 13px; line-height: 18px; }
.search-band .hero-search ::placeholder { font-size: 13px; line-height: 18px; }

.search-band .hero-search { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; }
.search-band .hero-search-row { display: contents; }
.search-band .hero-search .field { flex: 1 1 140px; min-width: 0; margin: 0; }
/* The locality is the one people type into, and the longest thing they type. */
.search-band .hero-search .hero-field-wide { flex: 2 1 220px; }
/* Beats estate's 11rem minimum, which was sized for a card, not a strip. */
.search-band .hero-search-submit { flex: 0 0 auto; }

/* Two classes deep, so it beats a theme's own single-class `.section` however
   the files are ordered. */
.section.section-results { padding-top: 20px; }
/* And nothing under the heading block either: the chips carry their own space
   above them, and the count line below has its own. Left at 1.5rem there was a
   whole empty line between the title and the results it names. */
.section-results .page-head { margin-bottom: 0; }

/*
 * Four across. The advanced panel used to take the fourth column, and the
 * room it took is one more listing on every row. The filters people actually
 * use are the band under the map; the crawlable ones are the /vanzari
 * addresses in the footer, the header and the block at the foot of this page.
 */
.layout-results { display: block; }
.grid-results { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* What was found and in what order, on one line above the cards. */
.results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.results-count { margin: 0; font-size: .95rem; color: #595959; }
.results-sort select { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: .9rem; }

@media (max-width: 1180px) {
    .grid-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .grid-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .search-map .map { height: 300px; }
}

@media (max-width: 640px) {
    .grid-results { grid-template-columns: 1fr; }
}

/* ---------- Valuation band: the invitation over a photograph ---------- */

/*
 * This page IS this band: a photograph the width of the screen, the invitation
 * over it, and the form in a card beside it.
 *
 * Its own rules rather than the hero's, though it looks like one. A hero is
 * words centred on a picture; this is two columns on one, and the card decides
 * how tall the band is — a rule written for the hero would either crop the card
 * or leave a field below the fold.
 */
.section-valuation {
    position: relative;
    color: #fff;
    background-image: var(--valuation-image, none);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-dark, #10151c);
    padding-block: 4rem;
}

/*
 * The scrim is what makes white text readable over an unknown photograph. An
 * agency will upload something bright and something dark in the same week, so
 * the theme cannot assume either.
 */
.section-valuation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(9 14 24 / .55) 0%, rgb(9 14 24 / .35) 45%, rgb(9 14 24 / .7) 100%);
}
.section-valuation > * { position: relative; z-index: 1; }

/*
 * Centred against the card rather than aligned to its top: the words are three
 * lines and the form is fifteen, and the two columns read as one band only
 * when the short one sits in the middle of the tall one.
 */
.valuation-split { align-items: center; }

/*
 * The height asked for, and a MINIMUM rather than a height: the card grows
 * when a browser draws its controls larger or an agency writes four paragraphs
 * beside it, and a fixed height would put the submit button outside the
 * photograph. Only where the two columns exist — on a phone the card alone is
 * taller than this, and a floor there would be empty space above it.
 */
@media (min-width: 900px) {
    .section-valuation {
        min-height: 882px;
        /* Grid, so the extra height goes ABOVE and BELOW the two columns
           rather than under them: a band that grew downwards would leave the
           photograph empty beneath the card. The scrim is out of flow and
           takes no part in it. */
        display: grid;
        align-content: center;
    }
}

/*
 * Both columns of words stop at the same 595px, in PIXELS rather than in `ch`:
 * a measure in characters moves with the font size, so the heading and the
 * paragraph under it wrapped at two different widths and the block read as
 * ragged. One number, one edge.
 */
.valuation-intro h2 {
    color: inherit;
    font-weight: 500; font-size: 40px; line-height: 48px;
    margin: 0 0 1.2rem;
    max-width: 595px;
}
.valuation-intro .rich-text { font-size: 16px; line-height: 26px; max-width: 595px; }
.valuation-intro .rich-text p { margin: 0 0 1rem; }
.valuation-intro .rich-text p:last-child { margin-bottom: 0; }

/*
 * The card is the contact page's shell — one definition of "a white card with
 * a form in it", so the two pages cannot drift — with the room this band gives
 * it and a submit that reads as the end of a form rather than as a link.
 */
.valuation-card { padding: 2rem; }
.valuation-card .btn-block {
    margin-top: .6rem;
    text-transform: uppercase;
    font-weight: 500; font-size: 14px; line-height: 14px; letter-spacing: .04em;
}

@media (max-width: 899px) {
    /* Stacked, the words come first and the card follows: on a phone the band
       is read before it is filled in. */
    .valuation-intro h2 { font-size: 32px; line-height: 39px; max-width: none; }
}

/* ---------- Frequently asked questions ---------- */

/*
 * The list runs to 1140px and centres under the heading: wider than a reading
 * measure because a question is one line and its answer is three, and the row
 * a summary sits on is what somebody scans.
 */
.faq { display: grid; gap: .5rem; max-width: 1140px; margin-inline: auto; }

/*
 * Each question is a white card of its own.
 *
 * The padding is on the SUMMARY, not on the details around it: padding on the
 * details is a 15px ring that belongs to the parent, so clicking it did
 * nothing and only the words themselves opened the answer. On the summary the
 * whole padded row IS the control.
 */
.faq details { background: #fff; }
.faq summary { padding: 15px 15px 15px 15px; }

/*
 * The question. Weight, size and leading stated here, not left to the theme:
 * estate drew a 600 summary and the others drew whatever <summary> defaults
 * to, so the same list read three ways.
 *
 * A flex row so the chevron sits at the END, where somebody's eye finishes the
 * question rather than where it starts — which is also what blockifies the
 * ::after: width and height do not apply to an inline box, and a border drawn
 * on one runs down the whole line instead of turning a corner.
 */
.faq summary {
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    font-weight: 500; font-size: 17px; line-height: 22px;
}

/* The browser's own triangle, gone: `list-style` covers Firefox and Chrome,
   the pseudo-element covers Safari, and both are needed. */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }

/*
 * An angle down, drawn from two borders rather than fetched: it is two lines
 * of CSS against an icon file on every page, and it takes the row's own colour.
 * Rotated up when the answer is open, so the control says which way it goes.
 */
.faq summary::after {
    content: "";
    flex: none;
    width: .45rem; height: .45rem;
    margin-right: .15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15rem) rotate(45deg);
    transition: transform .15s ease;
    opacity: .55;
}
.faq details[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }

/* The answer, quieter than the question above it — the grey the subtitles and
   the details lists already use. */
/* The answer lines up under the question rather than with the card's edge, and
   the space between them is the summary's own bottom padding — a margin here
   as well would be that gap twice. */
.faq details p {
    margin: 0; padding: 0 15px 15px;
    font-weight: 400; font-size: 14px; line-height: 23px; color: #595959;
}

/* ---------- Free valuation: one line, and the way to it ---------- */

/*
 * A dark band the width of the page: the words on one side, the button on the
 * other. Dark rather than the brand colour, because it sits between two pale
 * sections and its whole job is to be the one thing that is not.
 */
.section-cta { background: var(--surface-dark, #101828); color: #fff; }

/*
 * And taller than the sections around it by 15%: it is one line and a button
 * on a dark band, so at the ordinary section padding it reads as a strip
 * between two pages rather than as a thing of its own.
 *
 * Two classes, and said again in estate with that theme's own base, because a
 * one-class rule here loses to a theme's `.section` in a file loaded after
 * this one — and there is no way to write "this theme's section padding" once:
 * minimal states 2.5rem and estate reads the density token.
 */
.section.section-cta { padding-block: calc(2.5rem * 1.15); }

/*
 * One row: the words on the left, the button hard right. The button never
 * shrinks — it is the point of the band, and a wrapped label reads as two
 * buttons — and the words take whatever is left. They only stop being a row
 * below the phone breakpoint, where side by side means neither fits.
 */
.section-cta > .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
}
.section-cta > .wrap > .cta-words { min-width: 0; }
.section-cta > .wrap > .btn { flex: none; }

@media (max-width: 560px) {
    .section-cta > .wrap { flex-wrap: wrap; }
}

/*
 * Not the section-title scale: this is a sentence read on the way past rather
 * than the name of a section — which is also why the markup puts it a level
 * in, out of `.section > .wrap > h2`.
 */
.section.section-cta .cta-words h2 { color: #fff; font-weight: 500; font-size: 24px; line-height: 24px; margin: 0; }
.section-cta .cta-words p { margin: .4rem 0 0; opacity: .85; }

/*
 * White, and the label dark: on this band the brand colour is the one thing
 * that might disappear into it, and the button is the whole point of the band.
 * The agency's colour is kept for the hover, where it reads against white.
 */
.section-cta .btn {
    background: #fff; border-color: #fff; color: var(--ink);
    padding: .85rem 1.7rem;
    /* Its own type rather than `.btn`'s: the label sits on one line, so the
       leading is the size and nothing under it grows the button. */
    font-weight: 500; font-size: 14px; line-height: 14px;
}
.section-cta .btn:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ---------- One scale for a section's own heading ---------- */

/*
 * The title at the TOP of a section — Vitrină cu taburi, Servicii, Categorii,
 * Echipa and the rest — is one thing and reads at one size.
 *
 * `.section > .wrap > h2` on purpose: the heading a section opens with is a
 * direct child of its wrap, while the ones INSIDE a block — the contact page's
 * column, the About band's prose, the valuation band's invitation — sit a
 * level deeper and keep the sizes they were each given.
 *
 * Six sections already stated these three values one by one; this is the same
 * answer for the rest, and it leaves their `text-align: center` alone because
 * it does not mention alignment.
 */
.section > .wrap > h2 { font-weight: 500; font-size: 32px; line-height: 37px; }

/*
 * And no rule drawn under it. `.section-sub` carries a NEGATIVE top margin
 * written to tuck under that rule — with it gone there is nothing to tuck
 * under, and the subtitle climbs onto the title. The two go together, always:
 * that pairing is a guard in SiteConfigTest because it has been forgotten
 * before.
 */
.section > .wrap > h2::after { content: none; }
.section > .wrap > .section-sub { margin-top: .5rem; }

/* ---------- About the agency: words beside a photograph ---------- */

.about-grid { display: grid; gap: 2.5rem; align-items: center; }

/*
 * 700 × 469, and proportional below that rather than cropped: the ratio keeps
 * the second number true when the first cannot be, on a phone and inside a
 * theme whose column is narrower.
 */
.about-grid img { width: 700px; max-width: 100%; aspect-ratio: 700 / 469; height: auto; object-fit: cover; }

/*
 * The heading's own scale. Stated rather than left to --heading-weight, which
 * is 600 or 700 depending on the theme, and the space under it is padding on
 * the heading itself so it travels with it.
 */
.section-about .prose h2 { font-weight: 500; font-size: 30px; line-height: 35px; padding-bottom: 10px; }

/* The agent page paints .contact-icon in the BRAND colour, which is this
   button's background — brand on brand is an icon that is simply not there. */
.section-about .contact-icon { color: inherit; }

/*
 * The same two buttons as on the contact page, and the same type: the fill,
 * the rule around them and the brand on hover come from the selector lists
 * they were added to up there rather than from a copy of the values, and this
 * is the half those lists do not carry — the contact block takes it from
 * `.section-contact .contact-actions .btn`, which this section is outside of.
 *
 * The shell — inline-flex, the gap before the icon, the padding — is
 * `.contact-actions .btn`, which is not scoped to either section.
 */
.section-about .contact-actions .btn,
.section-about .contact-actions .btn-ghost {
    text-transform: uppercase;
    font-weight: 400; font-size: 14px; line-height: 14px;
}

@media (min-width: 900px) {
    /*
     * Written two classes deep so it decides in every theme: estate declares
     * `.about-grid` with columns of its own, and a base rule at one class
     * would lose to it in the file loaded after this one.
     *
     * Which side the photograph sits on is grid placement rather than `order`
     * — the two columns are not the same width, and reordering alone would
     * hand the picture the column sized for the words.
     */
    .section-about .about-grid { grid-template-columns: minmax(0, 1fr) auto; }

    .section-about.about-image-left .about-grid { grid-template-columns: auto minmax(0, 1fr); }
    .section-about.about-image-left .about-grid img { grid-column: 1; grid-row: 1; }
    .section-about.about-image-left .about-grid .prose { grid-column: 2; grid-row: 1; }
}