/* Styles for the Work and Speaking pages (clean white design). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.rb-page {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #ffffff;
  color: #374151;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.rb-page img { max-width: 100%; }
.rb-page a { text-decoration: none; }
.rb-page a:hover { opacity: .8; }

/* layout */
.rb-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.rb-hero { max-width: 1200px; margin: 0 auto; padding: 80px 32px 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.rb-hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.rb-hero-media { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.rb-hero-media img { width: 100%; max-width: 440px; height: 540px; object-fit: cover; object-position: top; border-radius: 16px; background: #f5f5f5; }
.rb-hero-media.wide img { max-width: 520px; height: 420px; object-position: center top; }
.rb-block { max-width: 1200px; margin: 0 auto; padding: 0 32px 56px; display: flex; flex-direction: column; gap: 16px; }
.rb-section { border-top: 1px solid #e5e7eb; }
.rb-section-inner { max-width: 1200px; margin: 0 auto; padding: 56px 32px; display: flex; flex-direction: column; gap: 24px; }
.rb-split { flex-direction: row; flex-wrap: wrap; gap: 24px 64px; }
.rb-split > h2 { flex: 1 1 280px; }
.rb-split > .rb-col { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* type */
.rb-page h1 { margin: 0; font-size: 52px; font-weight: 600; line-height: 1.08; letter-spacing: -1.8px; color: #111111; }
.rb-page h2 { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -1px; color: #111111; }
.rb-page h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: #111111; }
.rb-lede { margin: 0; font-size: 20px; line-height: 1.5; color: #374151; max-width: 560px; }
.rb-sub { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 600; color: #111111; max-width: 560px; }
.rb-cred { margin: 0; font-size: 14px; line-height: 1.5; color: #4b5563; max-width: 560px; }
.rb-body { margin: 0; font-size: 18px; line-height: 1.6; }
.rb-body strong { color: #111111; }
.rb-wide { max-width: 800px; }
.rb-big { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.3; letter-spacing: -0.6px; color: #111111; }
.rb-mid { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: -0.3px; color: #111111; max-width: 800px; }
.rb-closer { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.4px; color: #111111; }
.rb-note { font-size: 14px; color: #4b5563; }
.rb-link { color: #111111; font-weight: 500; text-decoration: underline !important; }

/* pill */
.rb-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 9999px; background: #f5f5f5; font-size: 13px; font-weight: 500; color: #111111; }
.rb-pill i { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: #8b5cf6; }
.rb-pill.orange i { background: #fb923c; }
.rb-pill.white { background: #ffffff; border: 1px solid #e5e7eb; }

/* buttons */
.rb-actions { padding-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 600; background: #111111; color: #ffffff; border: 1px solid #111111; cursor: pointer; }
.rb-btn.outline { background: #ffffff; color: #111111; }
.rb-btn.soft { background: #ffffff; color: #111111; border-color: #d1d5db; }
.rb-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: 1px solid #d1d5db; background: #ffffff; color: #111111; }
.rb-btn.softer { background: #ffffff; color: #111111; border-color: #e5e7eb; }

/* results tiles */
.rb-label { font-size: 14px; font-weight: 500; color: #111111; }
.rb-tiles { display: flex; flex-wrap: wrap; gap: 16px; }
.rb-tile { flex: 1 1 220px; background: #f5f5f5; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 4px; }
.rb-tile .k { font-size: 14px; color: #4b5563; }
.rb-tile .v { font-size: 48px; font-weight: 600; line-height: 1.1; letter-spacing: -1.5px; color: #111111; }

/* quotes */
.rb-quote { margin: 0; background: #f5f5f5; border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.rb-quote blockquote { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.35; letter-spacing: -0.6px; color: #111111; }
.rb-quote figcaption, .rb-card figcaption { font-size: 14px; color: #4b5563; }
.rb-quote figcaption b, .rb-card figcaption b { font-weight: 600; color: #111111; }
.rb-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.rb-card { flex: 1 1 440px; margin: 0; background: #f5f5f5; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.rb-card p { margin: 0; font-size: 16px; line-height: 1.5; color: #111111; font-weight: 500; }
.rb-card blockquote { margin: 0; border-left: 3px solid #111111; padding-left: 16px; font-size: 18px; line-height: 1.5; color: #374151; }

/* diagrams */
.rb-figure { max-width: 1100px; }
.rb-figure.full { max-width: 1200px; }
.rb-figure img { width: 100%; height: auto; display: block; border: 1px solid #e5e7eb; border-radius: 16px; }

/* booking */
.rb-touch { border-top: 1px solid #e5e7eb; background: #f5f5f5; }
.rb-touch .rb-section-inner { padding: 72px 32px; }
.rb-touch h2 { max-width: 760px; font-size: 40px; line-height: 1.12; letter-spacing: -1.4px; }
.rb-book { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; }
.rb-book-fallback { min-height: 420px; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.rb-book-fallback .t { font-size: 16px; font-weight: 600; color: #111111; }
.rb-book-fallback .s { font-size: 14px; color: #4b5563; max-width: 460px; }
.rb-book.live { height: 760px; }
@media (max-width: 720px) { .rb-book.live { height: 900px; } }
.rb-touch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

/* speaking */
.rb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-chip { display: inline-block; padding: 8px 14px; border-radius: 9999px; background: #f5f5f5; font-size: 14px; font-weight: 600; color: #111111; }
.rb-talk { border-top: 1px solid #e5e7eb; padding-top: 16px; }
.rb-talk .t { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; color: #111111; margin-bottom: 6px; }
.rb-talk .d { font-size: 18px; line-height: 1.6; }
.rb-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 18px; line-height: 1.6; }
.rb-rows { display: flex; flex-direction: column; }
.rb-row { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; border-top: 1px solid #e5e7eb; }
.rb-row .r { flex: 0 0 110px; font-size: 14px; font-weight: 600; color: #111111; }
.rb-row .a { flex: 1 1 220px; font-size: 18px; color: #111111; }
.rb-row .b { flex: 1 1 220px; font-size: 18px; }
.rb-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.rb-gallery figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rb-gallery img { width: 100%; height: 240px; object-fit: cover; border-radius: 12px; background: #f5f5f5; }
.rb-gallery figcaption { font-size: 14px; font-weight: 500; color: #111111; }

@media (max-width: 720px) {
  .rb-hero { padding: 48px 20px 32px; gap: 32px; }
  .rb-wrap, .rb-block, .rb-section-inner, .rb-touch .rb-section-inner { padding-left: 20px; padding-right: 20px; }
  .rb-page h1 { font-size: 38px; letter-spacing: -1.2px; }
  .rb-touch h2 { font-size: 30px; }
  .rb-quote { padding: 28px; }
  .rb-quote blockquote, .rb-big { font-size: 22px; }
  .rb-hero-media img, .rb-hero-media.wide img { height: 380px; }
}