/*
 * Site chrome and the ACF-driven page templates.
 *
 * Kept in a second file rather than appended to housess.css for one practical
 * reason: housess.css is the property design system and is shared with the
 * homepage module, while everything here belongs to the header, the footer and
 * the marketing templates. Two files means a change to the navigation cannot
 * accidentally invalidate the cache of the property styles, and it is obvious
 * which file to open.
 *
 * Tokens come from :root in housess.css - see the note there about why they are
 * not scoped to .hsx alone.
 */

/* ==========================================================================
   Base
   ========================================================================== */

.hsx-body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;}

.hsx-skip{position:absolute;left:-9999px;top:0;z-index:1000;padding:12px 20px;
background:var(--ink);color:#fff;border-radius:0 0 var(--r-sm) 0;font-size:14px;}
.hsx-skip:focus{left:0;}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ==========================================================================
   Header
   --------------------------------------------------------------------------
   Opaque at every scroll position. The previous header faded to translucent
   white while the wordmark was a white PNG, so on light pages the logo simply
   vanished. Nothing here changes the background on scroll, and the mark ships
   in two colourways so each surface can ask for the one it needs - the ink one
   here, the white one in the footer. See inc/branding.php.
   ========================================================================== */

.hsx-header{position:sticky;top:0;z-index:100;background:var(--bg);
border-bottom:1px solid var(--line);}
.hsx-header__inner{max-width:var(--wrap);margin:0 auto;padding:0 32px;
display:flex;align-items:center;gap:32px;min-height:var(--header-h);}

/* The mark is constrained on both axes rather than by height alone. The bundled
   wordmark is 484x128, so max-height decides it - but a client can upload
   anything through Site Identity, and a 2000x2000 logo scaled by height only
   would push the navigation off the end of the header. Both limits, with
   width/height auto, means whichever bound bites first wins and the aspect
   ratio survives either way. */
.hsx-header__brand{flex:0 0 auto;display:flex;align-items:center;}
.hsx-logo{display:block;line-height:0;text-decoration:none;}
.hsx-header__brand .hsx-logo img,
.hsx-header .custom-logo{max-height:30px;max-width:200px;width:auto;height:auto;display:block;}

.hsx-nav{flex:1 1 auto;}
.hsx-menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.hsx-menu__item{position:relative;}
.hsx-menu__link{display:inline-flex;align-items:center;padding:10px 12px;font-size:15px;
color:var(--ink-soft);text-decoration:none;border-radius:var(--r-sm);
transition:color .15s ease,background-color .15s ease;}
.hsx-menu__link:hover{color:var(--ink);background:var(--surface);}
.hsx-menu__item.is-current > .hsx-menu__link{color:var(--ink);font-weight:500;}

/* The toggle sits beside the parent link rather than replacing it, so the
   parent page stays reachable while the submenu is still openable by keyboard
   and by touch. A hover-only dropdown makes child links unreachable on a
   touchscreen entirely - the parent link fires on the first tap. */
.hsx-menu__toggle{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:32px;margin-left:-8px;padding:0;border:0;background:none;cursor:pointer;color:inherit;}
.hsx-menu__chev{width:7px;height:7px;border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
transition:transform .2s ease;}
.hsx-menu__item.is-open > .hsx-menu__toggle .hsx-menu__chev{transform:rotate(225deg) translate(-1px,-1px);}

.hsx-submenu{position:absolute;top:100%;left:0;min-width:236px;margin:0;padding:8px;
list-style:none;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
box-shadow:0 20px 44px rgba(17,17,17,.12);opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:20;}
.hsx-menu__item:hover > .hsx-submenu,
.hsx-menu__item.is-open > .hsx-submenu,
.hsx-menu__item:focus-within > .hsx-submenu{opacity:1;visibility:visible;transform:translateY(0);}
.hsx-submenu__link{display:block;padding:10px 12px;font-size:14px;color:var(--ink-soft);
text-decoration:none;border-radius:var(--r-sm);transition:background-color .15s ease,color .15s ease;}
.hsx-submenu__link:hover{background:var(--surface);color:var(--ink);}

.hsx-header__actions{flex:0 0 auto;display:flex;align-items:center;gap:14px;}
.hsx-header__phone{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;
color:var(--ink);text-decoration:none;white-space:nowrap;}
.hsx-header__phone:hover{color:var(--ink-soft);}
.hsx-header__phone-icon{flex:0 0 auto;color:var(--muted);}
.hsx-header__phone:hover .hsx-header__phone-icon{color:inherit;}

.hsx-burger{display:none;width:42px;height:42px;padding:0;border:1px solid var(--line);
border-radius:var(--r-sm);background:var(--bg);cursor:pointer;}
.hsx-burger__bars,.hsx-burger__bars::before,.hsx-burger__bars::after{
display:block;width:18px;height:1.5px;background:var(--ink);margin:0 auto;transition:transform .2s ease,opacity .2s ease;}
.hsx-burger__bars{position:relative;}
.hsx-burger__bars::before,.hsx-burger__bars::after{content:"";position:absolute;left:0;}
.hsx-burger__bars::before{top:-6px;}
.hsx-burger__bars::after{top:6px;}
.hsx-burger[aria-expanded="true"] .hsx-burger__bars{background:transparent;}
.hsx-burger[aria-expanded="true"] .hsx-burger__bars::before{transform:translateY(6px) rotate(45deg);}
.hsx-burger[aria-expanded="true"] .hsx-burger__bars::after{transform:translateY(-6px) rotate(-45deg);}

.hsx-main{display:block;min-height:40vh;}

/* ==========================================================================
   Footer
   ========================================================================== */

.hsx-footer{background:var(--ink);color:rgba(255,255,255,.72);
font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;}
.hsx-footer .hsx-wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.hsx-footer a{color:inherit;text-decoration:none;transition:color .15s ease;}
.hsx-footer a:hover{color:#fff;}

.hsx-footer__top{padding:72px 0 56px;}
.hsx-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:48px 32px;}

/* White artwork on a near-black panel. The margin is on the wrapper, not the
   image, so it survives a client swapping in their own light logo. */
.hsx-footer__logo{margin:0 0 22px;}
.hsx-footer__logo img{max-height:32px;max-width:220px;width:auto;height:auto;display:block;}
.hsx-footer__address{font-style:normal;font-size:14px;line-height:1.7;margin:0 0 12px;}
.hsx-footer__hours{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.56);}
.hsx-footer__hours-label{display:inline-block;margin-right:6px;font-size:11px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);}
.hsx-footer__contact{list-style:none;margin:0 0 22px;padding:0;font-size:14px;line-height:1.9;}

.hsx-footer__h{margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:#fff;}
.hsx-footer__links{list-style:none;margin:0;padding:0;font-size:14px;line-height:2.1;}

.hsx-social{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;font-size:13px;}
.hsx-social__link{border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:2px;}
.hsx-social__link:hover{border-color:#fff;}

.hsx-footer__popular{padding:36px 0;border-top:1px solid rgba(255,255,255,.12);}
.hsx-footer__tags{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0;font-size:13px;}

.hsx-footer__legal{padding:22px 0 34px;border-top:1px solid rgba(255,255,255,.12);}
.hsx-footer__legal-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;font-size:12.5px;}
.hsx-footer__copy,.hsx-footer__orn{margin:0;}
.hsx-footer__orn{color:rgba(255,255,255,.56);}
.hsx-footer__legal-links{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0 0 0 auto;padding:0;}

/* ==========================================================================
   Page header (marketing, careers, contact, off-plan archive)
   ========================================================================== */

.hsx-pagehead{position:relative;padding:56px 0 40px;border-bottom:1px solid var(--line);}
.hsx-pagehead--media{padding:96px 0 88px;border-bottom:0;color:#fff;overflow:hidden;}
.hsx-pagehead__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hsx-pagehead__scrim{position:absolute;inset:0;background:rgba(17,17,17,.56);}
.hsx-pagehead__inner{position:relative;}
.hsx-pagehead--media .hsx-pagehead__inner{max-width:760px;}

.hsx-pagehead__title{font-size:clamp(30px,4vw,52px);line-height:1.06;letter-spacing:-.028em;
font-weight:600;margin:0;}
.hsx-pagehead__intro{margin:18px 0 0;max-width:60ch;font-size:17px;line-height:1.65;color:var(--muted);}
.hsx-pagehead--media .hsx-pagehead__intro{color:rgba(255,255,255,.82);}
.hsx-pagehead__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.hsx-pagehead--media .hsx-btn--ghost{border-color:rgba(255,255,255,.4);color:#fff;}
.hsx-pagehead--media .hsx-btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}

/* Breadcrumbs */
.hsx-crumbs{margin:0 0 20px;font-size:13px;color:var(--muted);}
.hsx-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;}
.hsx-crumbs li + li::before{content:"/";margin-right:6px;color:var(--line);}
.hsx-crumbs a{color:var(--muted);text-decoration:none;}
.hsx-crumbs a:hover{color:var(--ink);text-decoration:underline;}
.hsx-pagehead--media .hsx-crumbs,
.hsx-pagehead--media .hsx-crumbs a{color:rgba(255,255,255,.72);}
.hsx-pagehead--media .hsx-crumbs a:hover{color:#fff;}

.hsx-badge{display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:999px;
font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
background:var(--ink);color:#fff;}
.hsx-badge--muted{background:var(--surface);color:var(--muted);}

/* ==========================================================================
   Shared blocks
   ========================================================================== */

.hsx-narrow{max-width:760px;}
.hsx-note{margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.7;}
.hsx-note a{text-decoration:underline;}
.hsx-head__count{margin:0;font-size:14px;color:var(--muted);}

/* Editor prose. Scoped so the reset in housess.css - which sets `p{margin:0}`
   at (0,1,1) - does not flatten authored content. These rules are (0,2,1) and
   therefore win, which is the specificity trap documented in housess.css. */
.hsx .hsx-prose p,.hsx .hsx-prose ul,.hsx .hsx-prose ol{margin:0 0 1.15em;
font-size:16px;line-height:1.75;color:var(--ink-soft);}
.hsx .hsx-prose h2{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:1.8em 0 .6em;color:var(--ink);}
.hsx .hsx-prose h3{font-size:19px;font-weight:600;margin:1.6em 0 .5em;color:var(--ink);}
.hsx .hsx-prose ul,.hsx .hsx-prose ol{padding-left:1.25em;}
.hsx .hsx-prose li{margin-bottom:.4em;}
.hsx .hsx-prose a{text-decoration:underline;}
.hsx .hsx-prose img{border-radius:var(--r-md);margin:1.5em 0;}
.hsx .hsx-prose > *:first-child{margin-top:0;}

/* Feature / benefit blocks */
.hsx-features{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;
list-style:none;margin:0;padding:0;}
.hsx-feature{padding-top:24px;border-top:1px solid var(--line);}
.hsx-feature__title{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;}
.hsx-feature__text{margin:12px 0 0;font-size:15px;line-height:1.7;color:var(--muted);}
.hsx-feature .hsx-link{margin-top:18px;}

/* Quick contact strip */
.hsx-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;margin:0;padding:0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.hsx-quick__item{padding:26px 24px;border-left:1px solid var(--line);}
.hsx-quick__item:first-child{border-left:0;padding-left:0;}
.hsx-quick__label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.hsx-quick__value{font-size:19px;font-weight:500;letter-spacing:-.015em;color:var(--ink);
text-decoration:none;}
.hsx-quick__value:hover{text-decoration:underline;}

/* ==========================================================================
   Contact
   ========================================================================== */

.hsx-depts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;margin:0;padding:0;}
.hsx-dept{padding:28px;border:1px solid var(--line);border-radius:var(--r-md);
transition:border-color .15s ease;}
.hsx-dept:hover{border-color:var(--ink);}
.hsx-dept__name{margin:0 0 14px;font-size:18px;font-weight:600;letter-spacing:-.015em;}
.hsx-dept__address{font-style:normal;font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 14px;}
.hsx-dept__links{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.9;}
.hsx-dept__links a{text-decoration:none;border-bottom:1px solid var(--line);}
.hsx-dept__links a:hover{border-color:var(--ink);}

.hsx-contact__split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:start;}
.hsx-contact__address{font-style:normal;font-size:15px;line-height:1.8;color:var(--ink-soft);margin:18px 0 24px;}
.hsx-contact__map{height:320px;}
.hsx-contact__directions{margin:16px 0 0;font-size:14px;}
.hsx-contact__directions a{text-decoration:underline;}
.hsx-contact__form .hsx-h2,.hsx-contact__office .hsx-h2{font-size:24px;margin-bottom:20px;}

/* The fallback shown when no forms plugin is configured. It is deliberately a
   usable contact route, not an error message - a missing form must never be a
   dead end. */
.hsx-fallback{padding:24px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);}
.hsx-fallback__line{margin:0 0 10px;font-size:16px;}
.hsx-fallback__line:last-child{margin-bottom:0;}
.hsx-fallback__line span{display:inline-block;min-width:64px;font-size:12px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.hsx-fallback__line a{font-weight:500;text-decoration:underline;}

/* ==========================================================================
   Careers
   ========================================================================== */

.hsx-vacancies{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.hsx-vacancy{display:flex;align-items:center;justify-content:space-between;gap:32px;
padding:28px 0;border-bottom:1px solid var(--line);transition:padding-left .2s ease;}
.hsx-vacancy:hover{padding-left:8px;}
.hsx-vacancy__body{min-width:0;}
.hsx-vacancy__title{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25;}
.hsx-vacancy__title a{text-decoration:none;color:var(--ink);}
.hsx-vacancy__summary{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:60ch;}
.hsx-vacancy__meta{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:14px 0 0;padding:0;}
.hsx-vacancy__meta li{padding:5px 12px;border:1px solid var(--line);border-radius:999px;
font-size:12px;color:var(--muted);}
.hsx-vacancy__meta--head{margin-top:22px;}
.hsx-vacancy__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);
border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color .15s ease;}
.hsx-vacancy__cta:hover{border-color:var(--ink);}

.hsx-apply{background:var(--surface);border-radius:var(--r-md);padding:26px;}
.hsx-apply p{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:0 0 18px;}
.hsx-apply .hsx-btn{width:100%;}

/* The empty state is a normal condition for an agency, so it reads as
   information rather than as a fault, and still offers a route forward. */
.hsx-empty{padding:56px 32px;text-align:center;background:var(--surface);border-radius:var(--r-md);}
.hsx-empty h2,.hsx-empty h3{margin:0 0 12px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.hsx-empty p{margin:0 auto 24px;max-width:52ch;font-size:15px;line-height:1.7;color:var(--muted);}

/* ==========================================================================
   Off-plan
   ========================================================================== */

/* Off-plan facts are a developer name and a handover quarter rather than three
   short numbers, so they wrap onto their own lines instead of sitting in a row.
   Everything else comes from the base .hsx-card__meta rule. */
.hsx-card--offplan .hsx-card__meta{gap:8px 16px;}

.hsx-minilist{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;list-style:none;margin:0;padding:0;}
.hsx-minilist__item{border-top:1px solid var(--line);}
.hsx-minilist__item a{display:block;padding:22px 0;text-decoration:none;}
.hsx-minilist__title{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--ink);}
.hsx-minilist__sub{display:block;margin-top:6px;font-size:13px;color:var(--muted);}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:1100px){
.hsx-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.hsx-features,.hsx-depts{grid-template-columns:repeat(2,1fr);}
.hsx-minilist{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:960px){
/* Below this width the horizontal menu cannot hold the item count without
   wrapping into an unreadable second row, so it becomes a panel. The panel is
   the same <ul>: no duplicate markup to keep in sync. */
.hsx-burger{display:block;}
.hsx-header__phone{display:none;}

/* The nav leaves the flow to become a fixed panel, and it was the only
   flex:1 1 auto child - so without this the burger stops being pushed right
   and sits against the logo with the rest of the bar empty. */
.hsx-header__actions{margin-left:auto;}
.hsx-nav{position:fixed;inset:var(--header-h) 0 0;background:var(--bg);
padding:16px 20px 48px;overflow-y:auto;flex:0 0 auto;
transform:translateX(100%);visibility:hidden;transition:transform .24s ease,visibility .24s;}
.hsx-nav.is-open{transform:translateX(0);visibility:visible;}
.hsx-menu{flex-direction:column;align-items:stretch;gap:0;}
.hsx-menu__item{border-bottom:1px solid var(--line);}
.hsx-menu__link{padding:16px 4px;font-size:17px;flex:1 1 auto;}
.hsx-menu__item--parent{display:grid;grid-template-columns:1fr auto;align-items:center;}
.hsx-menu__toggle{width:44px;height:44px;margin:0;}

/* On the panel the submenu is a plain block that the toggle reveals - the
   hover rules above must not apply, or every submenu would be open at once. */
.hsx-submenu{position:static;opacity:1;visibility:visible;transform:none;
box-shadow:none;border:0;border-radius:0;padding:0 0 12px 12px;min-width:0;
display:none;grid-column:1/-1;}
.hsx-menu__item:hover > .hsx-submenu,
.hsx-menu__item:focus-within > .hsx-submenu{display:none;}
.hsx-menu__item.is-open > .hsx-submenu{display:block;}
.hsx-submenu__link{padding:11px 4px;font-size:15px;}

.hsx-body.hsx-nav-open{overflow:hidden;}
}

@media(max-width:767px){
.hsx-header__inner{padding:0 20px;gap:16px;}
.hsx-footer .hsx-wrap{padding:0 20px;}
.hsx-footer__grid{grid-template-columns:1fr;gap:36px;}
.hsx-footer__top{padding:52px 0 40px;}
.hsx-footer__legal-links{margin-left:0;}
.hsx-features,.hsx-depts{grid-template-columns:1fr;}
.hsx-quick{grid-template-columns:1fr;}
.hsx-quick__item{border-left:0;padding-left:0;border-top:1px solid var(--line);}
.hsx-quick__item:first-child{border-top:0;}
.hsx-contact__split{grid-template-columns:1fr;gap:44px;}
.hsx-vacancy{flex-direction:column;align-items:flex-start;gap:16px;}
.hsx-minilist{grid-template-columns:1fr;}
.hsx-pagehead{padding:36px 0 28px;}
.hsx-pagehead--media{padding:64px 0 56px;}
.hsx-empty{padding:40px 20px;}
}

@media(prefers-reduced-motion:reduce){
.hsx-header *,.hsx-footer *,.hsx-nav{transition:none!important;animation:none!important;}
}

/* ==========================================================================
   Property detail additions
   ========================================================================== */

.hsx-single__spec{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:18px 0 0;padding:0;}
.hsx-single__spec li{padding:6px 14px;border:1px solid var(--line);border-radius:999px;
font-size:13px;color:var(--ink-soft);}

/* Only ever rendered on an explicit "verified" status - see the note in
   single-properties.php about why an empty status must print nothing. */
.hsx-verified{margin:18px 0 0;padding:12px 16px;background:var(--surface);
border-radius:var(--r-sm);font-size:13px;line-height:1.6;color:var(--ink-soft);}

.hsx-useful__list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
list-style:none;margin:0;padding:0;}
.hsx-useful__card{padding:24px;border:1px solid var(--line);border-radius:var(--r-md);
display:flex;flex-direction:column;gap:10px;transition:border-color .15s ease;}
.hsx-useful__card:hover{border-color:var(--ink);}
.hsx-useful__title{margin:0;font-size:16px;font-weight:600;letter-spacing:-.015em;}
.hsx-useful__text{margin:0;font-size:14px;line-height:1.65;color:var(--muted);}
.hsx-useful__card .hsx-link{margin-top:auto;align-self:flex-start;font-size:14px;}

@media(max-width:900px){
.hsx-useful__list{grid-template-columns:1fr;}
}

/* ==========================================================================
   Consultants
   --------------------------------------------------------------------------
   Headshots come from Property Finder as remote URLs at 130x100, not as media
   attachments, so there is no srcset to lean on. The media box owns the
   aspect ratio and the image crops into it, which keeps the grid even when PF
   returns something a little off-size.
   ========================================================================== */

.hsx-team{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px;list-style:none;margin:0;padding:0;}
.hsx-team--compact{grid-template-columns:repeat(6,1fr);gap:24px 20px;margin-top:36px;}
.hsx-team__link{display:block;text-decoration:none;color:inherit;}
.hsx-team__media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
border-radius:var(--r-md);background:var(--surface);margin-bottom:14px;}
.hsx-team__photo{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.hsx-team__link:hover .hsx-team__photo{transform:scale(1.04);}
.hsx-team__initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:24px;font-weight:600;letter-spacing:.02em;color:var(--muted);}
.hsx-team__body{display:block;}
.hsx-team__name{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35;}
.hsx-team__role{display:block;margin-top:3px;font-size:13px;color:var(--ink-soft);}
.hsx-team__count{display:block;margin-top:4px;font-size:13px;color:var(--muted);}

.hsx-agentbio{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.hsx-agentbio__photo{width:132px;height:132px;object-fit:cover;border-radius:var(--r-md);
background:var(--surface);flex:0 0 auto;}
.hsx-agentbio__body{min-width:0;}
.hsx-agentbio__meta{margin:10px 0 0;font-size:15px;color:var(--muted);}
.hsx-agentbio__links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:20px 0 0;padding:0;}

/* ==========================================================================
   Communities index
   ========================================================================== */

.hsx-alpha{display:grid;grid-template-columns:60px minmax(0,1fr);gap:24px;
padding:24px 0;border-top:1px solid var(--line);}
.hsx-alpha__letter{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--muted);}
.hsx-alpha__list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 24px;
list-style:none;margin:0;padding:0;}
.hsx-alpha__list a{display:inline-flex;align-items:baseline;gap:8px;font-size:15px;
text-decoration:none;color:var(--ink-soft);}
.hsx-alpha__list a:hover{color:var(--ink);text-decoration:underline;}
.hsx-alpha__n{font-size:12px;color:var(--muted);}

/* ==========================================================================
   Post cards on the homepage insights row
   ========================================================================== */

.hsx-card--post .hsx-card__title--post{font-size:19px;font-weight:600;letter-spacing:-.015em;
line-height:1.3;color:var(--ink);margin:0;}
.hsx-card--post .hsx-post__date{margin:0;}
/* The excerpt reuses .hsx-card__loc, which is clamped to two lines for a
   location. Three lines is the right length for a sentence of prose. */
.hsx-card--post .hsx-card__loc{-webkit-line-clamp:3;}

@media(max-width:1100px){
.hsx-team{grid-template-columns:repeat(3,1fr);}
.hsx-team--compact{grid-template-columns:repeat(4,1fr);}
.hsx-alpha__list{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:767px){
.hsx-team,.hsx-team--compact{grid-template-columns:repeat(2,1fr);gap:22px 16px;}
.hsx-alpha{grid-template-columns:1fr;gap:12px;}
.hsx-alpha__list{grid-template-columns:1fr 1fr;}
.hsx-agentbio{gap:18px;}
.hsx-agentbio__photo{width:96px;height:96px;}
}

/* ==========================================================================
   Alternating image/text blocks (careers culture sections)
   ========================================================================== */

.hsx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;
align-items:center;padding:44px 0;border-top:1px solid var(--line);}
.hsx-split:first-child{border-top:0;padding-top:0;}
/* The flip reorders visually only. Source order stays heading-then-image, so a
   screen reader and a narrow viewport both get the heading first. */
.hsx-split--flip .hsx-split__media{order:2;}
.hsx-split__media{border-radius:var(--r-md);overflow:hidden;background:var(--surface);aspect-ratio:4/3;}
.hsx-split__img{width:100%;height:100%;object-fit:cover;}
.hsx-split__title{margin:0;font-size:clamp(24px,2.6vw,32px);font-weight:600;
letter-spacing:-.02em;line-height:1.15;}
.hsx-split__text{margin:16px 0 0;font-size:16px;line-height:1.7;color:var(--muted);max-width:52ch;}

@media(max-width:860px){
.hsx-split{grid-template-columns:1fr;gap:24px;}
.hsx-split--flip .hsx-split__media{order:0;}
}

/* ==========================================================================
   Landing page sections
   --------------------------------------------------------------------------
   The service pages grew a process, a numbers strip, an FAQ, a sibling list
   and an on-page enquiry point. Each block reuses the section rhythm above:
   hairline-topped items, Inter 600 titles, muted body copy.
   ========================================================================== */

/* A bare `.hsx-btn` anchor renders black-on-black: `.hsx a{color:inherit}` in
   housess.css is (0,1,1) and outranks `.hsx-btn{color:#fff}` at (0,1,0), so
   the hero's primary button had no visible label. Re-assert every button
   colour at (0,2,1), then the media-hero ghost at (0,3,1), in the order the
   modifiers expect. */
.hsx a.hsx-btn{color:#fff;}
.hsx a.hsx-btn--ghost{color:var(--ink);}
.hsx a.hsx-btn--ghost:hover{color:#fff;}
.hsx a.hsx-btn--invert{color:var(--ink);}
.hsx a.hsx-btn--outline-light{color:#fff;}
.hsx .hsx-pagehead--media a.hsx-btn--ghost{color:#fff;}
.hsx .hsx-pagehead--media a.hsx-btn--ghost:hover{color:var(--ink);}

/* On a photo hero the eyebrow and the current breadcrumb kept their light-page
   greys, which vanish against the scrim. */
.hsx .hsx-pagehead--media .hsx-eyebrow{color:rgba(255,255,255,.72);}
.hsx .hsx-pagehead--media .hsx-crumbs span{color:rgba(255,255,255,.92);}

/* A section head whose lede sits under the heading rather than beside it. */
.hsx-head--stack{display:block;}
.hsx-head--stack .hsx-lede{margin-top:14px;}

/* When the feature grid sits directly above the prose, the two are one
   argument and should not be separated by a full band of white. */
.hsx .hsx-sec--flush{padding-top:0;}

/* Prose on a landing page is measured, not full-width: 70 characters is the
   comfortable line for explanatory copy, and a 1280px line is not. */
.hsx .hsx-prose--landing{max-width:820px;margin-left:0;}
.hsx .hsx-prose--landing h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.022em;margin-top:2em;}
.hsx .hsx-prose--landing h3{margin-top:1.8em;}
.hsx .hsx-prose--landing p,.hsx .hsx-prose--landing li{font-size:16.5px;}
.hsx .hsx-prose--landing table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:15px;line-height:1.55;}
/* The parent theme boxes every cell and stripes every other row. Hairlines
   only, as everywhere else on the site. */
.hsx .hsx-prose--landing tr,.hsx .hsx-prose--landing tr:nth-child(even){background:transparent;}
.hsx .hsx-prose--landing th,.hsx .hsx-prose--landing td{text-align:left;vertical-align:top;
padding:12px 14px 12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;}
.hsx .hsx-prose--landing th{font-weight:600;color:var(--ink);font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.hsx .hsx-prose--landing td{color:var(--ink-soft);}
.hsx .hsx-prose--landing .hsx-callout{margin:1.6em 0;padding:22px 26px;background:var(--surface);
border-radius:var(--r-md);font-size:15.5px;line-height:1.65;color:var(--ink-soft);}
.hsx .hsx-prose--landing .hsx-callout p:last-child{margin-bottom:0;}
.hsx .hsx-prose--landing .hsx-callout strong{color:var(--ink);}

/* Process steps: a numbered grid, three across. Numbers are printed by the
   template ("01") rather than by a CSS counter so they survive a copy-paste
   into an email or a screen reader without JavaScript getting involved. */
.hsx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;
list-style:none;margin:0;padding:0;}
.hsx-step{padding-top:24px;border-top:1px solid var(--ink);}
.hsx-step__n{display:block;margin-bottom:16px;font-size:12px;font-weight:600;
letter-spacing:.14em;color:var(--muted);}
.hsx-step__title{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;}
.hsx-step__text{margin:12px 0 0;font-size:15px;line-height:1.7;color:var(--muted);}

/* FAQ head, in the left column of the split wrap from housess.css. */
.hsx-faq__head{position:sticky;top:calc(var(--header-h) + 24px);}
.hsx-faq__q > span:first-child{flex:1 1 auto;}
/* Answers were designed for a single paragraph. Longer answers get a rhythm. */
.hsx .hsx-faq__a p{margin:0 0 .9em;}
.hsx .hsx-faq__a p:last-child{margin-bottom:0;}

/* On-page enquiry: copy on the left, the form (or the phone-and-email
   fallback) on the right, so the page ends on a way in rather than a wall. */
.hsx-enquire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start;}
.hsx-enquire__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.hsx-enquire__form .hsx-fallback{padding:28px;}
.hsx-enquire__form .hsx-fallback__line{font-size:17px;margin-bottom:14px;}

@media(max-width:1100px){
.hsx-steps{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:1024px){
.hsx-faq__head{position:static;}
}
@media(max-width:767px){
.hsx-steps{grid-template-columns:1fr;gap:28px;}
.hsx-enquire{grid-template-columns:1fr;gap:36px;}
.hsx .hsx-prose--landing table{display:block;overflow-x:auto;}
}