/* ==========================================================================
   restore.css: "old look, new engine" (6 Nov 2026). Loaded after every other stylesheet.
   Puts back the approved preview's look where later CSS changed it, and keeps the fixes.
   ========================================================================== */

/* FAQ hub: the topic chips hide groups with the hidden attribute, but .fh__g { display: grid } beat it,
   so every chip kept showing "Most asked" first (Careers looked empty). */
.fh__g[hidden], .fh__i[hidden] { display: none !important; }

/* Services hub: seven group companies in the preview's 3-column card grid. The seventh card would sit alone
   on its row, so it spans the row (and the 2-column tablet grid) instead. */
@media (min-width: 1001px) { .sx-group__grid > .sx-co:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } }
@media (min-width: 601px) and (max-width: 1000px) { .sx-group__grid > .sx-co:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* FAQ hub on phones (seen in Arabic): the search box and the longest topic chip were wider than the bar,
   which pushed the page 20px sideways. Let both shrink to the bar. */
.fh__bar > * { min-width: 0; }
.fh__search input { min-width: 0; width: 100%; }
.fh__chips button { max-width: 100%; white-space: normal; text-align: start; }

/* Off-plan payment plan breakdown */
.pplan{margin-top:20px;border:1px solid var(--line);border-radius:20px;padding:20px 22px;display:grid;gap:16px}
.pplan__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pplan__head .eyebrow{margin:0}
.pplan__sum{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.pplan__bar{display:flex;height:12px;border-radius:999px;overflow:hidden;gap:3px}
.pplan__seg--0{background:var(--red,#d42a1f)}
.pplan__seg--1{background:color-mix(in srgb,var(--red,#d42a1f) 55%,var(--ink,#141416))}
.pplan__seg--2{background:var(--ink,#141416)}
.pplan__seg--3{background:color-mix(in srgb,var(--ink,#141416) 45%,transparent)}
.pplan__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px 18px}
.pplan__steps li{margin:0;padding:0;display:grid;align-content:start;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;min-width:0}
.pplan__dot{width:10px;height:10px;border-radius:50%;grid-row:span 1}
.pplan__steps strong{font-size:20px;font-weight:800;letter-spacing:-.02em}
.pplan__steps li>span:not(.pplan__dot),.pplan__steps small{grid-column:2}
.pplan__steps li>span:not(.pplan__dot){font-weight:700;font-size:14px}
.pplan__steps small{color:var(--muted);font-size:12.5px;line-height:1.4}
.pplan__note{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}

/* Careers "At CBA": a mentor beside you who hands you leads (New to real estate) */
.cw2__mentor { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: #fbbf24; box-shadow: 0 0 0 6px rgba(251,191,36,.18); z-index: 2; }
.cw2__mentor::after { content: "Mentor"; position: absolute; left: 50%; top: 100%; translate: -50% 6px; font-size: 11px; font-weight: 800; color: #fbbf24; white-space: nowrap; }
.cw2__mentor.is-hit { transform: scale(1.35); background: #fde68a; }
.cw2__link { position: absolute; left: 50%; bottom: 50%; width: 2px; height: 0; translate: -50% 0; transform-origin: 50% 100%; background: repeating-linear-gradient(to top, rgba(251,191,36,.7) 0 4px, transparent 4px 8px); pointer-events: none; z-index: -1; transition: height .5s; }
.cw2__link.is-on { height: var(--len, 50px); }
.cw2__lead--hand { transition: left .6s cubic-bezier(.3,.7,.4,1), top .6s cubic-bezier(.3,.7,.4,1), opacity .3s; background: #fde68a; box-shadow: 0 0 14px rgba(253,230,138,.9); }
@media (prefers-reduced-motion: reduce) { .cw2__link { transition: none; } }

/* Careers: Open roles as a bold red band so it stands out while scrolling, plus a floating jump pill */
.cr-roles--hi { position: relative; background: radial-gradient(120% 90% at 85% 0%, #ff5a45 0%, var(--red) 38%, var(--red-d) 100%); color: #fff; overflow: clip; isolation: isolate; }
.cr-roles--hi::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent); z-index: -1; pointer-events: none; }
.cr-roles--hi .eyebrow { color: rgba(255,255,255,.85); } .cr-roles--hi .eyebrow::before { background: #fff; }
.cr-roles--hi .h2 { color: #fff; } .cr-roles--hi .h2 em { color: #fff; }
.cr-roles--hi .cr-roles__head > p { color: rgba(255,255,255,.85); } .cr-roles--hi .cr-roles__head a { color: #fff; }
.cr-roles__now { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.22); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.cr-roles__now i, .cr-jump i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: cr-live 1.8s infinite; }
@keyframes cr-live { 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.cr-roles--hi .cr-roles__list { border-top: 2px solid #fff; display: grid; gap: 12px; padding-top: 16px; }
.cr-roles--hi .cr-role { border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(255,255,255,.08); transition: background .3s, border-color .3s, transform .3s var(--ease); }
.cr-roles--hi .cr-role summary { padding-inline: 20px; }
.cr-roles--hi .cr-role:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); }
.cr-roles--hi .cr-role__n { color: rgba(255,255,255,.7); }
.cr-roles--hi .cr-role__t small { color: rgba(255,255,255,.8); }
.cr-roles--hi .cr-role summary:hover .cr-role__t b { color: #fff; }
.cr-roles--hi .cr-role__go { border-color: rgba(255,255,255,.6); color: #fff; }
.cr-roles--hi .cr-role[open] { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 30px 70px -30px rgba(0,0,0,.5); }
.cr-roles--hi .cr-role[open] .cr-role__t b, .cr-roles--hi .cr-role[open] .cr-role__n { color: var(--red); }
.cr-roles--hi .cr-role[open] .cr-role__t small { color: var(--muted); }
.cr-roles--hi .cr-role[open] .cr-role__go { background: var(--red); border-color: var(--red); color: #fff; }
.cr-roles--hi .cr-role__b { padding-right: 20px; }
.cr-roles--hi .cr-role__b .btn--red { background: var(--ink); border-color: var(--ink); }
@media (max-width: 720px) { .cr-roles--hi .cr-role summary { padding-inline: 14px; } .cr-roles--hi .cr-role__b { padding: 0 14px 24px; } }
.cr-jump { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 16px; border-radius: 999px; background: var(--red); color: #fff; text-decoration: none; font-size: 14px; box-shadow: 0 14px 34px -10px rgba(244,59,47,.7); transition: opacity .3s, translate .3s var(--ease); }
.cr-jump span { opacity: .85; font-weight: 600; } .cr-jump span::after { content: " ↑"; }
.cr-jump.is-below span::after { content: " ↓"; }
.cr-jump[hidden] { display: inline-flex !important; opacity: 0; translate: -50% 20px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cr-roles__now i, .cr-jump i { animation: none; } }

/* Contact rework: one hero card with Message / Book a call */
.ct2-mode { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #f3f1ef; border-radius: 999px; padding: 4px; margin: 0 0 20px; }
.ct2-mode button { position: relative; z-index: 1; border: 0; background: none; padding: 11px 10px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: color .3s; }
.ct2-mode button.is-on { color: #fff; }
.ct2-mode i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transition: translate .4s var(--ease); }
.ct2-form[data-mode="call"] .ct2-mode i { translate: 100% 0; background: var(--red); }
.ct2-panel[hidden] { display: none; }
.ct2-panel h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--red); }
.ct2-cb { display: grid; gap: 12px; }
.ct2-cb__days, .ct2-cb__times { display: grid; gap: 8px; }
.ct2-cb__days { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ct2-cb__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct2-cb__days label, .ct2-cb__times label { position: relative; cursor: pointer; }
.ct2-cb__days input, .ct2-cb__times input { position: absolute; opacity: 0; inset: 0; }
.ct2-cb__days span, .ct2-cb__times span { display: grid; gap: 2px; text-align: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 14px; font-size: 11.5px; color: var(--muted); transition: .25s var(--ease); }
.ct2-cb__days b, .ct2-cb__times b { font-size: 13px; color: var(--ink); }
.ct2-cb__days input:checked + span, .ct2-cb__times input:checked + span { background: var(--red); border-color: var(--red); color: rgba(255,255,255,.85); } .ct2-cb__days input:checked + span b, .ct2-cb__times input:checked + span b { color: #fff; }
.ct2-cb__days input:focus-visible + span, .ct2-cb__times input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 480px) { .ct2-cb__days { gap: 6px; } .ct2-cb__days span { padding: 9px 2px; font-size: 10.5px; } .ct2-cb__days b { font-size: 12px; } }

/* Agents: a compact, secondary option below the company contact */
.ct2-lang--mini { padding: clamp(48px, 6vw, 72px) 0; background: #f6f4f1; border-top: 1px solid var(--line); }
.ct2-lang--mini .ct2-lang__head { margin-bottom: 16px; }
.ct2-lang__h { margin: 6px 0 0; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; line-height: 1.15; }
.ct2-lang__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--red); }
.ct2-lang--mini .ct2-lang__head > p { font-size: 14px; }
.ct2-lang--mini .ct2-lang__tabs { gap: 8px; padding-bottom: 10px; }
.ct2-lang--mini .ct2-lang__tabs button { padding: 8px 14px; border-radius: 999px; display: flex; align-items: baseline; gap: 8px; }
.ct2-lang--mini .ct2-lang__tabs b { font-size: 17px; }
.ct2-lang--mini .ct2-lang__res { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; margin-top: 6px; }
.ct2-mini { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; min-width: 0; animation: ct2-in .4s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes ct2-in { from { opacity: 0; transform: translateY(8px); } }
.ct2-mini__who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.ct2-mini__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.ct2-mini__who span { display: grid; min-width: 0; }
.ct2-mini__who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct2-mini__who small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct2-mini__wa { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #128c4a; color: #fff; }
.ct2-mini__wa svg { width: 18px; height: 18px; fill: currentColor; }
.ct2-mini__who:hover b { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .ct2-mini { animation: none; } }

/* Other routes */
.ct2-routes { padding: clamp(48px, 6vw, 80px) 0 0; background: #fff; }
.ct2-routes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ct2-route { position: relative; display: grid; gap: 4px; padding: 20px 44px 20px 20px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); text-decoration: none; transition: border-color .3s, background .3s; min-width: 0; }
.ct2-route b { font-size: 16px; letter-spacing: -.01em; } .ct2-route small { color: var(--muted); font-size: 13px; }
.ct2-route i { position: absolute; right: 18px; top: 50%; translate: 0 -50%; font-style: normal; color: var(--red); transition: translate .3s var(--ease); }
.ct2-route:hover { border-color: var(--ink); background: #faf9f7; } .ct2-route:hover i { translate: 4px -50%; }
@media (max-width: 900px) { .ct2-routes__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ct2-routes__grid { grid-template-columns: 1fr; } }
.ct2-mini--more { justify-content: center; font-size: 13px; font-weight: 800; color: var(--ink); text-decoration: none; background: transparent; border-style: dashed; min-height: 56px; }
.ct2-mini--more:hover { border-color: var(--ink); }

/* Nav: Market insight, last item. A glowing pill with a sweeping red border and a live pulse, so it reads as the thing to click. */
@property --mi-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hdr .nav__a.nav__a--hi { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 6px; padding: 9px 14px 9px 12px !important; border-radius: 999px; background: #0d0d0f; color: #fff !important; font-weight: 700; box-shadow: 0 8px 22px -10px rgba(244,59,47,.75); transition: transform .3s var(--ease), box-shadow .3s; }
.nav__a--hi::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--mi-a), rgba(244,59,47,0) 0deg, #f43b2f 70deg, #ffb199 110deg, rgba(244,59,47,0) 180deg, rgba(244,59,47,.35) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mi-spin 3.2s linear infinite; z-index: -1; pointer-events: none; }
.nav__a--hi::after { display: none !important; }
.hdr .nav__a.nav__a--hi:hover { transform: translateY(-1px); background: #f43b2f; box-shadow: 0 12px 28px -10px rgba(244,59,47,.9); }
.nav__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #f43b2f; box-shadow: 0 0 0 0 rgba(244,59,47,.7); animation: mi-ping 1.6s infinite; flex: none; }
.nav__a--hi:hover .nav__live { background: #fff; }
.nav__tag { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.14); line-height: 1; }
.page-home .hdr:not(.is-solid) .nav__a--hi, .has-dark-hero .hdr:not(.is-solid) .nav__a--hi { background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
@keyframes mi-spin { to { --mi-a: 360deg; } }
@keyframes mi-ping { 70% { box-shadow: 0 0 0 8px rgba(244,59,47,0); } 100% { box-shadow: 0 0 0 0 rgba(244,59,47,0); } }
@media (prefers-reduced-motion: reduce) { .nav__a--hi::before, .nav__live { animation: none; } }
@media (max-width: 1720px) { .nav__tag { display: none; } }
/* Home: market insight map */
.lx-atlas__map .at-hero { height: min(78vh, 720px); min-height: 520px; }
@media (max-width: 760px) { .lx-atlas__map .at-hero { height: 78vh; min-height: 480px; border-radius: 20px; } }
.hdr .nav__a { padding-left: 8px !important; padding-right: 8px !important; }
@media (max-width: 1400px) { .hdr .nav__a { padding-left: 6px !important; padding-right: 6px !important; } }

/* Sell: big brokerage vs a CBA advisor. Left: the camera starts on your home, then pulls back until it is one dot among hundreds. Right: one advisor, start to finish, with CBA's own per-advisor figures. */
.hh__side { position: relative; }
.hh__tag { position: absolute; top: 28px; right: 28px; margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.hh__tag--them { background: #f4f2ec; color: var(--muted); }
.hh__tag--us { background: var(--red); color: #fff; z-index: 1; }
.hh__crowd { position: relative; display: block; aspect-ratio: 2 / 1.05; max-width: 100%; padding: 0; overflow: hidden; border-radius: 20px; background: #f4f2ec; }
.hh__field { position: absolute; inset: 4%; display: grid; grid-template-columns: repeat(30, 1fr); grid-template-rows: repeat(15, 1fr); gap: 3px; transform-origin: 61.67% 56.67%; animation: hh-zoom 10s cubic-bezier(.65,0,.35,1) infinite; }
.hh__field i { border-radius: 50%; background: #cfccc3; aspect-ratio: 1; align-self: center; animation: hh-busy 9s var(--d, 0s) infinite; }
.hh__field i.is-home { position: relative; z-index: 1; background: var(--red); box-shadow: 0 0 0 2px #fff; animation: hh-pass 10s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes hh-pass { 0%, 52% { transform: none; } 58%, 63% { transform: translate(calc(400% + 12px), calc(-300% - 9px)); } 69%, 74% { transform: translate(calc(-500% - 15px), calc(-100% - 3px)); } 80%, 86% { transform: translate(calc(-200% - 6px), calc(400% + 12px)); } 94%, 100% { transform: none; } }
@keyframes hh-zoom { 0%, 14% { transform: scale(5); } 52%, 88% { transform: scale(1); } 100% { transform: scale(5); } }
.hh__field i:nth-child(23) { box-shadow: none; }
@keyframes hh-busy { 0%, 90%, 100% { background: #cfccc3; } 94% { background: #9f9b90; } }
.hh__pin { position: absolute; left: calc(4% + 92% * .6167); top: calc(4% + 92% * .5667); translate: -50% calc(-100% - 14px); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; z-index: 2; animation: hh-pin 10s cubic-bezier(.65,0,.35,1) infinite; }
.hh__pin svg { width: 13px; height: 13px; fill: currentColor; }
.hh__pin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: inherit; translate: -50% 0; rotate: 45deg; }
@keyframes hh-pin { 0%, 14% { translate: -50% calc(-100% - 40px); opacity: 1; } 50% { translate: -50% calc(-100% - 8px); opacity: 1; } 55%, 92% { translate: -50% calc(-100% - 8px); opacity: 0; } 100% { translate: -50% calc(-100% - 40px); opacity: 1; } }
.hh__lost { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(13,13,15,.35); z-index: 2; opacity: 0; animation: hh-cap1 10s infinite; }
.hh__lost--2 { animation-name: hh-cap2; }
@keyframes hh-cap1 { 0%, 53%, 72%, 100% { opacity: 0; transform: translateY(6px); } 57%, 68% { opacity: 1; transform: none; } }
@keyframes hh-cap2 { 0%, 71%, 92%, 100% { opacity: 0; transform: translateY(6px); } 75%, 88% { opacity: 1; transform: none; } }
.hh__miss { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hh__miss li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #f4f2ec; color: var(--muted); font-size: 12.5px; font-weight: 700; animation: hh-miss 7.5s calc(var(--s) * 2.5s) infinite; }
.hh__miss i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #e2dfd8; font-style: normal; font-size: 9px; color: var(--ink-2); }
@keyframes hh-miss { 0%, 100% { background: #f4f2ec; color: var(--muted); } 8%, 30% { background: #e9e6df; color: var(--ink); } }
.hh__one { display: grid; gap: 16px; align-items: start; padding: 22px; }
.hh__pair { display: flex; align-items: center; gap: 0; }
.hh__adv, .hh__me { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; font-style: normal; }
.hh__adv { background: #fff; box-shadow: 0 0 0 8px rgba(244,59,47,.2); }
.hh__adv img { border-radius: 4px; }
.hh__me { background: var(--red); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 0 0 8px rgba(244,59,47,.2), 0 0 0 18px rgba(244,59,47,.08); }
.hh__wire { position: relative; flex: 1; height: 2px; margin: 0 8px; background: rgba(255,255,255,.18); overflow: hidden; border-radius: 2px; }
.hh__wire b { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, #f43b2f, #fff); animation: hh-wire 1.8s linear infinite; }
@keyframes hh-wire { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.hh__promise { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.4; }
.hh__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hh__steps li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); animation: hh-step 7.5s calc(var(--s) * 1.2s) infinite; }
.hh__steps i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); font-style: normal; font-size: 10px; }
@keyframes hh-step { 0%, 100% { background: rgba(255,255,255,.07); } 8%, 30% { background: rgba(244,59,47,.9); color: #fff; } }
.hh__ours dd { flex-direction: column; align-items: flex-start; gap: 8px; }
.hh__side dl dd { min-height: 0; }
@media (max-width: 560px) { .hh__tag { position: static; align-self: flex-start; } .hh__crowd { aspect-ratio: 1.5 / 1; } .hh__field { gap: 2px; } .hh__lost { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .hh__field, .hh__field i, .hh__pin, .hh__miss li, .hh__wire b, .hh__steps li { animation: none !important; } .hh__lost--2 { animation: none; opacity: 1; } }
/* 3D map: quiet text credit instead of the (i) button (OpenStreetMap requires attribution) */
.at-credit { position: absolute; right: 10px; bottom: 6px; z-index: 2; font-size: 10px; color: rgba(13,13,15,.45); pointer-events: auto; }
.at-credit a { color: inherit; text-decoration: none; }
/* All Leaflet maps: drop the Leaflet badge and flag, keep only a faint OpenStreetMap credit (licence requires it) */
.leaflet-control-attribution a[href*="leafletjs"], .leaflet-control-attribution > span[aria-hidden] { display: none !important; }
.leaflet-container .leaflet-bottom .leaflet-control-attribution { background: transparent !important; box-shadow: none !important; font-size: 9.5px !important; line-height: 1.4; padding: 0 6px !important; opacity: .55; }
.leaflet-container .leaflet-bottom .leaflet-control-attribution:hover { opacity: .9; }

/* Hero reel: playful floating reviews, several at a time, random order and positions */
.rl-floats { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rl-fl { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: min(270px, 22vw); margin: 0; padding: 12px 14px 10px; border-radius: 16px; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 20px 40px -18px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translate(-50%, 14px) scale(.7) rotate(var(--r)); transition: opacity .35s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
.rl-fl.is-on { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(var(--r)); }
.rl-fl.is-out { opacity: 0; transform: translate(-50%, -10px) scale(.92) rotate(var(--r)); transition: opacity .4s ease, transform .45s ease; }
.rl-fl blockquote { margin: 0; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rl-fl figcaption { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 11.5px; }
.rl-fl figcaption span { color: #f5b400; letter-spacing: 1px; }
@media (max-width: 900px) {
  /* Phones: one slim, opaque review pill in the gap between the header and the hero text */
  .rl-floats { z-index: 6; }
  .rl-fl { top: 62px; left: 16px; right: 16px; width: auto; max-width: none; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); transform: translateY(-8px) scale(.96); }
  .rl-fl.is-on { transform: none; }
  .rl-fl.is-out { transform: translateY(-6px) scale(.98); }
  .rl-fl blockquote { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; }
  .rl-fl figcaption { margin: 0; flex: none; font-size: 11px; }
  .rl-fl figcaption b { display: none; }
  .rl-fl figcaption span { letter-spacing: 0; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .rl-fl { transition: opacity .3s; transform: translate(-50%, 0) !important; } }
/* Link to Dr. Salman's personal site: quiet, confident */
.ldr__site { order: 2; }
.tm-site { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid currentColor; font-size: 13px; font-weight: 700; text-decoration: none; color: inherit; opacity: .85; transition: opacity .2s, background .2s, color .2s; }
.tm-site:hover { opacity: 1; background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Buy / rent map (MapLibre) ---------- */
.mapview.mx { position: relative; background: #f3f1ec; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(13,13,15,.06); }
.mapview.mx.is-loading::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(100deg, #f3f1ec 30%, #faf8f4 50%, #f3f1ec 70%) 0 0 / 300% 100%; animation: mxShimmer 1.4s linear infinite; }
@keyframes mxShimmer { to { background-position: -300% 0; } }
.mx .maplibregl-canvas { outline: none; }
.mx-pin { position: relative; border: 0; cursor: pointer; font: 800 12.5px/1 var(--font, system-ui); color: #fff; background: #0d0d0f; padding: 7px 10px; border-radius: 99px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45), 0 0 0 2px #fff; transition: transform .18s, background .18s; white-space: nowrap; margin-bottom: 7px; }
.mx-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; background: inherit; transform: rotate(45deg); border-radius: 0 0 2px 0; box-shadow: 2px 2px 0 0 #fff; z-index: -1; }
.mx-pin.r { background: #f43b2f; }
.mx-pin:hover, .mx-pin.hot, .mx-pin.on { transform: scale(1.12) translateY(-2px); z-index: 3; background: #f43b2f; }
.mx-pin.r.hot, .mx-pin.r.on, .mx-pin.r:hover { background: #0d0d0f; }
.mx-cl { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 99px; color: #0d0d0f; background: rgba(255,255,255,.96); box-shadow: 0 0 0 1px rgba(13,13,15,.08), 0 10px 22px -10px rgba(0,0,0,.45); font-family: var(--font, system-ui); white-space: nowrap; transition: transform .2s; }
.mx-cl b { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; background: #0d0d0f; color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; }
.mx-cl span { font-size: 11.5px; font-weight: 700; color: #3a3430; }
.mx-cl.r b { background: #f43b2f; }
.mx-cl:hover { transform: scale(1.06); }
.mx-area { pointer-events: none; font: 700 10.5px/1 var(--font, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #6f665d; text-shadow: 0 0 3px #f3f1ec, 0 0 6px #f3f1ec, 0 0 10px #f3f1ec; white-space: nowrap; transform: translateY(24px); }
.mx-ui { position: absolute; z-index: 4; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; }
.mx-ui button { width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px -8px rgba(0,0,0,.35), 0 0 0 1px rgba(13,13,15,.06); font: 700 18px/1 var(--font, system-ui); color: #0d0d0f; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.mx-ui button[data-mx="3d"] { font-size: 12.5px; letter-spacing: .04em; }
.mx-ui button[aria-pressed="true"] { background: #0d0d0f; color: #fff; }
.mx-ui button:hover { background: #fff; }
.mx-ui svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-legend { position: absolute; z-index: 4; top: 14px; left: 14px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 99px; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px -8px rgba(0,0,0,.3); font-size: 12.5px; color: #3a3430; }
.mx-legend b { color: #0d0d0f; }
.mx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mx-legend i { width: 9px; height: 9px; border-radius: 50%; background: #0d0d0f; } .mx-legend i.r { background: #f43b2f; }
.mx .maplibregl-ctrl-bottom-left { z-index: 4; }
.mapview.mx .maplibregl-ctrl.maplibregl-ctrl-attrib, .mapview.mx .maplibregl-ctrl-attrib.maplibregl-compact { font-size: 10px; background: rgba(255,255,255,.8); color: #6f665d; border-radius: 99px; }
.mx-pop .maplibregl-popup-content { padding: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -18px rgba(0,0,0,.45); }
.mx-pop .maplibregl-popup-tip { display: none; }
.mx-card { display: block; width: 260px; color: #0d0d0f; text-decoration: none; font-family: var(--font, system-ui); }
.mx-card__img { position: relative; display: block; height: 150px; overflow: hidden; }
.mx-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mx-card:hover .mx-card__img img { transform: scale(1.05); }
.mx-card__img em { position: absolute; left: 10px; top: 10px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: #fff; color: #0d0d0f; padding: 4px 9px; border-radius: 99px; }
.mx-card__img em.r { background: #f43b2f; color: #fff; }
.mx-card__b { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.mx-card__b b { font-size: 17px; font-weight: 800; }
.mx-card__b b small { font-size: 12px; color: #8a7d70; font-weight: 600; }
.mx-card__b > span { font-size: 13px; color: #3a3430; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-card__b i { font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #f43b2f; margin-top: 4px; }
@media (max-width: 640px) {
  .mx-legend { font-size: 11.5px; padding: 7px 11px; gap: 8px; } .mx-ui { top: auto; bottom: 12px; right: 10px; flex-direction: row; }
  .mx-pin { font-size: 11.5px; padding: 6px 9px; }
  .mx-cl { padding: 3px 10px 3px 3px; } .mx-cl b { min-width: 22px; height: 22px; font-size: 11.5px; } .mx-cl span { font-size: 10.5px; }
  .mx-ui button { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .mx-pin, .mx-cl, .mx-card__img img { transition: none; } .mapview.mx.is-loading::after { animation: none; } }

/* Split view: the map sits inside the page with a margin on every side, fully rounded, and stays in view while the list scrolls */
@media (min-width: 1200px) {
  body.bp-split .sec--results > .wrap { max-width: 1720px; margin-inline: auto; padding-inline: 32px; gap: 0 28px; }
  body.bp-split .sec--results .mapview { border-radius: 24px; top: calc(var(--hdr) + 96px); height: calc(100vh - var(--hdr) - 120px); height: calc(100dvh - var(--hdr) - 120px); box-shadow: 0 30px 60px -36px rgba(13,13,15,.45), inset 0 0 0 1px rgba(13,13,15,.06); }
  [dir="rtl"] body.bp-split .sec--results .mapview { border-radius: 24px; }
}
.mx-search { position: absolute; z-index: 5; bottom: 22px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: #0d0d0f; color: #fff; font: 800 13.5px/1 var(--font, system-ui); cursor: pointer; box-shadow: 0 12px 26px -10px rgba(0,0,0,.55); animation: mxPop .35s cubic-bezier(.2,.8,.2,1.2); }
.mx-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.mx-search:hover { background: #f43b2f; }
.mx-search.is-busy { opacity: .7; }
@keyframes mxPop { from { opacity: 0; transform: translate(-50%, -8px) scale(.94); } }
.mx-clear { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin-left: 2px; border-radius: 99px; background: #f43b2f; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
.mx-clear span { font-size: 15px; line-height: 1; }
@media (max-width: 640px) { .mx-search { bottom: 62px; } }
@media (prefers-reduced-motion: reduce) { .mx-search { animation: none; } }

/* ---------- Search box suggestions on /buy and /rent ---------- */
.fsel--q { position: relative; }
.qs-pop { position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; width: min(560px, 92vw); max-height: min(70vh, 620px); overflow-y: auto; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -20px rgba(13,13,15,.35), 0 0 0 1px rgba(13,13,15,.06); animation: qsIn .2s cubic-bezier(.2,.8,.2,1); }
@keyframes qsIn { from { opacity: 0; transform: translateY(-6px); } }
.qs-pop__h { margin: 10px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3, #8a7d70); }
.qs-pop__none { margin: 8px 10px; font-size: 14px; color: var(--ink-2, #3a3430); }
.qs-o { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink, #0d0d0f); }
.qs-o svg { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--sand, #f7f1ea); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qs-o span { display: flex; flex-direction: column; min-width: 0; }
.qs-o b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-o small { font-size: 12.5px; color: var(--ink-3, #8a7d70); }
.qs-o em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink-2, #3a3430); white-space: nowrap; }
.qs-o mark, .qs-home mark { background: none; color: var(--red, #f43b2f); }
.qs-o:hover, .qs-o.on, .qs-home:hover, .qs-home.on, .qs-all:hover, .qs-all.on { background: var(--sand, #f7f1ea); }
.qs-o:hover svg, .qs-o.on svg { background: var(--red, #f43b2f); color: #fff; }
.qs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 4px; }
.qs-chips .qs-o { width: auto; display: inline-flex; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 99px; border: 1px solid var(--line, #e7ddd1); }
.qs-chips .qs-o svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; }
.qs-chips .qs-o small, .qs-chips .qs-o em { display: none; }
.qs-chips .qs-o b { font-size: 13.5px; }
.qs-homes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 4px; }
.qs-home { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 6px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink, #0d0d0f); min-width: 0; }
.qs-home img, .qs-home i { width: 64px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--sand, #f7f1ea); }
.qs-home span { display: flex; flex-direction: column; min-width: 0; }
.qs-home b { font-size: 14px; font-weight: 800; }
.qs-home b small { font-size: 11px; color: var(--ink-3, #8a7d70); font-weight: 600; }
.qs-home small { font-size: 12px; color: var(--ink-2, #3a3430); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-home .qs-home__w { color: var(--ink-3, #8a7d70); }
.qs-all { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 12px; border: 0; border-top: 1px solid var(--line, #e7ddd1); border-radius: 0 0 14px 14px; background: none; font: 700 14px/1.2 var(--font, system-ui); color: var(--ink, #0d0d0f); cursor: pointer; text-align: left; }
.qs-all svg { width: 18px; height: 18px; fill: none; stroke: var(--red, #f43b2f); stroke-width: 2.4; stroke-linecap: round; }
.qs-all kbd { margin-left: auto; font: 700 11px/1 var(--font, system-ui); padding: 5px 8px; border-radius: 7px; background: var(--sand, #f7f1ea); color: var(--ink-3, #8a7d70); }
@media (max-width: 640px) { .qs-homes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .qs-pop { animation: none; } }

.fsel--q input { padding-left: 38px !important; background: no-repeat 14px 50% / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7d70' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
/* Area guide: wide photo between the story and the facts */
.agd__photo { margin: 34px 0 0; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 7; background: #eceae6; }
.agd__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .agd__photo { aspect-ratio: 4 / 3; border-radius: 16px; } }
/* Areas index: every area guide, by emirate */
.ar-gd__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-gd__tabs button { border: 1px solid #e3e0da; background: #fff; border-radius: 999px; padding: 10px 16px; font: 600 14px/1 inherit; color: #1a1a1d; cursor: pointer; }
.ar-gd__tabs button small { color: #8a8780; font-weight: 500; margin-left: 4px; }
.ar-gd__tabs button.is-on { background: #0d0d0f; border-color: #0d0d0f; color: #fff; }
.ar-gd__tabs button.is-on small { color: #b9b6ae; }
.ar-gd__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; margin-top: 28px; }
.ar-gd__c { display: grid; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.ar-gd__c[hidden] { display: none; }
.ar-gd__img { position: relative; display: block; aspect-ratio: 8 / 5; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #ece8e1, #d9d3c8); margin-bottom: 6px; }
.ar-gd__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ar-gd__c:hover .ar-gd__img img { transform: scale(1.05); }
.ar-gd__img i { position: absolute; left: 10px; bottom: 10px; font: 600 12px/1 inherit; font-style: normal; background: rgba(255,255,255,.94); color: #0d0d0f; padding: 7px 10px; border-radius: 999px; }
.ar-gd__c b { font-size: 17px; letter-spacing: -.01em; }
.ar-gd__c small { color: #6b6862; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .ar-gd__grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; } .ar-gd__c b { font-size: 15px; } .ar-gd__c small { display: none; } }
/* Guides and insights without a table of contents: one centred column, not squeezed into the sidebar slot */
.cx--guide .cx__in--plain { grid-template-columns: minmax(0, 760px); }