/* ServiceBuddy brand layer: the single source of brand tokens for the site, console, demos and widgets.
   Source of truth: brand-kit/ (ServiceBuddy_Brand_Guidelines.pdf v2.0) · rules summarised in docs/brand.md.
   Load it LAST on every page so it wins over older per-page styles.

   Palette: Buddy Navy #0B1F3A (primary) · Signal Orange #FF7A1A (accent) · Cloud White #FFFFFF
            Blush Pink #FFB3C1 (micro-accent only) · Mist #E9ECF1 (neutral surface) · Sky Ink #B8C8E4 (secondary text on navy)
   Contrast: white on orange FAILS (2.6:1) → orange surfaces always carry NAVY text (6.3:1).
             Orange text on white only for large display text, eyebrows and highlights; body copy is navy.
   Type: Fredoka SemiBold for display (headings, numbers, buttons), Nunito for reading. Noto fills other scripts. */
:root {
  --sb-navy: #0B1F3A; --sb-orange: #FF7A1A; --sb-white: #FFFFFF; --sb-blush: #FFB3C1; --sb-mist: #E9ECF1; --sb-sky: #B8C8E4;
  --sb-navy-2: #13294d; --sb-orange-soft: #FFF1E6;
  --sb-display: "Fredoka", "Noto Sans Arabic", "Noto Sans Thai", "Noto Sans Devanagari", "Noto Sans SC", system-ui, sans-serif;
  --sb-body: "Nunito", "Noto Sans Arabic", "Noto Sans Thai", "Noto Sans Devanagari", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  /* public site tokens (site.css) mapped onto the brand */
  --navy: var(--sb-navy); --navy-2: var(--sb-navy-2); --ink: var(--sb-navy);
  --saffron: var(--sb-orange); --coral: var(--sb-orange); --accent: var(--sb-orange);
  --grad: linear-gradient(135deg, #FF7A1A, #FF9545);
  --line: #E3E7EE; --paper-2: #F4F6F9;
  --serif: var(--sb-display); --sans: var(--sb-body);
}
html[lang="ar"] body, html[lang="th"] body, html[lang="hi"] body, html[lang="zh-hans"] body { font-family: var(--sb-body); }
h1, h2, h3, .page-title, .stats b, .kpi { font-family: var(--sb-display); font-weight: 600; letter-spacing: -.01em; }

/* logos: official artwork only (never rebuilt or retyped) */
.brand-logo { display: block; height: 34px; width: auto; }
.logo .brand-logo { height: 34px; } .logo.small .brand-logo { height: 28px; }
.brand-mark { width: 32px; height: 32px; flex: none; border-radius: 0; display: block; }

/* orange surfaces carry navy text (white on orange fails WCAG) */
.btn.lg, .hero .btn, .final .btn, .market-cta .btn, .final .btn, .slide:hover .slide-info .btn,
.demo-chat .dc-bar [data-handover], .demo-chat form .btn, .pager-mkt button.on, .mf-active, .bubble-a .retry,
.step span, a.tile:hover .tile-cta, .pc-ph, .sbg-btn, .pf-avatar { color: var(--sb-navy) !important; }
.btn.lg, .hero .btn, .final .btn, .market-cta .btn, .demo-chat form .btn, .sbg-btn { background: var(--sb-orange) !important; box-shadow: 0 8px 22px rgba(255,122,26,.25) !important; }
.btn.lg:hover, .hero .btn:hover, .final .btn:hover, .market-cta .btn:hover, .demo-chat form .btn:hover, .sbg-btn:hover { background: #FF8A33 !important; }
.btn, .sbg-btn { font-family: var(--sb-display); font-weight: 600; }

/* console (console.css) mapped onto the brand: navy for actions and links, orange for highlights */
.console-brand, body.console {
  --accent: var(--sb-navy); --accent-ink: #fff; --accent-soft: var(--sb-orange-soft); --side: var(--sb-navy); --side-ink: var(--sb-sky);
  --sans: var(--sb-body);
}
body.console .side-brand { display: block; padding: 6px 8px 14px; } body.console .side-brand .brand-logo { height: 30px; }
body.console .side-role { margin: -6px 8px 12px; font: 700 10.5px var(--sb-display); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-orange); }
body.console .logo.ws { background: rgba(255,255,255,.06); border-radius: 12px; padding: 8px 10px; margin: 0 0 12px; }
body.console .auth .logo .brand-logo { height: 38px; margin-bottom: 4px; }
body.console .nav a.on { box-shadow: inset 3px 0 0 var(--sb-orange); }
body.console h1, body.console h2 { font-family: var(--sb-display); font-weight: 600; }
body.console .btn { font-family: var(--sb-display); font-weight: 600; }
.mascot-hero { display: block; margin: 0 auto 10px; width: 180px; height: auto; filter: drop-shadow(0 14px 26px rgba(11,31,58,.16)); }
body.console .ws-exit { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--sb-sky); text-decoration: underline; }
/* one-click demo booking for signed-in guests */
.quick-book { display: flex; flex-direction: column; gap: 14px; }
.qb-who { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--paper-2); border-radius: 16px; }
.qb-who b { display: block; font-family: var(--sb-display); font-size: 18px; } .qb-who small { display: block; color: var(--ink-2); font-size: 13.5px; }
.qb-av { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; background: var(--sb-orange); color: var(--sb-navy); font: 600 22px var(--sb-display); }
.qb-av img { width: 100%; height: 100%; object-fit: cover; }
.qb-note { margin: 0; font-weight: 600; }
.qb-when { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-when input { position: absolute; opacity: 0; }
.qb-when span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 700; }
.qb-when input:checked + span { border-color: var(--sb-navy); background: var(--sb-navy); color: #fff; }
.qb-when input:focus-visible + span { outline: 3px solid var(--sb-orange); outline-offset: 2px; }
.qb-more summary { cursor: pointer; color: var(--ink-2); font-weight: 600; } .qb-more textarea { width: 100%; margin-top: 8px; }
.qb-done { margin: 0; padding: 14px; border-radius: 14px; background: #ecfdf3; color: #166534; font-weight: 700; }
.quick-book .btn.lg { align-self: flex-start; }
/* Meet Buddy: interactive 3D mascot (model-viewer loads only when the section scrolls into view) */
.meet-buddy { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 36px; align-items: center; margin-bottom: 44px; }
.mb-stage { position: relative; aspect-ratio: 1; border-radius: 28px; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 45%, rgba(255,122,26,.22), transparent 70%), linear-gradient(160deg, #0B1F3A, #13294d); }
.mb-stage model-viewer, .mb-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; --poster-color: transparent; background: transparent; }
.mb-poster { padding: 8%; } .mb-stage.ready .mb-poster { opacity: 0; transition: opacity .4s; }
.mb-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 600 12.5px var(--sb-body); color: var(--sb-sky);
  background: rgba(11,31,58,.6); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.mb-copy h2 { margin-top: 0; } .mb-copy .btn { margin-top: 10px; }
@media (max-width: 860px) { .meet-buddy { grid-template-columns: 1fr; } .mb-stage { max-width: 420px; margin: 0 auto; width: 100%; } }