/*
 * 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: 15px;
    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%;
}
/* A tick and a radio are the size of a tick and a radio. The rule above is
   about boxes somebody types in, and at 100% it made the checkbox as wide as
   its column and pushed its own words onto the next line. */
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--brand); }
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; }

/*
 * The headings a listing is read under, at one size: the property's own name,
 * the cards that carry a heading of their own, and the row of similar
 * properties beneath the page. They are the same rank — each names a part of
 * one listing — and three sizes down one page reads as three levels of a
 * hierarchy that is not there.
 */
.listing-head h1,
.listing .legal h2,
.listing .media-block h2,
.section-similar h2 { font-weight: 500; font-size: 32px; line-height: 37px; }
.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; }
/* Inside the listing's card the padding is the card's; the block's own margins
   would add a second gap inside it. */
.map-card .map-block { margin: 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; }

/*
 * What is nearby. A dot per place, sized so a dozen of them around one
 * address read as context rather than as competing with the listing's own
 * pin — which is a label with a price on it and always wins.
 */
.map-poi {
    display: block; width: .7rem; height: .7rem; border-radius: 999px;
    background: var(--ink); border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgb(0 0 0 / .35); cursor: default;
}
.map-poi--transport { background: #2563eb; }
.map-poi--school { background: #ca8a04; }
.map-poi--health { background: #dc2626; }
.map-poi--shopping { background: #7c3aed; }
.map-poi--leisure { background: #15803d; }

.map-nearby { margin-top: 1.25rem; }
.map-nearby-title { font-size: 15px; font-weight: 500; margin: 0 0 .75rem; }
.map-nearby-grid {
    display: grid; gap: 1rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.map-nearby-heading {
    margin: 0 0 .35rem; font-size: 13px; font-weight: 500;
    color: var(--ink-muted);
}
.map-nearby-group li {
    display: flex; gap: .75rem; justify-content: space-between;
    align-items: baseline; font-size: 14px; line-height: 22px;
}
/* The name gives way, not the distance: a truncated "Școala Gimnazială…" is
   still the school, a truncated distance is a wrong number. */
.map-nearby-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-nearby-distance { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- The calculator ---------- */

/*
 * Two columns: what a month comes to, and the seven answers that produce it.
 * Below 45rem they stack, because a ring beside a column of inputs on a
 * telephone is a ring nobody can read and inputs nobody can hit.
 */
/* On the listing it is a card like any other; the section on another page
   brings its own band and its own heading. */
.calc-card > h2 { margin-bottom: 1.25rem; }

.calc { display: grid; gap: 1.5rem 2rem; align-items: start; }
/* The ring's own cap is 13rem, so a wider track here is room taken off the
   fields and given to nothing — which on the listing page, where this sits in
   a column beside the enquiry card, was enough to clip the deposit. */
@media (min-width: 45rem) { .calc { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }

.calc-figure { display: grid; justify-items: center; gap: .75rem; }
.calc-ring { width: 100%; max-width: 13rem; transform: rotate(-90deg); }
.calc-ring-track { stroke: color-mix(in srgb, var(--ink) 8%, transparent); }
/* Rounded ends would overlap the next arc at every joint. */
.calc-arc { stroke-linecap: butt; transition: stroke-dasharray .25s ease, stroke-dashoffset .25s ease; }
/*
 * The four colours. The instalment is the agency's own, because it is the part
 * of the payment their listing is actually about; the other three are fixed,
 * since a brand with one hue would otherwise give four arcs one colour.
 */
.calc-arc-principal { stroke: var(--brand); }
.calc-arc-tax { stroke: #38bdf8; }
.calc-arc-insurance { stroke: #a855f7; }
.calc-arc-fees { stroke: #f43f5e; }

/* Over the middle of the ring, which is where the eye already is. */
.calc-figure { position: relative; }
.calc-total {
    position: absolute; top: 0; left: 0; right: 0; height: 13rem;
    display: grid; place-content: center; text-align: center; margin: 0;
    pointer-events: none;
}
.calc-total strong { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; }
.calc-total span { font-size: 13px; }

.calc-legend {
    display: grid; grid-template-columns: repeat(2, auto); justify-content: center;
    gap: .35rem 1rem; margin: 0; font-size: 13px;
}
.calc-legend li { display: flex; align-items: center; gap: .4rem; }
.calc-key { width: .7rem; height: .2rem; border-radius: 2px; background: currentColor; }
.calc-key.calc-arc-principal { background: var(--brand); }
.calc-key.calc-arc-tax { background: #38bdf8; }
.calc-key.calc-arc-insurance { background: #a855f7; }
.calc-key.calc-arc-fees { background: #f43f5e; }

.calc-fields { display: grid; gap: .75rem; }
@media (min-width: 30rem) { .calc-fields { grid-template-columns: 1fr 1fr; } }
.calc-field { display: grid; gap: .3rem; }
.calc-label { font-size: 13px; font-weight: 500; }
.calc-instalment { display: grid; gap: .3rem; margin: 0; }
.calc-instalment strong { font-size: 18px; font-weight: 500; color: var(--brand); }

/*
 * The unit sits INSIDE the control, as a suffix rather than beside the label:
 * "0.625" with the € four words away is a number nobody can check.
 */
.calc-input { position: relative; display: block; }
.calc-input input { width: 100%; padding-right: 2.25rem; }
.calc-input[data-unit]::after {
    content: attr(data-unit); position: absolute; right: .75rem; top: 50%;
    transform: translateY(-50%); pointer-events: none;
    font-size: 13px; color: var(--ink-muted);
}
/*
 * Three boxes across one row: the deposit as a sum, the same deposit as a
 * percentage, and the term.
 *
 * The row takes the full width for the reason the deposit alone used to: in
 * one of two columns the sum box had 52px of box and 47px of that was padding
 * — the unit suffix and the text indent — so "30834" was drawn into five
 * pixels. Measured, not guessed: scrollWidth 97 against a clientWidth of 52.
 * The tracks are weighted rather than equal, because a price has six digits
 * and a term has two.
 */
/*
 * The percentage is docked INSIDE the deposit's box, behind a hairline: one
 * control for one figure read two ways.
 *
 * It is laid over the box rather than beside it so the SHELL stays the
 * theme's own `input` — border, radius, background and focus ring — instead
 * of a wrapper imitating four themes' idea of what a box looks like. The sum
 * keeps room for both the percentage and its own unit, measured from one
 * custom property so the padding and the suffix cannot part company.
 */
.calc-pair { position: relative; display: block; --calc-pct: 5.25rem; }
.calc-pair > .calc-input:first-child input { padding-right: calc(var(--calc-pct) + 2.6rem); }
.calc-pair > .calc-input:first-child::after { right: calc(var(--calc-pct) + .7rem); }

.calc-percent { position: absolute; top: 1px; right: 1px; bottom: 1px; width: var(--calc-pct); }
.calc-percent::before {
    content: ''; position: absolute; left: 0; top: .35rem; bottom: .35rem;
    width: 1px; background: var(--line);
}
.calc-pair .calc-percent input {
    height: 100%; padding: 0 1.5rem 0 .7rem;
    border: 0; border-radius: 0; background: transparent;
}
.calc-percent[data-unit]::after { right: .55rem; }
/* A number input carries an intrinsic width; without this it refuses to
   shrink into its grid track and pushes the row wider instead. */
.calc-input input { min-width: 0; }

.calc-note { grid-column: 1 / -1; margin: 0; font-size: 12px; }
/* The section's own heading and intro are the house pair — a bare h2 and
   .section-sub — so there is nothing to style here but the room under them. */
.section-calc .calc { margin-top: 1.5rem; }

/* ---------- 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.
 */
/* One measure for every subtitle on the site: 600px, centred. A line under a
   heading that runs the width of the page is a line nobody reads to the end
   of, and each section deciding for itself is how three of them came to. */
.section-sub { text-align: center; max-width: 600px; margin: -.5rem auto 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; }

/*
 * The send button in the viewer. Three classes rather than one, because
 * estate styles `button[type="submit"]` — a type selector PLUS an attribute,
 * which beats a single class outright.
 */
.lightbox .lead-form .btn { font-weight: 500; font-size: 14px; line-height: 14px; }

/*
 * 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;
}

/*
 * More than one agent works a listing, and they stack.
 *
 * The rule under the card separates the TEAM from the form, so the ones above
 * the last drop it and sit closer together: a line under every name reads as
 * four unrelated cards rather than the people on one listing.
 */
.agent-team .agent-card:not(:last-child) {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: .6rem;
}

/* 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. */

/* 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; }

/*
 * The language control and the account mark.
 *
 * The switcher is the menu's own entry, so it arrives wearing .nav-item and
 * .nav-parent and opens the same panel as any other submenu — these rules only
 * put it on this side of the row and take the menu's spacing off it. Changing
 * how it OPENS belongs in the .submenu rules above, once, for both.
 */
/* `.header-menu` is whatever opens a panel from this side of the bar — the
   language control and, once somebody is signed in, the account mark. */
.header-menu { display: flex; }
.header-lang .nav-parent { padding-inline: .5rem; }
/*
 * The panel hangs from the right edge of the ACTIONS ROW, not of its own
 * control.
 *
 * `.submenu` is built for a menu in the middle of the bar, where a panel
 * opening rightwards has the page to grow into; against the last control on
 * the row it ran 19px past the viewport and gave every page a horizontal
 * scrollbar. Right-aligning it to the CONTROL only moved the problem — at
 * 400px the control sits near the left and the panel went 69px off that edge
 * instead, which is worse, since nothing scrolls left to reach it. And a
 * breakpoint was no answer either: at exactly 860px the actions are still on
 * the right and it overflowed again.
 *
 * So the containing block becomes `.header-actions`, whose right edge is
 * inside the page gutter at every width. `position: static` on the item is
 * what hands it over.
 */
.header-actions { position: relative; }
.header-menu .nav-item { position: static; }
/*
 * And never wider than that row: `.submenu`'s 12rem floor is more than the
 * whole actions group on a telephone, so a right-aligned panel still started
 * 19px off the left edge. `100%` here is the actions row, which is the width
 * there is.
 */
.header-menu .submenu { left: auto; right: 0; min-width: min(12rem, 100%); }

/* A square target rather than a bare glyph: 24px of icon is not something a
   thumb can aim at, and the header is the one bar on every page. */
.header-account {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border-radius: 50%; color: inherit; text-decoration: none;
}
.header-account:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.header-account:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.header-account svg { display: block; width: 1.5rem; height: 1.5rem; }

/*
 * Signed in, the mark grows a name and a caret and becomes the panel's own
 * control — so it is no longer a 2.5rem circle. Two classes, because
 * `.header-account` above sets width, height and place-items and this has to
 * beat all three.
 */
.header-account-menu .header-account {
    width: auto; height: auto; display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .6rem; border-radius: 999px;
}
.header-account-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sign out is a form, so it is a BUTTON among links: dressed as one, since
   what it looks like has nothing to do with the method it uses. */
.site-header .submenu form { margin: 0; }
.site-header .submenu form button {
    display: block; width: 100%; padding: .45rem 1rem; border: 0; background: none;
    color: var(--submenu-ink, var(--ink)); font: inherit; font-size: .9rem;
    text-align: left; white-space: nowrap; cursor: pointer;
}
.site-header .submenu form button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
/* A line above it: leaving is not one of the three places to go. */
.site-header .submenu form { border-top: 1px solid color-mix(in srgb, var(--submenu-ink, var(--ink)) 14%, transparent); margin-top: .4rem; padding-top: .4rem; }

.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; }

/*
 * The menu on a telephone.
 *
 * Above this width the bars are not drawn at all and the menu is the row it
 * has always been. Below it the menu is a PANEL under the bar, opened by a
 * checkbox — no script, and following a link reloads the page, which closes
 * it again.
 */
.nav-burger { display: none; }

@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; }

    /*
     * The language control keeps its FLAG and drops its name: on this width
     * the bar carries a logo, the flag, the account mark and the three bars,
     * and "Română" is the one of them that is saying something the picture
     * beside it already says.
     *
     * Moved off screen rather than `display: none`, because the flag is
     * aria-hidden and the name is the only thing naming this control — hidden
     * outright, a screen reader reads an unlabelled button. Only the TOP
     * level: the panel it opens is a list of languages, and a list of flags
     * with no words is not a choice anybody can make.
     */
    .header-lang .nav-parent > .nav-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    .nav-burger {
        display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
        border-radius: 50%; cursor: pointer; color: inherit;
    }
    .nav-burger:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

    /*
     * Three bars from one element: the middle is the box, the outer two are
     * its pseudo-elements. Which is what lets the whole thing become a cross
     * without a second icon — the outer two rotate onto the middle and the
     * middle goes.
     */
    .nav-burger-bars,
    .nav-burger-bars::before,
    .nav-burger-bars::after {
        display: block; width: 1.25rem; height: 2px; border-radius: 2px;
        background: currentColor; transition: transform .18s ease, opacity .18s ease;
    }
    .nav-burger-bars { position: relative; }
    .nav-burger-bars::before,
    .nav-burger-bars::after { content: ""; position: absolute; left: 0; }
    .nav-burger-bars::before { top: -6px; }
    .nav-burger-bars::after { top: 6px; }

    /*
     * TWO CLASSES on the hidden state, because estate declares
     * `.nav { display: flex }` unconditionally and its stylesheet is loaded
     * after this one — at one class each, source order would win and the menu
     * would stay open on every estate site.
     */
    .header-inner > .nav { display: none; }

    /*
     * The panel drops BELOW the bar, not between the brand and the controls
     * that open it. The row wraps in DOM order otherwise, which put the whole
     * menu above the cross that closes it. `order` is visual only, so the
     * `#nav-open:checked ~ .nav` selector above still finds it.
     */
    .header-inner > .brand { order: 1; }
    .header-inner > .header-actions { order: 2; }
    .header-inner > .nav { order: 3; }

    /* An id, so nothing a theme writes can reach over it. */
    #nav-open:checked ~ .nav {
        display: flex; flex-direction: column; align-items: stretch;
        width: 100%; gap: 0; padding: .5rem 0 .25rem;
        border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    }
    #nav-open:checked ~ .nav > a,
    #nav-open:checked ~ .nav > .nav-item > .nav-parent { padding: .7rem 0; width: 100%; }

    /*
     * A submenu inside the panel is a LIST, not a floating card: there is
     * nothing to float over on a screen this wide, and a panel hanging off
     * the right edge of a full-width row is a panel half off the screen.
     *
     * It is CLOSED until somebody opens it. Drawn open, an agency's portal
     * menu — fifty entries across three levels — is a panel nobody can reach
     * the bottom of. `display` is deliberately NOT set here: the base rules
     * that open a submenu on :hover, on :focus-within and on the `is-open`
     * class site-nav.js adds to a tap are what govern it, so the one that
     * works with the script blocked (focus) still does.
     */
    /*
     * `.nav-item` is inline-flex, which is right for a row and wrong for a
     * column: as a flex CONTAINER it shrink-wrapped the panel to 81px while
     * its links are `white-space: nowrap`, and the 18px that spilled out gave
     * the whole page a horizontal scrollbar. A block here, stacked.
     */
    #nav-open:checked ~ .nav .nav-item { display: block; width: 100%; }
    #nav-open:checked ~ .nav .submenu {
        position: static; width: 100%; min-width: 0; margin: 0 0 .25rem;
        padding: 0 0 0 1rem; border: 0; box-shadow: none; background: none;
    }
    /* And they may wrap: there is no room to keep a long entry on one line,
       and a scrollbar on the page is a worse answer than two. */
    #nav-open:checked ~ .nav .submenu a { padding: .5rem 0; white-space: normal; }

    /*
     * The caret stays, and turns. It is the only thing saying this row opens
     * rather than goes somewhere — and on a row the width of the screen it
     * belongs at the far end, not tucked against the words.
     */
    #nav-open:checked ~ .nav > .nav-item > .nav-parent { justify-content: space-between; }
    #nav-open:checked ~ .nav .nav-caret { transition: transform .18s ease; }
    #nav-open:checked ~ .nav .nav-item:hover > .nav-parent > .nav-caret,
    #nav-open:checked ~ .nav .nav-item:focus-within > .nav-parent > .nav-caret,
    #nav-open:checked ~ .nav .nav-item.is-open > .nav-parent > .nav-caret {
        transform: rotate(180deg);
    }

    #nav-open:checked ~ .header-actions .nav-burger-bars { background: transparent; }
    #nav-open:checked ~ .header-actions .nav-burger-bars::before { transform: translateY(6px) rotate(45deg); }
    #nav-open:checked ~ .header-actions .nav-burger-bars::after { transform: translateY(-6px) rotate(-45deg); }

    /* The input is off screen, so the ring has to be drawn on what it
       operates — otherwise tabbing to it shows nothing at all. */
    #nav-open:focus-visible ~ .header-actions .nav-burger {
        outline: 2px solid currentColor; outline-offset: 2px;
    }
}

/* ---------- 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-calc 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; 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; 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; }

/* ---------- The energy certificate ---------- */

/*
 * The figures off the certificate, in TWO columns whatever the card is wide
 * enough for.
 *
 * The shared `.spec-grid` fits as many 260px columns as it can, so the same six
 * figures read as two columns in the listing's body and three on a wider card —
 * one card laid out two ways depending on where it is drawn. Certificate labels
 * are sentences ("Indice de performanță din surse regenerabile"), and they want
 * the width. Stated after `.spec-grid` and at the same specificity, so source
 * order is what decides: keep this rule below it.
 */
.energy-figures {
    margin-bottom: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* One column on a phone, where two would be a label per line and its value
   under it. */
@media (max-width: 560px) {
    .energy-figures { grid-template-columns: 1fr; }
}

/*
 * The two scales side by side where there is room for them, and one under the
 * other where there is not.
 *
 * The COLUMN gap is the figures' own (`.spec-grid`'s 2rem): two equal columns
 * put the second one at half the width plus half the gap, so a gap .5rem
 * narrower started the emissions scale 4px left of the figures above it.
 */
.energy-scales { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.energy-steps { display: grid; gap: .3rem; margin-top: .6rem; }

/*
 * A rung of the ladder: its width grows down the scale, the way a certificate
 * prints it. The width is a custom property from the renderer, so a scale of
 * seven letters and one of ten read as the same ladder.
 */
.energy-step {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--energy-step, 100%);
    min-height: 26px;
    padding: .1rem .6rem;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/*
 * Every rung at full colour, as the certificate prints it; which one is this
 * building's is said by the reading it carries, not by fading the others.
 *
 * The reading rides INSIDE the rung, so the ladder keeps one silhouette and
 * nothing hangs off the side of it — which means this rung may be wider than
 * its place on the scale: in a narrow column a top letter's bar is shorter
 * than the figure it carries, and a rung a few pixels too long is better than
 * a figure cut in half.
 */
.energy-step.is-current { min-width: max-content; }

.energy-letter { flex: none; }

/*
 * Straight after the letter, on a white tag of its own: the figure belongs to
 * the letter it explains, and a white box reads the same on the palest violet
 * and the darkest red, where the bar's own ink needed a rule per colour.
 */
.energy-reading {
    margin-left: 1.1rem;
    background: #fff;
    color: #333;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}


/*
 * Green at the top of the scale to red at the bottom, and violet for the
 * emissions one — the two ladders a certificate prints, in the colours it
 * prints them. By position rather than by letter: the energy scale runs A+ to
 * G and the emissions scale A to G, so `nth-child` is the only thing the two
 * have in common.
 *
 * EIGHT stops for the energy scale, one per rung. The ramp used to have ten,
 * for a list that began at A+++; leaving them would have handed G the eighth
 * colour and left the two darkest reds — the bottom of the scale — on nothing.
 */
.energy-scale-energy .energy-step:nth-child(1) { background: #0a7d3f; }
.energy-scale-energy .energy-step:nth-child(2) { background: #3da345; }
.energy-scale-energy .energy-step:nth-child(3) { background: #7cc245; }
.energy-scale-energy .energy-step:nth-child(4) { background: #d7d93c; color: #2b2b12; }
.energy-scale-energy .energy-step:nth-child(5) { background: #f4c430; color: #2b2b12; }
.energy-scale-energy .energy-step:nth-child(6) { background: #ef8a2a; }
.energy-scale-energy .energy-step:nth-child(7) { background: #d4342a; }
.energy-scale-energy .energy-step:nth-child(8) { background: #9d1f1a; }

.energy-scale-ghg .energy-step:nth-child(1) { background: #efe3f7; color: #3b2a4a; }
.energy-scale-ghg .energy-step:nth-child(2) { background: #dcc7ee; color: #3b2a4a; }
.energy-scale-ghg .energy-step:nth-child(3) { background: #c4a3e2; color: #3b2a4a; }
.energy-scale-ghg .energy-step:nth-child(4) { background: #a87fd4; }
.energy-scale-ghg .energy-step:nth-child(5) { background: #8d5cc6; }
.energy-scale-ghg .energy-step:nth-child(6) { background: #7139b4; }
.energy-scale-ghg .energy-step:nth-child(7) { background: #55199c; }

@media (max-width: 560px) {
    /* Every rung the full width: a ladder of eight widths inside 320px is
       eight bars that all look the same length anyway. The reading needs no
       rule of its own — it rides inside the rung at either width. */
    .energy-step { width: 100%; }
}

/* ---------- A band with three calls to action ---------- */

/*
 * One photograph the width of the screen, three equal panels over it.
 *
 * The section carries no padding of its own: the panels are the band, and
 * their own padding is what gives it height. Two classes, so a theme's
 * one-class `.section` in a file loaded after this one does not put it back.
 */
.section.section-cta-band {
    padding-block: 0;
    position: relative;
    background: var(--surface-dark, #14181d) var(--cta-band-image, none) center / cover no-repeat;
    color: #fff;
}

/*
 * The scrim. An agency uploads something bright and something dark in the same
 * week, and white words have to read on both — the same reason the hero has
 * one.
 */
.section-cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(9 14 24 / .45);
}

.cta-band {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/*
 * Equal thirds, and a hairline between them rather than a gap: the picture
 * behind is one picture, and a gap would cut it into three.
 */
.cta-band-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: clamp(360px, 42vw, 620px);
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.cta-band-panel + .cta-band-panel { border-left: 1px solid rgb(255 255 255 / .35); }

/*
 * The panel under the cursor darkens. The band is one photograph with three
 * doors on it and nothing else says which door somebody is standing in —
 * a button that lights up says it about the button, not about the third of the
 * screen the click belongs to.
 */
.cta-band-panel { transition: background-color .25s ease; }
.cta-band-panel:hover,
.cta-band-panel:focus-within { background-color: rgb(0 0 0 / .35); }

.cta-band-label {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 23px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cta-band-title {
    margin: 0;
    max-width: 18ch;
    font-weight: 300;
    font-size: 35px;
    line-height: 39px;
}

/*
 * Outlined in white, not the brand: the button sits on somebody's photograph,
 * and a brand colour an agency chose against their own pages is not a colour
 * that reads on every picture.
 */
/*
 * TWO classes, and not for the weight of it.
 *
 * The button is printed `class="btn btn-ghost cta-band-btn"`, and estate
 * declares `.btn` at one class in a file loaded after this one — with
 * `font: inherit` and `font-weight: 600` in it, which is size, weight and
 * leading all three. A one-class rule here ties and loses, so the type held on
 * minimal and nowhere else. The same tie `.plain` and `.section` have already
 * lost this week.
 */
.btn.cta-band-btn {
    margin-top: .75rem;
    border-color: rgb(255 255 255 / .8);
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 35px;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* The line-height IS the height of the label, so the padding only has to
       hold it: a button given both grows to the sum of them. */
    padding-block: 0;
}
.btn.cta-band-btn:hover { background: #fff; color: var(--ink); border-color: #fff; filter: none; }

@media (max-width: 860px) {
    /* Three columns on a phone is three columns of one word. */
    .cta-band { grid-template-columns: 1fr; }
    .cta-band-panel { min-height: 0; padding: 2.5rem 1.5rem; }
    .cta-band-title { font-size: 26px; line-height: 32px; }
    .cta-band-panel + .cta-band-panel { border-left: 0; border-top: 1px solid rgb(255 255 255 / .35); }
}

/* ---------- A band with three calls to action ---------- */

/*
 * One photograph the width of the screen, three equal panels over it.
 *
 * The section carries no padding of its own: the panels are the band, and
 * their own padding is what gives it height. Two classes, so a theme's
 * one-class `.section` in a file loaded after this one does not put it back.
 */
.section.section-cta-band {
    padding-block: 0;
    position: relative;
    background: var(--surface-dark, #14181d) var(--cta-band-image, none) center / cover no-repeat;
    color: #fff;
}

/*
 * The scrim. An agency uploads something bright and something dark in the same
 * week, and white words have to read on both — the same reason the hero has
 * one.
 */
.section-cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(9 14 24 / .45);
}

.cta-band {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/*
 * Equal thirds, and a hairline between them rather than a gap: the picture
 * behind is one picture, and a gap would cut it into three.
 */
.cta-band-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: clamp(360px, 42vw, 620px);
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.cta-band-panel + .cta-band-panel { border-left: 1px solid rgb(255 255 255 / .35); }

/*
 * The panel under the cursor darkens. The band is one photograph with three
 * doors on it and nothing else says which door somebody is standing in —
 * a button that lights up says it about the button, not about the third of the
 * screen the click belongs to.
 */
.cta-band-panel { transition: background-color .25s ease; }
.cta-band-panel:hover,
.cta-band-panel:focus-within { background-color: rgb(0 0 0 / .35); }

.cta-band-label {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 23px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cta-band-title {
    margin: 0;
    max-width: 18ch;
    font-weight: 300;
    font-size: 35px;
    line-height: 39px;
}

/*
 * Outlined in white, not the brand: the button sits on somebody's photograph,
 * and a brand colour an agency chose against their own pages is not a colour
 * that reads on every picture.
 */
/*
 * TWO classes, and not for the weight of it.
 *
 * The button is printed `class="btn btn-ghost cta-band-btn"`, and estate
 * declares `.btn` at one class in a file loaded after this one — with
 * `font: inherit` and `font-weight: 600` in it, which is size, weight and
 * leading all three. A one-class rule here ties and loses, so the type held on
 * minimal and nowhere else. The same tie `.plain` and `.section` have already
 * lost this week.
 */
.btn.cta-band-btn {
    margin-top: .75rem;
    border-color: rgb(255 255 255 / .8);
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 35px;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* The line-height IS the height of the label, so the padding only has to
       hold it: a button given both grows to the sum of them. */
    padding-block: 0;
}
.btn.cta-band-btn:hover { background: #fff; color: var(--ink); border-color: #fff; filter: none; }

@media (max-width: 860px) {
    /* Three columns on a phone is three columns of one word. */
    .cta-band { grid-template-columns: 1fr; }
    .cta-band-panel { min-height: 0; padding: 2.5rem 1.5rem; }
    .cta-band-title { font-size: 26px; line-height: 32px; }
    .cta-band-panel + .cta-band-panel { border-left: 0; border-top: 1px solid rgb(255 255 255 / .35); }
}

/* ---------- The team, style 2: portraits ---------- */

/*
 * A row of tall photographs on a dark ground, each with a name and a title over
 * the bottom of it. The section ships on that ground as a DEFAULT — an agency
 * can change it — so the words are light here and the subtitle carries its own
 * colour rather than the page's muted grey, which is written for white.
 */
.section-team-cards { color: #fff; }
.section-team-cards .section-sub { color: rgb(255 255 255 / .72); }

/*
 * 335 x 420 each, centred rather than stretched: the portraits are one size,
 * and a row of four that grows to fill the page crops differently on every
 * screen. `minmax(0, 335px)` rather than a flat 335px so a narrow column is
 * allowed to be narrower instead of overflowing.
 */
.team-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 335px));
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.team-card {
    position: relative;
    display: block;
    /* Taller than it is wide: a portrait, not a headshot in a card. */
    aspect-ratio: 335 / 420;
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
    /*
     * Nothing behind the photograph at all: the section's own ground shows
     * through, whatever colour the agency gave it. A wash of our own here is
     * a strip of the wrong colour every time the picture does not reach the
     * edge — which was a 6% white, and the reason this card had a pale line
     * along the bottom of it.
     */
    background: transparent;
    color: #fff;
}
.team-card:hover { text-decoration: none; }

/*
 * POSITIONED, not `height: 100%`.
 *
 * The card's height comes from `aspect-ratio`, and a percentage height on a
 * child resolves against a containing block whose height is auto — which the
 * spec lets an engine treat as `auto`. The photograph then took its natural
 * height, came up short of the box, and what showed underneath was the card's
 * own background: a pale strip along the bottom, with the card's rounded
 * corners on it, which is what this looked like. `inset: 0` fills the box
 * whatever the engine thinks the height is.
 */
.team-card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

/*
 * The photograph moves under the cursor, and the fade over the words deepens
 * with it — the card is a link to somebody's page, and the only thing on it
 * that can say so is the picture. One movement, not three: the row is four
 * large photographs and anything more reads as the page reacting to the mouse
 * rather than to the person.
 *
 * The global reduced-motion rule turns the transition off; the scale is a
 * hover state rather than something that happens on its own, so it stays.
 */
.team-card:hover .team-card-photo,
.team-card:focus-visible .team-card-photo { transform: scale(1.05); }

.team-card:hover .team-card-body,
.team-card:focus-visible .team-card-body { background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .9)); }
.team-card-photo.is-empty {
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: rgb(255 255 255 / .5);
    background: rgb(255 255 255 / .06);
}

/*
 * The words sit ON the photograph, so they carry their own backing: an
 * agency's portraits are lit however they were lit, and a name in white on a
 * pale shoulder is a name nobody can read.
 */
.team-card-body {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: 3.5rem 1.1rem 1.1rem;
    transition: background .45s ease;
    /* `rgb(0 0 0 / 0)` rather than `transparent`: the two are the same colour
       by definition, and writing it out keeps the fade black from end to end
       instead of leaving it to an engine's idea of what transparent is. */
    background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .78));
}

.team-card-name { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.team-card-role { display: block; margin-top: .15rem; font-size: .9rem; color: rgb(255 255 255 / .78); }

/* ---------- Video ---------- */

/*
 * The three widths a free-text block offers, on the block that holds the
 * video. Two classes and after the page's own rules, exactly as `.prose` does
 * it: no class at all leaves the page deciding, and the block's own choice
 * beats the page's when it has one.
 */
.video-block { margin-inline: auto; }
.video-block.video-narrow { max-width: 680px; }
.video-block.video-medium { max-width: 1040px; }
.video-block.video-full { max-width: none; }

/* The block ships on a dark ground, so its own words are light on it — the
   background is a default rather than a rule, so this follows whatever the
   agency ends up choosing only in the sense that they can change both. */
.section-video { color: #fff; }
.section-video .video-caption { color: rgb(255 255 255 / .72); }
.video-block h2 { margin-bottom: 1rem; }

/*
 * 16:9, and the frame is what holds it: a <video> with no height collapses
 * while its metadata loads, and an iframe has no intrinsic size at all.
 */
.video-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
}

.video-embed { position: relative; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/*
 * The cover: the agency's own still, or the theme's dark surface when they
 * have not set one. A link until the script makes it a player, so it opens the
 * video where it lives rather than doing nothing.
 */
.video-cover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--surface-dark, #14181d) var(--video-poster, none) center / cover no-repeat;
    cursor: pointer;
}
.video-cover:hover { text-decoration: none; }

/* A triangle drawn out of borders on a disc — no image, and it cannot come
   back as a broken one on the agency's own page. */
.video-play {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgb(0 0 0 / .55);
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .15s ease;
}
.video-play::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: .35rem;
    border-top: .7rem solid transparent;
    border-bottom: .7rem solid transparent;
    border-left: 1.1rem solid #fff;
}
.video-cover:hover .video-play { background: rgb(0 0 0 / .75); transform: scale(1.06); }

.video-caption { margin: .75rem 0 0; font-size: .9rem; }

/*
 * The listing's own video and tour, in the card the agency composes them into.
 *
 * The frame, the cover and the play button are the video section's — one set of
 * rules, so the two cannot drift — and what is added here is the pair: side by
 * side while the column has room for two, stacked the moment it does not.
 *
 * The room under the card is inside the block rather than a margin beneath it:
 * the space is the card's own, and a margin would collapse into whatever the
 * next section brings.
 */
.media-block { padding-bottom: 40px; }

.media-embeds {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.media-embed-item { margin: 0; min-width: 0; }
.media-embed-label { margin: .5rem 0 0; font-size: .9rem; }

/* The caption opens the same address the cover does, so it has to LOOK like it
   does: `a` inherits its colour in this stylesheet, and an underline is all
   that is left to say a muted line navigates. */
.media-embed-label a { text-decoration: underline; text-underline-offset: 2px; }
.media-embed-label a:hover { color: var(--brand); }

/*
 * The tour's badge says what the button opens: a room to walk round, not a
 * video that plays. Text rather than an icon file — public pages have no build
 * step, and a broken image on an agency's own listing is worse than no badge.
 */
.tour-play::after {
    content: "360°";
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

/* ---------- About us, over a photograph ---------- */

/*
 * A page that opens on a photograph and reads on the dark ground it fades into.
 *
 * The section paints its own band — `--surface-dark`, so it is the agency's
 * colour and not a near-black of ours — and the picture fades INTO that band
 * with a gradient laid over it. Soft-edging the image itself would only meet
 * the band on the one photograph it was cut for.
 */
.section.section-about-hero {
    padding-block: 0 var(--section-gap);
    background: var(--surface-dark, #14181d);
    color: #fff;
    text-align: center;
    /* Said once: the photograph's height, and what the words are pulled up by
       to start six tenths of the way down it. */
    --about-hero-height: clamp(300px, 42vw, 560px);
}

.about-hero-photo {
    position: relative;
    /* Tall enough to be the page's opening, short enough to leave the words
       on screen with it on a laptop. */
    height: var(--about-hero-height);
    background: var(--about-hero-image, none) center / cover no-repeat;
}

/*
 * Transparent at the top and the band's own colour by the time the words
 * begin, so they are read on the picture without being read THROUGH it — and
 * so the picture meets the band with no join. `color-mix` is not needed: it IS
 * the band's colour, and a gradient to `transparent` in sRGB fades through
 * grey, which shows as a pale smear across the middle.
 */
.about-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0) 0%,
        rgb(0 0 0 / .35) 38%,
        var(--surface-dark, #14181d) 62%
    );
}

/*
 * The words sit ON the photograph, beginning six tenths of the way down it: the
 * body is pulled up by the four tenths that remain. Positioned, so it is
 * painted over the picture rather than under it — the gradient above it is a
 * pseudo-element on an earlier sibling.
 */
.about-hero-body {
    position: relative;
    /* A measure in pixels rather than in `ch`: the heading and the paragraphs
       are set at different sizes, and a measure in characters would wrap them
       at two different widths. */
    max-width: 880px;
    margin-top: calc(var(--about-hero-height) * -0.4);
    padding-top: 0;
}

/*
 * Uppercase in the CSS rather than in the words: an agency types "Despre noi"
 * and the page shows it the way the design asks, while the menu entry, the tab
 * title and the builder's own list keep the sentence they were given.
 */
.section-about-hero h2 {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 400;
    font-size: 50px;
    line-height: 55px;
    margin-bottom: 1.5rem;
}

/* Read on a photograph and on the dark band under it, so the words carry a
   colour of their own rather than the page's muted grey. */
.section-about-hero .rich-text { color: #ffffffde; }
.section-about-hero .rich-text p { margin: 0 0 1.1rem; font-weight: 400; font-size: 16px; line-height: 30px; }
.section-about-hero .rich-text > :last-child { margin-bottom: 0; }

/* ---------- 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; }

/*
 * On a phone the photograph is 300px and four tenths of it is most of the
 * people in it. The words still overlap, by a quarter rather than by a
 * measure that would cover the picture.
 */
@media (max-width: 640px) {
    .section.section-about-hero { --about-hero-height: clamp(320px, 62vw, 420px); }
    .about-hero-body { margin-top: calc(var(--about-hero-height) * -0.25); }
}

@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; 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; }
}

/* ---------- The owner's invitation form ---------- */

/*
 * Somebody filling this in is not a customer of ours and may never have used a
 * form this long: what the page owes them is always the same three answers —
 * which step this is, how much is left, and who to ring. So the form sits in a
 * card with the step named at the top, the progress above it, and the steps,
 * the agent and the small print down the side.
 *
 * It takes the agency's own colours like every other public page: `--brand` is
 * theirs, and this screen never introduces a colour of its own.
 */
.inv-crumbs { font-size: 13px; margin-bottom: .75rem; }

/* The heading and the save pill on one line, the sentence the width of the
   page under both. */
.inv-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem 1.5rem; align-items: center; margin-bottom: 1.5rem;
}
/* `.inv-head h1` outweighs every theme's bare `h1` — estate's is a 3.4rem
   display size meant for a hero, not for a form's title. */
.inv-head h1 { grid-column: 1; margin: 0; font-size: 32px; font-weight: 500; line-height: 37px; }
/* …except on a client's own page, where every heading reads the same. The
   invitation keeps the 32px above: it is the agency's form, not the portal. */
#portal .inv-head h1 { margin: .75rem 0 .1rem; }
.inv-head .inv-saved { grid-column: 2; grid-row: 1; }
.inv-head .inv-intro { grid-column: 1 / -1; max-width: none; margin: 0; }

/* Sent, published or expired: one message across the page, centred. */
.inv-status .notice { margin: 0; padding: 1.25rem 1.5rem; text-align: center; }

/* The landing card: two questions side by side, and the line saying how long
   it takes where the step count sits on every later step. */
@media (min-width: 45rem) { .inv-grid.inv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inv-start .inv-actions { border-top: 0; padding-top: 0; }
.inv-start-note { font-size: 13px; }

/* The last save, said where somebody looks after pressing Save. */
.inv-saved {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap;
    padding: .45rem .9rem; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand);
}
.inv-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }

.inv-layout { display: grid; gap: 1.5rem; align-items: start; }

.inv-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.inv-rail .inv-card:last-child { margin-bottom: 0; }

.inv-progress-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.inv-kicker { margin: 0 0 .2rem; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.inv-type { margin: 0; font-size: 20px; }
.inv-code { text-align: right; }
.inv-code p { margin: 0; font-size: 14px; }

.inv-bar { height: .5rem; margin: 1rem 0 .5rem; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.inv-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.inv-bar-foot { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-size: 13px; }

.inv-step-head {
    display: flex; gap: .9rem; align-items: flex-start;
    padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line);
}
.inv-step-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.inv-step-head p { margin: .15rem 0 0; font-size: 14px; }
/* The search sits on the step's own line, at the far end of it. */
.inv-step-search { flex: 0 1 18rem; margin-left: auto; }
.inv-step-search input { width: 100%; }

.inv-step-number {
    flex: none; display: grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: .6rem; font-size: 14px; font-weight: 600;
    background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand);
}

/* Three short answers to a row where there is room, one under another where
   there is not — an address is read across, not down. */
.inv-grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Three, not as many as fit: six boxes want to read as two rows of three —
   transaction, county, locality, then zone, street, number. */
@media (min-width: 45rem) { .inv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inv-field label { display: block; margin-bottom: .35rem; font-size: 14px; font-weight: 500; }
.inv-field input, .inv-field select, .inv-field textarea { width: 100%; }
.inv-field input[type="checkbox"] { width: auto; }
/* The words, and anything else that is a sentence rather than a figure. */
.inv-field-wide { grid-column: 1 / -1; }
/* A tick has no label above it, so it lines up with the boxes beside it. */
.inv-field-check { display: flex; align-items: flex-end; }
.inv-field-check .checkbox {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    margin: 0 0 .7rem; font-size: 14px;
}
/* The tick keeps its own size; the words take the rest of the column. */
.inv-field-check .checkbox input { flex: none; }
.inv-field-check .checkbox span { flex: 1 1 auto; }

/*
 * A field with a tick hanging off it — Băi and Geam la baie, An construcție
 * imobil and Construcție nouă — keeps them on ONE row under the single label:
 * the tick qualifies the answer beside it, and on a row of its own it reads as
 * another question. The number gives up the width it does not need.
 */
.inv-field:has(> .inv-companion-check) { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.inv-field:has(> .inv-companion-check) > label:first-child { flex: 0 0 100%; margin-bottom: 0; }
.inv-field:has(> .inv-companion-check) > input,
.inv-field:has(> .inv-companion-check) > select { flex: 0 1 7rem; width: auto; }
.inv-companion-check { flex: 1 1 auto; }
.inv-companion-check .checkbox { display: flex; align-items: center; gap: .5rem; font-size: 14px; }
.inv-companion-check .checkbox input { flex: none; }

/* Anything wider than a tick sits under the control it belongs to. */
.inv-companion { margin-top: .5rem; }

/*
 * Unless it REPLACES that control: the date beside Disponibilitate is the
 * cell's answer once the question has one, so it stands where the dropdown
 * was, with the way back beside it.
 */
.inv-takeover { display: flex; align-items: center; gap: .5rem; }
.inv-takeover[hidden] { display: none; }
.inv-takeover input { min-width: 0; }
/* Any author rule that sets `display` beats the browser's own [hidden] — the
   control this date stands in for is a <select> every theme styles. */
.inv-field select[hidden], .inv-field input[hidden] { display: none; }
.inv-clear {
    flex: none; width: auto; min-height: 0; padding: 0 .25rem;
    border: 0; background: none; box-shadow: none;
    color: var(--ink-muted); font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.inv-clear:hover { color: var(--ink); }
.inv-companion label { font-size: 13px; }

.inv-subhead { margin: 1.5rem 0 .75rem; font-size: 18px; font-weight: 600; }
/* A heading INSIDE a section — the domicile under Datele dvs. Same size as the
   heading above it; what sets it apart is the colour and the space around it. */
.inv-subhead-minor { margin: 1.25rem 0 .6rem; font-size: 18px; font-weight: 600; color: var(--muted); }

/*
 * The amenities: one box per answer, three to a row. A hundred and sixty ticks
 * wrapping across the page is a wall nobody reads to the bottom, and the box —
 * not the tick inside it — is what somebody aims at.
 */
.inv-checks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Three, like the questions above them — and stated AFTER the base rule, or
   the one that fits as many as it can wins by source order and draws four. */
@media (min-width: 45rem) { .inv-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inv-check {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-alt); font-size: 14px; cursor: pointer;
}
.inv-check:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.inv-check:has(input:checked) {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.inv-check:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.inv-check input { flex: none; }
/* `display` above beats the browser's own [hidden] rule, so a box the search
   has filtered out would go on being drawn — the same trap .field carries. */
.inv-checks[hidden], .inv-check[hidden] { display: none; }
.inv-grid + .inv-subhead { margin-top: 1.75rem; }
.inv-help { margin: .35rem 0 0; font-size: 12px; }

/* The pin. Tall enough to see a street either side of it, and its own corners
   so it reads as one of the form's controls rather than a hole in the card. */
.inv-map {
    height: 20rem; margin-top: .35rem;
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: var(--surface-alt);
}
.inv-map .maplibregl-map { border-radius: var(--radius); }
.inv-map noscript p { padding: 1rem; }

/*
 * The answers to ONE question, as pills across the row: five ticks down a
 * column read as five questions, and the row is what says they belong
 * together. The tick stays — it is what a keyboard and a screen reader use —
 * and the pill is the target around it.
 */
.inv-field > legend, .inv-label { display: block; margin-bottom: .35rem; padding: 0; font-size: 14px; font-weight: 500; }

/*
 * Several answers from a control the size of the select beside it. A `details`
 * element, so it opens with no script; the panel floats over what follows,
 * because a list that pushed the next row down would move the answer somebody
 * is reaching for.
 */
.inv-dropdown { position: relative; }
.inv-dropdown > summary {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); cursor: pointer; list-style: none;
}
.inv-dropdown > summary::-webkit-details-marker { display: none; }
.inv-dropdown > summary::after { content: "▾"; color: var(--ink-muted); }
.inv-dropdown > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.inv-dropdown[open] > summary { border-color: var(--brand); }
.inv-dropdown-list {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .25rem);
    max-height: 15rem; overflow-y: auto; padding: .5rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: 0 10px 24px rgb(15 23 42 / 12%);
}
.inv-dropdown-list .checkbox {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .35rem .4rem; border-radius: .4rem; font-size: 14px; cursor: pointer;
}
.inv-dropdown-list .checkbox:hover { background: var(--surface-alt); }
.inv-dropdown-list input { flex: none; }
.inv-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.inv-choice {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; cursor: pointer;
}
.inv-choice:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.inv-choice:has(input:checked) {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
}
/* Focus lands on the tick, which is inside the pill: the ring goes round the
   whole target, or a keyboard cannot see where it is. */
.inv-choice:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.inv-choice input { flex: none; }

.inv-note {
    display: flex; gap: .6rem; align-items: flex-start; margin: 1.25rem 0 0;
    padding: .8rem 1rem; border-radius: var(--radius);
    background: var(--surface-alt); color: var(--ink-muted); font-size: 13px;
}
.inv-note-mark {
    flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem;
    border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
    font-size: 12px; font-style: italic;
}

.inv-actions {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: flex-end;
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
/* Back on the left, the count beside the button that goes on. */
.inv-actions > :first-child { margin-right: auto; }
.inv-actions-step { font-size: 13px; }

/* Two classes: every theme redeclares `.btn` at one, and a base rule at one
   class loses to the file loaded after this one. */
.btn.inv-back, .btn.inv-ghost {
    background: transparent; color: var(--ink);
    border: 1px solid var(--line); font-weight: 500;
}
.btn.inv-back:hover, .btn.inv-ghost:hover { background: var(--surface-alt); filter: none; }
.btn.inv-ghost { padding: .55rem .6rem; text-align: center; }

.inv-steps h2 { margin: 0 0 .75rem; font-size: 15px; font-weight: 600; }
.inv-steps ol { display: grid; gap: .15rem; }
.inv-step-link {
    display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem;
    border-radius: .6rem; color: var(--ink-muted); font-size: 14px; text-decoration: none;
}
.inv-step-link:hover { background: var(--surface-alt); text-decoration: none; }
.inv-step-link.is-current { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-weight: 600; }
.inv-step-link .inv-step-number { width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 12px; background: var(--surface-alt); color: var(--ink-muted); }
.inv-step-link.is-current .inv-step-number { background: var(--brand); color: var(--brand-ink); }

.inv-agent-head { display: flex; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.inv-avatar {
    flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border-radius: 50%; background: var(--ink); color: var(--surface); font-weight: 600;
}
.inv-agent p { margin: 0; font-size: 14px; }
.inv-agent-name { font-weight: 600; font-size: 15px; }
.inv-agent > p { margin-top: .75rem; }
.inv-agent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; }

.inv-fineprint { font-size: 13px; background: var(--surface-alt); }

/*
 * The page an owner lands on after sending. The dark card is the receipt — it
 * is the one thing on the screen that must read as "this happened" — and the
 * facts under it are what the agency now has.
 */
.inv-sent {
    margin-bottom: 1.25rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.inv-sent-head {
    display: grid; gap: 1.5rem; align-items: center; padding: 1.75rem;
    background: var(--ink); color: var(--surface);
}
.inv-sent-head h2 { margin: .75rem 0 .5rem; color: inherit; }
.inv-sent-head p { margin: 0; color: inherit; opacity: .85; }
.inv-sent-cover { width: 100%; height: 100%; max-height: 14rem; object-fit: cover; border-radius: var(--radius); }
/*
 * The receipt's own badge: a hairline pill on the dark card, with the tick in a
 * filled circle. The green is a fixed one rather than --brand — it means "this
 * happened", the same thing on an agency whose colour is blue, and a brand-blue
 * tick on a navy card says nothing at all.
 */
.inv-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .95rem .3rem .35rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--surface) 25%, transparent);
    background: color-mix(in srgb, var(--surface) 8%, transparent);
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.inv-badge span {
    display: grid; place-items: center; width: 1.3rem; height: 1.3rem;
    border-radius: 50%; background: #22c55e; color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
}
.inv-sent-facts { display: grid; gap: 1.25rem; margin: 0; padding: 1.25rem 1.75rem; }
.inv-sent-facts dt { margin: 0 0 .2rem; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.inv-sent-facts dd { margin: 0; font-size: 16px; font-weight: 600; }

/* A card's own heading on the sent page. Two classes: every theme sizes a bare
   h2 for a section of a page, and estate's is a 2.1rem display size. */
.inv-card .inv-card-title { margin: 0 0 .25rem; font-size: 28px; font-weight: 500; line-height: 37px; }

/* Three steps and which one it is on: a mark, a title, a line, a when. */
.inv-timeline { display: grid; gap: 1.25rem; margin: 1rem 0 0; }
.inv-timeline li { display: flex; gap: .9rem; align-items: flex-start; }
.inv-timeline p { margin: 0; }
.inv-timeline-title { font-weight: 600; }
.inv-timeline-when { font-size: 13px; margin-top: .2rem !important; }
.inv-timeline-mark {
    flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
    border-radius: 50%; font-size: 12px; font-weight: 600;
    background: var(--surface-alt); color: var(--ink-muted);
}
.inv-timeline .is-done .inv-timeline-mark { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }
.inv-timeline .is-current .inv-timeline-mark { background: var(--brand); color: var(--brand-ink); }

/* What they can still do, three to a row where there is room. */
.inv-offers { display: grid; gap: .75rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.inv-offer { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.inv-offer p { margin: 0 0 .4rem; font-size: 13px; }
.inv-offer-title { font-size: 15px !important; font-weight: 600; }
.inv-offer a { font-size: 14px; font-weight: 600; color: var(--brand); }

.inv-sent-details summary { cursor: pointer; font-weight: 600; }

@media (min-width: 45rem) {
    .inv-sent-head { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
    /*
     * A column as wide as what is in it, not a quarter of the row each. Four
     * equal quarters wrapped "Principala, 22, Dor Mărunt, Călărași" onto two
     * lines while Preț cerut sat in half an empty column — and the row is
     * three facts when a listing has no floor area, which left the fourth
     * quarter blank. `auto` tracks take their content's width and share what
     * is left over, and the flow makes as many of them as there are facts.
     */
    .inv-sent-facts { grid-auto-flow: column; grid-auto-columns: auto; column-gap: 2.5rem; }
}

/* ---------- Contul meu: an owner's own listings ---------- */

/* Choosing a password: the form, and what the account is for beside it. */
.portal-set { display: grid; gap: 1.25rem; align-items: start; max-width: 62rem; margin-inline: auto; }
.portal-set-card h1 { line-height: 1.25; }
/* The line under the heading, on both cards this layout draws: the sign-in
   page's and the one where a password is chosen. Two classes, so a theme's own
   `.muted` cannot take the size back. */
/* The line under the heading is the shared rule's too; what stays here is the
   one this card adds beyond it. */
.portal-set-card > .muted { max-width: 46ch; }
.portal-badge { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); border: 0; }
.portal-badge span { background: none; color: inherit; width: auto; height: auto; font-size: 10px; }

.portal-password-box { position: relative; }
.portal-password-box input { padding-right: 5.5rem; }
.portal-password-show {
    position: absolute; top: 50%; right: .75rem; transform: translateY(-50%);
    padding: 0; border: 0; background: none; box-shadow: none; width: auto; min-height: 0;
    color: var(--brand); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* Four segments and a word for them. */
.portal-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .6rem 0 .9rem; }
.portal-strength span { height: .3rem; border-radius: 999px; background: var(--line); }
.portal-strength span.is-on { background: var(--brand); }
.portal-strength p { grid-column: 1 / -1; margin: .1rem 0 0; font-size: 13px; text-align: right; }

.portal-rules { display: grid; gap: .45rem; margin: 0 0 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 14px; }
.portal-rules li { display: flex; align-items: center; gap: .5rem; color: var(--ink-muted); }
.portal-rules li::before {
    content: "✓"; display: grid; place-items: center; flex: none;
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: var(--surface-alt); color: var(--ink-muted); font-size: 10px;
}
.portal-rules li.is-met { color: var(--ink); }
.portal-rules li.is-met::before { background: color-mix(in srgb, #22c55e 20%, transparent); color: #15803d; }

/* The two boxes are labelled like every other form control on a public page;
   `.field label` cannot reach them, because a password field is not a .field. */
.portal-password > label:not(.check),
.portal-label-row label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-muted); margin-bottom: .3rem; }
.portal-password > input[type="password"],
.portal-password > input[type="email"] { margin-bottom: 1rem; }

.portal-terms { margin: .25rem 0 1.1rem; font-size: 14px; }
.portal-terms a { text-decoration: underline; }
.portal-fineprint { margin-top: 1rem; font-size: 13px; text-align: center; }

/* Signing in: the label and the way back in share a row. */
.portal-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .3rem; }
.portal-label-row label { margin-bottom: 0 !important; }
/*
 * A line of text, not a control. It has to be a <button> — it submits the form
 * to the link endpoint, which is what makes it work with JavaScript off — so
 * everything a button brings is taken off it, and what is left reads like the
 * link it is: no bold, no brand colour, underlined the way any other link in a
 * sentence is.
 *
 * TWO classes, because estate paints `.btn, button[type="submit"]` — which is
 * a class and an attribute, and outranks a single class however late this file
 * is read. One class and this was a brand-coloured button on agentpilot.ro
 * while it was a line of text on minimal.
 */
.portal-password .portal-forgot {
    display: inline; padding: 0; border: 0; background: none; box-shadow: none;
    width: auto; min-height: 0; border-radius: 0;
    color: inherit; font: inherit; font-size: 13px; font-weight: 400; cursor: pointer;
    text-decoration: underline;
}
.portal-password .portal-forgot:hover { color: var(--brand); filter: none; box-shadow: none; }

/* "or", with a rule either side of it. */
.portal-or { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--ink-muted); font-size: 13px; }
.portal-or::before, .portal-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/*
 * The button that signs somebody in. Two classes again, for the same reason
 * the line above it needs them: estate's `.btn, button[type="submit"]` carries
 * `font: inherit` and a weight of its own, and a shorthand sets the size and
 * the leading too — so all three are stated here or the theme keeps them.
 */
.btn.portal-submit { text-transform: uppercase; font-size: 14px; font-weight: 500; line-height: 14px; }

/* Two classes, so it beats `.btn` whatever order the files load in. */
.btn.portal-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.portal-secondary:hover { background: var(--surface-alt); filter: none; }

/* What the account is for, said on the agency's own ink rather than on paper:
   it is the one block on the page that is selling something. */
.portal-pitch { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.portal-pitch h2 { margin: 0 0 .9rem; font-size: 18px; font-weight: 600; line-height: 1.35; }
.portal-pitch-eyebrow { margin: 0 0 .4rem; font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--brand-ink, #fff); opacity: .75; }
.portal-pitch .portal-benefits li::before { background: color-mix(in srgb, #fff 20%, transparent); color: #fff; }

.portal-rail-title { margin: 0 0 .75rem; font-size: 16px; font-weight: 600; }
.portal-benefits { display: grid; gap: .6rem; font-size: 14px; }
.portal-benefits li { display: flex; align-items: flex-start; gap: .55rem; }
.portal-benefits li::before {
    content: "✓"; display: grid; place-items: center; flex: none;
    width: 1.2rem; height: 1.2rem; margin-top: .1rem; border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: 10px;
}

@media (min-width: 52rem) {
    .portal-set { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.portal-narrow { max-width: 26rem; }
.portal-stats { display: grid; gap: .75rem; margin-bottom: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.portal-stat { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.portal-stat-label { margin: 0 0 .35rem; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.portal-stat-value { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; }
.portal-stat-value span { font-size: 14px; font-weight: 400; }

/* ---------- The agreements they have signed ---------- */

.portal-contracts-title { margin: 0 0 .75rem; font-size: 15px; font-weight: 600; }
.portal-contract-list { display: grid; gap: 1rem; }
.portal-contract + .portal-contract { border-top: 1px solid var(--line); padding-top: 1rem; }
.portal-contract-name { margin: 0; font-weight: 500; font-size: 15px; }
.portal-contract-meta { margin: .1rem 0 .5rem; font-size: 13px; line-height: 20px; }
/*
 * The file reads as the document it is, not as a button: there may be three
 * of them under one agreement — the contract, an annex, the viewing record —
 * and three buttons in a rail is a column of boxes rather than a list.
 */
.portal-contract-file {
    display: block; font-size: 14px; line-height: 21px;
    overflow-wrap: anywhere;
}
.portal-contract-file + .portal-contract-file { margin-top: .25rem; }
.portal-contract-none { margin: 0; font-size: 13px; line-height: 20px; }

.portal-listing { display: grid; gap: 1.25rem; padding: 1rem; }
.portal-listing-photo {
    display: grid; place-items: center; min-height: 10rem; overflow: hidden;
    border-radius: var(--radius); background: var(--surface-alt);
}
.portal-listing-photo img { width: 100%; height: 100%; object-fit: cover; }
.portal-listing-body h2 { margin: .5rem 0 .2rem; font-size: 20px; font-weight: 500; line-height: 1.3; }
.portal-listing-body p { margin: 0 0 .25rem; }
.portal-price { font-size: 20px; font-weight: 600; margin-top: .5rem !important; }
.portal-specs, .portal-counts { font-size: 14px; }
.portal-listing-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

/* What state it is in, in the words the CRM uses for it. */
.portal-status {
    display: inline-block; padding: .2rem .7rem; border-radius: 999px;
    background: var(--surface-alt); color: var(--ink-muted);
    font-size: 12px; font-weight: 600;
}
.portal-status-active { background: color-mix(in srgb, #22c55e 18%, transparent); color: #15803d; }
.portal-status-draft { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #92400e; }

@media (min-width: 45rem) {
    .portal-listing { grid-template-columns: 16rem minmax(0, 1fr); }
}

.inv-missing { display: grid; gap: .3rem; margin: .5rem 0 0; }
.inv-missing li::before { content: "• "; }

/*
 * The photographs panel. The whole dashed area takes a drop — a file button in
 * the corner of it is a target the size of a stamp — and it says what it
 * accepts before anybody finds out by being refused.
 */
.inv-drop {
    display: grid; justify-items: center; gap: .35rem;
    margin: 1rem 0 0; padding: 2rem 1.5rem;
    border: 1px dashed var(--line); border-radius: var(--radius);
    background: var(--surface-alt); text-align: center;
}
.inv-drop.is-dragging { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.inv-drop.is-uploading { opacity: .6; }
.inv-drop-title { margin: 0; font-weight: 600; font-size: 15px; }
.inv-drop p { margin: 0; }
/* The button IS the file input's label, so the input itself is taken out of
   the flow — never `display: none`, which takes it off the keyboard too. */
.inv-choose { margin-top: .75rem; cursor: pointer; }
.inv-choose input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.inv-upload { margin-top: .5rem; }
/* `.btn` sets `display`, which beats the browser's own [hidden] rule — so the
   button the script has just hidden went on being drawn, twice on one panel. */
.inv-upload[hidden] { display: none; }

.owner-photos {
    display: grid; gap: .75rem; margin: 1rem 0 0;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.owner-photos li {
    display: grid; gap: .25rem; padding: .5rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.owner-photos img { width: 100%; height: 8rem; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
.owner-photos p { margin: 0; font-size: 12px; }
.owner-photos form { display: inline; }

/*
 * "Fă-o copertă" and "Șterge" are sentences, not buttons: a <button> is what
 * they have to be — each posts a form — and every theme dresses a bare button
 * as its primary one, which put two solid blocks under every photograph.
 */
.owner-photos .link, .owner-videos .link {
    padding: 0; border: 0; background: none; box-shadow: none;
    color: var(--brand); font: inherit; font-size: 12px; text-decoration: underline;
    cursor: pointer; width: auto; min-height: 0;
}
.owner-photos .link.danger, .owner-videos .link.danger { color: #b42318; }

/*
 * The same tiles on "Cere o modificare", where each carries two ASKS rather
 * than two buttons: nothing there acts until the agent applies the request.
 * `.inv-check` is built for a row of amenities across the page — inside a
 * tile 11rem wide its padding and 14px leave no room for the picture — so
 * both are pulled in, and with TWO classes, or the shared rule wins on
 * source order and the tiles go back to being three-quarters label.
 */
.owner-photos-ask .inv-check { padding: .35rem .5rem; gap: .4rem; font-size: 12px; }
.owner-photos-ask .inv-check input { margin: 0; }
/* Asking for a photograph to go marks it as such: a tick that reads the same
   as "make this the main one" is a tick somebody presses by mistake. */
.owner-photos-ask .inv-check:has(input[type="checkbox"]:checked) {
    border-color: #b42318;
    background: color-mix(in srgb, #b42318 10%, transparent);
}
.owner-videos .inv-check { padding: .35rem .5rem; font-size: 12px; }

/*
 * Erasing your data, on Datele mele.
 *
 * Marked as the serious end of the page without being shouted: a red rule
 * down the side rather than a red card, because the section is mostly an
 * explanation of what stays and why, and an alarm over two columns of prose
 * reads as a warning about reading.
 */
/*
 * Clear of the form above it. The details form ends in `.inv-actions`, which
 * carries a top rule and no bottom space at all, so "Salvează datele" was
 * sitting 3px off this card's top border and reading as though it belonged to
 * it — a Save button touching the section that erases an account is the one
 * place on this page that must not look ambiguous.
 *
 * On the CARD rather than on `.inv-actions`, which the invitation's eight
 * steps also use: this page's spacing is not a reason to move theirs.
 */
.portal-erase { margin-top: 2rem; border-left: 3px solid #b42318; }
.portal-erase-what { display: grid; gap: 1.25rem 2rem; margin-top: 1rem; }
@media (min-width: 45rem) { .portal-erase-what { grid-template-columns: 1fr 1fr; } }
.portal-erase-what .inv-subhead { margin-top: 0; }
.portal-erase-list { margin: 0; padding-left: 1.1rem; font-size: 14px; line-height: 1.7; }
.portal-erase-list li { list-style: disc; }
.portal-erase-ask { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.portal-erase-ask .inv-check { margin-top: .75rem; }
/* Two classes, so estate's `.btn, button[type="submit"]` does not get the
   last word on what the one destructive button here looks like. */
.btn.portal-erase-submit,
.portal-erase-ask .portal-erase-submit {
    display: inline-block; margin-top: 1rem;
    background: #b42318; border-color: #b42318; color: #fff;
}
.portal-erase-ask .portal-erase-submit:hover { background: #8f1c13; border-color: #8f1c13; }

/* ---------- What a client's own pages have in common ---------- */

/*
 * One heading treatment across every page somebody reads while signed in to
 * their agency's site — the sign-in card, Contul meu, choosing or resetting a
 * password, Datele mele and Cere o modificare. They were three different
 * sizes, because each arrived with the screen it was built for.
 *
 * `#portal` is what they share, and an id is what it takes: a theme's bare
 * `h1` is one element, but `.inv-head h1` and `.portal-set-card h1` are two
 * classes each, and the shared rule has to beat both of them wherever the
 * stylesheets land.
 */
#portal h1 { margin: .75rem 0 .1rem; font-size: 28px; font-weight: 400; }

/*
 * And the line under it. Two shapes, because two of these pages put that
 * paragraph OUTSIDE the header so it can run the full width of the page while
 * the heading shares its row with something else.
 */
#portal h1 + p,
#portal .ask-head + p {
    line-height: 22px; font-weight: 400; font-size: 14px; margin-bottom: 1.25rem;
}

/* ---------- Cere o modificare ---------- */

/*
 * One long form read as five tabs, with the send button and what has changed
 * underneath. Every rule here is scoped with `ask-`, because the page is drawn
 * by whichever theme the agency runs and the estate stylesheet claims `.btn`
 * and `button[type="submit"]` outright.
 */
.ask-head {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    justify-content: space-between; margin-bottom: .5rem;
}
/* Two classes deep, so it beats a theme's own `h1` wherever the stylesheets
   land in the cascade — estate sets one at clamp(2rem … 3.4rem). */
/* Size, weight and margin come from the shared `#portal h1` rule above, which every
   client-facing page shares. What is left here is this header's own job:
   sitting on one row with the change count beside it. */
.ask-head h1 { flex: 1 1 auto; }
/* The line under it runs the width of the page, so it is NOT inside the flex
   row above: beside the pill it had half the width and broke after four
   words. */
.ask-intro { margin: 0 0 1.25rem; max-width: none; }

/* The running count. Amber rather than the brand colour: it is a state to
   notice, not an action, and the brand is what the send button wears. */
.ask-pill {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0;
    padding: .5rem .9rem; border-radius: 999px;
    background: #fdf3d8; color: #7a5a12;
    font-size: 14px; font-weight: 500; white-space: nowrap;
}
.ask-pill::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #d9a441;
}
.ask-pill.is-changed { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.ask-pill.is-changed::before { background: var(--brand); }
/* `display` above beats the browser's own [hidden], the trap .inv-check and
   .inv-upload already carry — and this one starts hidden by design. */
.ask-pill[hidden] { display: none; }

/* Which listing this is about, read the way the advert reads. */
.ask-listing {
    display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center;
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.ask-listing-photo {
    flex: none; width: 7.5rem; height: 5.5rem; object-fit: cover;
    border-radius: calc(var(--radius) - 2px); background: var(--surface-alt);
}
.ask-listing-photo-empty { display: block; border: 1px dashed var(--line); }
.ask-listing-words { flex: 1 1 18rem; min-width: 0; }
.ask-listing-words h2 { margin: 0 0 .2rem; font-size: 18px; font-weight: 600; }
.ask-listing-words p { margin: 0; font-size: 14px; }
.ask-listing-price { margin-left: auto; text-align: right; }
.ask-listing-price span { display: block; font-size: 13px; }
.ask-listing-price strong { font-size: 22px; font-weight: 600; }

/*
 * The tabs. The radios are the state and the labels are the control, so the
 * whole wizard works with no script — including the "next section" button at
 * the foot of each panel, which is another label for the same radios.
 */
.ask-tabs {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); margin-bottom: 1.25rem;
}
.ask-tabstrip {
    display: flex; flex-wrap: wrap; gap: .25rem;
    padding: .35rem .75rem 0; border-bottom: 1px solid var(--line);
}
.ask-tab {
    padding: .8rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--ink-muted); font-size: 15px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
}
.ask-tab:hover { color: var(--ink); }
.ask-panels > .ask-panel { display: none; padding: 1.25rem 1.5rem; }
/* Written out one tab at a time rather than with nth-of-type: the sections a
   type has are not always the same five, and a rule counting position would
   open the wrong panel the moment one is dropped. */
#tab-loc:checked ~ .ask-panels > [data-panel="loc"],
#tab-detalii:checked ~ .ask-panels > [data-panel="detalii"],
#tab-dotari:checked ~ .ask-panels > [data-panel="dotari"],
#tab-foto:checked ~ .ask-panels > [data-panel="foto"],
#tab-pret:checked ~ .ask-panels > [data-panel="pret"],
#tab-vizionare:checked ~ .ask-panels > [data-panel="vizionare"],
#tab-istoric:checked ~ .ask-panels > [data-panel="istoric"] { display: block; }
#tab-loc:checked ~ .ask-tabstrip [for="tab-loc"],
#tab-detalii:checked ~ .ask-tabstrip [for="tab-detalii"],
#tab-dotari:checked ~ .ask-tabstrip [for="tab-dotari"],
#tab-foto:checked ~ .ask-tabstrip [for="tab-foto"],
#tab-pret:checked ~ .ask-tabstrip [for="tab-pret"],
#tab-vizionare:checked ~ .ask-tabstrip [for="tab-vizionare"],
#tab-istoric:checked ~ .ask-tabstrip [for="tab-istoric"] {
    color: var(--brand); border-bottom-color: var(--brand);
}
/* The input is off screen, so the ring has to be drawn on the label it
   controls — otherwise tabbing through this strip shows nothing at all. */
#tab-loc:focus-visible ~ .ask-tabstrip [for="tab-loc"],
#tab-detalii:focus-visible ~ .ask-tabstrip [for="tab-detalii"],
#tab-dotari:focus-visible ~ .ask-tabstrip [for="tab-dotari"],
#tab-foto:focus-visible ~ .ask-tabstrip [for="tab-foto"],
#tab-pret:focus-visible ~ .ask-tabstrip [for="tab-pret"],
#tab-vizionare:focus-visible ~ .ask-tabstrip [for="tab-vizionare"],
#tab-istoric:focus-visible ~ .ask-tabstrip [for="tab-istoric"] {
    outline: 2px solid var(--brand); outline-offset: -2px; border-radius: calc(var(--radius) - 4px);
}

.ask-panel-title { margin: 0 0 .25rem; font-size: 20px; font-weight: 600; }
.ask-panel-hint { margin: 0 0 1.25rem; font-size: 14px; }
.ask-panel-foot {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    justify-content: flex-end; margin-top: 1.5rem;
    padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.ask-panel-foot .muted { margin: 0; font-size: 14px; margin-right: auto; }
/* A label wearing .btn: two classes, so estate's `.btn, button[type=submit]`
   does not get the last word on the padding. */
.btn.ask-next { cursor: pointer; }

/* The send half: what changed on the left, what happens next on the right. */
.ask-grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 62rem) { .ask-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.ask-summary {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.ask-summary-head {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
    justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line);
}
.ask-summary-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.ask-summary-head span { font-size: 14px; }
.ask-diff { padding: 1.25rem 1.5rem; }
.ask-diff[hidden] { display: none; }
.ask-diff-empty { margin: 0; text-align: center; font-size: 14px; line-height: 1.7; }
.ask-diff-empty[hidden] { display: none; }
.ask-diff-plain { margin: 0; padding: 1.25rem 1.5rem; font-size: 14px; }
.ask-diff-plain[hidden] { display: none; }
.ask-diff-list { display: grid; gap: .6rem; margin: 0; }
.ask-diff-list li {
    display: grid; gap: .15rem; padding: .6rem .8rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-alt); font-size: 14px;
}
.ask-diff-label { font-weight: 600; }
/* What it said, then what it would say. The old value is struck through the
   way the agent's review screen strikes it, so both sides of this read alike. */
.ask-diff-from { text-decoration: line-through; opacity: .65; }
.ask-diff-to { font-weight: 400; }

.ask-note { padding: 0 1.5rem 1.25rem; }
.ask-note label { display: block; margin-bottom: .35rem; font-size: 14px; font-weight: 500; }
.ask-note textarea { width: 100%; }
.ask-fineprint { margin: 0; padding: 0 1.5rem; font-size: 13px; }
.ask-send { display: block; width: calc(100% - 3rem); margin: 1rem 1.5rem 1.5rem; }
/* Disabled by the script while nothing has changed — the server refuses an
   empty request anyway, so without the script the button stays live and
   answers with the same sentence. */
.ask-send[disabled] { opacity: .45; cursor: not-allowed; }

.ask-rail { display: grid; gap: 1.25rem; align-content: start; }
.ask-rail .inv-card { margin-bottom: 0; }
.ask-rail-title { margin: 0 0 1rem; font-size: 17px; font-weight: 600; }
.ask-rail-note { margin: 0; padding: 1rem 1.25rem; font-size: 13px; line-height: 1.6;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-alt); }

/* Three steps with a line down them, drawn by the mark's own ::after so an
   empty pseudo-element cannot leave a stub under the last one. */
.ask-steps { display: grid; gap: 1.25rem; margin: 0; }
.ask-steps li { display: flex; gap: .9rem; align-items: flex-start; position: relative; }
.ask-steps li > span:last-child { display: grid; gap: .15rem; font-size: 14px; }
.ask-step-mark {
    flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
    border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand); font-size: 13px; font-weight: 600;
}
.ask-steps li:not(:last-child) .ask-step-mark::after {
    content: ""; position: absolute; left: .875rem; top: 1.75rem; bottom: -1.25rem;
    width: 1px; background: var(--line);
}

/*
 * The files somebody has just chosen, as pictures. Same tile size as the
 * photographs already on the listing above them, so the panel reads as one
 * gallery with a line between what is there and what is being offered.
 */
.ask-chosen {
    display: grid; gap: .75rem; margin: 1rem 0 0; width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.ask-chosen[hidden] { display: none; }
.ask-chosen li {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 4 / 3; padding: .35rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
}
.ask-chosen img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) - 3px); }
.ask-chosen-name { padding: 0 .5rem; font-size: 12px; text-align: center; word-break: break-all; }
/* Amber, like the count at the top of the page: this is a state to notice,
   not the brand's own colour, which is what an applied photograph would wear. */
.ask-chosen-pill {
    position: absolute; left: .5rem; bottom: .5rem;
    padding: .15rem .5rem; border-radius: 999px;
    background: #fdf3d8; color: #7a5a12;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}

/*
 * What they have asked for before. A list of cards rather than a table: a
 * request carries a date, an outcome, a handful of fields and sometimes two
 * notes, and none of that is a row.
 */
.ask-history { display: grid; gap: 1rem; margin: 0; }
.ask-history-item {
    padding: 1rem 1.25rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface-alt);
}
.ask-history-head {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    align-items: center; justify-content: space-between; margin-bottom: .75rem;
}
.ask-history-when { font-weight: 600; font-size: 14px; }
.ask-history-state {
    padding: .2rem .6rem; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ask-history-pending { background: #fdf3d8; color: #7a5a12; }
.ask-history-approved { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.ask-history-rejected { background: #f3f4f5; color: #5f6a72; }
.ask-history-rows { display: grid; gap: .4rem; margin: 0; font-size: 14px; }
.ask-history-rows li { display: grid; gap: .1rem; }
.ask-history-label { font-weight: 600; }
.ask-history-note { margin: .75rem 0 0; font-size: 14px; }

/*
 * Program vizionare: seven rows of a tick and two times. Drawn by the
 * invitation's step and by the change form's tab, which is why it is NOT
 * scoped with `ask-` like the rest of that page.
 */
.owner-week { display: grid; gap: .5rem; margin: 1rem 0 0; }
.owner-week-day { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
/* The tick's own box is the label, so the days line up whatever they are
   called: Miercuri is twice the width of Luni. */
.owner-week-tick { flex: 0 0 11rem; }
.owner-week-hours { display: flex; align-items: center; gap: .5rem; }
.owner-week-hours input { width: auto; }
/* Greyed rather than removed when the day is closed: the boxes keep their
   place, so ticking a day does not shuffle the six rows under it. */
.owner-week-day:has(input[type="checkbox"]:not(:checked)) .owner-week-hours { opacity: .45; }

.ask-agent { display: flex; gap: .9rem; align-items: center; }
.ask-agent p { margin: .1rem 0 0; font-size: 14px; }
.ask-agent-photo { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; }
.ask-agent-initials {
    display: grid; place-items: center; background: var(--ink); color: var(--surface);
    font-size: 15px; font-weight: 600;
}

.owner-videos { display: grid; gap: .5rem; margin: .75rem 0 0; }
.owner-videos li {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-alt); font-size: 14px;
}

/* What the listing says about itself, read once before it is sent. */
.inv-summary { width: 100%; margin: 1rem 0 0; border-collapse: collapse; font-size: 14px; }
.inv-summary th, .inv-summary td { padding: .7rem .2rem; border-bottom: 1px solid var(--line); text-align: left; }
.inv-summary th { font-weight: 500; color: var(--muted); }
.inv-summary td { text-align: right; font-weight: 600; }
.inv-consents { display: grid; gap: .6rem; margin: 1.25rem 0 0; font-size: 14px; }
.inv-consents label { display: flex; gap: .6rem; align-items: flex-start; }

@media (min-width: 60rem) {
    .inv-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
}