/* CHARCOAL SECTIONS · shared by the Phuket (index.html) and Dubai (dubai.html) homepages (Chris, 11 Nov 2026).
   These sit on Luxe Collective's charcoal, with Luxe Collective's own colour treatment (public/luxe-collective.css):
     1. "One Luxe Life, three ways in"   2. "Join Luxe Life" (★)   3. the site footer   4. the top header
   (the footer and header are shared by every page of each site)
   ("Let's make something exceptional happen" was removed from the homepage on Chris's instruction, 11 Nov 2026.)
   Hierarchy: headings ivory · body soft ivory · small uppercase labels champagne gold · solid gold buttons unchanged.
   Cards, photos, wording, sizes and spacing are not touched. Loaded last so it wins over the page's earlier rules. */
:root{--cs-char:#191919;--cs-ivory:#f4ead6;--cs-text:#cfc4b2;--cs-quiet:#a99f90;--cs-gold:#c6a267;--cs-gold-hi:#d6b67f;--cs-line:rgba(198,162,103,.24)}

/* 1. One Luxe Life, three ways in: the section ground and its own heading. The three cards keep their cream design. */
#v-home .band:has(> .wrap > .head.ch-head){background:var(--cs-char)!important;border-top-color:var(--cs-line)!important}
#v-home .band:has(> .wrap > .head.ch-head) > .wrap > .head.ch-head h2{color:var(--cs-ivory)!important}
#v-home .band:has(> .wrap > .head.ch-head) > .wrap > .head.ch-head .eyebrow{color:var(--cs-gold)!important;background:none!important;-webkit-text-fill-color:var(--cs-gold)!important}

/* 2. Join Luxe Life (★). The star keeps its gold; the solid gold button is unchanged; the outline button becomes
      Luxe Collective's outline style (gold edge, ivory text) because its light fill had poor contrast on charcoal. */
#join.chap{background:var(--cs-char)!important;border-top-color:var(--cs-line)!important}
#join .chap-n{color:var(--cs-gold)!important}
#join .chap-t .eyebrow{color:var(--cs-gold)!important;background:none!important;-webkit-text-fill-color:var(--cs-gold)!important}
#join .chap-t h2{color:var(--cs-ivory)!important}
#join .chap-t p,#join .chap-t .muted{color:var(--cs-text)!important}
#join .btn:not(.solid){background:transparent!important;border-color:var(--cs-gold)!important;color:var(--cs-ivory)!important}
#join .btn:not(.solid):hover,#join .btn:not(.solid):focus-visible{background:rgba(198,162,103,.14)!important;color:var(--cs-gold-hi)!important}

/* 3. Site footer (one footer for the whole site). Inline styles use var(--gold)/var(--muted), so those are re-pointed here. */
footer.site{--gold:var(--cs-gold);--muted:var(--cs-quiet);background:var(--cs-char)!important;border-top:1px solid var(--cs-line)!important}
footer.site .tagline{color:var(--cs-gold)!important}
footer.site p,footer.site p.muted{color:var(--cs-text)!important}
footer.site a{color:var(--cs-text)}footer.site a:hover,footer.site a:focus-visible{color:var(--cs-gold-hi)!important}
footer.site .cities{border-color:var(--cs-line)!important}
footer.site .cities span{color:var(--cs-quiet)!important}
footer.site .cities a{color:var(--cs-ivory)!important}
footer.site .cities a.on{color:var(--cs-gold)!important;border-color:var(--cs-gold)!important}
footer.site .cities .soon{color:var(--cs-quiet)!important;opacity:.85}

/* 4. Top header (one header for the whole site). Same layout and sizes: gold LUXE LIFE wordmark, ivory destination name between
      gold rules, soft-ivory slogan, ivory navigation with gold hover/current underline, gold outline "Member sign in", gold "Enquire now". */
header.site{background:var(--cs-char)!important;border-bottom:1px solid var(--cs-line)!important;box-shadow:0 8px 28px rgba(0,0,0,.28)!important}
header.site .dxb-brand span{background:none!important;color:var(--cs-gold)!important;-webkit-text-fill-color:var(--cs-gold)!important;text-shadow:none!important}
header.site .dxb-brand small{color:var(--cs-ivory)!important;-webkit-text-fill-color:var(--cs-ivory)!important}
header.site .dxb-brand small::before,header.site .dxb-brand small::after{background:var(--cs-gold)!important}
header.site .dxb-brand em{color:var(--cs-text)!important;-webkit-text-fill-color:var(--cs-text)!important}
header.site nav.main a{color:var(--cs-ivory)!important;-webkit-text-fill-color:var(--cs-ivory)!important}
header.site nav.main a:hover,header.site nav.main a:focus-visible,header.site nav.main a[aria-current],header.site nav.main a.on{color:var(--cs-gold-hi)!important;-webkit-text-fill-color:var(--cs-gold-hi)!important;border-bottom-color:var(--cs-gold)!important}
header.site nav.main a.loc-sw{color:var(--cs-gold)!important;-webkit-text-fill-color:var(--cs-gold)!important;border-color:rgba(198,162,103,.6)!important}
header.site nav.main a.loc-sw:hover,header.site nav.main a.loc-sw:focus-visible{background:rgba(198,162,103,.14)!important;color:var(--cs-gold-hi)!important;-webkit-text-fill-color:var(--cs-gold-hi)!important}

/* 5. "Book a table" box (homepage; the same box also shows on the Concierge page). All charcoal: brighter gold labels,
      ivory heading, white typing inside dark fields with gold edges. The gold "Request my table" button is unchanged. */
#ch-concierge .quick-panel{background:var(--cs-char)!important;border-color:rgba(198,162,103,.45)!important}
#ch-concierge .quick-head{border-color:var(--cs-line)!important}
#ch-concierge .quick-head .eyebrow{color:#dcbd84!important;-webkit-text-fill-color:#dcbd84!important;background:none!important}
#ch-concierge .quick-head h2{color:var(--cs-ivory)!important;-webkit-text-fill-color:var(--cs-ivory)!important}
#ch-concierge .quick-head p,#ch-concierge .quick-head .muted{color:var(--cs-text)!important}
#ch-concierge .quick-form{background:transparent!important}
#ch-concierge label{color:#dcbd84!important;-webkit-text-fill-color:#dcbd84!important}
#ch-concierge input,#ch-concierge select,#ch-concierge textarea{background-color:#222120!important;border-color:rgba(220,189,132,.42)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;color-scheme:dark}
#ch-concierge input:focus,#ch-concierge select:focus,#ch-concierge textarea:focus{border-color:#dcbd84!important;outline:none;box-shadow:0 0 0 2px rgba(220,189,132,.22)!important}
#ch-concierge input::placeholder,#ch-concierge textarea::placeholder{color:#b8afa2!important;-webkit-text-fill-color:#b8afa2!important}
#ch-concierge select option{background:#191919;color:#fff}
#ch-concierge input[aria-invalid=true],#ch-concierge select[aria-invalid=true]{border-color:#e8a08b!important}
#ch-concierge .err{color:#f0b3a1!important}
/* Restaurant search list and the chosen-restaurant box */
#ch-concierge .vp-list{background:#1f1e1c!important;border-color:rgba(220,189,132,.42)!important;box-shadow:0 18px 40px rgba(0,0,0,.5)!important}
#ch-concierge .vp-list li{color:#fff!important}
#ch-concierge .vp-list li[aria-selected=true],#ch-concierge .vp-list li:hover{background:#2c2a27!important}
#ch-concierge .vp-list .vp-count,#ch-concierge .vp-list .vp-cu,#ch-concierge .vp-list li.vp-none{color:#b8afa2!important}
#ch-concierge .vp-list li.vp-alt,#ch-concierge .vp-list mark{color:#dcbd84!important}
#ch-concierge .vp-picked{background:#222120!important;border-color:#dcbd84!important;color:#fff!important}
#ch-concierge .vp-picked *:not(button):not(.vp-tick):not(svg):not(path){color:#fff!important}
/* Message after sending */
#ch-concierge .result{background:#222120!important;color:var(--cs-ivory)!important}
#ch-concierge .result h3,#ch-concierge .result h4,#ch-concierge .result b,#ch-concierge .result strong{color:#dcbd84!important}
#ch-concierge .result p,#ch-concierge .result li{color:var(--cs-text)!important}
#ch-concierge .vp-clear{color:#dcbd84!important}
#ch-concierge .result .eyebrow{color:#dcbd84!important;-webkit-text-fill-color:#dcbd84!important;background:none!important}
#ch-concierge .btn:not(.solid){background:transparent!important;border-color:#dcbd84!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
#ch-concierge .btn:not(.solid):hover,#ch-concierge .btn:not(.solid):focus-visible{background:rgba(220,189,132,.14)!important}

/* 6. "Book" page form (#book: opened from The Guide, venue pages and "Enquire"). Same approved treatment as the
      "Book a table" box: charcoal box, brighter gold labels, white typing in dark fields; gold submit button unchanged. */
#f-book.lux{background:var(--cs-char)!important;border-color:rgba(198,162,103,.45)!important;box-shadow:0 22px 60px rgba(0,0,0,.25)!important}
#f-book label,#f-book legend{color:#dcbd84!important;-webkit-text-fill-color:#dcbd84!important}
#f-book label .muted,#f-book legend .muted,#f-book label small,#f-book legend small{color:#b8afa2!important;-webkit-text-fill-color:#b8afa2!important}
#f-book input:not([type=checkbox]):not([type=radio]),#f-book select,#f-book textarea{background-color:#222120!important;border-color:rgba(220,189,132,.42)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;color-scheme:dark}
#f-book input:focus,#f-book select:focus,#f-book textarea:focus{border-color:#dcbd84!important;outline:none;box-shadow:0 0 0 2px rgba(220,189,132,.22)!important}
#f-book input::placeholder,#f-book textarea::placeholder{color:#b8afa2!important;-webkit-text-fill-color:#b8afa2!important}
#f-book select option{background:#191919;color:#fff}
#f-book input[aria-invalid=true],#f-book select[aria-invalid=true],#f-book .vp-cats[aria-invalid=true] .vp-cat{border-color:#e8a08b!important}
#f-book .err{color:#f0b3a1!important}
#f-book .muted,#f-book .vp-hint,#f-book p{color:var(--cs-text)!important}
#f-book .vp-hint b,#f-book .vp-hint strong,#f-book p b,#f-book p strong,#f-book .vp-hint a{color:#dcbd84!important}
/* Venue type cards */
#f-book .vp-cat{background:#222120!important;border-color:rgba(220,189,132,.42)!important;color:#fff!important}
#f-book .vp-cat:hover,#f-book .vp-cat:focus-visible{border-color:#dcbd84!important}
#f-book .vp-cat[aria-checked=true]{background:linear-gradient(180deg,#e9d3a6,#d8b77a)!important;border-color:#dcbd84!important;color:#2a160a!important}
#f-book .vp-cat small,#f-book .vp-cat span{color:inherit}
/* Chosen venue / "Other" card, and its Change button */
#f-book .vp-picked{background:#222120!important;border-color:#dcbd84!important}
#f-book .vp-picked b{color:#fff!important}
#f-book .vp-picked small{color:#b8afa2!important}
#f-book .vp-picked button:not(.vp-mia){background:transparent!important;border-color:#dcbd84!important;color:#fff!important}
#f-book .vp-picked button:not(.vp-mia):hover{background:rgba(220,189,132,.14)!important}
/* Venue search list */
#f-book .vp-clear,#f-book .vp-toggle{color:#dcbd84!important}
#f-book .vp-list{background:#1f1e1c!important;border-color:rgba(220,189,132,.42)!important;box-shadow:0 18px 40px rgba(0,0,0,.5)!important}
#f-book .vp-list li{color:#fff!important}
#f-book .vp-list li[aria-selected=true],#f-book .vp-list li:hover{background:#2c2a27!important}
#f-book .vp-list .vp-count,#f-book .vp-list .vp-cu,#f-book .vp-list li.vp-none{color:#b8afa2!important}
#f-book .vp-list li.vp-alt,#f-book .vp-list mark{color:#dcbd84!important}
/* Outline buttons inside the form (e.g. "Recommend somewhere") */
#f-book .btn:not(.solid){background:transparent!important;border-color:#dcbd84!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Book page: the message after sending (replaces the form in the same place) */
#r-book.result{background:var(--cs-char)!important;border-color:rgba(198,162,103,.45)!important;color:var(--cs-ivory)!important}
#r-book .eyebrow{color:#dcbd84!important;-webkit-text-fill-color:#dcbd84!important;background:none!important}
#r-book h2,#r-book h3,#r-book h4{color:#dcbd84!important;-webkit-text-fill-color:#dcbd84!important}
#r-book p,#r-book li{color:var(--cs-text)!important}
#r-book p b,#r-book p strong,#r-book .ok{color:#dcbd84!important}
#r-book .btn:not(.solid){background:transparent!important;border-color:#dcbd84!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
#r-book .btn:not(.solid):hover{background:rgba(220,189,132,.14)!important}