/*
 * "Skyline" (real estate): bold and confident. Navy and a bright red, Josefin Sans headings over DM Sans,
 * centred headings with a small red line above. The opening puts big words and a search card over a dark
 * photo; cards carry red titles, their type on the picture and the price in the footer.
 */
:root {
    --re-accent: var(--primary-color, #db2b39);
    --re-ink: #161e2d;
    --re-text: #5c6370;
    --re-mute: #636976;
    --re-line: #e9eaee;
    --re-soft: #f7f7f7;
    --re-dark: #161e2d;
    --re-radius: 12px;
    --re-radius-sm: 6px;
    --re-head-font: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
    --re-head-weight: 600;
    --re-wrap: 1220px;
}

body[data-pf-site="realestate"] { font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif; }
body[data-pf-site="realestate"] h1, body[data-pf-site="realestate"] h2, body[data-pf-site="realestate"] h3, body[data-pf-site="realestate"] .sx-h1 { font-family: var(--re-head-font) !important; }

/* Headings centred, a small red line above. */
.re-head { flex-direction: column; align-items: center; text-align: center; }
.re-head h2 { font-size: clamp(32px, 3.8vw, 50px); letter-spacing: .01em; }
.re-head .re-lead { margin-inline: auto; }
.re-kicker { font-size: 12.5px; letter-spacing: .14em; }
.re-head-row { flex-direction: column; align-items: center; }
.re-more { margin-top: 4px; }

.re-btn { border-radius: 4px; }
.re-btn-solid:hover { border-color: var(--re-ink); background: var(--re-ink); }
.re-center .re-btn { border-color: var(--re-accent); background: var(--re-accent); color: #fff; }
.re-center .re-btn:hover { border-color: var(--re-ink); background: var(--re-ink); }

/* ---- the opening: big words and a search card over a dark photo */
.re-hero-center h1, /* ---- the opening: big words and a search card over a dark photo */
.re-hero-center .sx-h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 600; letter-spacing: .01em; }
.re-hero-center .re-search-tabs { display: flex; justify-content: center; gap: 0; }
.re-hero-center .re-tab span { min-width: 120px; padding: 13px 22px; border-radius: 6px 6px 0 0; background: rgba(255, 255, 255, .16); color: #fff; text-align: center; backdrop-filter: blur(6px); }
.re-hero-center .re-tab input:checked + span { background: #fff; color: var(--re-ink); }
.re-hero-center .re-search-fields { border-radius: 10px; grid-template-columns: 1.3fr 1fr 1fr auto; padding: 12px; }
.re-hero-center .re-search-go { min-width: 150px; border-radius: 6px; }

/* ---- property type buttons */
.re-pills { justify-content: center; }
.re-pills button { border: 0; border-radius: 4px; background: var(--re-soft); color: var(--re-accent); }
.re-pills button.is-on { background: var(--re-accent); color: #fff; }

/* ---- cards: red titles, the type on the picture, the price in the footer */
.re-card { border-color: var(--re-line); }
.re-card-media { aspect-ratio: 16 / 10.5; }
.re-badge { border-radius: 3px; font-size: 11px; text-transform: none; letter-spacing: .02em; }
.re-badge-sale, .re-badge-rent { background: var(--re-accent); }
.re-badge-featured { background: #198754; }
.re-card-type { border-radius: 3px; background: #fff; }
.re-card-body { display: flex; flex-direction: column; padding: 18px 20px 6px; }
.re-card-title { order: 1; margin-bottom: 6px; font-size: 20px !important; }
.re-card-title a { color: var(--re-ink); }
.re-card-title a:hover { color: var(--re-accent); }
.re-card-place { order: 2; margin-bottom: 14px; }
.re-facts { order: 3; border: 0; padding: 0 0 14px; }
.re-facts em { display: none; }
.re-card-price { order: 4; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: auto -20px 0; padding: 14px 20px; border-top: 1px solid var(--re-line); color: var(--re-ink); font-family: var(--re-head-font); font-size: 22px; font-weight: 600; }
.re-card-price::before { content: "Price"; color: var(--re-mute); font-family: "DM Sans", Arial, sans-serif; font-size: 13px; font-weight: 500; }
.re-card-foot { display: none; }

/* ---- locations: tall picture cards with the name large */
.re-cities { background: var(--re-soft); }
.re-cities-grid a { aspect-ratio: 3 / 4; }
.re-cities-grid strong { font-family: var(--re-head-font); font-size: 30px; }

/* ---- services: big titles over plain text, no boxes */
.re-services .re-head, .re-reasons .re-head { align-items: flex-start; text-align: left; }
.re-services .re-tile { padding: 0 8px 0 0; border: 0; background: transparent; }
.re-services .re-tile-icon { display: none; }
.re-services .re-tile h3 { margin-top: 0; font-size: clamp(24px, 2.2vw, 32px) !important; }
.re-services .re-tile p::after { content: "Learn more \2192"; display: block; margin-top: 14px; color: var(--re-ink); font-weight: 600; font-size: 14px; }
.re-services { padding-bottom: 40px; }

/* ---- numbers under the services, on a rule */
.re-stats { padding-top: 0; }
.re-stats .re-wrap { padding-top: 40px; border-top: 1px solid var(--re-line); }
.re-stats-row strong { color: var(--re-accent); font-weight: 600; }

/* ---- reasons: centred text on a soft background */
.re-reasons { background: var(--re-soft); }
.re-reasons .re-head { align-items: center; text-align: center; }
.re-reason { padding: 10px; border: 0; background: transparent; text-align: center; }
.re-reason .re-tile-icon { display: none; }
.re-reason-no { display: none; }
.re-reason h3 { margin-top: 0; font-size: clamp(26px, 2.4vw, 34px) !important; }

/* ---- best value: one large beside three in a list */
.re-properties-feature .re-head-row { align-items: flex-start; }
.re-properties-feature .re-head { align-items: flex-start; text-align: left; }

/* ---- what clients say, agents, mortgage, guides */
.re-quotes-grid .re-head { align-items: flex-start; text-align: left; }
.re-quote blockquote::before { content: "\2605\2605\2605\2605\2605"; height: auto; margin-bottom: 14px; color: #f5b301; font-size: 16px; letter-spacing: 2px; }
.re-agent-card { padding: 8px; }
.re-agent-card-photo { border-radius: 8px; }
.re-mortgage-section { background: var(--re-bg); }
.re-mortgage-grid { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--re-line); border-radius: var(--re-radius); box-shadow: var(--re-shadow); }
.re-mortgage-grid .re-head { align-items: flex-start; text-align: left; }
.re-mortgage-result { background: linear-gradient(160deg, #3b4558, #222a3a); }
.re-news { background: var(--re-soft); }
.re-post-media { display: none; }
.re-post { padding: 0; }
.re-post strong { color: var(--re-accent); font-family: var(--re-head-font); font-size: 24px; }
.re-post-meta { color: var(--re-ink); font-weight: 600; }

/* ---- pages */
.re-listing-head { background: var(--re-dark); }
.re-listing-head h1, .re-listing-head .sx-h1 { color: #fff; }
.re-listing-head p { color: rgba(255, 255, 255, .7); }
.re-listing-head a { color: #fff; }
.re-property-head h1, .re-property-head .sx-h1 { color: var(--re-ink); }

@media (max-width: 991.98px) {
    .re-hero-center .re-search-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .re-hero-center .re-search-fields { grid-template-columns: minmax(0, 1fr); }
    .re-hero-center .re-tab span { min-width: 0; }
    .re-cities-grid a { aspect-ratio: 4 / 3; }
}

/* The header: the name in the theme's typeface and its main action (site.css .pf-brand-name, .pf-header-cta). */
html body[data-pf-site] { --pf-brand-font: var(--re-head-font); --pf-brand-size: 24px; --pf-brand-weight: 700; }