/*
Theme Name: Rikka Brandon
Theme URI: https://rikkabrandon.com
Author: Rikka Brandon
Description: Lean custom block theme for RikkaBrandon.com. No page builder, no framework. Server-rendered, zero front-end JavaScript on content pages.
Version: 1.42.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: rikkabrandon
*/

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { max-width: 100%; height: auto; }
::selection { background: #EAE44F; color: #000; }
:where(a):focus-visible,
:where(button):focus-visible { outline: 3px solid #EAE44F; outline-offset: 2px; }

/* Black Diamond is a display face. NEVER apply -webkit-text-stroke to it:
   that is what made it render ragged in the AI Studio build. */
.has-black-diamond-font-family {
  letter-spacing: .02em;
  -webkit-text-stroke: 0;
}

/* ---------- dark site chrome ---------- */
.rb-dark { background: #111; color: #fff; }

/* ---------- header ---------- */
.rb-header {
  position: sticky; top: 0; z-index: 50;
  background: #111;
  border-bottom: 1px solid rgb(255 255 255 / .10);
}
.rb-header .wp-block-navigation { gap: 2rem; }
.rb-header .wp-block-navigation a {
  font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: #fff; text-decoration: none;
}
.rb-header .wp-block-navigation a:where(:not(.wp-element-button)),
.rb-header .wp-block-navigation a:where(:not(.wp-element-button)):visited {
  color: #fff; text-decoration: none;
}
.rb-header .wp-block-navigation a:where(:not(.wp-element-button)):hover,
.rb-header .wp-block-navigation a:where(:not(.wp-element-button)):focus-visible {
  color: #EAE44F;
}
/* footer links inherit the same treatment */
.rb-footer a:where(:not(.wp-element-button)) { color: #d4d4d8; text-decoration: none; }
.rb-footer a:where(:not(.wp-element-button)):hover { color: #EAE44F; }
.rb-logo img { height: 2.5rem; width: auto; object-fit: contain; }

/* ---------- hero ---------- */
.rb-hero { position: relative; overflow: hidden; background: #111; color: #fff; }
.rb-hero__watermark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; text-align: center; user-select: none; pointer-events: none;
  opacity: .30; line-height: .82;
  font-weight: 900; letter-spacing: -.045em; white-space: nowrap;
  text-transform: uppercase;
  font-size: clamp(4rem, 24vw, 24rem);
  /* Royal Blue read as near-black against #111 and the whole mark disappeared;
     start the ramp at Ocean so the top line is actually visible. */
  background: linear-gradient(180deg, #0086C4 0%, #4CBEDC 50%, #EAE44F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rb-hero__wm-1 { font-size: 1.3em; display: inline-block; }
.rb-hero__wm-2 { font-size: .86em; display: inline-block; }

/* Close the dead space between the photo on the left and the copy on the right
   by enlarging the subject rather than widening the text measure. */
@media (min-width: 782px) {
  .rb-hero--photo .rb-hero__bg img { transform: scale(1.26); transform-origin: 20% top; }
}
.rb-hero__inner { position: relative; z-index: 10; }
.rb-hero__inner > .wp-block-columns > .wp-block-column:first-child {
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* ---------- offset accent block (Done In A Day etc.) ---------- */
.rb-offset { position: relative; }
.rb-offset::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(-1rem, -1rem);
  background: #4CBEDC; border-radius: .75rem; z-index: -1;
}
.rb-offset img { border-radius: .75rem; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ---------- footer ---------- */
.rb-footer { background: #111; color: #fff; border-top: 1px solid rgb(255 255 255 / .05); }
.rb-footer h2, .rb-footer h3 {
  font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #FFFFFF;
}
.rb-footer a { color: #d4d4d8; text-decoration: none; }
.rb-footer a:hover { color: #EAE44F; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- testimonial carousel ----------
   CSS scroll-snap. No JavaScript: swipe on touch, drag or shift-scroll on
   desktop, and it degrades to a plain scrollable row where snap is unsupported. */
.rb-testimonials .wp-block-post-template {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: #EAE44F rgb(255 255 255 / .1);
  list-style: none;
}
.rb-testimonials .wp-block-post-template > li {
  flex: 0 0 min(88%, 30rem);
  scroll-snap-align: center;
  background: rgb(255 255 255 / .04);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 1rem;
  padding: 2rem;
  margin: 0;
}
.rb-testimonials .wp-block-post-template::-webkit-scrollbar { height: 6px; }
.rb-testimonials .wp-block-post-template::-webkit-scrollbar-thumb { background: #EAE44F; border-radius: 3px; }
.rb-testimonials .wp-block-post-excerpt {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: #FFFFFF;
}
.rb-testimonials .wp-block-post-title { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.rb-testimonials .wp-block-post-content { font-size: 1.125rem; line-height: 1.6; }

/* ---------- association logo bar ---------- */
.rb-logobar { background: #1a1a1a; border-block: 1px solid rgb(255 255 255 / .05); }
.rb-logobar figure { margin: 0; }
.rb-logobar img { height: clamp(2rem, 4vw, 3.5rem); width: auto; object-fit: contain; opacity: .85; }

/* ---------- problem cards ---------- */
.rb-card {
  background: rgb(0 0 0 / .03);
  border: 1px solid rgb(0 0 0 / .08);
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
}

/* full-width sections keep readable inner padding */
.alignfull { padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem); }
.alignfull > .wp-block-group,
.alignfull > .wp-block-columns { max-width: 1200px; margin-inline: auto; }

/* ---------- hero headline — matches the AI Studio build exactly ----------
   RECRUIT / Retain / ROCK stacked, with "Retain" in Sky, rotated -3deg and
   pulled up with negative margins so it overlaps the lines above and below. */
.rb-hero__h1 {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.5rem;
  font-weight: 900;
  letter-spacing: -.025em;
  font-size: clamp(3.75rem, 9vw, 7.5rem);
}
.rb-hero__line {
  color: #fff;
  text-transform: uppercase;
  line-height: .85;
}
.rb-hero__line:last-of-type { color: #EAE44F; }

/* chair cutout sits up and to the right of centre */
@media (min-width: 782px) {
  .rb-hero .wp-block-column:last-child img { transform: translate(4%, -5%); }
}
.rb-hero__retain {
  font-weight: 400;            /* Black Diamond ships 400 only */
  font-synthesis: none;        /* never let the browser fake bold */
  font-family: 'Black Diamond', 'Rock Salt', cursive;
  color: #4CBEDC;
  text-transform: none;
  font-size: clamp(3.6rem, 9vw, 7.6rem);
  margin: -10px 0 -10px 1rem;
  transform: rotate(-3deg);
  position: relative;
  z-index: 10;
  -webkit-text-stroke: 0;
}
@media (min-width: 768px) {
  .rb-hero__retain { margin: -20px 0 -20px 2rem; }
}

/* ---------- sections must butt together, no editor gaps ---------- */
.wp-site-blocks > .alignfull,
.entry-content > .alignfull,
.wp-block-post-content > .alignfull { margin-block: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-top: 0; }

/* ---------- dark problem cards ---------- */
.rb-card--dark {
  background: rgb(255 255 255 / .04);
  border-color: rgb(255 255 255 / .08);
}

/* ---------- Sun-yellow closing CTA ---------- */
.rb-cta-sun { background: #EAE44F; color: #000; }
.rb-cta-sun .wp-block-button__link {
  background: #111; color: #EAE44F;
}

/* ---------- kill the white strips between top-level sections ----------
   WordPress puts a block-gap margin between every direct child of
   .wp-site-blocks, which showed the white body background between the
   header, the content, and the footer. Sections own their own padding. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }
body { background: #111; }

/* ---------- 4. framework band (Sun yellow, Ocean words) ---------- */
.rb-framework { background: #EAE44F; color: #000; text-align: center; }
.rb-framework__words {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem; margin-top: 1rem;
  font-weight: 900; letter-spacing: -.025em;
  font-size: clamp(3rem, 8vw, 6rem);
}
/* Recruit / Retain / Rock each carry their own brand colour */
.rb-framework__words span:nth-child(1) { color: #003e94; }  /* Royal Blue */
.rb-framework__words span:nth-child(2) { color: #0086C4; }  /* Ocean */
.rb-framework__words span:nth-child(3) { color: #17789B; }  /* Sky, deepened: #4CBEDC reads 1.62:1 on sun and fails */
.rb-framework p.has-sm-font-size { font-size: clamp(1rem, 1.5vw, 1.1875rem) !important; letter-spacing: .16em; }

/* ---------- 6. about split — People Expert in Black Diamond ---------- */
.rb-about__h2 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 900; letter-spacing: -.025em; line-height: 1.1;
  margin: 0 0 2rem;
}
.rb-about__script {
  font-weight: 400;
  font-synthesis: none;
  display: block; margin-top: .5rem;
  font-family: 'Black Diamond', 'Rock Salt', cursive;
  color: #EAE44F;
  font-size: clamp(3rem, 6vw, 4.5rem);
  -webkit-text-stroke: 0;
}

/* ---------- 8. light section ---------- */
.rb-light { background: #fff; color: #000; }
.rb-light .wp-block-button__link { background: #003e94; color: #fff; }

/* outline buttons on dark cards */
.rb-card--dark .is-style-outline .wp-block-button__link {
  background: transparent; color: #EAE44F; border: 2px solid #EAE44F;
}

/* ---------- page hero surfaces (exact from the AI Studio build) ---------- */
.rb-hero-black { background: #000; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .05); }
.rb-hero-royal { background: #003e94; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .05); }
.rb-hero-sun   { background: #EAE44F; color: #000; border-bottom: 1px solid rgb(0 0 0 / .05); text-align: center; }
.rb-hero-sun .wp-block-button__link { background: #000; color: #EAE44F; }

/* ---------- Ocean CTA band (Work With Me) ---------- */
.rb-ocean { background: #0086C4; color: #fff; text-align: center; }
.rb-ocean .wp-block-button__link { background: #EAE44F; color: #000; }

/* light sections keep dark text on their buttons readable */
.rb-light h2, .rb-light h3, .rb-light p, .rb-light li { color: #000; }
.rb-dark  h2, .rb-dark  h3 { color: #fff; }


/* ═══════════ Black Diamond script system ═══════════
   One place that governs every script usage. The AI Studio build applied
   -webkit-text-stroke: 1px currentColor here, which is what made the face
   look jagged. It is explicitly zeroed and must stay that way. */
.rb-script,
.rb-headline-script > span,
.rb-cta-script,
.rb-page-h1 > span,
.has-black-diamond-font-family {
  font-family: 'Black Diamond', 'Rock Salt', cursive;
  font-weight: 400;
  letter-spacing: normal;
  -webkit-text-stroke: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.rb-script--sun   { color: #EAE44F; }
.rb-script--sky   { color: #4CBEDC; }
.rb-script--ocean { color: #0086C4; }
.rb-script--black { color: #000; }

.rb-script--lg         { font-size: clamp(2.25rem, 4vw, 3rem); margin-bottom: .5rem; }
.rb-script--num        { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.rb-script--block      { display: block; margin-top: .5rem; font-size: clamp(2.75rem, 6vw, 4.5rem); }


/* headline wrappers that contain a script span */
.rb-headline-script {
  text-align: center; font-weight: 900; letter-spacing: -.025em; line-height: 1.1;
  font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 1rem;
}
.rb-cta-script {
  text-align: center; margin: 0 0 1rem;
  font-family: 'Black Diamond', 'Rock Salt', cursive;
  color: #0086C4; font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  -webkit-text-stroke: 0;
}
.rb-page-h1 {
  font-weight: 900; letter-spacing: -.025em; line-height: 1.05;
  font-size: clamp(2.5rem, 5vw, 4.5rem); margin: 0 0 1rem;
}
/* Photo heroes carry an eyebrow above the H1; balance the pair. */
.rb-hero--photo .rb-page-h1 { font-size: clamp(2.1rem, 3.6vw, 3.25rem); }
.rb-hero--photo .rb-page-h1,
.rb-hero--photo > p,
.rb-hero__inner p,
.rb-reality__h2,
.rb-about__h2 { text-wrap: balance; }
.rb-hero--photo p.has-sm-font-size {
  font-size: clamp(1rem, 1.5vw, 1.1875rem) !important;
  letter-spacing: .18em;
}

/* Heroes were running 425px to 679px tall depending on how much copy each page
   carried, which read as five different templates. Hold a common floor so they
   scan as one system; content still grows past it if it has to. */
@media (min-width: 782px) {
  .rb-hero--photo { min-height: 36rem; }
}
.rb-page-h1--center { text-align: center; }


/* ═══════════ Black Diamond: never synthesise weight ═══════════
   The face ships a single 400 weight. Inheriting a bold weight makes the
   browser fake it by smearing the outlines, which is what made the script
   look chunky and jagged. Both properties below must stay. */
.rb-script,
.rb-hero__retain,
.rb-about__eyebrow-bump, .rb-about__script,
.rb-cta-script,
.rb-headline-script > span,
.rb-page-h1 > span,
.has-black-diamond-font-family {
  font-weight: 400 !important;
  font-synthesis: none;
  -webkit-text-stroke: 0;
}

/* ═══════════ 3. The Reality in Building Products Right Now ═══════════ */
.rb-reality__h2 {
  font-weight: 900; letter-spacing: -.025em; line-height: .98;
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin: .75rem 0 0; max-width: 52rem; color: #fff;
}
/* section reads left-aligned rather than indented, and the body copy is white
   rather than grey */
.rb-reality { text-align: left; }
.rb-reality > *,
.rb-reality__h2,
.rb-reality__close { margin-left: 0 !important; margin-right: auto !important; }
.rb-reality p.has-sm-font-size { font-size: clamp(1rem, 1.5vw, 1.1875rem) !important; letter-spacing: .16em; }
.rb-reality .has-zinc-color { color: #fff !important; }
.rb-reality__stats .rb-stat { padding-left: 1.5rem; }
.rb-reality__h2 span { display: block; color: #EAE44F; }
.rb-reality__stats .rb-stat {
  border-left: 1px solid #4CBEDC;
  padding-left: 2rem;
}
.rb-stat__num {
  font-size: clamp(2.5rem, 4vw, 3rem);
  font-weight: 900; color: #EAE44F; margin-bottom: 1rem; line-height: 1;
}
.rb-reality__close {
  max-width: 56rem; color: #FFFFFF;
  font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.6;
}
.rb-reality__close strong { color: #4CBEDC; font-weight: 700; }

/* credentials list with the » marker from the design */
.rb-creds ul.wp-block-list { list-style: none; padding-left: 0; }
.rb-creds ul.wp-block-list li { position: relative; padding-left: 1.5rem; margin-bottom: .75rem; color: #FFFFFF; }
.rb-creds ul.wp-block-list li::before { content: "»"; position: absolute; left: 0; color: #4CBEDC; font-weight: 700; }
.rb-creds ul.wp-block-list li strong { color: #fff; }

/* ═══════════ 5. How Rikka Can Help You — three solid cards ═══════════
   Circular photo overlaps the top edge of each card, ringed in the page
   background colour. Matches the AI Studio build exactly. */
.rb-help__grid {
  display: grid; gap: 2rem;
  max-width: 72rem; margin: 5rem auto 0;
}
@media (min-width: 768px) { .rb-help__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .rb-help__grid { gap: 2rem; } }

.rb-help__card { position: relative; padding-top: 6rem; display: flex; }
.rb-help__photo {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 12rem; height: 12rem; border-radius: 9999px; overflow: hidden;
  border: 6px solid #111; background: #222; z-index: 10;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .35);
}
.rb-help__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.rb-help__body {
  width: 100%;
  padding: 8.75rem 1.5rem 3.75rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
@media (min-width: 1024px) { .rb-help__body { padding-left: 2rem; padding-right: 2rem; } }

.rb-help__script {
  font-family: 'Black Diamond', 'Rock Salt', cursive;
  font-weight: 400 !important; font-synthesis: none; -webkit-text-stroke: 0;
  font-size: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: .5rem; line-height: 1;
}
.rb-help__sub {
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: .875rem; margin-bottom: 1.5rem;
}
.rb-help__text { flex-grow: 1; margin: 0 0 2rem; font-size: 1rem; line-height: 1.65; }
.rb-help__btn {
  display: inline-block; border-radius: 9999px;
  padding: 1rem 2rem; font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
}

/* card 1 — Sun */
.rb-help__card--sun .rb-help__body { background: #EAE44F; color: #000; }
.rb-help__card--sun .rb-help__text { color: rgb(0 0 0 / .8); }
.rb-help__card--sun .rb-help__btn  { background: #000; color: #fff; }
/* card 2 — Ocean */
.rb-help__card--ocean .rb-help__body { background: #0086C4; color: #fff; }
.rb-help__card--ocean .rb-help__text { color: rgb(255 255 255 / .85); }
.rb-help__card--ocean .rb-help__btn  { background: #EAE44F; color: #000; }
/* card 3 — Sky */
.rb-help__card--sky .rb-help__body { background: #4CBEDC; color: #000; }
.rb-help__card--sky .rb-help__text { color: rgb(0 0 0 / .8); }
.rb-help__card--sky .rb-help__btn  { background: #000; color: #fff; }

/* ═══════════ inner-page heroes: full-bleed photo, content right-aligned ═══════════ */
.rb-hero--photo { position: relative; overflow: hidden; }
.rb-hero__bg { position: absolute; inset: 0; z-index: 0; }
.rb-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 15% center; display: block;
}
.rb-hero__tint { position: absolute; inset: 0; }
@media (min-width: 768px) { .rb-hero__tint { background: transparent !important; } }

/* content sits above the photo and hugs the right on desktop, matching the design */
.rb-hero--photo > *:not(.rb-hero__bg) {
  position: relative; z-index: 10;
  max-width: 42rem; margin-left: auto; margin-right: 0;
}
@media (min-width: 768px) { .rb-hero--photo > *:not(.rb-hero__bg) { text-align: right; } }
.rb-hero--photo .wp-block-buttons { justify-content: flex-start; }
@media (min-width: 768px) { .rb-hero--photo .wp-block-buttons { justify-content: flex-end; } }

/* ═══════════ final CTA — the big shout headline ═══════════ */
.rb-cta-shout {
  text-align: center; margin: 0 0 2.5rem;
  font-weight: 900; letter-spacing: -.03em; line-height: .95;
  font-size: clamp(3rem, 8vw, 6rem); color: #000;
}
.rb-cta-sun .is-style-outline .wp-block-button__link {
  background: transparent; color: #000; border: 2px solid #000;
}
.rb-cta-sun .is-style-outline .wp-block-button__link:hover { background: #000; color: #fff; }

/* ═══════════ testimonials — one centred quote per slide ═══════════ */
.rb-testi__h2 {
  text-align: center; margin: 0 0 4rem;
  font-weight: 900; letter-spacing: -.025em; line-height: 1.05;
  font-size: clamp(2.25rem, 4.5vw, 3rem); color: #fff;
}
.rb-testimonials .wp-block-post-template > li {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: none; border: 0; padding: 0 1rem;
  text-align: center;
  max-width: 56rem; margin-inline: auto;
}
/* the oversized opening quote mark from the design */
.rb-testimonials .wp-block-post-template > li { position: relative; }
.rb-testimonials .wp-block-post-template > li::before {
  content: "\201C";
  position: absolute; left: -.35em; top: -.34em;
  color: #4CBEDC;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 8rem; line-height: .8;
}
@media (max-width: 781px) {
  .rb-testimonials .wp-block-post-template > li::before { font-size: 5.5rem; left: -.1em; top: -.28em; }
}
.rb-testimonials .wp-block-post-content {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-style: italic; font-weight: 500;
  line-height: 1.5; color: rgb(255 255 255 / .9);
  margin-bottom: 2.5rem;
}
.rb-testimonials .wp-block-post-title { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 .25rem; }
.rb-testimonials .wp-block-post-excerpt { font-size: .875rem; color: #FFFFFF; text-transform: none; letter-spacing: 0; }

/* testimonial attribution row: initials circle + name/role, matching the design */
.rb-testi__person { justify-content: center; align-items: center; gap: 1rem; }
.rb-testi__initials {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex: 0 0 3rem;
  border-radius: 9999px; background: #0086C4; color: #fff;
  font-size: .875rem; font-weight: 700; margin: 0;
}
.rb-testi__who { text-align: left; }
.rb-testi__who .wp-block-post-title { margin: 0 0 .25rem; }
.rb-testi__who .wp-block-post-excerpt { margin: 0; }
.rb-testi__who .wp-block-post-excerpt__more-text { display: none; }

/* ═══════════ quote wall — masonry of coloured testimonial cards ═══════════ */
.rb-wall { columns: 1; column-gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 640px)  { .rb-wall { columns: 2; } }
@media (min-width: 1024px) { .rb-wall { columns: 3; } }
.rb-wall__card {
  break-inside: avoid; margin: 0 0 1.5rem;
  padding: 1.75rem; border-radius: .75rem;
  position: relative;
}
.rb-wall__card blockquote {
  margin: 0 0 1.25rem; font-style: italic;
  font-size: .9375rem; line-height: 1.6;
}
.rb-wall__card figcaption { display: flex; flex-direction: column; gap: .15rem; }
.rb-wall__name { font-weight: 700; font-size: .875rem; }
.rb-wall__co   { font-size: .75rem; opacity: .7; }

.rb-wall__card--sun   { background: #EAE44F; color: #000; border: 1px solid rgb(0 0 0 / .1); }
.rb-wall__card--sky   { background: #4CBEDC; color: #000; border: 1px solid rgb(0 0 0 / .1); }
.rb-wall__card--ocean { background: #0086C4; color: #fff; border: 1px solid rgb(255 255 255 / .2); }
.rb-wall__card--ink   { background: #1a1a1a; color: #fff; border: 1px solid rgb(255 255 255 / .1); }

/* ═══════════ nav: Learn submenu + Book a Call pill ═══════════ */
.rb-header .wp-block-navigation .wp-block-navigation-submenu__toggle { color: #fff; }
.rb-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: #111; border: 1px solid rgb(255 255 255 / .1);
  border-radius: .5rem; padding: .5rem; min-width: 260px;
}
.rb-header .wp-block-navigation .wp-block-navigation__submenu-container a {
  padding: .75rem 1rem; border-radius: .35rem;
}
.rb-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
  background: rgb(255 255 255 / .06); color: #EAE44F;
}
/* the last nav item is the CTA pill */
.rb-header .wp-block-navigation__container > .wp-block-navigation-item:last-child > a {
  background: #EAE44F; color: #000 !important;
  border-radius: 9999px; padding: .85rem 1.6rem;
}
.rb-header .wp-block-navigation__container > .wp-block-navigation-item:last-child > a:hover {
  background: #d9d347; color: #000 !important;
}

/* ═══════════ About: the big pull headline in the story section ═══════════ */
.rb-story__lead {
  max-width: 56rem; margin: 0 auto 2.5rem; text-align: center;
  font-weight: 900; letter-spacing: -.02em; line-height: 1.15;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: #fff;
}
.rb-story__lead span { display: block; color: #EAE44F; margin-top: .35rem; }
.rb-story__body p { color: #FFFFFF; }

/* two-column credential list */
.rb-creds__two { columns: 1; column-gap: 3rem; }
@media (min-width: 768px) { .rb-creds__two { columns: 2; } }
.rb-creds__two li { break-inside: avoid; }

/* column headings with the leading rule from the design */
.rb-colhead {
  display: flex; align-items: center; gap: .75rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900;
  letter-spacing: -.02em; margin: 0 0 1.5rem;
}
.rb-colhead::before { content: ""; width: 2rem; height: 3px; flex: 0 0 2rem; }
.rb-colhead--sky { color: #4CBEDC; } .rb-colhead--sky::before { background: #4CBEDC; }
.rb-colhead--sun { color: #EAE44F; } .rb-colhead--sun::before { background: #EAE44F; }

/* accent words inside page headings */
.rb-accent-ocean { color: #0086C4; }
.rb-accent-sky   { color: #4CBEDC; }

/* dark inset card used on Work With Me + Media */
.rb-inkcard {
  background: #1a1a1a; border: 1px solid rgb(255 255 255 / .1);
  border-radius: .75rem; padding: 2rem; color: #fff;
}
.rb-inkcard h3 { color: #EAE44F; font-size: 1.125rem; margin: 0 0 1rem; }
.rb-inkcard p, .rb-inkcard li { color: #FFFFFF; font-size: .9375rem; line-height: 1.6; }
.rb-inkcard ul { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.rb-inkcard__btn {
  display: inline-block; background: #0086C4; color: #fff; text-decoration: none;
  border-radius: 9999px; padding: .85rem 1.6rem;
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.rb-inkcard__btn--outline { background: transparent; border: 2px solid rgb(255 255 255 / .3); }
.rb-inkcard--tight { margin-top: 2rem; }

/* numbered process steps */
.rb-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.rb-steps li {
  counter-increment: s; position: relative; padding-left: 3.25rem; margin-bottom: 1.75rem;
}
.rb-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .15);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .875rem; color: #EAE44F;
}
.rb-steps strong { display: block; font-size: 1.125rem; margin-bottom: .35rem; color: #fff; }
.rb-steps span { color: #FFFFFF; font-size: .9375rem; line-height: 1.6; }


/* hero script: larger than the design and Title Case, per Rikka */
.rb-page-h1 > .rb-script,
.rb-script--block-lower {
  display: block; margin-top: .4rem;
  text-transform: none;              /* was lowercase */
  font-size: clamp(3.5rem, 7.5vw, 6rem);
  line-height: .95;
}
.rb-hero--photo .rb-page-h1 > .rb-script { font-size: clamp(3.5rem, 8vw, 6.5rem); }

/* ═══════════ HIRE POWER wordmark lockup ═══════════ */
.rb-hplock {
  font-weight: 900; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .25rem;
}
.rb-hplock--light { color: #111; } .rb-hplock--light span { color: #0086C4; }
.rb-hplock--dark  { color: #a7a7ae; } .rb-hplock--dark span { color: #EAE44F; }
.rb-hplock__sub {
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  font-size: .9375rem; margin-bottom: 1.5rem; color: #111;
}
.rb-hplock__sub--sky { color: #4CBEDC; }

/* tick list on dark */
.rb-ticks { list-style: none; padding-left: 0; }
.rb-ticks li { position: relative; padding-left: 1.75rem; margin-bottom: .75rem; color: #FFFFFF; }
.rb-ticks li::before { content: "\2713"; position: absolute; left: 0; color: #4CBEDC; font-weight: 700; }

/* button style variants */
.is-style-sun   .wp-block-button__link { background: #EAE44F; color: #000; }
.is-style-ocean .wp-block-button__link { background: #0086C4; color: #fff; }

/* ═══════════ Hire Power: module grid, pain list, price ═══════════ */
.rb-modules { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 640px)  { .rb-modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rb-modules { grid-template-columns: repeat(4, 1fr); } }
.rb-module {
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08);
  border-radius: .75rem; padding: 1.5rem;
}
.rb-module__num {
  display: block; font-weight: 900; font-size: 1.5rem; color: #EAE44F;
  line-height: 1; margin-bottom: .75rem;
}
.rb-module h3 { font-size: 1.0625rem; margin: 0 0 .5rem; color: #fff; }
.rb-module p  { font-size: .875rem; line-height: 1.55; color: #FFFFFF; margin: 0; }

.rb-pains { list-style: none; padding: 0; margin: 2.5rem auto; max-width: 46rem; columns: 1; }
@media (min-width: 768px) { .rb-pains { columns: 2; column-gap: 2.5rem; } }
.rb-pains li {
  break-inside: avoid; position: relative; padding-left: 1.75rem;
  margin-bottom: .85rem; color: #111; font-size: .9375rem; line-height: 1.5;
}
.rb-pains li::before { content: "\2715"; position: absolute; left: 0; color: #0086C4; font-weight: 700; }
.rb-pains__punch {
  text-align: center; font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 3vw, 2.25rem); color: #111; margin: 0;
}

.rb-price { text-align: center; margin: 2.5rem 0 2rem; }
.rb-price__amount {
  display: block; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(3rem, 7vw, 5rem); color: #EAE44F;
}
.rb-price__note {
  display: block; max-width: 34rem; margin: 1rem auto 0;
  font-size: .9375rem; line-height: 1.6; color: #FFFFFF;
}

/* FAQ accordions on the light section */
.rb-light .wp-block-details {
  border-bottom: 1px solid rgb(0 0 0 / .1); padding: 1.25rem 0;
}
.rb-light .wp-block-details summary {
  cursor: pointer; font-weight: 700; font-size: 1.0625rem; color: #111; list-style: none;
}
.rb-light .wp-block-details summary::-webkit-details-marker { display: none; }
.rb-light .wp-block-details summary::after { content: "+"; float: right; color: #0086C4; font-weight: 900; }
.rb-light .wp-block-details[open] summary::after { content: "\2013"; }
.rb-light .wp-block-details p { margin-top: .85rem; color: #333; font-size: .9375rem; line-height: 1.65; }

/* Hire Power modules as accordions — full detail, scannable */
.rb-modules { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 3rem; }
.rb-module {
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08);
  border-radius: .75rem; padding: 0; overflow: hidden;
}
.rb-module summary {
  cursor: pointer; list-style: none; padding: 1.35rem 3rem 1.35rem 1.5rem;
  display: grid; grid-template-columns: 3rem 1fr; gap: .25rem 1rem; align-items: baseline;
  position: relative;
}
.rb-module summary::-webkit-details-marker { display: none; }
.rb-module summary::after {
  content: "+"; position: absolute; right: 1.5rem; top: 1.2rem;
  color: #EAE44F; font-weight: 900; font-size: 1.5rem; line-height: 1;
}
.rb-module[open] summary::after { content: "\2013"; }
.rb-module__num   { grid-row: 1 / span 2; font-weight: 900; font-size: 1.75rem; color: #EAE44F; line-height: 1; }
.rb-module__title { font-weight: 800; font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.rb-module__sub   { font-size: .875rem; color: #FFFFFF; line-height: 1.45; }
.rb-module__body  { padding: 0 1.5rem 1.5rem 5.5rem; }
.rb-module__body h4 {
  margin: 1.25rem 0 .5rem; font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #4CBEDC;
}
.rb-module__body ul { margin: 0; padding-left: 1.1rem; }
.rb-module__body li { color: #FFFFFF; font-size: .9375rem; line-height: 1.6; margin-bottom: .5rem; }
@media (max-width: 600px) { .rb-module__body { padding-left: 1.5rem; } }

/* ═══════════ uniform page-hero height ═══════════
   Hero height was purely content-driven, so a short headline gave a thin
   band and a three-line one gave a tall band. Pin a consistent minimum and
   centre the content so every inner page reads with the same weight. */
.rb-hero--photo {
  min-height: clamp(20rem, 30vw, 27rem);
  display: grid;
  align-content: center;
}
@media (max-width: 600px) { .rb-hero--photo { min-height: 16rem; } }

/* ═══════════ hero layout: beat WordPress's constrained-layout !important ═══════════
   .is-layout-constrained forces max-width + margin auto on every child, which
   was capping the background image at the 1200px content width and centring
   the copy instead of right-aligning it. */
.rb-hero--photo.is-layout-constrained > .rb-hero__bg,
.rb-hero--photo > .rb-hero__bg {
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  inset: 0;
}
.rb-hero--photo.is-layout-constrained > *:not(.rb-hero__bg) {
  max-width: 58rem !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
/* the script has swashes that overhang; give them room so nothing clips */
.rb-hero--photo .rb-page-h1 { padding-right: .15em; }
.rb-hero--photo .rb-page-h1 > .rb-script {
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  padding-right: .12em;
  overflow: visible;
}

/* ═══════════ homepage hero: chair photo sits alongside the headline ═══════════
   The photo was bottom-aligned in a tall column, leaving it stranded halfway
   down the section. Scale it up and anchor it to the bottom edge so it fills
   the right side the way the design does. */
.rb-hero__inner > .wp-block-columns { align-items: flex-end; }
.rb-hero .wp-block-column:last-child { align-self: flex-end; }
.rb-hero .wp-block-column:last-child figure { margin: 0; }
.rb-hero .wp-block-column:last-child img {
  width: 100%;
  max-width: none;
  display: block;
  transform: scale(1.12);
  transform-origin: bottom center;
  margin-bottom: -1.5rem;
  filter: drop-shadow(0 25px 50px rgb(0 0 0 / .5));
}
@media (max-width: 781px) {
  .rb-hero .wp-block-column:last-child img { transform: none; margin-bottom: 0; max-width: 26rem; margin-inline: auto; }
}
/* keep the watermark from spilling past the section edges */
.rb-hero { isolation: isolate; }
.rb-hero__watermark { max-width: 100vw; }

.rb-light p.has-sm-font-size,
.rb-dark p.has-sm-font-size { font-size: clamp(.9375rem, 1.35vw, 1.0625rem) !important; letter-spacing: .14em; }

/* ═══════════ press bar — publication wordmarks ═══════════ */
.rb-press { background: #1a1a1a; border-block: 1px solid rgb(255 255 255 / .06); }
.rb-press__list {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .75rem 2.25rem;
}
.rb-press__list li {
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(.8125rem, 1.4vw, 1.0625rem);
  color: rgb(255 255 255 / .55);
  white-space: nowrap;
}
@media (max-width: 600px) { .rb-press__list { gap: .6rem 1.25rem; } }

/* ═══════════ About: credentials as grouped cards on light ═══════════ */
.rb-credgrid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 860px) { .rb-credgrid { grid-template-columns: repeat(3, 1fr); } }
.rb-credcard {
  background: #fff; border: 1px solid rgb(0 0 0 / .08);
  border-top: 4px solid #003e94;
  border-radius: .75rem; padding: 1.75rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / .06);
}
.rb-credcard--royal { border-top-color: #003e94; }
.rb-credcard--ocean { border-top-color: #0086C4; }
.rb-credcard--sky   { border-top-color: #4CBEDC; }
.rb-credcard h3 {
  margin: 0 0 1rem; font-size: .8125rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: #003e94;
}
.rb-credcard--ocean h3 { color: #0086C4; }
.rb-credcard--sky   h3 { color: #0086C4; }
.rb-credcard ul { list-style: none; margin: 0; padding: 0; }
.rb-credcard li {
  position: relative; padding-left: 1.4rem; margin-bottom: .85rem;
  font-size: .9375rem; line-height: 1.55; color: #333;
}
.rb-credcard li::before {
  content: "\00BB"; position: absolute; left: 0; color: #4CBEDC; font-weight: 700;
}
.rb-credcard li strong { color: #111; }

/* portrait in the story section */
.rb-portrait img { border-radius: .75rem; }

/* ═══════════ mobile: the watermark collides with the stats ═══════════
   On narrow screens the hero stacks and grows tall, so the vertically
   centred watermark lands on top of the stat row. It contributes nothing
   at that size — hide it and let the copy breathe. */
@media (max-width: 781px) {
  .rb-hero__watermark { display: none; }
  .rb-hero__inner > .wp-block-columns { align-items: stretch; }
}

/* wrapped flex lines were stretching to fill the hero height, which spread the
   stat row into a column of huge gaps on mobile */
.rb-hero .wp-block-columns { align-content: flex-start; }
@media (max-width: 781px) {
  .rb-hero__inner > .wp-block-columns { gap: 2rem; }
  .rb-hero .wp-block-columns .wp-block-columns { gap: 1.25rem; }
}

/* ═══════════ mobile hero: stop the copy sitting on Rikka's face ═══════════
   At narrow widths the photo crops to a portrait slice with the subject
   centred, and the copy landed straight over it. Anchor the copy to the
   bottom and run a gradient scrim so the face stays clear at the top and
   the text sits on solid dark. */
@media (max-width: 781px) {
  .rb-hero--photo { align-content: end; min-height: 26rem; }
  .rb-hero--photo .rb-hero__bg img { object-position: 10% 50%; }
  /* Work and Speaking are framed wider, so their subject sits further in. */
  .rb-hero--focus-mid .rb-hero__bg img { object-position: 24% 50%; }
  .rb-hero--photo .rb-hero__tint {
    background: linear-gradient(180deg,
      rgb(0 0 0 / .10) 0%,
      rgb(0 0 0 / .45) 38%,
      rgb(0 0 0 / .88) 68%,
      rgb(0 0 0 / .96) 100%) !important;
  }
  .rb-hero--photo.is-layout-constrained > *:not(.rb-hero__bg) { max-width: 100% !important; }
}
/* Sun hero (Books) needs a light scrim, not a dark one */
@media (max-width: 781px) {
  .rb-hero-sun .rb-hero__tint {
    background: linear-gradient(180deg,
      rgb(234 228 79 / .15) 0%,
      rgb(234 228 79 / .70) 45%,
      rgb(234 228 79 / .95) 100%) !important;
  }
}

/* logo bars driven by the Logos post type */
.rb-logobar__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem 3rem; margin-top: 1.5rem;
}
.rb-logobar__cell { display: inline-flex; align-items: center; justify-content: center; }
.rb-logobar__row img {
  height: clamp(2.25rem, 3.2vw, 3.25rem);
  width: auto; object-fit: contain; opacity: .85;
}
.rb-logobar__row img:hover { opacity: 1; }
@media (max-width: 600px) { .rb-logobar__row { gap: 1.25rem 1.75rem; } }
.rb-testi__sub { text-align: center; color: #FFFFFF; margin: -2.5rem 0 3rem; font-size: 1.0625rem; }

/* Client marks are illustrated and full-colour, so their bar sits on a light
   surface instead of being flattened to white on the dark one. */
.rb-logobar--light { background: #ffffff; border-block-color: rgb(0 0 0 / .08); }
.rb-logobar--light p { color: #5b5b60 !important; }
.rb-logobar--light .rb-logobar__row img { opacity: 1; height: clamp(2.75rem, 4vw, 3.75rem); }

/* ── proof bar: per-mark optical sizing ───────────────────────────────
   A uniform CSS height makes a round badge look small and a 10:1 wordmark
   look huge. These nudge the outliers back into line. */
.rb-logobar__row img[alt*="BMSA"],
.rb-logobar__row img[alt*="NAHB"],
.rb-logobar__row img[alt*="Ashby"] { height: calc(clamp(2.25rem, 3.2vw, 3.25rem) * 1.35); }

.rb-logobar__row img[alt*="Luxury"],
.rb-logobar__row img[alt*="HBS"],
.rb-logobar__row img[alt*="OPEN Forum"] { height: calc(clamp(2.25rem, 3.2vw, 3.25rem) * 1.28); }

.rb-logobar__row img[alt*="LBM Journal"] { height: calc(clamp(2.25rem, 3.2vw, 3.25rem) * 1.15); }

/* ═══════════ legal page ═══════════
   Long-form terms belong on a light surface; light-on-dark is punishing to read
   at 2,000 words. No photo hero — a face over a privacy policy reads as sales. */
.rb-legal-head { background: #111; color: #fff; border-bottom: 4px solid #EAE44F; }
.rb-legal-head h1 { color: #fff; margin: .35rem 0 .5rem; }

.rb-legal { background: #fff; color: #1a1a1a; }
.rb-legal h2 {
  margin: 3rem 0 1rem; padding-top: 2rem;
  border-top: 1px solid rgb(0 0 0 / .1);
  color: #003e94; font-weight: 900; letter-spacing: -.02em;
}
.rb-legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.rb-legal h3 { margin: 2.25rem 0 .75rem; font-weight: 800; color: #111; }
.rb-legal h4 {
  margin: 1.5rem 0 .35rem; font-size: 1rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: #0086C4;
}
.rb-legal p, .rb-legal li { font-size: 1rem; line-height: 1.7; color: #333; }
.rb-legal p { margin-bottom: 1rem; }
.rb-legal ul { margin: 0 0 1.25rem 1.25rem; }
.rb-legal li { margin-bottom: .4rem; }
.rb-legal a { color: #003e94; text-decoration: underline; }

/* footer legal bar */
.rb-footer-legal { background: #000; border-top: 1px solid rgb(255 255 255 / .08); }
.rb-footer-legal__line {
  margin: 0; text-align: center; color: rgb(255 255 255 / .55);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; line-height: 1.9;
}
.rb-footer-legal__line a { color: rgb(255 255 255 / .75); text-decoration: none; }
.rb-footer-legal__line a:hover { color: #EAE44F; }

/* ═══════════════════════════════════════════════════════════════════
   BLOG ARTICLE
   Editorial layout after the People.com reference Rikka supplied:
   kicker, headline, dek, byline, lead image, then a 760px measure.
   Body copy sits on white — long-form reading on near-black is punishing.
   ═══════════════════════════════════════════════════════════════════ */
.rb-article { background: #fff; color: #1a1a1a; }

.rb-article__kicker a,
.rb-article__kicker {
  font-size: .8125rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #0086C4; text-decoration: none;
  margin: 0 0 .75rem;
}
.rb-article__title {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 900; letter-spacing: -.025em; line-height: 1.08;
  color: #111; margin: 0 0 1rem; text-wrap: balance;
}
.rb-article__dek {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.55; color: #55555c; margin: 0 0 1.5rem; text-wrap: balance;
}
.rb-article__byline {
  gap: .75rem 1.25rem; align-items: center;
  padding-top: 1rem; border-top: 1px solid rgb(0 0 0 / .1);
  font-size: .875rem; color: #6b6b73;
}
.rb-article__byline p { margin: 0; }
.rb-article__byline strong { color: #111; }

.rb-article__media { padding: 0 0 .5rem; }
.rb-article__hero-img img { width: 100%; height: auto; border-radius: 4px; display: block; }
.rb-article__hero-img figcaption {
  font-size: .8125rem; color: #77777f; margin-top: .5rem; line-height: 1.5;
}

/* body measure and rhythm */
.rb-article__body p,
.rb-article__body li {
  font-size: 1.0625rem; line-height: 1.75; color: #2b2b30;
}
.rb-article__body p { margin: 0 0 1.35rem; }
.rb-article__body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: -.02em;
  color: #111; margin: 2.75rem 0 .85rem; text-wrap: balance;
}
.rb-article__body h3 {
  font-size: clamp(1.1875rem, 2vw, 1.5rem); font-weight: 800;
  color: #111; margin: 2rem 0 .6rem;
}
.rb-article__body a { color: #003e94; text-decoration: underline; text-underline-offset: 2px; }
.rb-article__body ul, .rb-article__body ol { margin: 0 0 1.35rem 1.35rem; }
.rb-article__body li { margin-bottom: .5rem; }
.rb-article__body img { border-radius: 4px; }
.rb-article__body figcaption { font-size: .8125rem; color: #77777f; margin-top: .5rem; }

/* ── Need to Know ────────────────────────────────────────────────
   The block AI answer engines lift. Visually distinct, semantically a
   plain list so it extracts cleanly. */
.rb-ntk {
  background: #eef8fb; border-left: 5px solid #4CBEDC;
  padding: 1.5rem 1.75rem; margin: 0 0 2rem; border-radius: 0 4px 4px 0;
}
.rb-ntk__label {
  font-size: .75rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #003e94; margin: 0 0 .75rem;
}
.rb-ntk__list { margin: 0 0 0 1.1rem; }
.rb-ntk__list li {
  font-size: 1rem; line-height: 1.6; color: #2b2b30; margin-bottom: .6rem;
}
.rb-ntk__list li:last-child { margin-bottom: 0; }

/* ── video ── */
.rb-video { margin: 2rem 0; }
.rb-video__frame { margin: 0; }
.rb-video__cap { font-size: .8125rem; color: #77777f; margin: .6rem 0 0; }
.rb-video__transcript { margin-top: .85rem; font-size: .9375rem; }
.rb-video__transcript summary {
  cursor: pointer; font-weight: 700; color: #003e94;
  font-size: .875rem; letter-spacing: .02em;
}
.rb-video__transcript p { margin-top: .75rem; color: #444; }

/* ── pull quote ── */
.rb-pull { margin: 2.25rem 0; }
.rb-pull__q {
  font-size: clamp(1.3125rem, 2.4vw, 1.75rem); line-height: 1.35;
  font-weight: 700; color: #003e94; margin: 0;
  padding-left: 1.25rem; border-left: 4px solid #4CBEDC;
  text-wrap: balance;
}

/* ── tags ── */
.rb-article__tags { border-top: 1px solid rgb(0 0 0 / .1); padding-top: 1.5rem; }
.rb-article__tags-label {
  font-size: .75rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #77777f; margin: 0 0 .6rem;
}
.rb-article__tags .wp-block-post-terms a {
  display: inline-block; margin: 0 .4rem .4rem 0; padding: .35rem .75rem;
  background: #f2f2ef; border-radius: 9999px; font-size: .8125rem;
  color: #333; text-decoration: none;
}
.rb-article__tags .wp-block-post-terms a:hover { background: #EAE44F; color: #111; }

/* ── related ── */
.rb-related { background: #f7f7f4; border-top: 1px solid rgb(0 0 0 / .08); }
.rb-related__h2 { color: #111; font-weight: 900; margin: 0 0 1.5rem; }
.rb-related__grid {
  display: grid; gap: 1.75rem; margin-top: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .rb-related__grid { grid-template-columns: repeat(3, 1fr); } }
.rb-related__card { margin: 0; }
.rb-related__thumb { display: block; }
.rb-related__thumb img { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; display: block; }
.rb-related__ph { display: block; height: 180px; border-radius: 4px; background: #e6e6e1; }
.rb-related__title { margin: .35rem 0 0; font-size: 1rem; line-height: 1.35; font-weight: 700; }
.rb-related__title a { color: #111; text-decoration: none; }
.rb-related__title a:hover { color: #003e94; }
.rb-related__grid img { border-radius: 4px; }
.rb-related__cat a, .rb-related__cat {
  font-size: .6875rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #0086C4; text-decoration: none;
  margin: .6rem 0 .3rem; display: block;
}
.rb-related__grid .wp-block-post-title a {
  color: #111; text-decoration: none; font-weight: 700; line-height: 1.35;
}
.rb-related__grid .wp-block-post-title a:hover { color: #003e94; }

/* ═══════════════════════════════════════════════════════════════════
   EYEBROWS — ONE RULE, SITE-WIDE
   These kept coming back too small because each section set its own size.
   Everything that is an eyebrow now inherits from here. If it looks wrong,
   change it once.
   ═══════════════════════════════════════════════════════════════════ */
:root { --rb-eyebrow: clamp(.9375rem, 1.3vw, 1.125rem); }

.rb-eyebrow,
.rb-article__kicker,
.rb-article__kicker a,
.rb-post-hero__kicker,
.rb-post-hero__kicker a,
.rb-authorbox__label,
.rb-ntk__label {
  font-size: var(--rb-eyebrow) !important;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 .85rem;
  text-decoration: none;
}

/* ═══════════ POST HERO ═══════════
   Compact dark band, type on the band rather than over the photo — a 1.91:1
   social crop makes overlaid headlines unreadable on a phone. */
.rb-post-hero {
  background: #111; color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 4px solid #4CBEDC;
}
.rb-post-hero__kicker a { color: #4CBEDC; }
.rb-post-hero__kicker a:hover { color: #EAE44F; }
.rb-post-hero__title {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 900; letter-spacing: -.025em; line-height: 1.06;
  color: #fff; margin: 0 0 1rem; text-wrap: balance;
}
.rb-post-hero__dek {
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  line-height: 1.5; color: #FFFFFF; margin: 0 0 1.5rem; text-wrap: balance;
}
.rb-post-hero__byline {
  margin: 0; padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / .15);
  font-size: .9375rem; color: rgb(255 255 255 / .7);
}
.rb-post-hero__byline strong { color: #fff; }
.rb-post-hero__sep { margin: 0 .6rem; color: rgb(255 255 255 / .35); }

.rb-post-hero__media { background: #fff; padding-bottom: 0; }
.rb-post-hero__fig { margin: 0; transform: translateY(0); }
.rb-post-hero__fig img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1600 / 840; object-fit: cover;
}
.rb-post-hero__fig figcaption {
  font-size: .8125rem; color: rgb(255 255 255 / .55);
  padding: .6rem 1rem 1rem; margin: 0; line-height: 1.5;
}

/* ═══════════ AUTHOR BOX ═══════════
   E-E-A-T signal, not decoration — this is what ties each article to Rikka as
   an entity that answer engines can recognise. */
.rb-authorbox { background: #f7f7f4; border-top: 1px solid rgb(0 0 0 / .08); }
.rb-authorbox__inner { display: flex; gap: 1.5rem; align-items: flex-start; }
@media (max-width: 600px) { .rb-authorbox__inner { flex-direction: column; gap: 1rem; } }
.rb-authorbox__photo {
  flex: 0 0 120px; width: 120px; height: 120px;
  border-radius: 9999px; object-fit: cover; object-position: top;
  border: 4px solid #fff; box-shadow: 0 6px 18px rgb(0 0 0 / .12);
}
.rb-authorbox__label { color: #0086C4; }
.rb-authorbox__name {
  font-size: 1.375rem; font-weight: 900; color: #111; margin: 0 0 .5rem;
}
.rb-authorbox__bio {
  font-size: .9375rem; line-height: 1.65; color: #444; margin: 0 0 .85rem;
}
.rb-authorbox__links { margin: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rb-authorbox__links a {
  font-size: .875rem; font-weight: 700; color: #003e94;
  text-decoration: none; border-bottom: 2px solid rgb(0 62 148 / .25);
}
.rb-authorbox__links a:hover { border-bottom-color: #003e94; }

/* video slot: visible placeholder until a URL is pasted */
.rb-video__frame .wp-block-embed__wrapper:empty {
  display: grid; place-content: center; text-align: center;
  aspect-ratio: 16 / 9;
  background: #f2f2ef;
  border: 2px dashed #b9b9b2; border-radius: 6px;
  color: #6b6b73;
}
.rb-video__frame .wp-block-embed__wrapper:empty::before {
  content: "VIDEO — paste a YouTube or Vimeo URL into this block";
  font-family: monospace; font-size: .8125rem; letter-spacing: .06em;
  padding: 0 1.5rem; line-height: 1.7;
}
.rb-video__frame .wp-block-embed__wrapper:empty::after {
  content: "1920 × 1080  •  16:9";
  font-family: monospace; font-size: .75rem; color: #94948d; margin-top: .4rem;
}

/* pull quote reads larger, so it earns the interruption */
.rb-pull__q { font-size: clamp(1.4375rem, 2.8vw, 2rem); }

/* ═══════════════════════════════════════════════════════════════════
   HIRE POWER SALES PAGE  (v2 — built from Rikka's final sequenced copy)
   ═══════════════════════════════════════════════════════════════════ */

.rb-hp-nav { background: #000; position: sticky; top: 0; z-index: 60; border-bottom: 1px solid rgb(255 255 255 / .1); }
.rb-hp-nav__inner { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: center; padding: .85rem 1rem; }
.rb-hp-nav__inner a { color: rgb(255 255 255 / .75); text-decoration: none; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rb-hp-nav__inner a:hover { color: #EAE44F; }

.rb-hp-cred { margin: 1.25rem 0 0; font-size: .875rem; letter-spacing: .04em; color: rgb(255 255 255 / .7); line-height: 1.8; }

/* stats band */
.rb-ocean { background: #0086C4; color: #fff; }
.rb-ocean h2 { color: #fff; }
.rb-hp-stats__grid { display: grid; gap: 1.75rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .rb-hp-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rb-hp-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.rb-hp-stat { border-top: 3px solid #EAE44F; padding-top: 1.15rem; }
.rb-hp-stat__n { font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 900; line-height: 1; color: #EAE44F; margin-bottom: .6rem; }
.rb-hp-stat__b { font-size: .9375rem; line-height: 1.6; color: rgb(255 255 255 / .95); margin: 0 0 .75rem; }
.rb-hp-stat__s { font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: rgb(255 255 255 / .65); margin: 0; }

/* two ways */
.rb-ways { display: grid; gap: 1.75rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .rb-ways { grid-template-columns: repeat(2, 1fr); } }
.rb-ways__card { background: #1a1a1a; border: 1px solid rgb(255 255 255 / .1); border-radius: 6px; padding: 2rem; }
.rb-ways__card h3 { font-size: 1.375rem; font-weight: 900; color: #EAE44F; margin: 0 0 .75rem; }
.rb-ways__card p { font-size: 1rem; line-height: 1.7; color: #FFFFFF; margin: 0; }

/* 3S cycle */
.rb-3s { display: grid; gap: 1.75rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .rb-3s { grid-template-columns: repeat(3, 1fr); } }
.rb-3s__card { background: #1a1a1a; border: 1px solid rgb(255 255 255 / .1); border-radius: 6px; padding: 2rem; }
.rb-3s__card h3 { font-size: 1.0625rem; font-weight: 800; color: #fff; margin: .6rem 0; }
.rb-3s__card p { font-size: .9375rem; line-height: 1.65; color: #FFFFFF; margin: 0; }
.rb-3s__close { max-width: 56rem; margin: 2.5rem auto 1rem; text-align: center; color: #FFFFFF; line-height: 1.7; }
.rb-3s__punch { max-width: 56rem; margin: 0 auto; text-align: center; color: #EAE44F; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.5; }

/* quotes */
.rb-sky { background: #4CBEDC; color: #08323d; }
.rb-hp-quote__q { margin: 0; border: 0; padding: 0; }
.rb-hp-quote__q p { font-size: clamp(1.0625rem, 1.9vw, 1.375rem); line-height: 1.65; font-style: italic; margin: 0 0 1.25rem; }
.rb-hp-quote__q cite { font-style: normal; font-weight: 800; font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase; }
.rb-hp-quote__q--dark p { color: #fff; }
.rb-hp-quote__q--dark cite { color: #4CBEDC; }

/* module accordions */
.rb-modules__hint { color: #666; font-size: .9375rem; margin-bottom: 2rem; }
.rb-modules__list { display: grid; gap: .85rem; }
.rb-module { background: #fff; border: 1px solid rgb(0 0 0 / .12); border-radius: 6px; overflow: hidden; }
.rb-module[open] { border-color: #0086C4; box-shadow: 0 6px 20px rgb(0 0 0 / .07); }
.rb-module > summary { cursor: pointer; list-style: none; padding: 1.35rem 3rem 1.35rem 1.5rem; position: relative; display: flex; flex-direction: column; gap: .25rem; }
.rb-module > summary::-webkit-details-marker { display: none; }
.rb-module > summary::after { content: "+"; position: absolute; right: 1.35rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 300; color: #0086C4; line-height: 1; }
.rb-module[open] > summary::after { content: "–"; }
.rb-module__num { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #0086C4; }
.rb-module__ttl { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 900; letter-spacing: -.02em; color: #111; line-height: 1.15; }
.rb-module__sub { font-size: .9375rem; color: #55555c; line-height: 1.5; }
.rb-module__count { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8a92; margin-top: .3rem; }
.rb-module__body { padding: 0 1.5rem 1.5rem; border-top: 1px solid rgb(0 0 0 / .07); }
.rb-lesson { padding: 1.15rem 0; border-bottom: 1px solid rgb(0 0 0 / .06); }
.rb-lesson:last-child { border-bottom: 0; padding-bottom: 0; }
.rb-lesson h4 { font-size: 1rem; font-weight: 800; color: #003e94; margin: 0 0 .35rem; }
.rb-lesson p { font-size: .9375rem; line-height: 1.65; color: #444; margin: 0; }

/* bonus */
.rb-bonus__grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .rb-bonus__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rb-bonus__grid { grid-template-columns: repeat(3, 1fr); } }
.rb-bonus__card { border-left: 3px solid #EAE44F; padding-left: 1.15rem; }
.rb-bonus__card h3 { font-size: 1.0625rem; font-weight: 800; color: #EAE44F; margin: 0 0 .4rem; }
.rb-bonus__card p { font-size: .9375rem; line-height: 1.6; color: #FFFFFF; margin: 0; }

/* empty testimonial slots */
.rb-slot__card { border: 2px dashed #c4c4bc; border-radius: 6px; display: grid; place-content: center; min-height: 9rem; text-align: center; padding: 1.5rem; }
.rb-slot__card span { font-family: monospace; font-size: .8125rem; letter-spacing: .06em; color: #8a8a92; }
.rb-slot__card--dark { border-color: rgb(255 255 255 / .22); }
.rb-slot__card--dark span { color: rgb(255 255 255 / .45); }

/* thrive */
.rb-thrive p { color: #FFFFFF; line-height: 1.75; margin: 0 0 1.15rem; }
.rb-thrive__big { font-size: clamp(1.125rem, 2vw, 1.375rem); color: #fff !important; }
.rb-thrive__big strong { color: #EAE44F; }
.rb-thrive__punch { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 800; color: #4CBEDC !important; line-height: 1.5; }
.rb-thrive__src { font-size: .75rem !important; color: rgb(255 255 255 / .5) !important; line-height: 1.6; margin-top: 1.75rem !important; }

/* guarantee */
.rb-guarantee { background: #EAE44F; }
.rb-guarantee__card { background: #111; color: #fff; border-radius: 8px; padding: 2.25rem 2rem; box-shadow: 0 18px 40px rgb(0 0 0 / .18); }
.rb-guarantee__label { color: #EAE44F !important; }
.rb-guarantee__body { font-size: clamp(1rem, 1.7vw, 1.1875rem); line-height: 1.7; margin: 0; color: #fff; }

/* pricing */
.rb-pricing__list { max-width: 34rem; margin-inline: auto; }
.rb-price { text-align: center; margin: 2.5rem 0 2rem; }
.rb-price__was { font-size: 1.5rem; color: #8a8a92; text-decoration: line-through; margin: 0 0 .15rem; }
.rb-price__now { font-size: clamp(3.25rem, 8vw, 5rem); font-weight: 900; letter-spacing: -.03em; color: #003e94; line-height: 1; margin: 0 0 .6rem; }
.rb-price__note { font-size: .9375rem; color: #55555c; margin: 0; }

/* FAQ */
.rb-faq__list { display: grid; gap: .75rem; margin-top: 2.5rem; }
.rb-faq__item { background: #1a1a1a; border: 1px solid rgb(255 255 255 / .1); border-radius: 6px; }
.rb-faq__item[open] { border-color: #4CBEDC; }
.rb-faq__item > summary { cursor: pointer; list-style: none; padding: 1.15rem 3rem 1.15rem 1.35rem; position: relative; font-size: 1.0625rem; font-weight: 800; color: #fff; }
.rb-faq__item > summary::-webkit-details-marker { display: none; }
.rb-faq__item > summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; color: #4CBEDC; line-height: 1; }
.rb-faq__item[open] > summary::after { content: "–"; }
.rb-faq__a { padding: 0 1.35rem 1.35rem; }
.rb-faq__a p { font-size: .9375rem; line-height: 1.7; color: #FFFFFF; margin: 0; }
.rb-faq__a s { color: #8a8a92; }
.rb-faq__a strong { color: #EAE44F; font-size: 1.15em; }

/* even if */
.rb-evenif__grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .rb-evenif__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .rb-evenif__grid { grid-template-columns: repeat(3, 1fr); } }
.rb-evenif__card { background: #fff; border: 1px solid rgb(0 0 0 / .1); border-radius: 6px; padding: 1.5rem; }
.rb-evenif__card h3 { font-size: 1.0625rem; font-weight: 800; color: #003e94; margin: 0 0 .5rem; }
.rb-evenif__card p { font-size: .9375rem; line-height: 1.65; color: #444; margin: 0; }

.rb-hp-copyright { text-align: center; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(0 0 0 / .5); margin: 2.5rem 0 0; }

/* ── share row ── */
.rb-share { padding: 0 0 2rem; }
.rb-share__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.rb-share__label { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #77777f; margin-right: .35rem; }
.rb-share__btn {
  font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
  padding: .5rem .95rem; border-radius: 9999px;
  background: #f2f2ef; border: 1px solid rgb(0 0 0 / .08);
  color: #333; text-decoration: none;
}
.rb-share__btn:hover { background: #003e94; border-color: #003e94; color: #fff; }

/* Hero gap, harder push: the subject sits in the far left of a 3.2:1 banner,
   so the only real lever is scale. */
@media (min-width: 782px) {
  .rb-hero--photo .rb-hero__bg img { transform: scale(1.5); transform-origin: 16% top; }
}

/* Hire Power imagery — the page was all type before */
.rb-hp-shot { margin: 0 auto 2.5rem; max-width: 760px; }
.rb-hp-shot img { width: 100%; height: auto; display: block; border-radius: 6px; }
.rb-hp-shot--sm { max-width: 320px; }
.rb-hp-shot--book { max-width: 380px; }
.rb-hp-shot--sm img, .rb-hp-shot--book img { border-radius: 8px; }
.rb-modules .rb-hp-shot { box-shadow: 0 14px 34px rgb(0 0 0 / .12); border-radius: 6px; }
.rb-pricing .rb-hp-shot { margin-bottom: 1.5rem; }

/* module header parts are block-level now; keep them tight */
.rb-module__num, .rb-module__ttl, .rb-module__sub, .rb-module__count { display: block; }

/* ═══════════ proof bar: grid treatment ═══════════
   For bars carrying more than about six marks, a wrapped flex row looks like
   overflow. Putting each logo in an equal bordered cell makes two rows read as
   a deliberate grid, and evens out the wildly different aspect ratios. */
.rb-logobar--grid .rb-logobar__row {
  display: grid; gap: 0; margin-top: 1.75rem;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgb(255 255 255 / .12);
  border-left: 1px solid rgb(255 255 255 / .12);
}
@media (min-width: 620px)  { .rb-logobar--grid .rb-logobar__row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .rb-logobar--grid .rb-logobar__row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1150px) { .rb-logobar--grid .rb-logobar__row { grid-template-columns: repeat(6, 1fr); } }
.rb-logobar--grid .rb-logobar__cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 6rem; padding: 1rem;
  border-right: 1px solid rgb(255 255 255 / .12);
  border-bottom: 1px solid rgb(255 255 255 / .12);
}
.rb-logobar--grid .rb-logobar__row img {
  height: auto !important; max-height: 2.5rem; max-width: 100%;
  width: auto; object-fit: contain; margin: 0;
}

/* Royal Blue treatment for the association bar, per Rikka's request to try
   something other than near-black. */
.rb-logobar--royal { background: #003e94; border-block-color: rgb(255 255 255 / .18); }
.rb-logobar--royal p { color: rgb(255 255 255 / .85) !important; }
.rb-logobar--royal .rb-logobar__row img { opacity: 1; }
.rb-logobar--royal.rb-logobar--grid .rb-logobar__row,
.rb-logobar--royal.rb-logobar--grid .rb-logobar__row img { border-color: rgb(255 255 255 / .2); }

/* ═══════════════════════════════════════════════════════════════════
   PROOF BAR — SINGLE LINE, INFINITE SCROLL
   Content comes from the Logos post type, so adding a logo in WordPress
   changes this automatically. No JavaScript: the track is duplicated in
   PHP and translated with a CSS animation.
   ═══════════════════════════════════════════════════════════════════ */
.rb-logobar__marquee { overflow: hidden; margin-top: 1.75rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rb-logobar__track { display: flex; width: max-content; animation: rb-scroll 46s linear infinite; }
.rb-logobar__marquee:hover .rb-logobar__track { animation-play-state: paused; }
.rb-logobar__track .rb-logobar__row { margin-top: 0; flex-wrap: nowrap; }
@keyframes rb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rb-logobar__track { animation: none; }
  .rb-logobar__marquee { overflow-x: auto; }
}
.rb-logobar__row--static { flex-wrap: nowrap; }

/* the grid treatment is retired in favour of the single scrolling line */
.rb-logobar--grid .rb-logobar__cell { border: 0; min-height: 0; padding: 0; }

/* ── WHITE BAR, FULL-COLOUR LOGOS ── */
.rb-logobar--white { background: #fff; border-block: 1px solid rgb(0 0 0 / .08); }
.rb-logobar--white p { color: #55555c !important; }
.rb-logobar--white .rb-logobar__row img { opacity: 1; }
.rb-logobar--white .rb-logobar__marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ── TICK LISTS: the grey was built for dark sections and disappeared on
   white. Scope the colour to the surface it sits on. ── */
.rb-light .rb-ticks li,
.rb-legal .rb-ticks li,
.rb-pricing .rb-ticks li,
.rb-meet .rb-ticks li { color: #333; }
.rb-light .rb-ticks li::before,
.rb-pricing .rb-ticks li::before,
.rb-meet .rb-ticks li::before { color: #0086C4; }

/* ═══════════════════════════════════════════════════════════════════
   HIRE POWER — DESIGN PASS
   Rikka's note was that the page was basic and boring. Fixes: a product-
   forward hero instead of a scaled banner photo, coloured cards instead of
   black-on-black, numbered modules with rhythm, and a real offer box.
   ═══════════════════════════════════════════════════════════════════ */

/* ── hero ── */
.rb-hp-hero {
  background:
    radial-gradient(1100px 520px at 78% 12%, rgb(0 134 196 / .30), transparent 62%),
    radial-gradient(900px 460px at 10% 92%, rgb(234 228 79 / .13), transparent 60%),
    #0c0c0c;
  color: #fff;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 4px solid #EAE44F;
}
.rb-hp-hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rb-hp-hero__grid { grid-template-columns: 1.05fr .95fr; } }
.rb-hp-hero__brow { color: #EAE44F !important; }
.rb-hp-hero__h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900; letter-spacing: -.028em; line-height: 1.08;
  margin: 0 0 1rem; color: #fff; text-wrap: balance;
}
.rb-hp-hero__lede { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; color: #4CBEDC; margin: 0 0 1rem; }
.rb-hp-hero__body { font-size: 1.0625rem; line-height: 1.7; color: rgb(255 255 255 / .92); margin: 0 0 1.75rem; max-width: 34em; }
.rb-hp-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.75rem; }
.rb-hp-hero__price { font-size: 1.0625rem; color: rgb(255 255 255 / .75); }
.rb-hp-hero__price s { color: rgb(255 255 255 / .45); margin-right: .4rem; }
.rb-hp-hero__price strong { color: #EAE44F; font-size: 1.5rem; font-weight: 900; }
.rb-hp-hero__cred {
  list-style: none; margin: 0; padding: 1.25rem 0 0;
  border-top: 1px solid rgb(255 255 255 / .16);
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  font-size: .875rem; color: rgb(255 255 255 / .72);
}
.rb-hp-hero__cred strong { color: #fff; }
.rb-hp-hero__art img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  box-shadow: 0 30px 70px rgb(0 0 0 / .55);
}

/* shared button so the CTA is consistent everywhere on this page */
.rb-btn {
  display: inline-block; border-radius: 9999px; text-decoration: none;
  padding: 1.05rem 2.1rem; font-size: .9375rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  transition: transform .12s ease;
}
.rb-btn:hover { transform: translateY(-2px); }
.rb-btn--sun { background: #EAE44F; color: #111; }
.rb-btn--wide { display: block; text-align: center; }

/* ── two ways: coloured, not black on black ── */
.rb-ways__card { position: relative; border: 0; padding: 2.25rem 2rem 2rem; }
.rb-ways__card--sun   { background: #EAE44F; }
.rb-ways__card--ocean { background: #0086C4; }
.rb-ways__card--sun h3, .rb-ways__card--sun p { color: #111; }
.rb-ways__card--ocean h3, .rb-ways__card--ocean p { color: #fff; }
.rb-ways__card { overflow: hidden; }
.rb-ways__n {
  position: absolute; right: 1.25rem; bottom: -.22em;
  font-size: 7rem; font-weight: 900; line-height: 1;
  opacity: .16; color: inherit; pointer-events: none;
}
.rb-ways__card--sun .rb-ways__n { color: #111; }
.rb-ways__card--ocean .rb-ways__n { color: #fff; }
.rb-ways__card h3 { font-size: 1.5rem; margin: 0 0 .75rem; }

/* ── modules: numeral + colour spine ── */
.rb-module > summary { display: flex; flex-direction: row; align-items: flex-start; gap: 1.15rem; padding: 1.5rem 3rem 1.5rem 1.5rem; }
.rb-module__digit {
  flex: 0 0 auto; font-size: 2.25rem; font-weight: 900; line-height: .9;
  letter-spacing: -.04em; opacity: .28; min-width: 2.2ch;
}
.rb-module__head { display: flex; flex-direction: column; gap: .2rem; }
.rb-module--royal { border-left: 5px solid #003e94; }
.rb-module--ocean { border-left: 5px solid #0086C4; }
.rb-module--sky   { border-left: 5px solid #4CBEDC; }
.rb-module--sun   { border-left: 5px solid #EAE44F; }
.rb-module--royal .rb-module__digit { color: #003e94; }
.rb-module--ocean .rb-module__digit { color: #0086C4; }
.rb-module--sky   .rb-module__digit { color: #4CBEDC; }
.rb-module--sun   .rb-module__digit { color: #c9c22f; }
.rb-module[open] .rb-module__digit { opacity: .85; }
.rb-module__count { color: #8a8a92; }
.rb-module__body { padding-left: 4.9rem; }
@media (max-width: 640px) { .rb-module__body { padding-left: 1.5rem; } }

/* ── offer box ── */
.rb-offer {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin: 2.5rem auto 0; max-width: 46rem;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 26px 60px rgb(0 0 0 / .16);
}
@media (min-width: 780px) { .rb-offer { grid-template-columns: 1.1fr .9fr; } }
.rb-offer__top { background: #111; color: #fff; padding: 2.5rem 2rem; text-align: center; }
.rb-offer__label { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #4CBEDC; margin: 0 0 .85rem; }
.rb-offer__price { margin: 0 0 .6rem; line-height: 1; }
.rb-offer__price s { display: block; font-size: 1.25rem; color: rgb(255 255 255 / .4); margin-bottom: .35rem; }
.rb-offer__price strong { font-size: clamp(3.25rem, 7vw, 4.5rem); font-weight: 900; letter-spacing: -.03em; color: #EAE44F; }
.rb-offer__note { font-size: .9375rem; line-height: 1.55; color: rgb(255 255 255 / .8); margin: 0 0 1.5rem; }
.rb-offer__small { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .5); margin: .9rem 0 0; }
.rb-offer__stack { background: #f7f7f4; padding: 2.5rem 2rem; }
.rb-offer__stackhead { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #003e94; margin: 0 0 1rem; }
.rb-offer__stack ul { list-style: none; margin: 0; padding: 0; }
.rb-offer__stack li { position: relative; padding-left: 1.75rem; margin-bottom: .85rem; font-size: .9375rem; line-height: 1.5; color: #333; }
.rb-offer__stack li::before { content: "✓"; position: absolute; left: 0; color: #0086C4; font-weight: 800; }
.rb-offer__stack li:last-child { margin-bottom: 0; }

/* the standalone price block is retired by the offer box */
.rb-pricing .rb-price { display: none; }

/* ── the inner-page hero scale was pixelating Hire Power; Hire Power no
   longer uses that hero at all, and the others get a gentler zoom ── */
@media (min-width: 782px) {
  .rb-hero--photo .rb-hero__bg img { transform: scale(1.28); transform-origin: 18% top; }
}

/* ═══════════ blueprint texture ═══════════
   A whisper of the course blueprint behind the module list, so the longest
   section on the page has some ground under it without competing with type. */
.rb-blueprint { position: relative; isolation: isolate; }
.rb-blueprint::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("assets/images/blueprint-bg-1920.webp");
  background-size: cover; background-position: center;
  opacity: .16;
}
.rb-blueprint::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / .55) 22%, rgb(255 255 255 / .55) 78%, #fff 100%);
}

/* product shots now have no background of their own, so give them room
   and a soft shadow to sit in the page rather than on it */
.rb-hp-hero__art img { box-shadow: 0 26px 60px rgb(0 0 0 / .5); border-radius: 0; }
.rb-hp-shot--book { max-width: 220px; }
.rb-hp-shot--book img { border-radius: 0; filter: drop-shadow(0 18px 34px rgb(0 0 0 / .45)); }
.rb-hp-shot--sm { max-width: 260px; }
.rb-pricing .rb-hp-shot--sm img { border-radius: 0; filter: drop-shadow(0 16px 30px rgb(0 0 0 / .22)); }

/* two-ways now leads straight into the cards */
.rb-ways { margin-top: 2.5rem; }

/* ═══════════ Hire Power v4 ═══════════ */

/* guarantee reassurance right under the hero CTA */
.rb-hp-hero__guar {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .8125rem; line-height: 1.5; color: rgb(255 255 255 / .72);
  margin: -.5rem 0 1.5rem; max-width: 34em;
}
.rb-hp-hero__guar span {
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: #EAE44F; color: #111; font-size: .7rem; font-weight: 900;
  display: grid; place-content: center; margin-top: .1rem;
}

/* ── two ways: icon, hierarchy, when-to-use ── */
.rb-ways__card { padding: 2.5rem 2rem 2.25rem; }
.rb-ways__ico { display: block; width: 3rem; height: 3rem; margin-bottom: 1.15rem; }
.rb-ways__ico svg { width: 100%; height: 100%; }
.rb-ways__card--sun .rb-ways__ico { color: #111; }
.rb-ways__card--ocean .rb-ways__ico { color: #fff; }
.rb-ways__card h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .6rem;
}
.rb-ways__when {
  font-size: 1rem; font-weight: 800; line-height: 1.45; margin: 0 0 .85rem;
  padding-bottom: .85rem;
}
.rb-ways__card--sun .rb-ways__when  { color: #6b6600; border-bottom: 2px solid rgb(0 0 0 / .18); }
.rb-ways__card--ocean .rb-ways__when { color: #cbeaf7; border-bottom: 2px solid rgb(255 255 255 / .28); }
.rb-ways__body { font-size: .9375rem; line-height: 1.65; margin: 0; }
.rb-ways__card--sun .rb-ways__body  { color: #2a2a17; }
.rb-ways__card--ocean .rb-ways__body { color: rgb(255 255 255 / .92); }

/* ── at-a-glance strip ── */
.rb-atglance {
  list-style: none; margin: 2rem auto 1.5rem; padding: 1.35rem 1rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.75rem;
  border-block: 1px solid rgb(0 0 0 / .12);
}
.rb-atglance li { text-align: center; }
.rb-atglance strong {
  display: block; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900;
  line-height: 1; color: #003e94; letter-spacing: -.03em;
}
.rb-atglance span {
  display: block; margin-top: .3rem; font-size: .6875rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #6b6b73;
}

/* ── Ask Hire Power AI ── */
.rb-ai {
  background:
    radial-gradient(760px 380px at 82% 18%, rgb(76 190 220 / .22), transparent 60%),
    #0e1b22;
  color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.rb-ai__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) { .rb-ai__grid { grid-template-columns: 1.05fr .95fr; } }
.rb-ai__brow { color: #4CBEDC !important; }
.rb-ai__h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: 900; letter-spacing: -.025em; margin: 0 0 .5rem; color: #fff; }
.rb-ai__lede { font-size: 1.125rem; font-weight: 700; color: #EAE44F; margin: 0 0 1rem; }
.rb-ai p { line-height: 1.7; color: rgb(255 255 255 / .9); }
.rb-ai__list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.rb-ai__list li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; font-size: .9375rem; color: rgb(255 255 255 / .9); }
.rb-ai__list li::before { content: "✓"; position: absolute; left: 0; color: #4CBEDC; font-weight: 800; }
.rb-ai__chat {
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14);
  border-radius: 14px; padding: 1.5rem;
}
.rb-ai__q {
  background: #4CBEDC; color: #06232c; border-radius: 14px 14px 4px 14px;
  padding: .85rem 1.1rem; margin: 0 0 .85rem; font-weight: 700; font-size: .9375rem;
  max-width: 82%; margin-left: auto;
}
.rb-ai__a {
  background: rgb(255 255 255 / .1); border-radius: 14px 14px 14px 4px;
  padding: .95rem 1.1rem; margin: 0; font-size: .9375rem; line-height: 1.6;
}
.rb-ai__src {
  margin: .6rem 0 0 !important; font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgb(255 255 255 / .5) !important;
}

/* ── sticky buy bar ── */
.rb-stickybuy {
  position: sticky; bottom: 0; z-index: 70;
  background: #111; border-top: 3px solid #EAE44F;
  padding: .85rem 0;
}
.rb-stickybuy__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1.5rem;
}
.rb-stickybuy__name { font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.rb-stickybuy__price { font-size: 1rem; color: rgb(255 255 255 / .75); }
.rb-stickybuy__price s { color: rgb(255 255 255 / .4); }
.rb-stickybuy__price strong { color: #EAE44F; font-size: 1.35rem; font-weight: 900; }
.rb-stickybuy__btn { padding: .8rem 1.6rem; font-size: .8125rem; }
@media (max-width: 620px) {
  .rb-stickybuy__name { display: none; }
  .rb-stickybuy { padding: .6rem 0; }
}

/* ═══════════ peek inside ═══════════ */
.rb-peek { padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; }
.rb-peek__brow { color: #0086C4 !important; }
.rb-peek__h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 900; letter-spacing: -.025em;
  line-height: 1.15; color: #111; margin: 0 0 .75rem; text-wrap: balance;
}
.rb-peek__lede { font-size: 1.0625rem; color: #55555c; margin: 0 auto 2.5rem; max-width: 44em; }
.rb-peek__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rb-peek__grid { grid-template-columns: repeat(3, 1fr); } }
.rb-peek__card { margin: 0; }
.rb-peek__card img {
  width: 100%; height: auto; display: block; border-radius: 6px;
  border: 1px solid rgb(0 0 0 / .1);
  box-shadow: 0 16px 36px rgb(0 0 0 / .13);
  transition: transform .18s ease;
}
.rb-peek__card:hover img { transform: translateY(-4px); }
.rb-peek__card figcaption { margin-top: .85rem; }
.rb-peek__card figcaption strong { display: block; font-size: .9375rem; font-weight: 800; color: #111; }
.rb-peek__card figcaption span {
  display: block; margin-top: .2rem; font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #0086C4;
}
.rb-peek__foot { margin: 2.5rem auto 1.75rem; max-width: 46em; font-size: .9375rem; line-height: 1.6; color: #55555c; }
.rb-peek__cta { margin-top: .5rem; }

/* ═══════════════════════════════════════════════════════════════
   Hire Power v6 — quote marks, tint surface, promise band,
   objections, module icons, value stack
   ═══════════════════════════════════════════════════════════════ */

/* ── a third surface, between white and black ──
   The page was alternating white and near-black every section, which reads
   as a strobe on a long page. This pale sky tint gives a section its own
   ground without another hard flip. */
.rb-tint { background: #EFF6FA; color: #101418; }
.rb-tint h2, .rb-tint h3, .rb-tint h4, .rb-tint p, .rb-tint li, .rb-tint cite { color: #101418; }

.rb-tint .rb-3s__card {
  background: #fff; border: 1px solid rgb(0 32 60 / .1);
  box-shadow: 0 6px 18px rgb(10 40 70 / .06);
}
.rb-tint .rb-3s__card h3 { color: #111; }
.rb-tint .rb-3s__card p  { color: #4a4a52; }
.rb-tint .rb-3s__close   { color: #33333a; }
.rb-tint .rb-3s__punch   { color: #005a86; }
/* the script words sit on white now, so the pale ones need deepening */
.rb-tint .rb-script--sun { color: #a89f00; }
.rb-tint .rb-script--sky { color: #17789B; }

.rb-tint.rb-thrive p            { color: #33333a; }
.rb-tint.rb-thrive .rb-thrive__big    { color: #101418 !important; }
.rb-tint.rb-thrive .rb-thrive__big strong { color: #a06e00; }
.rb-tint.rb-thrive .rb-thrive__punch  { color: #005a86 !important; }
.rb-tint.rb-thrive .rb-thrive__src    { color: rgb(16 20 24 / .55) !important; }

/* ── testimonials: the quote mark does the work ── */
.rb-hp-quote__q { position: relative; padding-top: 2.75rem; }
.rb-hp-quote__q::before {
  content: "\201C";
  position: absolute; top: -.35em; left: -.06em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5.5rem, 11vw, 8.5rem); font-weight: 700; line-height: 1;
  color: currentColor; opacity: .17; pointer-events: none;
}
.rb-hp-quote__q p { position: relative; }
.rb-hp-quote__q cite {
  display: block; margin-top: 1.25rem; padding-top: 1rem;
  border-top: 2px solid currentColor;
  max-width: 30rem;
}
.rb-sky .rb-hp-quote__q::before  { color: #06333f; opacity: .2; }
.rb-sky .rb-hp-quote__q cite     { border-color: rgb(6 51 63 / .28); }
.rb-tint .rb-hp-quote__q::before { color: #0086C4; opacity: .22; }
.rb-tint .rb-hp-quote__q cite    { color: #005a86; border-color: rgb(0 134 196 / .3); }
.rb-light .rb-hp-quote__q::before { color: #0086C4; opacity: .2; }
.rb-light .rb-hp-quote__q cite   { color: #003e94; border-color: rgb(0 62 148 / .22); }
.rb-hp-quote__q--dark::before    { color: #4CBEDC; opacity: .28; }
.rb-hp-quote__q--dark cite       { border-color: rgb(76 190 220 / .35); }

/* ── promise band: the two things the course actually changes ── */
.rb-promise {
  background: linear-gradient(135deg, #003e94 0%, #0086C4 100%);
  color: #fff; padding: clamp(2.75rem, 5vw, 4rem) 0;
}
.rb-promise__brow { color: #EAE44F !important; text-align: center; }
.rb-promise__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.75rem; }
@media (min-width: 800px) { .rb-promise__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.rb-promise__item { position: relative; padding-left: 3.75rem; }
.rb-promise__n {
  position: absolute; left: 0; top: -.15rem;
  font-size: 2.25rem; font-weight: 900; letter-spacing: -.04em;
  color: rgb(234 228 79 / .55); line-height: 1;
}
.rb-promise__item h3 {
  font-size: clamp(1.25rem, 2.3vw, 1.625rem); font-weight: 900; line-height: 1.2;
  letter-spacing: -.02em; color: #fff; margin: 0 0 .6rem; text-wrap: balance;
}
.rb-promise__item p { font-size: .9375rem; line-height: 1.7; color: rgb(255 255 255 / .88); margin: 0; }
.rb-promise__foot {
  margin: 2.25rem 0 0; text-align: center; font-size: .9375rem; font-weight: 700;
  color: rgb(255 255 255 / .7);
}

/* ── "if you're experiencing": lead phrase carries the weight ── */
.rb-pains li b {
  display: block; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  font-size: .8125rem; color: #003e94; margin-bottom: .15rem;
}
.rb-pains li { padding-bottom: .35rem; }
.rb-pains li::before { top: .05rem; }

/* ── modules: an icon per module, tinted to the module's colour ── */
.rb-module__ico {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-content: center;
  border-radius: 8px; background: rgb(0 0 0 / .05);
}
.rb-module__ico svg { width: 1.5rem; height: 1.5rem; }
.rb-module--royal .rb-module__ico { color: #003e94; background: rgb(0 62 148 / .09); }
.rb-module--ocean .rb-module__ico { color: #0086C4; background: rgb(0 134 196 / .1); }
.rb-module--sky   .rb-module__ico { color: #17789B; background: rgb(76 190 220 / .18); }
.rb-module--sun   .rb-module__ico { color: #8a8400; background: rgb(234 228 79 / .3); }
.rb-module > summary { align-items: center; gap: .95rem; }
@media (max-width: 520px) { .rb-module__ico { display: none; } }

/* named frameworks stand out inside the lesson copy */
.rb-tool { font-weight: 800; color: #003e94; }
.rb-lesson { position: relative; padding-left: 1.5rem; }
.rb-lesson::before {
  content: ""; position: absolute; left: 0; top: 1.55rem;
  width: .5rem; height: .5rem; border-radius: 2px; background: currentColor; opacity: .5;
}
.rb-module--royal .rb-lesson::before { color: #003e94; }
.rb-module--ocean .rb-lesson::before { color: #0086C4; }
.rb-module--sky   .rb-lesson::before { color: #4CBEDC; }
.rb-module--sun   .rb-lesson::before { color: #c9c22f; }

/* ── objections ── */
.rb-obj__top { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 880px) { .rb-obj__top { grid-template-columns: 1.35fr .65fr; } }
.rb-obj__brow { color: #EAE44F !important; }
.rb-obj__h2 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem); font-weight: 900; letter-spacing: -.028em;
  line-height: 1.12; color: #fff; margin: 0 0 .75rem; text-wrap: balance;
}
.rb-obj__lede { font-size: 1.0625rem; line-height: 1.65; color: rgb(255 255 255 / .82); margin: 0; max-width: 40em; }
.rb-obj__photo { margin: 0; }
.rb-obj__photo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgb(0 0 0 / .55)); }
@media (max-width: 879px) { .rb-obj__photo { max-width: 300px; margin-inline: auto; } }

.rb-obj__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 780px) { .rb-obj__grid { grid-template-columns: 1fr 1fr; } }
.rb-obj__card {
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .13);
  border-left: 4px solid #EAE44F; border-radius: 6px; padding: 1.6rem 1.5rem;
}
.rb-obj__q {
  font-size: 1.0625rem; font-weight: 800; font-style: italic; line-height: 1.4;
  color: #EAE44F; margin: 0 0 .8rem;
}
.rb-obj__q::before { content: "\201C"; }
.rb-obj__q::after  { content: "\201D"; }
.rb-obj__a { font-size: .9375rem; line-height: 1.7; color: rgb(255 255 255 / .9); margin: 0; }
.rb-obj__a b { color: #4CBEDC; font-weight: 800; }
.rb-obj__src {
  margin: .9rem 0 0 !important; font-size: .6875rem; line-height: 1.5;
  letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .45) !important;
}

/* ── value stack ── */
.rb-vstack { width: 100%; border-collapse: collapse; margin: .25rem 0 0; font-size: .875rem; }
.rb-vstack th, .rb-vstack td { text-align: left; padding: .7rem 0; vertical-align: top; line-height: 1.5; }
.rb-vstack tbody th { font-weight: 500; color: #33333a; padding-right: 1rem; }
.rb-vstack tbody td { text-align: right; font-weight: 800; color: #55555c; white-space: nowrap; }
.rb-vstack tbody tr + tr th, .rb-vstack tbody tr + tr td { border-top: 1px solid rgb(0 0 0 / .08); }
.rb-vstack tfoot tr th, .rb-vstack tfoot tr td { border-top: 2px solid rgb(0 0 0 / .2); }
.rb-vstack__total th, .rb-vstack__total td { font-weight: 800; color: #55555c; text-align: right; }
.rb-vstack__total th { text-align: left; }
.rb-vstack__total td { text-decoration: line-through; }
.rb-vstack__today th, .rb-vstack__today td {
  border-top: 0 !important; padding-top: .35rem;
  font-size: 1.0625rem; font-weight: 900; color: #003e94;
}
.rb-vstack__today td { text-align: right; }
.rb-vstack__note { margin: 1rem 0 0; font-size: .75rem; color: #6b6b73; }

/* ── guarantee card gets a face on it ── */
.rb-guarantee__card { display: flex; gap: 1.5rem; align-items: flex-start; text-align: left; }
.rb-guarantee__face {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 3px solid #EAE44F;
}
.rb-guarantee__copy { flex: 1 1 auto; }
.rb-guarantee__sig {
  margin: 1rem 0 0; font-size: .875rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #EAE44F;
}
@media (max-width: 560px) {
  .rb-guarantee__card { flex-direction: column; align-items: center; text-align: center; }
}

/* ── even-if grid: the illustration is one of the cells ── */
.rb-evenif__art {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .9rem;
}
.rb-evenif__art img { max-width: 190px; width: 100%; height: auto; display: block; }
.rb-evenif__art figcaption {
  font-size: .8125rem; font-style: italic; line-height: 1.5; color: #6b6b73; text-align: center;
}

/* ═══════════ v1.33.1 corrections ═══════════ */

/* The offer box sits inside .rb-pricing, which is .rb-light — and
   ".rb-light p" (one class + one element) outranks a single utility class.
   Every paragraph inside the black half was being forced to #000 on #111.
   Re-state them at higher specificity rather than reaching for !important. */
.rb-light .rb-offer__top p        { color: rgb(255 255 255 / .8); }
.rb-light .rb-offer__top .rb-offer__label { color: #4CBEDC; }
.rb-light .rb-offer__top .rb-offer__small { color: rgb(255 255 255 / .55); }
.rb-light .rb-offer__top .rb-offer__price s { color: rgb(255 255 255 / .45); }

/* …and the black half was stretching to the height of the value stack
   beside it, leaving a slab of empty black under the button. */
.rb-offer__top { display: flex; flex-direction: column; justify-content: center; }
.rb-offer__top > :last-child { margin-bottom: 0; }

/* small print on the yellow CTA was sitting at 50% black */
.rb-hp-copyright { color: rgb(0 0 0 / .62); }

/* quote mark was floating a little free of its quote */
.rb-hp-quote__q { padding-top: 2.25rem; }
.rb-hp-quote__q::before { top: -.28em; }

/* ═══════════ cost-of-a-bad-hire calculator ═══════════ */
.rb-calc { text-align: center; }
.rb-calc__brow { color: #0086C4 !important; }
.rb-calc__h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -.025em;
  line-height: 1.15; color: #111; margin: 0 0 .75rem; text-wrap: balance;
}
.rb-calc__lede { font-size: 1.0625rem; line-height: 1.6; color: #44444c; margin: 0 auto 2.5rem; max-width: 46em; }

.rb-calc__wrap {
  display: grid; gap: 0; grid-template-columns: 1fr; text-align: left;
  border-radius: 10px; overflow: hidden; box-shadow: 0 18px 44px rgb(0 0 0 / .14);
}
@media (min-width: 820px) { .rb-calc__wrap { grid-template-columns: .85fr 1.15fr; } }

.rb-calc__form { background: #f4f4f1; padding: 2.25rem 2rem; display: grid; gap: 1.5rem; align-content: center; }
.rb-calc__field label {
  display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #003e94; margin-bottom: .5rem;
}
.rb-calc__field select,
.rb-calc__money input {
  width: 100%; font: inherit; font-size: 1rem; color: #111;
  background: #fff; border: 1px solid rgb(0 0 0 / .22); border-radius: 5px;
  padding: .7rem .8rem;
}
.rb-calc__field select:focus-visible,
.rb-calc__money input:focus-visible { outline: 3px solid #0086C4; outline-offset: 1px; }
.rb-calc__money { position: relative; }
.rb-calc__money span {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  font-weight: 800; color: #6b6b73; pointer-events: none;
}
.rb-calc__money input { padding-left: 1.85rem; }
.rb-calc__hint { margin: .5rem 0 0; font-size: .75rem; line-height: 1.5; color: #6b6b73; }

.rb-calc__out { background: #111; color: #fff; padding: 2.25rem 2rem; }
.rb-calc__outlabel {
  margin: 0 0 .35rem; font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #4CBEDC;
}
.rb-calc__big {
  margin: 0; font-size: clamp(2.75rem, 6.5vw, 4rem); font-weight: 900;
  letter-spacing: -.035em; line-height: 1; color: #EAE44F;
}
.rb-calc__basis { margin: .6rem 0 1.5rem; font-size: .8125rem; line-height: 1.55; color: rgb(255 255 255 / .62); }
.rb-calc__rows { list-style: none; margin: 0; padding: 0; }
.rb-calc__rows li {
  display: grid; grid-template-columns: 4.75rem 1fr; gap: .15rem .9rem;
  padding: .95rem 0; border-top: 1px solid rgb(255 255 255 / .14);
}
.rb-calc__rows span {
  grid-row: 1 / span 2; align-self: start; padding-top: .15rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #4CBEDC;
}
.rb-calc__rows strong { font-size: 1.125rem; font-weight: 900; color: #fff; }
.rb-calc__rows em { font-style: normal; font-size: .8125rem; line-height: 1.55; color: rgb(255 255 255 / .72); }

.rb-calc__src { margin: 1.5rem auto 0; max-width: 58em; font-size: .75rem; line-height: 1.6; color: #6b6b73; }
.rb-calc__punch {
  margin: 1.75rem 0 1.25rem; font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 800; color: #003e94;
}
.rb-calc__punch strong { color: #003e94; }

/* .rb-light forces paragraphs to #000; the dark half of the calculator
   needs its own colours back at higher specificity */
.rb-light .rb-calc__out p { color: rgb(255 255 255 / .72); }
.rb-light .rb-calc__out .rb-calc__outlabel { color: #4CBEDC; }
.rb-light .rb-calc__out .rb-calc__big { color: #EAE44F; }
.rb-light .rb-calc__out .rb-calc__basis { color: rgb(255 255 255 / .62); }
.rb-light .rb-calc__rows li { color: #fff; }

/* ═══════════ thank you / confirmation ═══════════ */
.rb-ty {
  background:
    radial-gradient(760px 420px at 50% 0%, rgb(76 190 220 / .18), transparent 62%),
    #111;
  color: #fff; text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.rb-ty__mark {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem;
  border-radius: 50%; background: #EAE44F; color: #111;
  display: grid; place-content: center;
  box-shadow: 0 0 0 10px rgb(234 228 79 / .14);
}
.rb-ty__mark svg { width: 2.25rem; height: 2.25rem; }
.rb-ty__brow { color: #4CBEDC !important; }
.rb-ty__h1 {
  font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; letter-spacing: -.03em;
  line-height: 1.1; color: #fff; margin: .35rem 0 .85rem; text-wrap: balance;
}
.rb-ty__lede {
  font-size: 1.0625rem; line-height: 1.7; color: rgb(255 255 255 / .82);
  margin: 0 auto 2.75rem; max-width: 40em;
}
.rb-ty__steps { list-style: none; margin: 0; padding: 0; text-align: left; max-width: 34rem; margin-inline: auto; }
.rb-ty__steps li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem;
  padding: 1.15rem 0; border-top: 1px solid rgb(255 255 255 / .14);
}
.rb-ty__steps li:last-child { border-bottom: 1px solid rgb(255 255 255 / .14); }
.rb-ty__n {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 2px solid #4CBEDC; color: #4CBEDC;
  display: grid; place-content: center; font-weight: 900; font-size: .9375rem;
}
.rb-ty__steps h3 { font-size: 1.0625rem; font-weight: 800; color: #fff; margin: .2rem 0 .3rem; }
.rb-ty__steps p { font-size: .9375rem; line-height: 1.6; color: rgb(255 255 255 / .75); margin: 0; }

.rb-ty-next__h2 {
  text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900;
  letter-spacing: -.02em; color: #111; margin: 0 0 2rem;
}
.rb-ty-next__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .rb-ty-next__grid { grid-template-columns: repeat(3, 1fr); } }
.rb-ty-card {
  display: flex; flex-direction: column; gap: .5rem;
  background: #fff; border: 1px solid rgb(0 0 0 / .12); border-radius: 8px;
  border-top: 4px solid #0086C4;
  padding: 1.6rem 1.5rem; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.rb-ty-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgb(0 0 0 / .12); }
.rb-ty-card__kicker {
  font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #0086C4;
}
.rb-ty-card strong { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; color: #111; }
.rb-ty-card__b { font-size: .9375rem; line-height: 1.6; color: #55555c; flex: 1 1 auto; }
.rb-ty-card__go { font-size: .875rem; font-weight: 800; color: #003e94; margin-top: .35rem; }
.rb-light .rb-ty-card__b { color: #55555c; }

/* ═══════════ contact ═══════════ */
.rb-contact-hero {
  background: radial-gradient(720px 380px at 50% 0%, rgb(76 190 220 / .16), transparent 62%), #111;
  color: #fff; text-align: center; padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
.rb-contact-hero__brow { color: #4CBEDC !important; }
.rb-contact-hero__h1 {
  font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 900; letter-spacing: -.03em;
  line-height: 1.1; color: #fff; margin: .35rem 0 .85rem; text-wrap: balance;
}
.rb-contact-hero__lede {
  font-size: 1.0625rem; line-height: 1.7; color: rgb(255 255 255 / .82);
  margin: 0 auto; max-width: 42em;
}

.rb-contact__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .rb-contact__grid { grid-template-columns: 1.45fr .55fr; gap: 3rem; } }

.rb-contact__formwrap {
  background: #fff; border: 1px solid rgb(0 0 0 / .1); border-radius: 10px;
  box-shadow: 0 14px 36px rgb(0 0 0 / .09); padding: .5rem; overflow: hidden;
}
/* form_embed.js sets the real height once the form reports it; min-height stops
   the iframe collapsing to zero before that happens */
/* form_embed.js sets an inline height once the form reports its own; the
   !important floor stops it collapsing to a sliver if that message never
   arrives — min-height never prevents the iframe growing past it. */
.rb-contact__iframe {
  width: 100%; border: 0; border-radius: 8px; display: block;
  min-height: 1071px !important;
}
@media (max-width: 640px) { .rb-contact__iframe { min-height: 1240px !important; } }
.rb-contact__noscript { padding: 1.5rem; font-size: .9375rem; line-height: 1.6; }

.rb-contact__side { display: grid; gap: 1.25rem; }
.rb-contact__card {
  background: #f6f8fb; border: 1px solid rgb(0 32 60 / .1);
  border-left: 4px solid #0086C4; border-radius: 8px; padding: 1.5rem 1.4rem;
}
.rb-contact__card--quiet { border-left-color: #EAE44F; }
.rb-light .rb-contact__card h2 {
  font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: #003e94; margin: 0 0 .85rem;
}
.rb-contact__steps { margin: 0; padding-left: 1.15rem; }
.rb-light .rb-contact__steps li { font-size: .9375rem; line-height: 1.6; color: #33333a; margin-bottom: .6rem; }
.rb-contact__steps li:last-child { margin-bottom: 0; }
.rb-contact__direct { margin: 0 0 .6rem; font-size: 1.0625rem; font-weight: 800; }
.rb-light .rb-contact__direct a { color: #003e94; text-decoration: none; border-bottom: 2px solid rgb(0 62 148 / .25); }
.rb-light .rb-contact__direct a:hover { border-bottom-color: #003e94; }
.rb-light .rb-contact__note { font-size: .8125rem; line-height: 1.55; color: #5b5b62; margin: 0; }
.rb-contact__copywrap { margin: 0 0 .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.rb-contact__copy {
	font: inherit; font-size: .8125rem; font-weight: 700; line-height: 1;
	padding: .5rem .7rem; cursor: pointer; border-radius: 4px;
	background: transparent; color: #003e94; border: 2px solid rgb(0 62 148 / .25);
}
.rb-contact__copy:hover { border-color: #003e94; background: rgb(0 62 148 / .06); }
.rb-contact__copy:focus-visible { outline: 2px solid #0086C4; outline-offset: 2px; }
.rb-contact__copy.is-copied { color: #1d7a3c; border-color: rgb(29 122 60 / .45); }
.rb-light .rb-contact__copied { font-size: .8125rem; font-weight: 700; color: #1d7a3c; }
.rb-contact__links { list-style: none; margin: 0; padding: 0; }
.rb-contact__links li { margin-bottom: .5rem; }
.rb-light .rb-contact__links a { font-size: .9375rem; font-weight: 700; color: #0086C4; text-decoration: none; }
.rb-light .rb-contact__links a:hover { color: #003e94; text-decoration: underline; }

/* ── contact form loading state ──
   The GHL app and its Turnstile captcha boot inside the iframe, which can take
   several seconds. The iframe is transparent until then, so this sits behind it
   and is simply covered once the form paints. No JS needed. */
.rb-contact__formwrap { position: relative; }
.rb-contact__loading {
  position: absolute; inset: .5rem; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; text-align: center; padding: 2rem; border-radius: 8px; background: #fff;
}
.rb-contact__iframe { position: relative; z-index: 1; background: transparent; }
.rb-contact__spinner {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 3px solid rgb(0 134 196 / .2); border-top-color: #0086C4;
  animation: rb-spin .9s linear infinite;
}
@keyframes rb-spin { to { transform: rotate(360deg); } }
.rb-light .rb-contact__loading p { font-size: .9375rem; color: #55555c; margin: 0; }
.rb-light .rb-contact__loading .rb-contact__loading-alt { font-size: .8125rem; color: #7a7a82; max-width: 24em; }
@media (prefers-reduced-motion: reduce) { .rb-contact__spinner { animation: none; } }