/*
 * Housess design system.
 *
 * Ported from the approved homepage module (theme/housess-home.php) so the
 * monochrome/Inter direction survives the move off Elementor. Tokens are
 * declared once on .hsx and everything else reads them.
 *
 * Specificity note that bit four times on the old site: low-specificity
 * element resets outrank classed rules. .hsx p{margin:0} is (0,1,1) and beat
 * every .hsx-lede{margin:...} at (0,1,0). Keep classed overrides at or above
 * the reset's specificity.
 */

/* Tokens live on :root as well as .hsx because the header and the footer are
   siblings of .hsx, not descendants - scoping them to .hsx alone left the site
   chrome with every var() unresolved. .hsx keeps its own copy so a page that is
   dropped into a foreign context still carries the palette with it. */
:root{
--bg:#FFFFFF;--surface:#F4F4F5;--ink:#111111;--ink-soft:#3F3F46;--muted:#71717A;--line:#E4E4E7;
--wa:#25D366;--wa-ink:#128C4A;
--r-sm:6px;--r-md:12px;--wrap:1280px;--pad:88px;--header-h:76px;
}
.hsx{
--bg:#FFFFFF;--surface:#F4F4F5;--ink:#111111;--ink-soft:#3F3F46;--muted:#71717A;--line:#E4E4E7;
--wa:#25D366;--wa-ink:#128C4A;
--r-sm:6px;--r-md:12px;--wrap:1280px;--pad:88px;
font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
}
body:has(.hsx){font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;}
/* The site header turns translucent once it sticks. That worked over the old dark
   hero, but leaves the white wordmark invisible over this page's light sections. */
body:has(.hsx) .elementor-location-header .elementor-element.elementor-sticky.elementor-sticky--effects{
background-color:#111111!important;-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;box-shadow:none!important;}
.hsx *,.hsx *::before,.hsx *::after{box-sizing:border-box;}
.hsx img{max-width:100%;display:block;}
.hsx a{color:inherit;text-decoration:none;}
.hsx-faq__a p{margin:0;}
.hsx-wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.hsx-sec{padding:var(--pad) 0;}
.hsx-sec--tight{padding:48px 0;}
.hsx-sec--top{padding:72px 0 var(--pad);}
.hsx-sec--grey{background:var(--surface);}
.hsx-muted{color:var(--muted);font-weight:400;}

/* type */
.hsx-h2{font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.022em;font-weight:600;margin:0;}
.hsx-lede{font-size:17px;line-height:1.65;color:var(--muted);margin:20px 0 0;max-width:52ch;}
.hsx-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
.hsx-eyebrow--light{color:rgba(255,255,255,.72);}

/* buttons + links */
/* The base button is solid, so a bare `hsx-btn` is a visible button. It used to
   be transparent-on-transparent, which meant every `hsx-btn` written without a
   modifier - the archive's empty state, the search submit - rendered as bare
   black text with no affordance. Modifiers below are all (0,2,0) and still win. */
.hsx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-size:15px;font-weight:500;line-height:1;padding:15px 28px;border-radius:999px;
border:1px solid transparent;cursor:pointer;background:var(--ink);color:#fff;
transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
.hsx-btn--sm{padding:10px 18px;font-size:14px;}
.hsx .hsx-btn--solid{background:var(--ink);color:#fff;}
.hsx .hsx-btn--solid:hover{background:var(--ink-soft);}
.hsx .hsx-btn--ghost{border-color:var(--line);color:var(--ink);background:transparent;}
.hsx .hsx-btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.hsx .hsx-btn--invert{background:#fff;color:var(--ink);}
.hsx .hsx-btn--invert:hover{background:var(--line);}
.hsx .hsx-btn--outline-light{border-color:rgba(255,255,255,.35);color:#fff;}
.hsx .hsx-btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.hsx-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;
border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color .15s ease;}
.hsx-link:hover{border-color:var(--ink);}
.hsx-link__arrow{transition:transform .2s ease;}
.hsx-tile:hover .hsx-link__arrow,.hsx-link:hover .hsx-link__arrow,.hsx-project:hover .hsx-link__arrow{transform:translateX(4px);}
.hsx-link--head{align-self:flex-end;}

/* hero */
.hsx-hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:center;
justify-content:center;text-align:center;overflow:hidden;background:var(--ink);padding:120px 32px 150px;}
.hsx .hsx-hero .hsx-hero__img,.hsx .hsx-hero .hsx-hero__video{position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;}
/* The still keeps the monochrome treatment; the video does not. Desaturating
   the client's own footage would throw away the thing it was shot for. */
.hsx .hsx-hero .hsx-hero__img{filter:grayscale(1) contrast(1.06) brightness(.95);}
.hsx-hero__scrim{position:absolute;inset:0;background:rgba(17,17,17,.56);}
/* A moving background swings from a dark facade to a bright beach, so one flat
   value is right for some seconds and wrong for others. The gradient is heaviest
   at the two edges the text needs: the header sits over the top, the headline and
   the search card over the bottom. */
.hsx-hero--video .hsx-hero__scrim{background:linear-gradient(180deg,
rgba(17,17,17,.66) 0%,rgba(17,17,17,.52) 45%,rgba(17,17,17,.72) 100%);}
.hsx-hero__inner{position:relative;max-width:820px;color:#fff;}
.hsx-hero__title{font-size:clamp(38px,5.6vw,72px);line-height:1.04;letter-spacing:-.03em;
font-weight:600;margin:0;color:#fff;}
.hsx-hero__sub{margin:22px auto 0;max-width:44ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.82);}

/* search card */
.hsx-searchwrap{max-width:var(--wrap);margin:-64px auto 0;padding:0 32px;position:relative;z-index:3;}
.hsx-search{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
padding:20px;box-shadow:0 18px 48px -24px rgba(17,17,17,.28);}
.hsx-search__seg{display:inline-flex;background:var(--surface);border-radius:999px;padding:4px;margin-bottom:18px;}
.hsx-search__seg input{position:absolute;opacity:0;pointer-events:none;}
.hsx-search__seg label{font-size:14px;font-weight:500;padding:9px 26px;border-radius:999px;
cursor:pointer;color:var(--muted);transition:background-color .15s ease,color .15s ease;}
.hsx-search__seg input:checked+label{background:var(--ink);color:#fff;}
.hsx-search__seg input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px;}
.hsx-search__row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.hsx-field{display:flex;flex-direction:column;gap:7px;min-width:190px;margin:0;}
.hsx-field--grow{flex:1 1 240px;}
.hsx-field__label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.hsx-field__control{font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;width:100%;
appearance:none;-webkit-appearance:none;transition:border-color .15s ease;}
.hsx-field__control:focus{outline:none;border-color:var(--ink);}
select.hsx-field__control{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;}
.hsx-search__go{padding:15px 40px;flex:0 0 auto;}

/* stats */
.hsx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.hsx-stat{padding:30px 24px;border-left:1px solid var(--line);}
.hsx-stat:first-child{border-left:0;padding-left:0;}
.hsx-stat__n{display:block;font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1;}
.hsx-stat__l{display:block;margin-top:9px;font-size:13px;color:var(--muted);}

/* split tiles */
.hsx-tiles{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.hsx-tile{display:block;}
.hsx-tile__media{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-md);background:var(--surface);}
.hsx-tile__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
transition:transform .6s ease,filter .5s ease;}
.hsx-tile:hover .hsx-tile__media img{transform:scale(1.04);filter:grayscale(0);}
.hsx-tile__body{display:block;padding-top:26px;}
.hsx-tile__title{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;}
.hsx-tile__text{display:block;margin:12px 0 20px;font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch;}

/* section head + tabs */
.hsx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
flex-wrap:wrap;margin-bottom:48px;}
.hsx-tabs{display:inline-flex;background:var(--surface);border-radius:999px;padding:4px;}
.hsx-tab{font-family:inherit;font-size:14px;font-weight:500;padding:10px 24px;border:0;
border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;
transition:background-color .15s ease,color .15s ease;}
.hsx-tab.is-active{background:var(--ink);color:#fff;}

/* listing grid */
.hsx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px;}
.hsx-card{display:block;height:100%;min-width:0;}
.hsx-card__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
border-radius:var(--r-md);background:var(--surface);margin-bottom:20px;}
.hsx-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.hsx-card:hover .hsx-card__media img{transform:scale(1.04);}
.hsx-card__nophoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:13px;color:var(--muted);}
.hsx-card__tag{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);
color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
padding:7px 12px;border-radius:999px;}
.hsx-card__price{display:block;margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em;}
/* Two clamped lines. PF titles run to 120 characters ("Apartment for Sale in
   Eden House The Canal|High-End Finishes|Fully Fitted|...") and an unclamped
   one drags its own card taller than the rest of the row. */
.hsx-card__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft);}
.hsx-card__loc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;margin:0;font-size:14px;line-height:1.45;color:var(--muted);}
/* The fact row is a <ul>, so the list reset has to be spelled out: without it
   the browser default wins and beds/baths/size stack as indented disc bullets,
   which is exactly what shipped. flex-wrap rather than nowrap because "2,182
   sqft" plus two counts does not fit a 2-column card at 1024px. */
.hsx-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line);
font-size:13px;color:var(--muted);}
.hsx-card__meta li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.hsx-card__meta svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-soft);}
.hsx-more{margin-top:56px;text-align:center;}
.hsx-empty{font-size:16px;color:var(--muted);padding:40px 0;border-top:1px solid var(--line);
border-bottom:1px solid var(--line);}

/* chips */
.hsx-chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0;}
.hsx-chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
border-radius:999px;padding:12px 20px;font-size:15px;transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
.hsx-chip:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.hsx-chip__n{font-size:12px;color:var(--muted);transition:color .15s ease;}
.hsx-chip:hover .hsx-chip__n{color:rgba(255,255,255,.7);}

/* off-plan */
.hsx-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.hsx-project{display:flex;flex-direction:column;gap:24px;padding:36px 32px 32px;
border:1px solid var(--line);border-radius:var(--r-md);transition:border-color .15s ease;}
.hsx-project:hover{border-color:var(--ink);}
.hsx-project__title{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.25;}
.hsx-project__rows{display:block;margin-top:auto;}
.hsx-project__row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
border-top:1px solid var(--line);font-size:14px;}
.hsx-project__row span:first-child{color:var(--muted);}
.hsx-project .hsx-link{align-self:flex-start;}

/* insights: one lead article + text rows */
.hsx-insights{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start;}
.hsx-lead{display:block;}
.hsx-lead__media{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-md);
background:#fff;margin-bottom:22px;}
.hsx-lead__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.hsx-lead:hover .hsx-lead__media img{transform:scale(1.04);}
.hsx-post__date{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.hsx-lead__title{display:block;margin-top:12px;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.25;}
.hsx-lead__excerpt{display:block;margin:14px 0 22px;font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch;}
.hsx-rows{list-style:none;margin:0;padding:0;}
.hsx-rows li:first-child .hsx-row{border-top:1px solid var(--line);}
.hsx-row{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;
padding:26px 0;border-bottom:1px solid var(--line);transition:padding-left .2s ease;}
.hsx-row:hover{padding-left:8px;}
.hsx-row .hsx-post__date{grid-column:1/-1;}
.hsx-row__title{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.35;margin-top:6px;}
.hsx-row .hsx-link__arrow{align-self:end;padding-bottom:4px;color:var(--muted);}

/* faq */
.hsx-wrap--split{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:80px;
max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.hsx-faq__item{border-top:1px solid var(--line);}
.hsx-faq__item:last-child{border-bottom:1px solid var(--line);}
.hsx-faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:24px 0;font-size:17px;font-weight:500;cursor:pointer;list-style:none;}
.hsx-faq__q::-webkit-details-marker{display:none;}
.hsx-faq__icon{position:relative;flex:0 0 14px;width:14px;height:14px;}
.hsx-faq__icon::before,.hsx-faq__icon::after{content:"";position:absolute;background:var(--ink);
transition:transform .2s ease,opacity .2s ease;}
.hsx-faq__icon::before{left:0;top:6px;width:14px;height:2px;}
.hsx-faq__icon::after{left:6px;top:0;width:2px;height:14px;}
.hsx-faq__item[open] .hsx-faq__icon::after{transform:rotate(90deg);opacity:0;}
.hsx-faq__a{padding:0 44px 26px 0;font-size:16px;line-height:1.65;color:var(--muted);}

/* pager */
.hsx-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:56px;}
.hsx-pager__i{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line);border-radius:999px;font-size:14px;transition:background-color .15s ease,color .15s ease;}
.hsx-pager__i:hover,.hsx-pager__i.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* closing cta */
.hsx-cta{background:var(--ink);color:#fff;padding:var(--pad) 0;text-align:center;}
.hsx-cta__title{font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:-.025em;
font-weight:600;margin:0;color:#fff;max-width:20ch;margin-inline:auto;}
.hsx-cta__text{margin:20px auto 0;max-width:46ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);}
.hsx-cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px;}

/* responsive */
@media(max-width:1024px){
.hsx{--pad:72px;}
.hsx-grid,.hsx-projects{grid-template-columns:repeat(2,1fr);}
.hsx-insights{grid-template-columns:1fr;gap:48px;}
.hsx-wrap--split{grid-template-columns:1fr;gap:40px;}
.hsx-searchwrap{margin-top:-48px;}
}
@media(max-width:767px){
.hsx{--pad:64px;}
.hsx-wrap,.hsx-searchwrap,.hsx-wrap--split{padding-left:20px;padding-right:20px;}
.hsx-hero{min-height:58vh;padding:80px 20px 104px;}
.hsx-searchwrap{margin-top:-56px;}
.hsx-search{padding:16px;}
.hsx-search__row{flex-direction:column;align-items:stretch;gap:12px;}
.hsx-field{min-width:0;}
.hsx-search__go{width:100%;}
.hsx-stats{grid-template-columns:1fr 1fr;border-bottom:0;}
.hsx-stat{padding:22px 16px;border-bottom:1px solid var(--line);}
.hsx-stat:nth-child(odd){border-left:0;padding-left:0;}
.hsx-tiles,.hsx-grid,.hsx-projects{grid-template-columns:1fr;gap:40px;}
.hsx-head{margin-bottom:32px;}
.hsx-more{margin-top:40px;}
}
@media(prefers-reduced-motion:reduce){
.hsx *{transition:none!important;animation:none!important;}
}

/* ==========================================================================
   Property templates
   --------------------------------------------------------------------------
   Everything below is new for the coded property pages. The homepage rules
   above are reused as-is: .hsx-wrap, .hsx-grid, .hsx-card*, .hsx-btn, .hsx-h2
   and the tokens all carry over unchanged.
   ========================================================================== */

/* The card is a single link now, so the anchor carries the block layout and
   hands its colour back to the child rules rather than inheriting a link
   colour into all of them. */
.hsx-card__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;}
/* A flex column with an even rhythm, so the fact row's margin-top:auto has
   free space to eat and every card in a row lands its hairline on the same
   line however many lines the title and location above it took. row-gap keeps
   a floor under that gap in the tallest card, where auto resolves to zero. */
.hsx-card__body{display:flex;flex-direction:column;flex:1 1 auto;row-gap:8px;padding-top:16px;}
.hsx-card__nophoto svg{width:100%;height:100%;object-fit:cover;}
.hsx-price__period{font-size:.62em;font-weight:400;color:var(--muted);margin-left:2px;}

.hsx-h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px;}

/* -- archive header + toolbar --------------------------------------------- */
.hsx-archive__head{padding:56px 0 28px;border-bottom:1px solid var(--line);margin-bottom:32px;}
.hsx-archive__title{font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.022em;
font-weight:600;margin:0;}
.hsx-archive__count{margin:10px 0 0;font-size:14px;color:var(--muted);}
.hsx-archive__intro{margin-top:18px;max-width:64ch;color:var(--ink-soft);line-height:1.65;}
.hsx-archive__toolbar{display:flex;justify-content:flex-end;margin:28px 0 24px;}
.hsx-sort select{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;
font:inherit;font-size:14px;background:var(--bg);color:var(--ink);}

/* -- filter bar ------------------------------------------------------------ */
.hsx-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;
padding:16px;background:var(--surface);border-radius:var(--r-md);}
.hsx-filter__field{flex:1 1 150px;min-width:0;}
.hsx-filter__field--wide{flex:2 1 240px;}
.hsx-filter__field input,.hsx-filter__field select{width:100%;height:44px;border:1px solid var(--line);
border-radius:var(--r-sm);padding:0 12px;font:inherit;font-size:14px;background:var(--bg);color:var(--ink);}
.hsx-filter__field input::placeholder{color:var(--muted);}

/* Segmented Buy/Rent control. The radio itself is hidden from sight but stays
   in the accessibility tree and keeps keyboard focus, so this is still a real
   radio group - not a div pretending to be one. */
.hsx-filter__purpose{display:inline-flex;background:var(--bg);border:1px solid var(--line);
border-radius:999px;padding:3px;flex:0 0 auto;}
.hsx-filter__radio{position:relative;}
.hsx-filter__radio input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.hsx-filter__radio span{display:block;padding:9px 18px;border-radius:999px;font-size:14px;
font-weight:500;color:var(--muted);white-space:nowrap;transition:background .18s ease,color .18s ease;}
.hsx-filter__radio.is-active span{background:var(--ink);color:#fff;}
.hsx-filter__radio input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px;}
.hsx-filter__submit{flex:0 0 auto;height:44px;}

/* -- breadcrumbs ----------------------------------------------------------- */
/* housess_breadcrumbs() has been emitting an <ol> since it was written and
   nothing ever styled it, so every property, community and consultant page
   opened with a bulleted vertical list. */
.hsx-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
list-style:none;margin:0;padding:0;}
.hsx-crumbs li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.hsx-crumbs li+li::before{content:"/";color:var(--line);}
.hsx-crumbs a:hover{color:var(--ink);text-decoration:underline;}
.hsx-crumbs [aria-current]{color:var(--ink-soft);max-width:38ch;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;}

/* -- icons ----------------------------------------------------------------- */
/* Every icon is inline SVG on currentColor, so one size rule covers icons in
   buttons, pills, headings and lists without a per-context override. */
.hsx-i{width:18px;height:18px;flex:0 0 auto;}
.hsx-i--h{width:22px;height:22px;}

/* -- single property ------------------------------------------------------- */
.hsx-single__bar{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;
padding-top:20px;padding-bottom:18px;}
.hsx-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
color:var(--ink-soft);}
.hsx-back:hover{color:var(--ink);}
.hsx-back .hsx-i{width:16px;height:16px;}

.hsx-single__layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;
padding-top:40px;padding-bottom:var(--pad);align-items:start;}
.hsx-single__head{padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:40px;}
.hsx-single__pricerow{display:flex;align-items:baseline;justify-content:space-between;
gap:8px 28px;flex-wrap:wrap;}
.hsx-single__price{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.02em;margin:0;}
.hsx-single__est{margin:0;font-size:14px;color:var(--muted);}
.hsx-single__est strong{color:var(--ink);font-weight:600;}
.hsx-textlink{display:inline;border-bottom:1px solid var(--line);color:var(--ink);
font-weight:500;transition:border-color .15s ease;}
.hsx-textlink:hover{border-color:var(--ink);}
/* The H1 is now the agent's own headline and the generated "<type> for sale in
   <place>" line sits under it, so the weights swap round: the H1 carries the
   emphasis and the descriptor is the quiet line. */
.hsx-single__title{font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.3;
letter-spacing:-.015em;color:var(--ink);margin:18px 0 0;}
.hsx-single__descriptor{margin:10px 0 0;color:var(--muted);font-size:16px;}
/* The same line on an off-plan project, which keeps the older class name. */
.hsx-single__loc{margin:10px 0 0;color:var(--muted);font-size:15px;}
.hsx-single__main > section{margin-bottom:52px;}
.hsx-single__main > section:last-child{margin-bottom:0;}
.hsx-single__main .hsx-h2{font-size:22px;margin-bottom:20px;}

/* headline spec row */
.hsx-spec{display:flex;flex-wrap:wrap;gap:12px 30px;list-style:none;margin:24px 0 0;padding:0;}
.hsx-spec__i{display:inline-flex;align-items:center;gap:9px;font-size:14px;}
.hsx-spec__i .hsx-i{color:var(--muted);}
.hsx-spec__k{color:var(--muted);}
.hsx-spec__v{font-weight:600;}

.hsx-verified{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;
padding:9px 16px 9px 12px;background:var(--surface);border-radius:999px;
font-size:13px;line-height:1.4;color:var(--ink-soft);}
.hsx-verified .hsx-i{width:17px;height:17px;}

/* -- gallery mosaic -------------------------------------------------------- */
/* One tall frame and two stacked cells, matching the reference. The side column
   collapses to a pair of wide cells below 900px rather than disappearing, so a
   phone still shows three photographs before the fold. */
.hsx-shots__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;}
.hsx-shots__grid--single{grid-template-columns:minmax(0,1fr);}
.hsx-shots__main{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;
border-radius:var(--r-md);background:var(--surface);}
.hsx-shots__side{display:grid;grid-template-rows:1fr 1fr;gap:10px;min-height:0;}
.hsx-shots__cell{position:relative;margin:0;overflow:hidden;border-radius:var(--r-md);
background:var(--surface);min-height:0;}
.hsx-shots__img{width:100%;height:100%;object-fit:cover;}
.hsx-shots__badge{position:absolute;left:16px;top:16px;background:var(--ink);color:#fff;
font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
padding:8px 14px;border-radius:999px;}
.hsx-shots__pills{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap;}
.hsx-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);
color:var(--ink);font-size:13px;font-weight:500;padding:9px 15px;border-radius:999px;
box-shadow:0 8px 20px -12px rgba(17,17,17,.7);transition:background-color .15s ease;}
.hsx-pill:hover{background:#fff;}
.hsx-pill .hsx-i{width:16px;height:16px;}
.hsx-shots__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(17,17,17,.52);color:#fff;font-size:15px;font-weight:500;
transition:background-color .15s ease;}
.hsx-shots__more:hover{background:rgba(17,17,17,.66);}

/* -- off-plan gallery ------------------------------------------------------ */
/* The single stacked gallery, still used by single-off-plans.php. Property
   pages moved to the .hsx-shots mosaic above; a project page has three or four
   renders rather than a dozen photographs, which is what this layout suits. */
.hsx-gallery{background:var(--surface);}
.hsx-gallery__main{aspect-ratio:16/9;overflow:hidden;}
.hsx-gallery__main img{width:100%;height:100%;object-fit:cover;}
.hsx-gallery__thumbs{display:flex;gap:8px;list-style:none;margin:8px 0 0;padding:0 0 8px;
overflow-x:auto;scrollbar-width:thin;}
.hsx-gallery__thumbs li{flex:0 0 132px;}
.hsx-gallery__thumbs img{width:132px;height:92px;object-fit:cover;border-radius:var(--r-sm);
cursor:pointer;opacity:.82;transition:opacity .2s ease;}
.hsx-gallery__thumbs img:hover,.hsx-gallery__thumbs img:focus-visible{opacity:1;}
.hsx-gallery__count{margin:0;padding:0 0 14px;font-size:13px;color:var(--muted);}

/* -- lightbox -------------------------------------------------------------- */
/* Hidden by default and revealed by :target, so the pills are working anchors
   with JavaScript off. The script adds .is-open and takes over the arrows. */
.hsx-lbx{display:none;position:fixed;inset:0;z-index:200;flex-direction:column;
background:rgba(17,17,17,.97);}
.hsx-lbx:target,.hsx-lbx.is-open{display:flex;}
.hsx-lbx__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:14px 20px;}
.hsx-lbx__count{margin:0;font-size:13px;color:rgba(255,255,255,.75);}
.hsx-lbx__close{display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;color:#fff;background:rgba(255,255,255,.12);
transition:background-color .15s ease;}
.hsx-lbx__close:hover{background:rgba(255,255,255,.26);}
.hsx-lbx__track{flex:1 1 auto;min-height:0;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;padding:0 20px 20px;scrollbar-width:none;}
.hsx-lbx__track::-webkit-scrollbar{display:none;}
.hsx-lbx__slide{flex:0 0 100%;margin:0;min-width:0;scroll-snap-align:center;
display:flex;align-items:center;justify-content:center;}
.hsx-lbx__slide img{max-width:100%;max-height:100%;width:auto;height:auto;
object-fit:contain;border-radius:var(--r-sm);}
.hsx-lbx__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s ease;}
.hsx-lbx__nav:hover{background:rgba(255,255,255,.3);}
.hsx-lbx__nav--prev{left:20px;}
.hsx-lbx__nav--next{right:20px;}
/* Stops the page behind the overlay scrolling with it. */
.hsx-lbx-open{overflow:hidden;}

/* -- facts ----------------------------------------------------------------- */
.hsx-facts__list{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;}
.hsx-facts__row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
border-bottom:1px solid var(--line);}
.hsx-facts__row dt{color:var(--muted);font-size:14px;}
.hsx-facts__row dd{margin:0;font-size:14px;font-weight:500;text-align:right;}

.hsx-desc__body{color:var(--ink-soft);line-height:1.7;}
.hsx-desc__body p{margin:0 0 1em;}
.hsx-desc__note{margin:0 0 22px;padding:18px 22px;background:var(--surface);border-left:3px solid var(--ink);color:var(--ink);line-height:1.6;}
.hsx-desc__note p{margin:0 0 .6em;}
.hsx-desc__note p:last-child{margin-bottom:0;}

/* The amenity <ul> markup and its two class names are written by the sync, so
   these selectors are a contract with the importer - see hpf_ul() in the
   Housess Core plugin before renaming either. The marker is a CSS tick rather
   than an icon because the list items come from the importer and cannot carry
   inline SVG of their own. */
.hsx-amenities__group{margin-bottom:28px;}
.hsx-amenities__group:last-child{margin-bottom:0;}
.hsx-amenities .list-facilities{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px 24px;}
.hsx-amenities .list-facilities li{position:relative;padding-left:24px;font-size:14px;
color:var(--ink-soft);}
.hsx-amenities .list-facilities li::before{content:"";position:absolute;left:4px;top:.3em;
width:5px;height:9px;border:solid var(--ink);border-width:0 1.6px 1.6px 0;
transform:rotate(45deg);}

/* -- map ------------------------------------------------------------------- */
.hsx-map__address{margin:0 0 14px;font-size:15px;color:var(--ink-soft);}
.hsx-map__canvas{height:380px;border-radius:var(--r-md);overflow:hidden;background:var(--surface);}
.hsx-map__path{margin:12px 0 0;font-size:13px;color:var(--muted);}
.hsx-map__approx{margin:0;font-size:15px;color:var(--ink-soft);}

/* -- calculators ----------------------------------------------------------- */
.hsx-calc{border:1px solid var(--line);border-radius:var(--r-md);padding:28px;}
.hsx-single__main .hsx-calc .hsx-h2{display:flex;align-items:center;gap:10px;
font-size:20px;margin-bottom:6px;}
.hsx-calc__lede{margin:0 0 22px;font-size:14px;color:var(--muted);}
.hsx-calc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.hsx-calc .hsx-field__label{text-transform:none;letter-spacing:.02em;font-size:12px;}
.hsx-calc__out{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;
margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.hsx-calc__figure{min-width:110px;}
.hsx-calc__label{margin:0;font-size:11px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);}
.hsx-calc__value{margin:7px 0 0;font-size:24px;font-weight:600;letter-spacing:-.02em;}
.hsx-calc__out .hsx-btn{margin-left:auto;}
.hsx-calc__note{margin:18px 0 0;font-size:12px;line-height:1.65;color:var(--muted);}

/* -- compliance panel ------------------------------------------------------ */
.hsx-compliance{display:flex;gap:18px;padding:24px;background:var(--surface);
border-radius:var(--r-md);}
.hsx-compliance__icon{width:26px;height:26px;flex:0 0 26px;}
.hsx-compliance__body{min-width:0;}
.hsx-compliance__list{display:flex;flex-wrap:wrap;gap:8px 36px;margin:0 0 14px;}
.hsx-compliance__list > div{display:flex;gap:8px;font-size:14px;}
.hsx-compliance__list dt{color:var(--muted);}
.hsx-compliance__list dd{margin:0;font-weight:600;}

/* -- useful to know -------------------------------------------------------- */
.hsx-useful__list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
list-style:none;margin:0;padding:0;}
.hsx-useful__card{display:flex;flex-direction:column;gap:10px;padding:22px;
border:1px solid var(--line);border-radius:var(--r-md);}
.hsx-useful__title{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;}
.hsx-useful__text{margin:0;font-size:14px;line-height:1.6;color:var(--muted);}
.hsx-useful__card .hsx-link{align-self:flex-start;margin-top:auto;font-size:14px;}

/* -- consultant / enquiry sidebar ------------------------------------------ */
.hsx-single__side{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;}
.hsx-agent{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
padding:24px;box-shadow:0 20px 44px -34px rgba(17,17,17,.45);}
.hsx-agent__head{display:flex;gap:14px;align-items:center;margin-bottom:20px;
padding-bottom:18px;border-bottom:1px solid var(--line);}
.hsx-agent__photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;}
.hsx-agent__label{margin:0;font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);}
.hsx-agent__name{margin:4px 0 0;font-size:16px;font-weight:600;}
.hsx-agent__name a{border-bottom:1px solid var(--line);transition:border-color .15s ease;}
.hsx-agent__name a:hover{border-color:var(--ink);}
.hsx-agent__role{margin:3px 0 0;font-size:13px;color:var(--muted);}
.hsx-agent__actions{display:flex;flex-direction:column;gap:10px;}
.hsx-btn--full{width:100%;}
.hsx .hsx-btn--wa{background:var(--wa);color:#fff;border-color:var(--wa);}
.hsx .hsx-btn--wa:hover{background:var(--wa-ink);border-color:var(--wa-ink);}
.hsx-share{display:inline-flex;align-items:center;justify-content:center;gap:8px;
margin-top:2px;padding:8px;font-family:inherit;font-size:14px;color:var(--muted);
background:none;border:0;cursor:pointer;transition:color .15s ease;}
.hsx-share:hover{color:var(--ink);}
.hsx-share .hsx-i{width:16px;height:16px;}
.hsx-agent__ref{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
font-size:12px;color:var(--muted);}
.hsx-agent__fallback{margin:0;font-size:14px;line-height:1.7;color:var(--ink-soft);}
.hsx-agent__fallback a{text-decoration:underline;}
.hsx-enquire,.hsx-valuation{background:var(--surface);border-radius:var(--r-md);padding:24px;}
/* housess_enquiry_form()'s fallback is a bordered card in its own right, which
   inside this card meant two boxes and 48px of padding on each side of a 360px
   column - enough to break the phone number across two lines. In the sidebar it
   is just text. */
.hsx-enquire .hsx-fallback{padding:0;border:0;border-radius:0;background:none;}
.hsx-enquire .hsx-fallback__line{font-size:14px;}
.hsx-enquire .hsx-fallback__line a{white-space:nowrap;}
.hsx-valuation__text{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--muted);}
.hsx-permit{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
font-size:12px;line-height:1.6;color:var(--muted);}
.hsx-permit a{text-decoration:underline;}

/* -- testimonials ---------------------------------------------------------- */
.hsx-reviews{border-top:1px solid var(--line);}
.hsx-reviews__head{text-align:center;margin-bottom:44px;}
.hsx-reviews__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
list-style:none;margin:0;padding:0;}
.hsx-review{display:flex;flex-direction:column;gap:14px;padding:28px;
border:1px solid var(--line);border-radius:var(--r-md);}
.hsx-review__stars{display:flex;gap:3px;margin:0;}
.hsx-review__stars .hsx-i{width:15px;height:15px;}
.hsx-review__text{margin:0;font-size:15px;line-height:1.7;color:var(--ink-soft);}
.hsx-review__by{display:flex;flex-direction:column;gap:3px;margin:auto 0 0;}
.hsx-review__name{font-size:14px;font-weight:600;}
.hsx-review__meta{font-size:12px;color:var(--muted);}

/* -- pagination ------------------------------------------------------------ */
.hsx-pagination{display:flex;justify-content:center;gap:6px;margin:56px 0 var(--pad);}
.hsx-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);
font-size:14px;color:var(--ink-soft);}
.hsx-pagination .page-numbers:hover{border-color:var(--ink);color:var(--ink);}
.hsx-pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff;}
.hsx-pagination .page-numbers.dots{border-color:transparent;}

.hsx-related{border-top:1px solid var(--line);}

/* -- responsive ------------------------------------------------------------ */
@media(max-width:1024px){
.hsx-single__layout{grid-template-columns:1fr;gap:44px;}
.hsx-single__side{position:static;}
.hsx-reviews__list{grid-template-columns:repeat(2,1fr);}
.hsx-useful__list{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
.hsx-shots__grid{grid-template-columns:minmax(0,1fr);}
.hsx-shots__main{aspect-ratio:3/2;}
.hsx-shots__side{grid-template-rows:none;grid-template-columns:1fr 1fr;height:120px;}
}
@media(max-width:720px){
.hsx-facts__list{grid-template-columns:1fr;}
.hsx-amenities .list-facilities{grid-template-columns:1fr;}
.hsx-filter{padding:12px;}
.hsx-filter__field,.hsx-filter__field--wide{flex:1 1 100%;}
.hsx-filter__purpose{width:100%;}
.hsx-filter__radio{flex:1 1 0;}
.hsx-filter__radio span{text-align:center;}
.hsx-filter__submit{width:100%;}
.hsx-shots__main,.hsx-gallery__main{aspect-ratio:4/3;}
.hsx-calc{padding:20px;}
.hsx-calc__grid{grid-template-columns:1fr;}
.hsx-calc__out{gap:16px 28px;}
.hsx-calc__out .hsx-btn{margin-left:0;width:100%;}
.hsx-single__pricerow{flex-direction:column;align-items:flex-start;gap:10px;}
.hsx-compliance{flex-direction:column;gap:14px;}
.hsx-reviews__list,.hsx-useful__list{grid-template-columns:1fr;}
.hsx-lbx__nav{width:40px;height:40px;}
.hsx-lbx__nav--prev{left:8px;}
.hsx-lbx__nav--next{right:8px;}
.hsx-archive__toolbar{justify-content:stretch;}
.hsx-sort,.hsx-sort select{width:100%;}
}

/* The hero uses a trimmed filter bar: no price fields, so it stays on one row. */
.hsx-filter--compact{padding:12px;box-shadow:0 18px 48px rgba(17,17,17,.12);background:var(--bg);}

/* ---------------------------------------------------------------- consultant
   The card in the property sidebar and the profile page it links to. Both read
   from hsc_agent_profile(), so a consultant with a job title, languages and a
   direct line renders the full block and one with only a name renders a shorter
   card - no placeholder rows, and no reserved space for them either. */

.hsx-agent__ident{min-width:0;}
/* Initials stand in for a headshot. Sized and shaped exactly like the <img> it
   replaces so the card does not change height when one is missing. */
.hsx-agent__initials{display:flex;align-items:center;justify-content:center;
background:var(--surface);color:var(--ink-soft);font-size:15px;font-weight:600;
letter-spacing:.02em;}
.hsx-agent__langs{margin:3px 0 0;font-size:13px;color:var(--muted);}
.hsx-agent__all{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
font-size:14px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);
padding-bottom:3px;transition:border-color .15s ease;}
.hsx-agent__all:hover{border-color:var(--ink);}

/* profile page header */
.hsx-agentbio{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
margin-top:24px;}
.hsx-agentbio__media{flex:0 0 auto;}
.hsx-agentbio__photo{width:104px;height:104px;border-radius:50%;object-fit:cover;
object-position:top center;background:var(--surface);}
.hsx-agentbio__initials{display:flex;align-items:center;justify-content:center;
font-size:30px;font-weight:600;color:var(--ink-soft);}
.hsx-agentbio__body{min-width:0;}
.hsx-agentbio__role{margin:8px 0 0;font-size:16px;color:var(--ink-soft);}
.hsx-agentbio__langs{margin:4px 0 0;font-size:14px;color:var(--muted);}
.hsx-agentbio__links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:18px 0 0;padding:0;}
.hsx-agentbio__brn{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;
font-size:13px;color:var(--muted);}
.hsx-agentbio__brn svg{width:16px;height:16px;}
.hsx-agentbio__meta{margin:0 0 20px;font-size:14px;color:var(--muted);}
.hsx-agentbio__about{max-width:70ch;}
.hsx-agentbio__about p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--ink-soft);}

/* The counts. A link where the figure filters to something, plain text where it
   only describes - so a pointer never appears over a number that does nothing. */
.hsx-agentstats{display:flex;gap:8px;list-style:none;margin:0;padding:0;text-align:center;}
.hsx-agentstats__item{background:var(--surface);border-radius:var(--r-md);padding:16px 20px;min-width:96px;}
.hsx-agentstats__item a{display:block;}
.hsx-agentstats__item:hover:has(a){background:var(--line);}
.hsx-agentstats__n{display:block;font-size:24px;font-weight:600;line-height:1.1;letter-spacing:-.02em;}
.hsx-agentstats__label{display:block;margin-top:4px;font-size:12px;color:var(--muted);}

.hsx-agenttabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px;}
.hsx-agenttabs__tab{font-size:14px;font-weight:500;padding:9px 18px;border-radius:999px;
border:1px solid var(--line);color:var(--ink-soft);transition:background-color .15s ease,color .15s ease,border-color .15s ease;}
.hsx-agenttabs__tab:hover{border-color:var(--ink);color:var(--ink);}
.hsx-agenttabs__tab.is-current{background:var(--ink);border-color:var(--ink);color:#fff;}

.hsx-agentareas,.hsx-agentmore{border-top:1px solid var(--line);}
.hsx-agentareas .hsx-h3,.hsx-agentmore .hsx-h3{margin:0 0 18px;}
.hsx-agentmore .hsx-link{margin-top:20px;}

@media(max-width:900px){
/* The counts drop under the name rather than squeezing it - at three columns
   the middle one loses roughly half its width and long names start breaking
   mid-word. */
.hsx-agentbio{grid-template-columns:auto 1fr;gap:20px;}
.hsx-agentstats{grid-column:1 / -1;flex-wrap:wrap;}
}
@media(max-width:560px){
.hsx-agentbio{grid-template-columns:1fr;text-align:left;}
.hsx-agentbio__photo{width:80px;height:80px;}
.hsx-agentbio__initials{font-size:24px;}
.hsx-agentstats__item{flex:1 1 calc(50% - 4px);min-width:0;}
.hsx-agentbio__links .hsx-btn{width:100%;}
.hsx-agentbio__links li{flex:1 1 100%;}
}