/*
 * Homepage v2 (draft) — visual language borrowed from property-detail-v2
 * (ink / yellow / canvas palette, rounded paper cards, soft shadow).
 *
 * Scope: everything here is namespaced under body.cr-index-v2 so it can
 * never leak onto the live index.php. It re-skins existing markup coming
 * from the shared includes (seo_area.php, welcome_area.php, ...) purely
 * with selectors + !important — those included files are still live on
 * production and are intentionally left untouched.
 */

.cr-index-v2 {
    --cr-ink: #171717;
    --cr-muted: #676760;
    --cr-line: #e4e2da;
    --cr-paper: #ffffff;
    --cr-canvas: #f6f5f0;
    --cr-yellow: #f5c400;
    --cr-yellow-soft: #fff7cf;
    --cr-green: #157a55;
    --cr-radius: 18px;
    --cr-shadow: 0 14px 40px rgba(28, 27, 22, 0.08);
    --cr-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body.cr-index-v2 {
    background: var(--cr-canvas);
    color: var(--cr-ink);
    font-family: var(--cr-font-sans);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Safari and other engines do not consistently inherit the document font
   into native controls. Keep textual UI on the same system stack as the
   property detail without overriding any FontAwesome / Fontello glyphs. */
body.cr-index-v2 button,
body.cr-index-v2 input,
body.cr-index-v2 select,
body.cr-index-v2 textarea,
body.cr-index-v2 .btn,
body.cr-index-v2 .form-control,
body.cr-index-v2 .dropdown-menu {
    font-family: var(--cr-font-sans) !important;
}

.cr-index-v2 .navbar,
.cr-index-v2 .navbar-default .navbar-nav > li > a,
.cr-index-v2 .navbar .dropdown-menu > li > a {
    font-family: var(--cr-font-sans) !important;
}

.cr-index-v2 .page-title h1,
.cr-index-v2 .page-title h2 {
    text-transform: none;
}

/* ---------------------------------------------------------------------
 * Hero + search
 * ------------------------------------------------------------------- */

/* Search lives inside the hero card itself (form wraps both the title
   block and the search box) — there is no separate overlapping card
   below it anymore, so there's nothing fragile to keep in sync between
   hero padding and a negative margin. The bright white search box is
   what should catch the eye first, not a tall dark banner. */
.cr-index-v2 .cr-idx-hero {
    background:
        radial-gradient(circle at 92% 8%, rgba(245, 196, 0, 0.28), transparent 38%),
        var(--cr-ink);
    border-radius: 24px;
    box-shadow: var(--cr-shadow);
    color: #fff;
    margin: 18px auto 0;
    max-width: 1200px;
    overflow: hidden;
    padding: clamp(18px, 2.6vw, 26px) clamp(20px, 4vw, 48px) clamp(20px, 2.6vw, 26px);
    position: relative;
}

.cr-index-v2 .cr-idx-hero::after {
    background: var(--cr-yellow);
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 34%;
}

.cr-index-v2 .cr-idx-kicker {
    color: var(--cr-yellow);
    display: block;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* The title sits in a Bootstrap col-md-10.col-md-offset-1 with no .row
   wrapper around it (that's how it ships in the original markup) — its
   offset margin isn't resolving the way a normal Bootstrap grid column
   would. Rather than fight that, center it directly and ignore the grid
   column math entirely. */
.cr-index-v2 .cr-idx-hero .col-md-10.col-md-offset-1 {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.cr-index-v2 .cr-idx-hero .page-title {
    margin: 0 !important;
    padding: 0 !important;
}

/* Bootstrap's .container is a *fixed* width per breakpoint (1170px at
   >=1200px), not a max-width. The hero card caps at 1200px total width
   with its own padding eating into that, so the fixed-width container
   (both the title's and the search box's — both go through the exact
   same problem) no longer fits its available space and overflows to one
   side instead of centering: flush against the left padding edge, then
   spilling past the right one. Force it to just fill the hero's actual
   content box instead of asking for a fixed breakpoint width it doesn't
   have room for. */
.cr-index-v2 .cr-idx-hero .container {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

.cr-index-v2 .cr-idx-hero h1 {
    color: #fff !important;
    font-size: clamp(24px, 2.6vw, 30px) !important;
    font-weight: 750 !important;
    letter-spacing: -0.025em;
    line-height: 1.15 !important;
    margin: 0 auto !important;
    max-width: 760px;
}

/* A short instruction supports the multi-location search without turning
   the hero into an SEO paragraph. */
.cr-index-v2 .cr-idx-hero .index-search-hero-hint {
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 7px auto 0 !important;
    max-width: 680px;
    padding: 0 !important;
}

.cr-index-v2 .index-search-shell {
    background: transparent !important;
    margin-top: clamp(12px, 1.8vw, 18px) !important;
    padding-top: 0 !important;
}

.cr-index-v2 .index-search-box {
    background: var(--cr-paper) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25) !important;
    padding: 16px clamp(14px, 2.5vw, 26px) 14px !important;
}

.cr-index-v2 .index-search-top-field {
    margin-top: 8px !important;
}

.cr-index-v2 .index-search-spacer {
    margin-top: 12px !important;
}

.cr-index-v2 .index-search-location-picker.filters__select {
    border: 1px solid var(--cr-line) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    /* height, not min-height — with min-height alone this field's flex-
       wrapped chip row ends up taller (54px) than the plain selects next
       to it (46px) even with no chips selected yet. A hard height keeps
       the default state pixel-matched; picking 2-3 locations (this field
       allows up to 3) can still wrap chips visually past the border in
       that rarer case, which beats permanently reserving extra height
       every field next to it doesn't need. */
    height: 46px !important;
}

.cr-index-v2 .index-search-location-picker.filters__select:focus-within {
    border-color: var(--cr-ink) !important;
    box-shadow: 0 0 0 3px rgba(245, 196, 0, 0.25) !important;
}

.cr-index-v2 .index-search-shell .form-control,
.cr-index-v2 .index-search-shell select.form-control,
.cr-index-v2 .index-search-shell .bootstrap-select > .btn.dropdown-toggle {
    border: 1px solid var(--cr-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    /* height, matching the location field exactly — min-height alone
       still let native <select> chrome (especially Safari/iOS, which
       carries its own intrinsic vertical padding that CSS min-height
       doesn't fully absorb) render taller than the location input. */
    height: 46px !important;
}

/* Native <select> keeps its own OS padding/line-height baked into the
   box no matter what height is set on it — appearance:none strips that
   chrome so the field is exactly as tall as we say, at the cost of also
   removing the native dropdown arrow, which we redraw by hand below. */
.cr-index-v2 .index-search-shell select.form-control {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23676760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding: 0 38px 0 14px !important;
}

.cr-index-v2 .index-search-shell .bootstrap-select > .btn.dropdown-toggle {
    align-items: center;
    display: flex !important;
}

.cr-index-v2 .index-search-advanced-wrap {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.cr-index-v2 .index-search-advanced-wrap .panel-default {
    border: 1px solid var(--cr-line) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

.cr-index-v2 .index-search-advanced-wrap .panel-default > .panel-heading {
    background-color: var(--cr-yellow-soft) !important;
    border-color: var(--cr-yellow-soft) !important;
    padding: 10px 16px !important;
}

/* The base theme gives .fqa-title asymmetric padding (0 top / 16px
   bottom, for a layout this page no longer uses) which pushes the text
   off-center inside the panel-heading bar. Panel-heading already carries
   its own even padding — this element doesn't need any of its own. */
.cr-index-v2 .index-search-panel-title {
    background: transparent !important;
    border: 0 !important;
    color: var(--cr-ink) !important;
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    width: 100%;
}

.cr-index-v2 .index-search-panel-title::after {
    content: "+";
    float: right;
    font-size: 18px;
    line-height: 1;
}

.cr-index-v2 .index-search-panel-title::before {
    content: none !important;
    display: none !important;
}

.cr-index-v2 .index-search-panel-title[aria-expanded="true"]::after {
    content: "\2212";
}

.cr-index-v2 .index-search-panel-title:focus-visible {
    outline: 3px solid rgba(23, 23, 23, 0.28);
    outline-offset: 4px;
}

.cr-index-v2 .index-search-row {
    margin-left: 0 !important;
}

.cr-index-v2 .index-search-adv-field label {
    color: var(--cr-muted);
    font-size: 13px;
    font-weight: 600;
}

.cr-index-v2 .form-inline input[type="submit"].index-search-submit {
    background: var(--cr-yellow) !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--cr-ink) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    height: 46px !important;
    /* index-search.css sets a 30px margin-top by default — that alone
       was a third of the padding we just trimmed off the hero. */
    margin-top: 12px !important;
}

/* On mobile, three separate ancestors each contributed their own gutter
   (hero padding + Bootstrap .container's 15px + .large-search's 10px)
   stacking up to ~90px lost on a 390px screen — the search box ended up
   at ~300/390px instead of using the width available to it. Collapse the
   redundant layers down to hero's own padding only, and match the
   advanced-search wrapper to the same edge so the two don't drift apart. */
@media (max-width: 767px) {
    .cr-index-v2 .cr-idx-hero {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .cr-index-v2 .index-search-shell .container,
    .cr-index-v2 .large-search {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cr-index-v2 .index-search-box {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* The 3 top fields have their own unnamed .col-md-12 wrapper (nested
       inside .index-search-box, separate from .large-search) that still
       carries Bootstrap's 15px column gutter. */
    .cr-index-v2 .index-search-box > .col-md-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cr-index-v2 .index-search-advanced-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Belt-and-suspenders: force every top field (location, type,
       listing) to the exact same full-width block regardless of how
       this Bootstrap build scopes .col-md-4 below its own breakpoint —
       and drop its 15px Bootstrap column gutter, which was insetting
       the fields further than the advanced-search bar right below them. */
    .cr-index-v2 .index-search-top-field {
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------------
 * Reusable section heading (used by markup we control directly)
 * ------------------------------------------------------------------- */

.cr-index-v2 .cr-idx-section {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 15px;
}

.cr-index-v2 .cr-idx-section-head {
    margin-bottom: 26px;
    text-align: center;
}

.cr-index-v2 .cr-idx-section-head .cr-idx-kicker {
    color: #8b7000;
    margin: 0 0 8px;
}

.cr-index-v2 .cr-idx-section-head h2 {
    color: var(--cr-ink);
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0;
}

.cr-index-v2 .cr-idx-section-head p {
    color: var(--cr-muted);
    font-size: 15px;
    margin: 8px 0 0;
}

/* Section headings coming from the shared includes (h2 only, markup untouched) */
.cr-index-v2 .content-area .page-title h2,
.cr-index-v2 .testimonial-area .page-title h2,
.cr-index-v2 .count-area .page-title h2 {
    color: var(--cr-ink) !important;
    font-size: clamp(22px, 2.8vw, 30px) !important;
    font-weight: 750 !important;
    letter-spacing: -0.025em;
    line-height: 1.15 !important;
}

/* ---------------------------------------------------------------------
 * Property cards — shared by the main grid, first-row, stone-house,
 * hotel blocks (all emit the same .box-two.proerty-item markup).
 * ------------------------------------------------------------------- */

.cr-index-v2 .content-area.home-area-1.recent-property,
.cr-index-v2 .testimonial-area.recent-property {
    background: transparent !important;
}

/* Shared homepage includes still use Bootstrap's fixed-width containers.
   Keep these v2-only sections fluid up to the same 1200px cap as the
   hand-built main grid, so cards do not snap narrower at 768/992/1200px. */
.cr-index-v2 .content-area.home-area-1.recent-property > .container,
.cr-index-v2 .testimonial-area.recent-property > .container {
    max-width: 1200px;
    width: 100%;
}

/* CSS Grid, not flexbox, for this row. Flexbox's cross-axis stretch
   across a *wrapped* line (mixed with a second flex layer inside each
   cell to stretch the card itself) turned out to resolve differently
   between engines — matched exactly in one browser's devtools, visibly
   taller and shifted in Safari (confirmed with an annotated screenshot).
   Grid's per-row equal-height stretch is the more boring, more reliable
   tool for exactly this job, and it also drops the need for any
   calc(25% - Npx) gap-compensation math on the children — grid-gap
   already accounts for that on its own. */
.cr-index-v2 .proerty-th {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 -10px;
}

/* The themed grids live inside Bootstrap rows that span the normalized
   1200px container. A 5px inset gives them the same effective width as
   the main grid (container width minus 10px) at every breakpoint. */
.cr-index-v2 .content-area.home-area-1.recent-property > .container > .row > .proerty-th {
    margin-left: 5px;
    margin-right: 5px;
}

/* This div still carries Bootstrap's own col-sm-6 / col-md-3 classes
   (untouched markup). Bootstrap's .col-md-3{width:25%} is a real, live
   rule — without an explicit override here it wins by default now that
   grid (not a width:calc() override) is what sizes the columns, and
   25% of an already-25%-wide grid cell is not what anyone wants. */
.cr-index-v2 .proerty-th > div[class*="col-"] {
    display: flex;
    float: none;
    padding: 0 !important;
    width: 100% !important;
}

.cr-index-v2 .box-two.proerty-item {
    background: var(--cr-paper);
    border-radius: var(--cr-radius);
    box-shadow: 0 8px 24px rgba(28, 27, 22, 0.07);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
    width: 100%;
}

.cr-index-v2 .box-two.proerty-item:hover {
    box-shadow: var(--cr-shadow);
    transform: translateY(-3px);
}

.cr-index-v2 .box-two.proerty-item .item-thumb {
    box-shadow: none !important;
}

.cr-index-v2 .box-two.proerty-item .item-thumb img {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: cover;
    width: 100%;
}

.cr-index-v2 .box-two.proerty-item .item-entry {
    padding: 14px 16px 16px;
}

.cr-index-v2 .box-two.proerty-item .item-entry a,
.cr-index-v2 .box-two.proerty-item .item-entry span {
    color: var(--cr-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.cr-index-v2 .box-two.proerty-item .item-entry > a {
    display: block;
    font-weight: 700 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-index-v2 .cr-v2-property-card-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 0 5px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-index-v2 .box-two.proerty-item .cr-v2-property-card-title a {
    display: block;
    font-size: 15px !important;
    font-weight: 700 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-index-v2 .box-two.proerty-item .dot-hr {
    display: none;
}

.cr-index-v2 .box-two.proerty-item .item-entry > span.pull-left {
    color: var(--cr-muted) !important;
    font-weight: 500 !important;
    margin-top: 4px;
}

.cr-index-v2 .box-two.proerty-item .item-entry > span.proerty-price {
    font-size: 15px !important;
    font-weight: 800 !important;
}

.cr-index-v2 .box-two.proerty-item .item-entry::after {
    clear: both;
    content: "";
    display: block;
}

/* height:100% now stretches reliably against its photo-card row siblings
   because .proerty-th is a grid, and grid rows stretch every cell to the
   tallest one by default — no more relying on flex's wrapped-line
   stretch behaving the same way across engines. min-height stays on as
   a floor for the one-per-row mobile case, where there's no taller
   sibling in the same row to stretch against at all. */
.cr-index-v2 .box-tree.more-proerty {
    align-items: center;
    background: var(--cr-ink);
    border-radius: var(--cr-radius);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: 10px;
    min-height: calc(337px - 20px);
    padding: 24px;
    width: 100%;
}

.cr-index-v2 .box-tree.more-proerty .item-tree-icon {
    display: block;
    padding-top: 0 !important;
}

.cr-index-v2 .cr-v2-more-card-link {
    align-items: center;
    color: #fff !important;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-family: var(--cr-font-sans) !important;
    justify-content: center;
    text-decoration: none !important;
    width: 100%;
}

.cr-index-v2 .cr-v2-more-card-link .more-entry > span:first-child {
    font-size: 18px;
    font-weight: 750;
    line-height: 1.3;
}

.cr-index-v2 .cr-v2-more-card-link .more-entry {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.cr-index-v2 .cr-v2-more-card-link:focus-visible {
    border-radius: 12px;
    outline: 3px solid var(--cr-yellow);
    outline-offset: 5px;
}

.cr-index-v2 .box-tree .item-tree-icon i {
    color: var(--cr-yellow) !important;
}

.cr-index-v2 .more-entry a span {
    color: #fff !important;
}

.cr-index-v2 .more-entry .tree-sub-ttl {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.4;
}

.cr-index-v2 .more-black {
    background: var(--cr-yellow) !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--cr-ink) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35;
    margin-top: 12px;
}

/* Grid column counts per breakpoint — no per-child width math needed,
   grid-template-columns + gap handles the sizing on its own. */
@media (max-width: 991px) {
    .cr-index-v2 .proerty-th {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .cr-index-v2 .proerty-th {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------
 * Welcome / services block
 * ------------------------------------------------------------------- */

.cr-index-v2 .Welcome-area {
    background: transparent !important;
}

.cr-index-v2 .welcome_text {
    display: none;
}

/* .welcome_text's own column still ate half the row (col-md-5 + offset-2)
   even with its content hidden, squeezing the services column down to
   ~40% width. Drop the whole empty column so services can use full width. */
.cr-index-v2 .Welcome-entry > .col-md-offset-2 {
    display: none;
}

.cr-index-v2 .Welcome-entry > div:not(.col-md-offset-2) {
    float: none !important;
    width: 100% !important;
}

.cr-index-v2 .welcome_services {
    float: none !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.cr-index-v2 .welcome_services .row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 !important;
}

/* This was the actual root cause of the "phantom item" wrapping — not
   the hidden spacer div (display:none / position:absolute / order on
   IT changed nothing, and even removing it from the DOM outright didn't
   either). Bootstrap's .row carries a clearfix via ::before/::after
   {content:" "; display:table}, meant for float-based layouts. Once
   .row becomes display:flex, those two generated boxes turn into two
   real (if invisible-looking) flex items — one before and one after the
   4 real tiles — which is exactly what pushed them into a 1-2-1 wrap
   instead of a clean 2x2. */
.cr-index-v2 .welcome_services .row::before,
.cr-index-v2 .welcome_services .row::after {
    content: none !important;
    display: none !important;
}

/* Flex line-wrapping is decided from each item's un-shrunk hypothetical
   size, before flex-shrink ever gets a chance to act — so an exact-fit
   calc() (4 * item + 3 * gap == row width) can still wrap the last item
   the moment the browser's internal layout rounds a fraction of a pixel
   over. A few extra px of subtracted slack per item costs nothing
   visually and removes the exact-fit edge case entirely. */
.cr-index-v2 .welcome_services .col-xs-6 {
    display: flex;
    flex: 0 1 calc(25% - 16px);
    float: none !important;
    padding: 0 !important;
}

.cr-index-v2 .welcome-circle {
    display: none;
}

/* This wrapper only ever holds the spacer circle above — drop the whole
   grid cell, not just the icon inside it. (The real wrapping bug turned
   out to be Bootstrap's .row clearfix pseudo-elements, fixed above —
   this rule was never actually the cause, just correctly hiding an
   element the design doesn't use.) */
.cr-index-v2 .welcome_services .row > .col-xs-12 {
    display: none;
}

/* Same footprint and alignment approach as .count-item in the trust
   section below (fixed min-height instead of hugging short content,
   flex-column, centered) so the two card rows read as one consistent
   system rather than a short row next to a tall one. */
.cr-index-v2 .welcome-estate {
    align-items: center;
    background: var(--cr-paper) !important;
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    justify-content: center;
    min-height: 230px !important;
    padding: 24px 18px !important;
    text-align: center;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.cr-index-v2 .welcome-estate:hover {
    box-shadow: var(--cr-shadow) !important;
    transform: translateY(-3px);
}

/* Mirror .count-item-circle's badge treatment (same size, same canvas
   background) instead of a bare icon glyph — icon fonts have wildly
   inconsistent per-glyph vertical metrics, and a fixed circular frame
   is what actually keeps every tile's icon visually aligned. */
.cr-index-v2 .welcome-icon {
    align-items: center;
    background: var(--cr-canvas);
    border-radius: 50%;
    display: flex !important;
    height: 62px;
    justify-content: center;
    margin: 0 auto;
    width: 62px;
}

.cr-index-v2 .welcome-icon i {
    color: var(--cr-ink) !important;
    font-size: 26px !important;
    line-height: 1 !important;
}

.cr-index-v2 .welcome-estate a p {
    color: var(--cr-ink) !important;
    font-family: var(--cr-font-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px !important;
}

@media (max-width: 767px) {
    /* Same exact-fit rounding trap as the desktop 4-column version above
       (2 * item + 1 * gap landing exactly on the row width) — same fix,
       a few extra px of subtracted slack. */
    .cr-index-v2 .welcome_services .col-xs-6 {
        flex-basis: calc(50% - 12px);
    }
}

/* ---------------------------------------------------------------------
 * SEO / geo link hub (seo_area.php + seo_area2.php — city landing links)
 * Collapsed by default via <details> — see cr-idx-geo-toggle markup.
 * ------------------------------------------------------------------- */

.cr-index-v2 .cr-idx-geo-toggle {
    background: var(--cr-paper);
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius);
    box-shadow: 0 8px 24px rgba(28, 27, 22, 0.05);
    padding: 4px clamp(18px, 3vw, 28px);
}

.cr-index-v2 .cr-idx-geo-toggle summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 18px 0;
}

.cr-index-v2 .cr-idx-geo-toggle summary::-webkit-details-marker {
    display: none;
}

.cr-index-v2 .cr-idx-geo-toggle-title {
    color: var(--cr-ink);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cr-index-v2 .cr-idx-geo-toggle-action {
    align-items: center;
    background: var(--cr-yellow-soft);
    border-radius: 999px;
    color: #6c5700;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    padding: 7px 14px;
}

.cr-index-v2 .cr-idx-geo-toggle-action::after {
    content: "+";
    font-size: 16px;
    line-height: 1;
}

.cr-index-v2 .cr-idx-geo-toggle[open] .cr-idx-geo-toggle-action::after {
    content: "\2212";
}

.cr-index-v2 .cr-idx-geo-hub {
    border-top: 1px solid var(--cr-line);
    margin-top: 2px;
    padding: 22px 0 20px;
}

.cr-index-v2 .city-area {
    background: transparent !important;
}

/* Inner cards sit inside the already-styled cr-idx-geo-toggle panel, so
   keep this flat — no nested card-in-a-card chrome. */
.cr-index-v2 .city-area .city {
    padding: 0;
}

.cr-index-v2 .single-city {
    text-align: left !important;
}

.cr-index-v2 .single-city h3 {
    border-bottom: 0 !important;
    color: var(--cr-ink) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
    margin: 0 0 4px !important;
    text-transform: uppercase !important;
}

.cr-index-v2 .city-title-line {
    background: var(--cr-yellow);
    border-radius: 999px;
    height: 3px;
    margin: 0 0 14px;
    width: 34px;
}

.cr-index-v2 .city-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cr-index-v2 .city-menu li {
    border-bottom: 1px solid var(--cr-line);
}

.cr-index-v2 .city-menu li:last-child {
    border-bottom: 0;
}

.cr-index-v2 .city-menu li a {
    align-items: center;
    color: #3b3b37 !important;
    display: flex;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 0;
}

.cr-index-v2 .city-menu li a::after {
    color: #b28e00;
    content: "\203a";
    font-size: 16px;
    margin-left: auto;
    padding-left: 10px;
}

.cr-index-v2 .city-menu li a:hover {
    color: var(--cr-ink) !important;
}

/* Two adjacent geo-link blocks (seo_area.php, seo_area2.php) sit as one grid */
.cr-index-v2 .cr-idx-geo-hub .city-area + .city-area .city {
    margin-top: 16px;
}

/* ---------------------------------------------------------------------
 * Thematic long-form SEO blocks (first row / stone house / hotel)
 * ------------------------------------------------------------------- */

.cr-index-v2 .testimonial-area .client-text {
    background: var(--cr-paper) !important;
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius) !important;
    box-shadow: none !important;
    margin-left: 0;
    margin-right: 0;
    min-height: 0 !important;
    padding: clamp(20px, 3vw, 30px) !important;
}

.cr-index-v2 .testimonial-area .client-text > p {
    color: #3b3b37 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
}

.cr-index-v2 .testimonial-area .client-text img {
    border-radius: 14px !important;
    margin-right: 18px;
}

/* These three legacy thematic images carry Bootstrap col-* classes on
   the <img> itself. Their 15px horizontal padding kept the visible photo
   inside the rounded box, making its actual corners look square. */
.cr-index-v2 .testimonial-area .client-text > p > img[class*="col-"] {
    border-radius: var(--cr-radius) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cr-index-v2 .index-readmore-toggle {
    background: var(--cr-yellow-soft) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #6c5700 !important;
    float: none !important;
    font-weight: 700 !important;
    margin-top: 12px !important;
    padding: 8px 16px !important;
    position: static !important;
}

/* ---------------------------------------------------------------------
 * Blog area
 * ------------------------------------------------------------------- */

.cr-index-v2 .testimonial-area .container[style] {
    background: var(--cr-paper) !important;
    border: 1px solid var(--cr-line) !important;
    border-bottom: 1px solid var(--cr-line) !important;
    border-radius: var(--cr-radius) !important;
    box-shadow: none !important;
}

/* The featured blog card is a Bootstrap container nested inside another
   container. Neutralize its second fixed width so it fills the same
   content span as the surrounding v2 sections. */
.cr-index-v2 .testimonial-area.recent-property > .container > .container[style] {
    max-width: none;
    width: 100%;
}

.cr-index-v2 .flex-container {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.cr-index-v2 .flex-container > div[class*="col-"] {
    float: none !important;
    padding: 0 !important;
    width: auto !important;
}

.cr-index-v2 .flex-container .col-md-5 {
    flex: 1 1 320px;
}

.cr-index-v2 .flex-container .col-md-7 {
    display: flex;
    flex: 1 1 380px;
    flex-direction: column;
    padding: 4px 0 !important;
    text-align: left !important;
}

.cr-index-v2 .flex-container .col-md-5 img {
    border-radius: 14px !important;
}

.cr-index-v2 .flex-container .col-md-7 p a {
    color: var(--cr-ink) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-align: left !important;
}

/* margin-top:auto belongs on the actual flex item (the <a> wrapping the
   button), not on the nested <span> — the span itself isn't a flex child
   of .col-md-7, so an auto margin there resolves to 0 and does nothing. */
.cr-index-v2 .flex-container .col-md-7 > a:last-child {
    margin-top: auto;
}

.cr-index-v2 .flex-container .nav-button {
    background: var(--cr-yellow) !important;
    border-radius: 999px !important;
    bottom: auto !important;
    color: var(--cr-ink) !important;
    display: inline-block;
    font-weight: 700 !important;
    padding: 9px 16px !important;
    position: static !important;
    right: auto !important;
    width: fit-content;
}

#testimonial-slider.owl-carousel .owl-stage,
#testimonial-slider.owl-carousel .owl-wrapper {
    display: flex !important;
}

#testimonial-slider .owl-item {
    display: flex !important;
    height: auto !important;
}

#testimonial-slider .item {
    display: flex !important;
    padding: 0 8px;
    width: 100%;
}

@media (max-width: 479px) {
    .cr-index-v2 #testimonial-slider .item {
        padding-left: 0;
        padding-right: 0;
    }
}

#testimonial-slider .client-text {
    background: var(--cr-paper) !important;
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    width: 100%;
}

#testimonial-slider .client-text img {
    margin-bottom: 0 !important;
}

/* Not display:flex here — this <p> mixes text nodes, <br> and inline
   links (title / excerpt / button laid out with real line breaks).
   Flexing it breaks that flow; flex:1 alone (a property applied BY the
   flex parent) still lets it grow to fill the card without touching how
   its own children lay out. */
#testimonial-slider .client-text p {
    flex: 1;
    padding: 16px !important;
}

#testimonial-slider .client-text p a strong {
    color: var(--cr-ink) !important;
    font-weight: 700 !important;
}

#testimonial-slider .client-text .nav-button {
    background: var(--cr-yellow-soft) !important;
    border-radius: 999px !important;
    bottom: auto !important;
    color: #6c5700 !important;
    display: inline-block !important;
    font-weight: 700 !important;
    margin-top: 12px !important;
    position: static !important;
    right: auto !important;
    width: fit-content;
}

/* ---------------------------------------------------------------------
 * Trust / stats area
 * ------------------------------------------------------------------- */

.cr-index-v2 .count-area {
    background: transparent !important;
}

.cr-index-v2 .percent-blocks .row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 !important;
}

/* Same Bootstrap .row clearfix-vs-flex issue as welcome_services above. */
.cr-index-v2 .percent-blocks .row::before,
.cr-index-v2 .percent-blocks .row::after {
    content: none !important;
    display: none !important;
}

.cr-index-v2 .percent-blocks .col-sm-3 {
    display: flex;
    flex: 0 1 calc(25% - 14px);
    float: none !important;
    padding: 0 !important;
}

.cr-index-v2 .count-item {
    align-items: center;
    background: var(--cr-paper);
    border-radius: var(--cr-radius);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    min-height: 230px;
    padding: 24px 18px;
    text-align: center;
    width: 100%;
}

.cr-index-v2 .count-item .chart {
    width: 100%;
}

.cr-index-v2 .count-item p {
    min-height: 44px;
}

.cr-index-v2 .count-item:first-child {
    background: var(--cr-ink);
}

.cr-index-v2 .count-item:first-child .percent,
.cr-index-v2 .count-item:first-child p {
    color: #fff !important;
}

.cr-index-v2 .count-item:first-child p {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.cr-index-v2 .count-item-circle {
    align-items: center;
    background: var(--cr-canvas) !important;
    box-shadow: none !important;
    display: inline-flex;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.cr-index-v2 .count-item-circle span {
    line-height: 1 !important;
}

.cr-index-v2 .count-item-circle span {
    color: var(--cr-ink) !important;
}

.cr-index-v2 .count-item:first-child .count-item-circle {
    background: rgba(255, 255, 255, 0.1) !important;
}

.cr-index-v2 .count-item:first-child .count-item-circle span {
    color: #fff !important;
}

.cr-index-v2 .percent {
    font-weight: 800 !important;
}

@media (max-width: 767px) {
    .cr-index-v2 .percent-blocks .col-sm-3 {
        flex-basis: calc(50% - 7px);
    }
}

/* ---------------------------------------------------------------------
 * V2 semantic, accessibility and SEO/GEO content additions
 * ------------------------------------------------------------------- */

.cr-index-v2 .cr-v2-skip-link {
    background: var(--cr-yellow);
    border-radius: 0 0 10px 10px;
    color: var(--cr-ink) !important;
    font-weight: 800;
    left: 16px;
    padding: 10px 16px;
    position: fixed;
    top: 0;
    transform: translateY(-130%);
    transition: transform 160ms ease;
    z-index: 10000;
}

.cr-index-v2 .cr-v2-skip-link:focus {
    transform: translateY(0);
}

.cr-index-v2 .cr-v2-latest {
    padding-bottom: 55px !important;
    padding-top: 40px !important;
}

.cr-index-v2 .cr-v2-guides {
    padding: 10px 0 42px;
}

.cr-index-v2 .cr-v2-guides-heading .cr-idx-section-head {
    margin-bottom: 8px;
}

.cr-index-v2 .cr-v2-guides .Welcome-area {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.cr-index-v2 .cr-v2-geo-section {
    padding: 10px 0 50px;
}

.cr-index-v2 .cr-v2-geo-heading {
    margin-bottom: 18px;
}

.cr-index-v2 .cr-idx-geo-hub > .city-area > .city > .container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.cr-index-v2 .cr-v2-theme-section {
    display: block;
    padding: 18px 0 44px;
}

.cr-index-v2 .cr-v2-theme-section + .cr-v2-theme-section {
    border-top: 1px solid var(--cr-line);
}

.cr-index-v2 .cr-v2-theme-intro {
    padding-bottom: 24px !important;
}

.cr-index-v2 .cr-v2-theme-intro .page-title {
    padding-bottom: 18px !important;
    padding-top: 0 !important;
}

.cr-index-v2 .cr-v2-theme-subtitle {
    color: var(--cr-muted) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 8px auto 0 !important;
    max-width: 780px;
}

.cr-index-v2 .testimonial-area .client-text.cr-v2-theme-editorial {
    align-items: stretch;
    display: grid !important;
    gap: clamp(20px, 3vw, 34px);
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    margin: 0 !important;
}

.cr-index-v2 .cr-v2-theme-image {
    aspect-ratio: 1 / 1;
    border-radius: 14px !important;
    display: block;
    height: 100% !important;
    margin: 0 !important;
    max-height: 340px;
    min-height: 0 !important;
    object-fit: cover;
    width: 100%;
}

.cr-index-v2 .testimonial-area .client-text img.cr-v2-theme-image {
    border-radius: var(--cr-radius) !important;
}

.cr-index-v2 .cr-v2-theme-copy {
    align-self: center;
}

.cr-index-v2 .cr-v2-theme-copy p {
    color: #3b3b37 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    margin: 0 0 14px !important;
}

.cr-index-v2 .cr-v2-theme-copy p:last-child {
    margin-bottom: 0 !important;
}

.cr-index-v2 .cr-v2-theme-listings {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.cr-index-v2 .cr-v2-blog-section {
    display: block;
    padding-top: 12px;
}

.cr-index-v2 .cr-v2-featured-blog-title {
    font-size: 20px;
    line-height: 1.35;
    margin: 0 0 12px;
}

.cr-index-v2 .cr-v2-featured-blog-title a {
    color: var(--cr-ink) !important;
    font-weight: 800 !important;
}

.cr-index-v2 #testimonial-slider .client-text {
    margin: 0 !important;
}

.cr-index-v2 .cr-v2-faq-section {
    padding: 58px 0 70px;
}

.cr-index-v2 .cr-v2-faq-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cr-index-v2 .cr-v2-faq-card {
    background: var(--cr-paper);
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius);
    box-shadow: 0 8px 24px rgba(28, 27, 22, 0.05);
    padding: clamp(20px, 3vw, 28px);
}

.cr-index-v2 .cr-v2-faq-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.cr-index-v2 .cr-v2-faq-card h3 {
    color: var(--cr-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 10px;
}

.cr-index-v2 .cr-v2-faq-card p {
    color: #3b3b37;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

.cr-index-v2 .cr-v2-site-footer {
    display: block;
}

@media (max-width: 767px) {
    .cr-index-v2 .cr-idx-hero h1 {
        font-size: clamp(22px, 6vw, 24px) !important;
        line-height: 1.1 !important;
    }

    .cr-index-v2 .cr-idx-hero .index-search-hero-hint {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .cr-index-v2 .index-search-shell .form-control,
    .cr-index-v2 .index-search-shell select.form-control,
    .cr-index-v2 .index-search-shell .bootstrap-select > .btn.dropdown-toggle,
    .cr-index-v2 .index-search-panel-title,
    .cr-index-v2 .form-inline input[type="submit"].index-search-submit {
        font-size: 16px !important;
    }

    .cr-index-v2 .cr-v2-theme-section {
        padding-bottom: 34px;
    }

    .cr-index-v2 .testimonial-area .client-text.cr-v2-theme-editorial {
        grid-template-columns: minmax(0, 1fr);
    }

    .cr-index-v2 .cr-v2-theme-image {
        aspect-ratio: 4 / 3;
        height: auto !important;
        max-height: 280px;
    }

    .cr-index-v2 .cr-v2-faq-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cr-index-v2 .cr-v2-faq-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}