/* Supplemental theme rules for blocks that exist in the newer theme build but not in the
   stylesheets the live site currently ships: the expert-profile badge and the stacked social
   list. Extracted verbatim from the design build's main.css
   (development.eximius-solutions.com/rcb-corporate-website/html/v1/assets/css/build/main.css).
   Loaded ONLY by the expert page, so article/category/local parity is untouched. When the
   live theme is next rebuilt these rules should arrive in main.css and this file can go. */
.socials-wrapper-stacked .social__inner { width: 20px; }
.socials-wrapper-stacked .social:not(:last-child) { margin-bottom: 12px; }
.socials-wrapper-stacked .social a { display: flex; align-items: center; text-decoration: none; gap: 15px; -webkit-text-fill-color: #939BB8; }
.socials-wrapper-stacked .social a.text-color-blue, .socials-wrapper-stacked .social a span.text-color-blue { -webkit-text-fill-color: #005AEE; }
.socials-wrapper-stacked .social a img { max-width: 16px; }
.socials-wrapper-stacked .social a:hover { text-decoration: underline; }
.page-header .page-header__inner .text-box .heading .verified-expert-badge { display: block; width: 100px; height: 100px; margin-top: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; }
@media (min-width: 992px){ .page-header .page-header__inner .text-box .heading .verified-expert-badge { position: absolute; right: 0; top: 0; margin-top: 0; }}

/* The rest of the expert-profile layout, from the same design build.
   The earlier extraction took the badge and the stacked socials but stopped there, so the layout
   those two sit inside was never vendored — and the live theme does not ship it, because the live
   site has no expert-profile template. The result was a profile page whose CSS half-existed:
   the badge was `position: absolute` with nothing positioned to anchor to, so it flew to the
   corner of the viewport, and `.hero-image.small` fell back to the full-size 515px rule with
   `img { width: 100% }`, which stretched a 300x400 portrait into a 515x687 slab.
   Copied verbatim from the design build's main.css — same source as the two rules above. */
.page-header .page-header__inner .text-box .heading { max-width: unset; position: relative; }
.page-header.with-hero-image .hero-image.small { width: 400px; min-width: 400px; }
.page-header.with-hero-image .hero-image.small img { width: auto; }
.page-header.with-hero-image .hero-image .social .social__inner img { width: auto; }
@media (min-width: 992px){
  /* Reserves the badge's corner so it never lands on top of the name. */
  .page-header .heading.main,
  .page-header .text { padding-right: 150px; }
}
@media (max-width: 1199px){
  .page-header .heading.main .title > * { font-size: 4.8rem; }
}
@media (max-width: 575px){
  /* main.css drops `.hero-image` to full width here but predates `.small`, which would otherwise
     stay pinned at 400px on a phone. */
  .page-header.with-hero-image .hero-image.small { width: 100%; min-width: 100%; }
}

/* Hero headline.
   The theme sets `.hero-section .content .title h1 { color: #fff0 }` — fully transparent — because
   its own JavaScript paints the headline as an animated rotating-words effect (note the
   `.words-to-rotate` input the block renders). This site does not run that script, so the headline
   would simply not appear. The theme already solves the same problem for its slim hero variant
   with `color: inherit`, which picks up the white set by `.bg-grey-darker`; applying it to the
   marketing hero is the theme's own answer, not a new opinion. */
.hero-section .content .title h1,
.hero-section .content .title h2,
.hero-section .content .title h3 { color: inherit; }

/* Same defect, same block editor, different section: `rcb-text-and-image` also sets its heading
   `color: #fff0` — fully transparent — for the same rotating-words script we do not run. Without
   this, the "Ready to Amplify Your Expertise?" headline on /marketing-studio/ is present in the
   DOM, selectable, and invisible. These are the only two blocks in the theme that do it, verified
   by grepping every `color:#fff0` rule targeting a heading across all vendored stylesheets.

   Written as two explicit arms rather than `color: inherit`. Both resolve identically today, but
   the intent is worth stating: #000D27 is the theme's body/heading colour, and the two
   text-and-image sections on /get-interviewed/ sit on `bg-grey-darker`, where a flat black would
   put navy text on a navy panel — the same invisible-heading bug in reverse. */
.text-and-image .heading .title h1,
.text-and-image .heading .title h2,
.text-and-image .heading .title h3,
.text-and-image .container > .heading .title h1,
.text-and-image .container > .heading .title h2,
.text-and-image .container > .heading .title h3 { color: #000D27; }

.text-and-image.bg-grey-darker .heading .title h1,
.text-and-image.bg-grey-darker .heading .title h2,
.text-and-image.bg-grey-darker .heading .title h3,
.text-and-image.bg-blue .heading .title h1,
.text-and-image.bg-blue .heading .title h2,
.text-and-image.bg-blue .heading .title h3,
.bg-grey-darker .text-and-image .heading .title h1,
.bg-grey-darker .text-and-image .heading .title h2,
.bg-grey-darker .text-and-image .heading .title h3 { color: #FFF; }

/* "As Seen In" marquee. The theme hides `.content-holder` and delegates the moving track to a
   `supermarquee` component loaded from unpkg; we don't load third-party scripts, so the track is
   built in markup instead (two identical logo groups) and moved here. Translating by exactly -50%
   lands the second group where the first began, so the loop has no seam. */
.marquee .marquee__inner { overflow: hidden; }
.marquee .kc-marquee-track {
  display: flex;
  width: max-content;
  animation: kc-marquee var(--kc-marquee-duration, 40s) linear infinite;
}
.marquee .kc-marquee-group { display: flex; align-items: center; gap: 60px; padding-right: 60px; }
.marquee .marquee__inner:hover .kc-marquee-track { animation-play-state: paused; }
@keyframes kc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee .kc-marquee-track { animation: none; }
}

/* ---------------------------------------------------------------------------------------------
   Deliberate departures from the live theme, at Steve's direction (2026-08-28). Everything above
   this line reproduces keycrew.co; everything below changes it on purpose, so the two are not
   confused later when someone diffs against the live site and finds these.
   --------------------------------------------------------------------------------------------- */

/* NOTE: no width override here on purpose. The narrow running text Steve flagged is what the live
   site does too — measured at 1440px, the hero subtitle is 920px wide on both. Widening it made us
   wider than keycrew.co, which is a parity regression, not a fix. If the copy should genuinely run
   wider, that is a design decision to take against the live site as well. */

/* Element cards: white with a blue frame, replacing the pastel fills. The `[class*="bg-"]` arm is
   what actually does the work — each card carries its own `bg-purple-lightest` / `bg-yellow-...`
   utility from the source content, and those would otherwise win on specificity. */
.rcb-elements-list .element-list--card,
.rcb-elements-list .element-list--card[class*="bg-"] {
  background-color: #fff;
  border: 1px solid rgba(0, 90, 238, 0.28);
  box-shadow: none;
}

/* The cards sat a long way above the copy that follows them, because the card grid's bottom margin
   and the next section's top padding stacked. */
.rcb-elements-list .elements-list__inner { margin-bottom: 0; }

/* "Presented By" can stack up to three profile cards; the theme only ever drew one. */
.info-cards-section .info-cards-section__inner + .info-cards-section__inner { margin-top: 30px; }

/* `cta-outline` — a CTA drawn as a dark-blue outlined card instead of a solid vibrant-blue slab.
   Applies to both the `inline` variant (the licensing notice on /editorial-licensing/) and the
   `standard` variant (the newsletter block at the foot of /journal/), in place of `bg-blue`.

   A new utility rather than a redefinition of `bg-blue`, because `bg-blue` still has to mean "solid
   #005AEE" everywhere else, and because of every button rule that keys off it: `.bg-blue
   .button--primary` inverts the button to white-on-blue, which is exactly wrong once the card
   behind it is no longer blue.

   The border and radius are restated at every width on purpose: the theme builds the inline
   variant's card inside a `min-width: 992px` block, so a variant that merely dropped `bg-blue`
   would keep its card on desktop and lose it entirely on tablet and phone. */
.cta-block.cta-outline .container {
  background-color: #fff0;
  border: 1px solid #000D27;
  border-radius: 32px;
}

@media (max-width: 991px) {
  /* Below 992px the theme drops the INLINE container to 15px of side padding, which was fine when
     the edge was a full-bleed colour and is not once there is a line drawn there. The standard
     variant already carries 30px of its own, so this arm stays scoped to `inline`. */
  .cta-block.inline.cta-outline .container { padding-left: 30px; padding-right: 30px; }
}

/* `.bg-blue` sets `color: #FFF` on the whole section, which is what painted this copy white. With
   no fill it has to take the body colours back. `.subtitle` is stated separately because the base
   inline rule hardcodes #FFF for it at every width, and would otherwise leave it invisible. */
.cta-block.cta-outline .heading .title h1,
.cta-block.cta-outline .heading .title h2,
.cta-block.cta-outline .heading .title h3,
.cta-block.cta-outline .heading .title h4,
.cta-block.cta-outline .heading .title h5,
.cta-block.cta-outline .heading .title h6 { color: #000D27; }
.cta-block.cta-outline .heading .subtitle { color: #334363; }

/* The button, in the same dark navy as the frame. Without this it falls back to the theme's default
   primary — solid #005AEE — which would put the vibrance we just removed from the card straight
   back into the button. `-webkit-text-fill-color` is set alongside `color` because the theme's own
   button rules set it, and it wins over `color` in WebKit wherever it is left standing.

   The default arrow needs no rule: it is already arrow-right-white.webp, and the only thing that
   swapped it for the blue one was `.bg-blue .button--primary::before`, which no longer matches. */
.cta-block.cta-outline .button--primary {
  background-color: #000D27;
  color: #FFF;
  -webkit-text-fill-color: #FFF;
  border: 1px solid #000D27;
}

/* Hover lifts the fill rather than inverting it. The theme's default hover flips a primary button
   to white with #005AEE text and a blue arrow, which reintroduces the vibrant blue on hover and,
   worse, has no dark-navy arrow asset to swap to — the icon set ships arrow-right-blue,
   -white, -orange and -dark-grey, but no right-facing dark blue. Keeping the text and arrow white
   sidesteps the missing asset entirely. #0F1C3B is the theme's own lifted navy. */
.cta-block.cta-outline .button--primary:hover {
  background-color: #0F1C3B;
  color: #FFF;
  -webkit-text-fill-color: #FFF;
  border: 1px solid #0F1C3B;
}
.cta-block.cta-outline .button--primary.with-arrow:hover::before {
  background-image: url(/theme/img/icon/arrows/arrow-right-white.webp);
}

/* ── The photoless profile, and the sources index ──────────────────────────────────────────────
   Most sources have no photo, so "no photo" is the common case, not the fallback. The theme only
   ever drew the side-by-side layout and filled an empty column with a stock silhouette; these
   rules are the second layout — everything centred, no column at all. The page drops
   `with-hero-image` and adds `no-photo text-center`, which is what stops the 400px image rules
   (all of which key off `.with-hero-image`) from matching. */

.page-header.no-photo .page-header__inner { display: block; }

/* `.text-box` is capped at 720px and pinned left by the theme. Centre it, but keep the cap: the
   bio is running text and a 1400px measure is unreadable. */
.page-header.no-photo .text-box { margin-left: auto; margin-right: auto; }

/* The theme reserves a 150px gutter on the right of the heading so the corner-pinned badge never
   lands on the name. Centred, the badge is in the flow and the reservation would just push the
   title off-centre. */
.page-header.no-photo .heading.main,
.page-header.no-photo .text { padding-right: 0; }

/* Badge above the name rather than pinned to the corner — there is no column for it to sit
   beside, and absolute positioning against a centred block reads as a mistake. */
.page-header.no-photo .heading .verified-expert-badge {
  position: static;
  margin: 0 auto 24px;
}

.page-header.no-photo .socials-wrapper-stacked .social a { justify-content: center; }

/* Vertical rhythm. In the side-by-side layout the 400px image column set the band's height and the
   text simply sat inside it, so the theme never needed margins between these blocks. Centred and
   stacked, they collapse into each other — name, role, company and market arrive as one run of
   text. One rule between siblings, so it holds however many of the optional blocks a profile
   actually has. */
.page-header.no-photo .text-box__inner > * + * { margin-top: 28px; }

/* The band itself needs room to breathe now that it is short: 50px top and bottom was sized for a
   header with a portrait in it. */
.page-header.no-photo { padding-top: 40px; padding-bottom: 80px; }

/* The featured band on /sources/ uses the city pages' expert card, minus the photo column. */
.incontent-text-and-image.no-photo { display: block; }
.incontent-text-and-image.no-photo .text { width: 100%; max-width: 100%; }

/* Cards in a row match heights, so the bordered boxes line up instead of stepping wherever a
   company name wraps to a third line. The `.additional-info` strip is pushed to the bottom for the
   same reason: the market/story line should sit on one baseline across the row. */
.elements-list.grid .inner-grid__item.element .element-list--card.slim.source-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.element-list--card.slim.source-card .element-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.element-list--card.slim.source-card .additional-info { margin-top: auto; }

/* Optional 40px avatar on a directory card. The card stays text-first — this sits inline with the
   name rather than heading the card, so a row of photoless cards beside a photographed one still
   reads as one grid. */
.element-list--card.slim.source-card .title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.element-list--card.slim.source-card .source-avatar {
  flex: 0 0 40px;
  line-height: 0;
}
.element-list--card.slim.source-card .source-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* `cta-compact` — the standard-variant CTA at a sane scale. Kept separate from `cta-outline`
   because they are different decisions: one is the colour, this is the size.

   The theme's standard CTA is built as a full-width hero-scale panel — 100px of vertical padding,
   a 5.6rem/6.7rem headline and a 60px gap above the button. On the newsletter block, whose whole
   job is one sentence and one button, that produced roughly 600px of mostly empty blue.

   Every selector here carries one more class than the theme's, so these win on specificity rather
   than on sheet order, including inside the theme's own `max-width: 767px` block — which sets the
   headline to 4rem and would otherwise make the compact block LARGER on a phone than on a laptop. */
.cta-block.standard.cta-compact .container { padding-top: 56px; padding-bottom: 56px; }

.cta-block.standard.cta-compact .heading .title h1,
.cta-block.standard.cta-compact .heading .title h2,
.cta-block.standard.cta-compact .heading .title h3,
.cta-block.standard.cta-compact .heading .title h4,
.cta-block.standard.cta-compact .heading .title h5,
.cta-block.standard.cta-compact .heading .title h6 { font-size: 3.4rem; line-height: 4.2rem; }

.cta-block.standard.cta-compact .section-cta { margin-top: 32px; }

@media (max-width: 767px) {
  .cta-block.standard.cta-compact .container { padding-top: 40px; padding-bottom: 40px; }
  .cta-block.standard.cta-compact .heading .title h1,
  .cta-block.standard.cta-compact .heading .title h2,
  .cta-block.standard.cta-compact .heading .title h3,
  .cta-block.standard.cta-compact .heading .title h4,
  .cta-block.standard.cta-compact .heading .title h5,
  .cta-block.standard.cta-compact .heading .title h6 { font-size: 2.8rem; line-height: 3.5rem; }
}