/* CBA Real Estate — accessibility layer (WCAG 2.1 AA).
   Loaded right after site.css. It only overrides: colour contrast, focus rings, motion controls,
   and the small helpers the a11y JS in site.js / pages.js relies on. Keep the premium look:
   brand red #f43b2f stays for large display text and decoration; filled buttons and small red
   text use the deeper --red-a, which passes 4.5:1 with white. */

:root {
  --red-a: #d42a1f;     /* 5.06:1 with white, 4.6:1 on --soft */
  --red-a-h: #b8231a;   /* hover / pressed */
  --wa-a: #0e7a3e;      /* WhatsApp fill, 5.42:1 with white */
  --wa-a-h: #0b6631;
  --wa-ink: #0b6e37;    /* WhatsApp green text on pale-green tints */
  --grey-a: #6b6b73;    /* lowest grey for small text on white / beige */
  --ring: #f43b2f;      /* focus ring: non-text, 3.8:1 on white, 5:1 on ink */
}

/* ------------------------------------------------------------ 3. brand red */
.btn--red { background: var(--red-a); box-shadow: 0 8px 24px -10px rgba(212,42,31,.7); }
.btn--red:hover, .btn--red:focus-visible { background: var(--red-a-h); }
.tag--hot, .v-2 .tag--hot { background: var(--red-a); }
.card__enq { color: var(--red-a); border-color: rgba(212,42,31,.35); }
.card__enq:hover { background: var(--red-a); border-color: var(--red-a); color: #fff; }
.lx-review__more, .ags__go, .pcard__meta em, .cr-badge__role, .hh__vs { color: var(--red-a); }
.ags__k { color: var(--red-a); }
.pjx-why [data-reveal] > span { color: var(--red-a); }
.fq__n { color: var(--grey-a); opacity: 1; }
.fq__i[open] .fq__n { color: var(--red-a); }
.ct2-lang__tabs button.is-on { background: var(--red-a); border-color: var(--red-a); }
.ct2-lang__tabs button.is-on small { color: #fff; }
.ix-cb__days input:checked + span, .ix-cb__times input:checked + span { background: var(--red-a); border-color: var(--red-a); color: #fff; }
.cr-book:nth-child(3n) { background: var(--red-a); }
.cr-book:nth-child(3n) .cr-book__spine em, .cr-book__spine em { color: #fff; }
.nav__ft em, .mnav .mnav__cta, .eq__tag, .ix-match__rank, .hdr__fav i, .pulse__k--red, .sg-pm__k--red,
.aw-state__nums div:first-child, .tx-top li:first-child::before, .iv-k span, .sn-line__pin, .sg-cal__grid span.is-b,
.sg-cal__grid button.is-b, .sg-snag__dot span, .cr-drop__ic, .cr-float--b, .ldr-news__i--lead { background-color: var(--red-a); }
.ldr-news__i--lead { border-color: var(--red-a); }
.hm-sig .card__enq { color: #ff8a80 !important; }

/* ------------------------------------------------------------ 4. WhatsApp green */
.btn--wa, .fq__wa, .eq__wa, .cx__wa, .ns-card__wa, .sv-next__wa, .sv-contact .sv-contact__wa,
.lx-dock__b--wa, .wa-float { background: var(--wa-a); color: #fff; }
.btn--wa { box-shadow: 0 10px 26px -12px rgba(14,122,62,.75); }
.btn--wa:hover, .fq__wa:hover, .eq__wa:hover, .cx__wa:hover, .ns-card__wa:hover, .sv-next__wa:hover, .wa-float:hover { background: var(--wa-a-h); }
.wa-float { box-shadow: 0 12px 30px -8px rgba(14,122,62,.6); }
.ct2-adv__btns a:first-child { background: var(--wa-a); color: #fff; }
.mnav .mnav__quick a.mnav__wa { background: var(--wa-a); border-color: var(--wa-a); }
.ft2-act--wa i { background: var(--wa-a); }
.lx-adv__wa { color: var(--wa-ink); }
.lx-adv__wa:hover, .pp-wa:hover, .tm-wa:hover, .hz-quick--wa:hover { background: var(--wa-a) !important; color: #fff !important; }
body .tabbar .tabbar__wa { color: var(--wa-a); }

/* ------------------------------------------------------------ 12. greys, golds, greens */
ul.potw__why li.is-deal, .lsx__tag.is-new { color: var(--wa-ink); }
.nb__lbl, .lsx__t th, .txs__h, .nav__mega .nav2 p, .dd__pop li.is-any, .permit small, .lg__facts dd { color: var(--grey-a); }
.pbar__t a { color: var(--grey-a); }
.cr-press .pw, .cr-pressbar .pw, a[href$="awards-and-press"] > .pw { color: var(--grey-a); }
.page-home .lx-trust__in > div:nth-child(2) b { color: #a87400; }
body .fbar__q:not(.has-v) { color: #5f5f67; }
/* /sell "Four things": keep the dimmed look, but every dimmed line still reads at 4.5:1 (3:1 for large type). */
.sl-pil__i { opacity: 1; }
.sl-pil__i:not(.is-on) h3 { color: #8a8a92; }
.sl-pil__i:not(.is-on) > p:not(.sl-pil__t), .sl-pil__i:not(.is-on) .sl-pil__t, .sl-pil__i:not(.is-on) .sl-pil__tags i { color: var(--grey-a); }
.sl-pil__i h3, .sl-pil__i > p, .sl-pil__n, .sl-pil__tags i { transition: color .5s; }
.card .tag--gold, .pdp__tags .tag--gold { color: #3a2410; }

/* ------------------------------------------------------------ 11. text over photos */
.page-home .hdr:not(.is-solid), .has-dark-hero .hdr:not(.is-solid) { background: rgba(13,13,15,.55); }
.page-home .hdr:not(.is-solid) .nav, .has-dark-hero .hdr:not(.is-solid) .nav { background: rgba(255,255,255,.06); }
.page-home .hdr:not(.is-solid) .prefs__btn, .has-dark-hero .hdr:not(.is-solid) .prefs__btn { background: rgba(13,13,15,.35); }
.potw__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top right, rgba(0,0,0,.6), rgba(0,0,0,0) 45%); }
.potw__n { z-index: 1; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 6px 30px rgba(0,0,0,.45); }
.potw__tag { z-index: 1; }
.lx-sig__loc { color: #fff; }
.pjx__eye { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.pjx .bc, .pjx .bc a, .pjx__bc, .pjx__bc a { color: rgba(255,255,255,.92); }
.ft2-card__top small { display: inline-block; padding: 4px 7px; border-radius: 6px; background: var(--red-a); color: #fff; }

/* ------------------------------------------------------------ 7. focus you can see */
.card:focus-within .card__nav, .card__nav:focus-visible { opacity: 1; }
.cr-drop:focus-within { outline: 2px solid var(--ring); outline-offset: 3px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.hp):focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ring) !important; outline-offset: -2px !important;
}
summary:focus-visible, input[type=range]:focus-visible { outline: 2px solid var(--ring) !important; outline-offset: 2px; }
/* Pill search bars draw the ring round the pill, not the bare input inside it */
.search__f:focus-within, .ft2-news__row:focus-within, .hz-ask:focus-within, .in-news__row:focus-within,
.tx-search:focus-within, .tm-search:focus-within, .fh__search:focus-within, .gh__s:focus-within, .fqh__s:focus-within,
.dvh__search:focus-within, .smx__s:focus-within, .ar-search:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.search__f input:focus-visible, .search__f select:focus-visible, .ft2-news__row input:focus-visible, .hz-ask input:focus-visible,
.in-news__row input:focus-visible, .tx-search input:focus-visible, .tm-search input:focus-visible, .fh__search input:focus-visible,
.gh__s input:focus-visible, .fqh__s input:focus-visible, .dvh__search input:focus-visible, .smx__s input:focus-visible,
.ar-search input:focus-visible { outline: 0 !important; }
/* Visually hidden radios / checkboxes inside chip labels: ring the chip */
label > input[type=radio]:focus-visible + span, label > input[type=checkbox]:focus-visible + span,
label > input[type=radio]:focus-visible + *, label > input[type=checkbox]:focus-visible + * { outline: 2px solid var(--ring); outline-offset: 2px; }
.fld.has-err input, .fld.has-err select, .fld.has-err textarea, [aria-invalid="true"] { border-color: var(--red-a) !important; }
.err { color: var(--red-a); }
.ft2 .err, .eq .err, [data-dark] .err { color: #ff8a80; }

/* ------------------------------------------------------------ 1. desktop mega menu: disclosure buttons */
.nav__dd--mega { display: inline-flex; align-items: center; }
.nav__tg { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-inline-start: -6px; margin-inline-end: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .7; transition: opacity .2s, transform .3s var(--ease), background .2s; }
.nav__tg svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav__tg:hover, .nav__dd--mega.open .nav__tg { opacity: 1; }
.nav__tg[aria-expanded="true"] { transform: rotate(180deg); }
.nav__tg:focus-visible { opacity: 1; outline-offset: 0; }

/* ------------------------------------------------------------ 8 / 13. pause / play for endless motion */
.a11y-paused, .a11y-paused *, .a11y-paused::before, .a11y-paused::after { animation-play-state: paused !important; }
.a11y-pp { position: absolute; z-index: 6; right: max(16px, var(--gut, 16px)); bottom: 18px; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(13,13,15,.55); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; opacity: .82; transition: opacity .25s, transform .25s var(--ease), background .25s; }
.a11y-pp:hover, .a11y-pp:focus-visible { opacity: 1; transform: scale(1.06); background: rgba(13,13,15,.75); }
.a11y-pp svg { width: 12px; height: 12px; fill: currentColor; }
.a11y-pp .a11y-pp__play { display: none; }
.a11y-pp[aria-pressed="true"] .a11y-pp__pause { display: none; }
.a11y-pp[aria-pressed="true"] .a11y-pp__play { display: block; }
.a11y-pp--light { border-color: rgba(13,13,15,.14); background: rgba(255,255,255,.9); color: var(--ink); }
.a11y-pp--light:hover, .a11y-pp--light:focus-visible { background: #fff; }
.a11y-mq { position: relative; }
.a11y-mq > .a11y-pp { top: 50%; bottom: auto; right: 10px; margin-top: -16px; width: 32px; height: 32px; }
.a11y-mq > .a11y-pp:hover, .a11y-mq > .a11y-pp:focus-visible { transform: none; }
html[dir="rtl"] .a11y-pp { right: auto; left: max(16px, var(--gut, 16px)); }
html[dir="rtl"] .a11y-mq > .a11y-pp { left: 10px; }
@media (prefers-reduced-motion: reduce) { .a11y-pp { display: none; } }
html[data-motion="off"] .a11y-pp { display: none; }
/* Marquees stop under the keyboard; the footer group list becomes a static, wrapping list so no link slides off-screen */
.ft2-group:focus-within .ft2-group__t, .ap-marq:focus-within .ap-marq__t, .ap2-marq:focus-within .ap2-marq__t,
.sv-tick:focus-within .sv-tick__t, .pbar:focus-within .pbar__t, .ap2-feat:focus-within .ap2-feat__t { animation-play-state: paused; }
.ft2-group:focus-within { -webkit-mask-image: none; mask-image: none; }
.ft2-group:focus-within .ft2-group__t { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 0 var(--gut, 16px); }
.ft2-group:focus-within .ft2-group__t > [aria-hidden="true"] { display: none; }

/* ------------------------------------------------------------ 9 / 10. careers */
.cr-story[inert] { pointer-events: none; }
.cr-sim__steps > li[inert] { pointer-events: none; }
.cw2 .a11y-pp { top: 18px; bottom: auto; }

/* ------------------------------------------------------------ 14. enquiry "contact me by" radios */
.eq__by [role="radio"]:focus-visible { outline-offset: 2px; }

/* ------------------------------------------------------------ 2. phone menu as modal */
.mnav[aria-modal="true"] { overscroll-behavior: contain; }

/* ------------------------------------------------------------ 17. numbers stay left-to-right in Arabic */
.a11y-ltr, bdi.a11y-ltr { direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------------------ 20. small targets on phones */
@media (max-width: 760px) {
  .crumbs a, .lx-review__more, [data-clamp-btn] { display: inline-block; min-height: 24px; padding-block: 4px; }
  .pulse__bar { min-height: 32px; }
}

/* ------------------------------------------------------------ 18. project hero: photos button sits beside the <dl>, not inside it */
.pjx__fbar { display: flex; flex-wrap: wrap; align-items: stretch; }
.pjx__fbar > .pjx__facts { flex: 1 1 560px; }
.pjx__fbar > .pjx__ph { margin-top: 34px; padding: 20px 0 28px 24px; border-top: 1px solid rgba(255,255,255,.16); }
@media (max-width: 760px) { .pjx__fbar > .pjx__ph { margin-top: 0; padding: 16px 0 24px; border-top: 0; } }
.cr-stories.is-held *, .cr-stories.is-held { animation-play-state: paused !important; }

/* ------------------------------------------------------------ 17. RTL: prices and phone numbers read left-to-right */
html[dir="rtl"] [data-aed], html[dir="rtl"] [data-psf], html[dir="rtl"] [data-sqft] { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] a[href^="tel:"]:not(:has(svg)):not(:has(i)) { direction: ltr; unicode-bidi: isolate; }
.hm-sig .card .tag--gold { color: #3a2410; }
.cr-book:nth-child(3n) .cr-book__spine em { opacity: 1; }
.ix-plan__bar span:nth-child(2), .ix-plan__tl li:nth-child(2) i { background: var(--red-a); }
/* App tab bar: its frosted white can sit over dark heroes; keep labels at 4.5:1 there too */
body .tabbar { background-color: rgba(255,255,255,.92); }
body .tabbar a:not([aria-current]):not(.tabbar__wa), body .tabbar button { color: #5f5f67; }

/* Skip link: hidden with clip, not by pushing it off-screen (an off-screen element widens right-to-left pages) */
.skip, [dir="rtl"] .skip { left: 8px; right: auto; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus, [dir="rtl"] .skip:focus { clip-path: none; width: auto; height: auto; overflow: visible; }
[dir="rtl"] .skip, [dir="rtl"] .skip:focus { left: auto; right: 8px; }
/* Screen-reader-only text: pinned to the corner so text inside side-scrolling rails never widens the page */
.sr { position: fixed !important; top: 0; left: 0; }

/* Lighthouse contrast and structure fixes */
.grid-cta h2.grid-cta__h { position: relative; margin: 0; font-size: 26px; letter-spacing: -.03em; line-height: 1.15; }
.pulse__k--red span, .pulse__k--red small { color: #fff !important; }
.ar-gd__tabs button small { color: #6b6760; }
.tabbar .tabbar__chat { color: #c8261c; }
.ar-all__head .ar-gd__tabs button small, .ar-gd__tabs button small { color: #6b6760 !important; }
.ar-gd__tabs button.is-on small { color: #d6d3cc !important; }
nav.tabbar .tabbar__chat, nav.tabbar .tabbar__chat span { color: #c8261c !important; }
.agent-card h2.agent-card__h { font-size: 20px; margin: 0 0 6px; letter-spacing: -.02em; line-height: 1.2; }
.jn-lead .in-tag { background: #c8261c !important; }
.jn-by i { color: #c8261c !important; }