/* ==========================================================================
   MBGC Property — brand theme
   ==========================================================================

   Single override layer implementing DESIGN.md (colour tokens §2, type scale
   §3, elevation §6). Imported last from style.css so it wins on the cascade
   without any vendor file being edited beyond that one import line — a script
   update can overwrite the theme's own CSS and this survives.

   Two things about the stock theme shape the approach here:

   1. Colours already live in custom properties (color.css), so the brand
      palette is applied by re-pointing those properties rather than restyling
      components. Anything that reads var(--primary-color) picks the amber up
      on its own.

   2. Type does NOT. The family is hardcoded as "Sen" in ten places across five
      files, and `body` carries `font-size: 16px !important; font-family: ...
      !important`. So the font rules below repeat those selectors and match the
      !important, which is why this file is more verbose than a token remap
      would suggest.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..700&family=Hanken+Grotesk:wght@300..700&display=swap");

/* --------------------------------------------------------------------------
   1. Brand tokens (DESIGN.md §2)
   -------------------------------------------------------------------------- */

:root {
    --mbgc-font-display: "Darker Grotesque", sans-serif;
    --mbgc-font-body: "Hanken Grotesk", sans-serif;

    --bg-deep: #16292d;
    --bg-deep-alt: #1f3a3f;
    --bg-cream: #f4f1ea;
    --surface-card: #ffffff;

    --accent-amber: #f5a623;
    --accent-amber-dark: #d98d12; /* the "darken 8%" hover from §4 */
    --accent-mist: #a8bdc3;

    --text-primary: #16292d;
    --text-inverse: #f4f1ea;
    --text-muted: #5c6e71;

    --border-hairline: #dad6cc;

    --state-success: #4e7c64;
    --state-error: #b0503c;
}

/* --------------------------------------------------------------------------
   2. Re-point the stock palette at the brand tokens

   These are the theme's own variables (color.css). Overriding them here is
   what carries the palette into every existing component. Values are mapped by
   the ROLE each stock token plays, not by visual similarity — e.g. --bg-3 is
   the theme's near-black section background, so it becomes the deep teal.
   -------------------------------------------------------------------------- */

:root {
    --primary-color: var(--accent-amber);
    --primary-color-rgb: 245, 166, 35;
    --primary-dark: var(--accent-amber-dark);

    --text-color-1: var(--text-primary);
    --text-color-2: var(--text-inverse);
    --text-color-3: var(--text-muted);

    --black-color: var(--bg-deep);
    --black-color-rgb: 22, 41, 45;

    --white-color: var(--surface-card);
    --white-color-rgb: 255, 255, 255;

    --border-1: var(--border-hairline);
    --border-2: var(--border-hairline);
    --border-3: var(--border-hairline);
    --border-4: var(--bg-deep-alt);

    /* Light surfaces collapse onto cream/white; the theme shipped ten near
       identical off-whites, which DESIGN.md §7 explicitly does not want. */
    --bg-1: var(--bg-cream);
    --bg-2: var(--bg-cream);
    --bg-3: var(--bg-deep);
    --bg-4: var(--bg-cream);
    --bg-5: var(--surface-card);
    --bg-6: var(--bg-cream);
    --bg-7: var(--bg-cream);
    --bg-8: var(--bg-cream);
    --bg-9: var(--surface-card);
    --bg-10: var(--bg-cream);
    --btn-bg: var(--bg-cream);

    /* Elevation (§6) — shadows tinted with the deep teal rather than grey. */
    --shadow-1: 0 2px 8px rgba(22, 41, 45, 0.08);
    --shadow-2: 0 12px 32px rgba(22, 41, 45, 0.14);
    --shadow-3: 0 24px 64px rgba(22, 41, 45, 0.22);
}

/* --------------------------------------------------------------------------
   3. Typography (DESIGN.md §3)

   Body copy is Hanken Grotesk; headlines are Darker Grotesque. Each selector
   below mirrors one the stock CSS hardcodes to "Sen".
   -------------------------------------------------------------------------- */

body {
    font-family: var(--mbgc-font-body) !important;
    font-size: 17px !important; /* §3 body; stock forces 16px !important */
    line-height: 1.6;
    color: var(--text-primary) !important;
    background: var(--bg-cream);
}

a,
a:hover,
a:focus,
p,
.main-menu .navigation > li > ul > li > ul > li > a,
.main-menu .navigation > li > ul > li > ul > li > a:before {
    font-family: var(--mbgc-font-body);
}

p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-primary);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--mbgc-font-display);
    color: var(--text-primary);
    letter-spacing: -0.25px;
}

/* Darker Grotesque runs small and light for its point size, so the display
   sizes below are the §3 scale rather than the theme's (h1 was 56px/500). */
h1, .h1 {
    font-size: 44px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.25px;
}

h2, .h2 {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
}

h3, .h3 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
}

h4, .h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

h5, .h5,
h6, .h6 {
    font-family: var(--mbgc-font-body);
    font-weight: 600;
    line-height: 1.4;
}

/* Hero/section-opening statements (§3 Display). Applied by adding
   class="mbgc-display" — not automatic, since the stock markup has no
   dedicated display level. */
.mbgc-display {
    font-family: var(--mbgc-font-display);
    font-size: 64px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.5px;
}

/* §3 Eyebrow — small uppercase label, always led by an amber dot (§7). */
.mbgc-eyebrow {
    font-family: var(--mbgc-font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mbgc-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-amber);
    flex-shrink: 0;
}

small,
.small,
figcaption {
    font-family: var(--mbgc-font-body);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.1px;
    color: var(--text-muted);
}

/* Form controls do not inherit font from body in any browser. */
input,
select,
textarea,
button,
.form-control,
.btn {
    font-family: var(--mbgc-font-body);
}

/* --------------------------------------------------------------------------
   4. Responsive type

   The §3 scale is desktop. Display at 64px and H1 at 44px overflow narrow
   viewports, so they step down; body stays 17px throughout for legibility.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .mbgc-display { font-size: 48px; }
    h1, .h1 { font-size: 36px; }
    h2, .h2 { font-size: 26px; }
}

@media (max-width: 767px) {
    .mbgc-display { font-size: 36px; }
    h1, .h1 { font-size: 30px; }
    h2, .h2 { font-size: 23px; }
    h3, .h3 { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   5. Help Centre

   The page is built from components the theme already styles (feature-box2
   cards, the Bootstrap accordion, common-title). What follows covers only the
   parts the theme has no equivalent for: an icon-font tile in place of the
   image tile, the topic filter chips, the policy and guide cards, and the
   contact panel. Everything below uses the brand tokens declared in section 1,
   so this page cannot drift from the rest of the site.
   -------------------------------------------------------------------------- */

.hc-hero {
    background: var(--bg-deep);
    color: var(--text-inverse);
    padding: 96px 0 80px;
}

.hc-hero-inner { max-width: 720px; }

.hc-hero h1 {
    color: var(--text-inverse);
    margin: 12px 0 16px;
}

.hc-hero p {
    color: var(--accent-mist);
    max-width: 60ch;
}

.hc-hero .mbgc-eyebrow { color: var(--accent-mist); }

.hc-hero-link {
    color: var(--accent-amber);
    font-weight: 600;
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hc-topics, .hc-answers { padding: 80px 0; }

/* feature-box2 expects an <img> tile; swap in the icon font at the same size. */
.hc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hc-icon i {
    font-size: 30px;
    color: var(--accent-amber);
    line-height: 1;
}

/* Standalone card. Mirrors .feature-box2's look (24px padding, 16px radius,
   hairline border, 60px icon tile) without inheriting it — that class is
   position:absolute above 992px and owned by a GSAP ScrollTrigger. */
.hc-topic-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
    cursor: pointer;
    transition: var(--transition);
}

.hc-topic-card:hover {
    transform: translateY(-2px); /* §4 card hover: lift, never scale */
    box-shadow: var(--shadow-2);
    border-color: var(--accent-amber);
}

.hc-topic-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.hc-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-cream);
}

.hc-icon i {
    font-size: 26px;
    color: var(--accent-amber);
    line-height: 1;
}

.hc-topic-number {
    font-family: var(--mbgc-font-display);
    font-size: 30px;
    font-weight: 300;
    color: var(--border-hairline);
    line-height: 1;
}

.hc-topic-title {
    font-size: 22px;
    margin-bottom: 8px;
}

.hc-topic-card p {
    font-size: 15px;
    color: var(--text-muted);
    flex-grow: 1;
}

.hc-topic-card:hover {
    transform: translateY(-2px); /* §4 card hover: lift, never scale */
    box-shadow: var(--shadow-2);
}

.hc-count {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    letter-spacing: 0.1px;
    color: var(--text-muted);
}

.hc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 32px;
}

.hc-chip {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--mbgc-font-body);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.hc-chip:hover { border-color: var(--accent-amber); }

.hc-chip.is-active {
    background: var(--accent-amber);
    border-color: var(--accent-amber);
    color: var(--bg-deep);
}

.hc-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px 0;
}

.hc-policies { margin-top: 56px; }

.hc-policy-card,
.hc-guide-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 20px;
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
    transition: var(--transition);
}

.hc-policy-card:hover,
.hc-guide-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
    border-color: var(--accent-amber);
}

.hc-policy-card h4,
.hc-guide-card h4 {
    font-family: var(--mbgc-font-display);
    font-size: 20px;
    margin-bottom: 8px;
}

.hc-policy-card p {
    font-size: 15px;
    color: var(--text-muted);
    flex-grow: 1;
}

.hc-policy-more,
.hc-guide-more,
.hc-hero-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-amber);
}

.hc-policy-more { margin-top: 16px; }

.hc-guides { padding: 80px 0; background: var(--bg-cream); }

.hc-guides-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
}

.hc-guides-head h3 { margin-top: 12px; }

/* Guide cards carry the article image, so they are structured rather than
   text-only like the policy cards above. */
.hc-guide-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
    transition: var(--transition);
}

.hc-guide-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
    border-color: var(--accent-amber);
}

.hc-guide-image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-cream);
}

.hc-guide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.hc-guide-card:hover .hc-guide-image img { transform: scale(1.03); }

.hc-guide-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px 24px 24px;
}

/* Which Help Centre topic this guide answers. */
.hc-guide-topic {
    font-family: var(--mbgc-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.hc-guide-card h4 {
    font-size: 19px;
    line-height: 1.3;
    margin-bottom: 16px;
    flex-grow: 1;
}

.hc-guides-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px 0 0;
}

.hc-contact { padding: 0 0 96px; }

.hc-contact-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border-radius: 28px;
    background: var(--bg-deep);
    color: var(--text-inverse);
}

.hc-contact-panel h3 { color: var(--text-inverse); }

.hc-contact-panel p {
    color: var(--accent-mist);
    margin-top: 8px;
}

.hc-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hc-btn {
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--mbgc-font-body);
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
}

.hc-btn-primary {
    background: var(--accent-amber);
    color: var(--bg-deep);
}

.hc-btn-primary:hover { background: var(--accent-amber-dark); }

.hc-btn-ghost {
    border: 1px solid var(--accent-mist);
    color: var(--text-inverse);
}

.hc-btn-ghost:hover { border-color: var(--accent-amber); }

@media (max-width: 767px) {
    .hc-hero { padding: 64px 0 56px; }
    .hc-topics, .hc-answers, .hc-guides { padding: 56px 0; }
    .hc-contact-panel { padding: 28px; }
}

/* --------------------------------------------------------------------------
   6. 404

   The error layout loads only bootstrap + style.css, so this page gets the
   brand stylesheet added to that layout as well. Everything below is scoped to
   .mbgc-404 and cannot affect the rest of the site.
   -------------------------------------------------------------------------- */

.mbgc-404 {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 80px 0;
    background: var(--bg-deep);
    overflow: hidden;
}

/* Photograph sits behind a teal scrim so the type keeps AA contrast (§9.4)
   regardless of what part of the image lands behind it. */
.mbgc-404-media {
    position: absolute;
    inset: 0;
    background-image: url("../../../upload/logo/mbgc-404-dock.webp");
    background-size: cover;
    background-position: center 60%;
    opacity: 0.38;
}

.mbgc-404::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-deep) 0%, rgba(22, 41, 45, 0.82) 45%, rgba(22, 41, 45, 0.35) 100%);
}

.mbgc-404 .container {
    position: relative;
    z-index: 2;
}

.mbgc-404-inner { max-width: 620px; }

.mbgc-404 .mbgc-eyebrow { color: var(--accent-mist); }

.mbgc-404 h1 {
    font-family: var(--mbgc-font-display);
    font-size: 56px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--text-inverse);
    margin: 16px 0;
}

.mbgc-404 p {
    font-family: var(--mbgc-font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--accent-mist);
    max-width: 52ch;
}

.mbgc-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.mbgc-404-btn {
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--mbgc-font-body);
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
}

.mbgc-404-btn-primary {
    background: var(--accent-amber);
    color: var(--bg-deep);
}

.mbgc-404-btn-primary:hover { background: var(--accent-amber-dark); }

.mbgc-404-btn-ghost {
    border: 1px solid var(--accent-mist);
    color: var(--text-inverse);
}

.mbgc-404-btn-ghost:hover { border-color: var(--accent-amber); }

.mbgc-404-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(168, 189, 195, 0.24);
    font-family: var(--mbgc-font-body);
    font-size: 14px;
}

.mbgc-404-links span { color: var(--text-muted); }

.mbgc-404-links a {
    color: var(--accent-mist);
    font-weight: 500;
}

.mbgc-404-links a:hover { color: var(--accent-amber); }

@media (max-width: 767px) {
    .mbgc-404 { min-height: auto; padding: 64px 0; }
    .mbgc-404 h1 { font-size: 34px; }
    .mbgc-404-media { background-position: center; opacity: 0.28; }
}

/* ==========================================================================
   7. Identity verification (KYC)

   Scoped entirely to .mbgc-kyc-*, so this cannot affect any other page. The
   stock page used raw Bootstrap defaults with no brand styling at all
   (bg-light, alert-info, badge bg-success-subtle) and gave almost no
   explanation of why the form exists, which read as a broken admin screen
   mid-booking. Field logic in the view is untouched — this is presentation
   only.
   ========================================================================== */

.mbgc-kyc-hero {
    background: var(--bg-deep);
    color: var(--text-inverse);
    padding: 56px 0 48px;
}

.mbgc-kyc-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--accent-mist);
}

.mbgc-kyc-crumbs a { color: var(--accent-mist); }
.mbgc-kyc-crumbs a:hover { color: var(--accent-amber); }
.mbgc-kyc-crumbs li:last-child { color: var(--text-inverse); }

.mbgc-kyc-hero .mbgc-eyebrow { color: var(--accent-mist); }

.mbgc-kyc-hero h1 {
    color: var(--text-inverse);
    font-size: 32px;
    margin: 10px 0 10px;
}

.mbgc-kyc-hero p {
    color: var(--accent-mist);
    max-width: 56ch;
}

.mbgc-kyc-body { padding: 48px 0 80px; }

/* The "why we ask" strip — the piece that was mostly missing. */
.mbgc-kyc-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.mbgc-kyc-why > div {
    padding: 20px;
    border-radius: 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
}

.mbgc-kyc-why i {
    font-size: 20px;
    color: var(--accent-amber);
    margin-bottom: 10px;
    display: block;
}

.mbgc-kyc-why strong {
    display: block;
    font-family: var(--mbgc-font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.mbgc-kyc-why p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.mbgc-kyc-card {
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
    border-radius: 20px;
    padding: 32px;
}

.mbgc-kyc-card-head h3 { margin-bottom: 8px; }

.mbgc-kyc-rejected {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(176, 80, 60, 0.08);
    border: 1px solid rgba(176, 80, 60, 0.3);
    color: var(--state-error);
    font-size: 14px;
}

.mbgc-kyc-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.mbgc-kyc-submit-row small {
    color: var(--text-muted);
    font-size: 13px;
}

/* Pending / approved status cards */
.mbgc-kyc-status {
    text-align: center;
    padding: 48px 32px;
}

.mbgc-kyc-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 26px;
    margin-bottom: 16px;
}

.mbgc-kyc-status.is-pending .mbgc-kyc-status-icon {
    background: rgba(245, 166, 35, 0.14);
    color: var(--accent-amber-dark);
}

.mbgc-kyc-status.is-approved .mbgc-kyc-status-icon {
    background: rgba(78, 124, 100, 0.14);
    color: var(--state-success);
}

.mbgc-kyc-status h3 { margin-bottom: 8px; }
.mbgc-kyc-status p { color: var(--text-muted); }

.mbgc-kyc-progress {
    max-width: 260px;
    height: 5px;
    border-radius: 999px;
    background: var(--bg-cream);
    margin: 20px auto 12px;
    overflow: hidden;
}

.mbgc-kyc-progress span {
    display: block;
    height: 100%;
    background: var(--accent-amber);
}

.mbgc-kyc-status small {
    color: var(--text-muted);
    font-size: 13px;
}

.mbgc-kyc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(78, 124, 100, 0.12);
    color: var(--state-success);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .mbgc-kyc-why { grid-template-columns: 1fr; }
    .mbgc-kyc-card { padding: 22px; }
}

/* --------------------------------------------------------------------------
   7. Curved circle badge — hide until genuinely curved

   circleType (jQuery plugin, parallax-scroll.js) runs on window load and is
   confirmed to complete correctly there; moving it earlier left the text
   split into character spans with no rotation applied (see script.js for the
   full account). Rather than change the trigger, the raw pre-curve text is
   hidden until the plugin finishes, so visitors see the centre icon
   immediately and the ring fades in once actually curved — never the
   uncurled flash. visibility (not display) is used so the element keeps real
   layout dimensions, since the plugin measures against them.
   -------------------------------------------------------------------------- */

/* Opacity is a plain transition, not a keyframe animation, so it cannot
   collide with the existing continuous-spin `animation: rotate ...` already
   declared on .curved-circle (01-global.css) — the CSS animation property
   holds one value per rule, and a second animation here would silently
   replace the spin rather than run alongside it. Base state stays visible:
   if JS never runs at all (blocked, failed request), the badge falls back to
   its original uncurled-but-visible look rather than staying blank forever. */
.curved-circle {
    transition: opacity 0.35s ease;
    color: var(--white-color) !important;

    /* circleType lays the ring out correctly at rest, but sizes the element
       box to only one line of text (~35px tall). The inherited
       `animation: rotate` (01-global.css) therefore spins the element about a
       point ~64px ABOVE the ring's real centre, so the ring orbits on an arm
       rather than turning in place — that, not the size or colour, was the
       badge swinging off the circle. The ring's centre sits exactly `radius`
       px below the element's top, where radius is the 81 that script.js
       passes to circleType, so pinning the origin there makes it rotate about
       itself. Measured, not eyeballed. If that radius changes, change 81px
       here to match. */
    position: absolute !important;
    left: 0;
    top: 4px; /* parent is 172px incl. 1px border, so its inner centre is 85px; 85 - 81 = 4 */
    width: 100%; /* fills the 170px padding box, so 50% is the true horizontal centre */
    height: auto;
    transform-origin: 50% 81px;

    /* The phrase covers ~267 degrees on its own, leaving a bare quarter of
       the ring. Letter-spacing widens each glyph box, which circleType
       measures when it distributes characters, so the text fans out to
       fill the circle instead of stopping short. Tuned by measuring the
       arc, not guessed: 2.1px lands at ~350 degrees, leaving a small
       deliberate break rather than a hole. */
    letter-spacing: 2.1px;
}

.curved-circle.curve-pending {
    visibility: hidden;
    opacity: 0;
}

.curved-circle.curve-ready {
    visibility: visible;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Scroll-world backgrounds
   These replace the two autoplaying background videos (25.85 MB in the hero,
   14.14 MB in Featured Residences — 40 MB of a page that has ~1.5 MB to spend
   if it wants to be useful inside 1.2s). Both are now a single ~130 KB still
   drifting slowly, which reads as motion without costing bandwidth.

   Only `transform` is animated. Animating background-position instead would
   repaint the whole layer every frame on the main thread; a transform is
   handed to the compositor and costs effectively nothing, which is what makes
   this viable on a phone.

   `alternate` matters: the image drifts one way then eases back, so there is
   no jump-cut when a loop restarts — the usual tell of a cheap CSS pan. 56s
   is deliberately slow enough to feel like ambience rather than movement.

   The layer is inset negatively and scaled slightly so panning can never
   expose an edge of the image.
   -------------------------------------------------------------------------- */
.mbgc-scroll-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Mirrors the stacking the <video> elements previously occupied, so the
   existing gradient overlays and content keep painting in the same order. */
.mbgc-scroll-bg--hero { z-index: -1; }
.mbgc-scroll-bg--featured { z-index: 0; }

.mbgc-scroll-bg-layer {
    position: absolute;
    inset: -8% -10%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translate3d(-2%, 0.6%, 0) scale(1.06);
    animation: mbgc-scroll-world 56s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes mbgc-scroll-world {
    from { transform: translate3d(-2%, 0.6%, 0) scale(1.06); }
    to   { transform: translate3d(2%, -1.2%, 0) scale(1.11); }
}

/* Visitors who ask for less motion get the same photograph, held still. */
@media (prefers-reduced-motion: reduce) {
    .mbgc-scroll-bg-layer {
        animation: none;
        transform: none;
        inset: 0;
    }
}

/* --------------------------------------------------------------------------
   mbgc-teal-scrim-removal
   The three photographic sections each carried a flat teal wash (the hero a
   0.78 -> 0.48 gradient, Featured and Amenities a flat 0.58) inherited from
   the era when the backgrounds were bright stock video. The photographs that
   replaced them are dusk shots that already carry that blue-green cast, so
   the scrim was doubling it and flattening the images.

   Removing it is safe, and that is measured rather than assumed. Sampling the
   raw pixels behind each piece of white text gives contrast ratios with NO
   scrim at all of 15.35:1 (hero headline), 11.14:1 (Featured wordmark) and
   8.22:1 (Amenities heading). WCAG AAA asks 7:1 for body text and 4.5:1 for
   large text, so every one clears the strictest bar on the photograph alone.
   If a lighter photograph is ever swapped in behind white text, re-measure —
   this removal is only safe because these particular images are dark.
   -------------------------------------------------------------------------- */
body .banner-section-three::after,
body .top-rated-destination-section::before,
body .popular-amenities-seciton::after {
    background: none;
}

/* The wordmark sat at 0.12 alpha, tuned against the old teal scrim. With the
   scrim gone it has to hold its own against a brighter photograph, so it goes
   up to 0.32 — still a backdrop rather than a headline, but legible. */
.special-text {
    color: rgba(244, 241, 234, 0.32);
}

/* --------------------------------------------------------------------------
   mbgc-footer-teal
   The footer is the base of the site, so it carries the brand teal rather than
   reading as a bare photograph. Applied as a scrim over the image layer rather
   than by dropping that layer's opacity, so the tint can be tuned without
   also washing out the photograph's own contrast.

   0.55 is measured, not picked by eye: over this image's average the composite
   takes white text from 7.95:1 to 11.49:1 while the photograph stays plainly
   readable. Note it does NOT rescue the mid-grey (#909090) footer body text,
   which sits at 3.60:1 here and fails WCAG AA at every scrim level — that
   needs a lighter text colour, not more teal.
   -------------------------------------------------------------------------- */
.main-footer .bg-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(22, 41, 45, 0.55);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   mbgc-footer-social
   The social icons sat at #909090 while every link around them is cream. At
   3.58:1 against the footer they do clear WCAG's 3:1 bar for non-text
   elements, so this is a consistency fix rather than a compliance one — they
   simply read as dimmer than the links they sit beside.
   -------------------------------------------------------------------------- */
.main-footer i.fab {
    color: var(--bg-cream);
}