/* ---- parts\H4\existing.css ---- */
/* ==========================================================================
   Casting v2 (H4): restyle of the EXISTING Casting page sections + the new
   static markup inserted by the transform (hero buttons, core services).
   Every selector is scoped to body.alm-cast-v2 (added by PHP on the casting
   page only). The page's own CSS box uses !important everywhere, so the
   overrides below use !important and a stronger scope:
     body.alm-cast-v2.page .wpb-content-wrapper  ->  specificity (0,3,1)
   Breakpoints follow the live page: 1080 / 991 / 880 (page CSS) / 820 / 767 / 480.
   ========================================================================== */

body.alm-cast-v2 {
  --cv2-paper: #F7F5F1;
  --cv2-paper-2: #EFEBE3;
  --cv2-white: #FFFFFF;
  --cv2-ink: #111111;
  --cv2-ink-soft: #3C3A36;
  --cv2-muted: #6E6A62;
  --cv2-hair: #E2DDD3;
  --cv2-red: #BF2B36;
  --cv2-red-deep: #9E222C;
  --cv2-red-ink: #9A1F28;
  --cv2-red-wash: #FCEBEB;
  --cv2-yellow: #F8C757;
  --cv2-yellow-hover: #F5BD3E;
  --cv2-green: #1FA463;
  --cv2-display: "Poppins", system-ui, sans-serif;
  --cv2-body: "Rubik", system-ui, sans-serif;
  --cv2-inter: "Inter", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   0. Shared new elements: buttons, link, external-arrow icon
   -------------------------------------------------------------------------- */
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  font-family: var(--cv2-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 16.8px !important;
  letter-spacing: 0.14px !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  color: var(--cv2-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--cv2-white) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
/* hover: every button lifts a little and its arrow nudges up-right */
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn:hover {
  transform: translateY(-2px) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn .cv2-ext,
body.alm-cast-v2 .wpb-content-wrapper .cv2-link .cv2-ext {
  transition: transform .25s ease !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn:hover .cv2-ext,
body.alm-cast-v2 .wpb-content-wrapper .cv2-link:hover .cv2-ext {
  transform: translate(2px, -2px) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn--yellow {
  background: var(--cv2-yellow) !important;
  border-color: var(--cv2-yellow) !important;
  color: var(--cv2-ink) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn--yellow:hover {
  background: var(--cv2-yellow-hover) !important;
  border-color: var(--cv2-yellow-hover) !important;
  color: var(--cv2-ink) !important;
  box-shadow: 0 10px 24px rgba(17, 17, 17, .18) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn--outline {
  background: var(--cv2-white) !important;
  border-color: var(--cv2-hair) !important;
  color: var(--cv2-ink) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn--outline:hover {
  border-color: var(--cv2-ink) !important;
  color: var(--cv2-ink) !important;
  box-shadow: 0 8px 20px rgba(17, 17, 17, .10) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn--ghost-light {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, .85) !important;
  padding: 13.5px 23.5px !important;
  color: #FFFFFF !important;
}
/* on the dark hero photo the white outline button fills white */
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn--ghost-light:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--cv2-ink) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-btn:focus-visible,
body.alm-cast-v2 .wpb-content-wrapper .cv2-link:focus-visible,
body.alm-cast-v2 .wpb-content-wrapper .cv2-make-go:focus-visible {
  outline: 2px solid var(--cv2-red) !important;
  outline-offset: 2px !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-hero-row .cv2-btn:focus-visible {
  outline-color: var(--cv2-yellow) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-ext {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  flex: none !important;
  margin: 0 !important;
  vertical-align: middle !important;
  overflow: visible !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--cv2-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--cv2-red) !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: none !important;
  transition: color .2s ease !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-link:hover {
  color: var(--cv2-red-deep) !important;
}

/* --------------------------------------------------------------------------
   1. Hero: 2 buttons + trust line under the paragraph (mockup .hero-actions /
      .hero-trust). The hero row is a fixed-height box on the live page; it may
      now grow so the new lines never spill out (the fixed photo layer follows
      the row height: body.js on scroll/resize, existing.js on any resize).
   -------------------------------------------------------------------------- */
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-hero-row {
  height: auto !important;
  max-height: none !important;
  min-height: var(--cast-hero-height, 600px) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-hero-row .cv2-hero-actions {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 30px 0 0 !important;
  padding: 0 !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-hero-row .cv2-hero-trust {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 22px !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-hero-row .cv2-hero-trust li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: var(--cv2-inter) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35) !important;
  white-space: nowrap !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-hero-row .cv2-hero-trust li::marker {
  content: none !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-hero-row .cv2-hero-trust li::before {
  content: "\2713" !important;
  display: inline !important;
  position: static !important;
  margin-right: 7px !important;
  color: var(--cv2-yellow) !important;
  -webkit-text-fill-color: var(--cv2-yellow) !important;
  background: none !important;
}

/* --------------------------------------------------------------------------
   2. What we cast: "Browse ..." link at the bottom of each card (added by
      existing.js, class .cv2-make-go). Cards become flex columns so the links
      line up along the bottom edge. Whole row hidden on phones.
   -------------------------------------------------------------------------- */
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
/* hover: the card lifts like the other cards on the page; the whole card opens its "Browse ..." link */
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card:hover {
  transform: translateY(-4px) !important;
  border-color: #CFC8BB !important;
  box-shadow: 0 14px 30px rgba(17, 17, 17, .10) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card > .cv2-make-go::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card:hover > .cv2-make-go {
  color: var(--cv2-red-deep) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card:hover > .cv2-make-go .cv2-ext {
  transform: translate(2px, -2px) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-badge {
  align-self: flex-start !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card > :nth-last-child(2):not(.cast-make-badge) {
  margin-bottom: 14px !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card > .cv2-make-go {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: auto 0 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--cv2-hair) !important;
  font-family: var(--cv2-display) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--cv2-red) !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  background: none !important;
  transition: color .2s ease !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card > .cv2-make-go:hover {
  color: var(--cv2-red-deep) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card > .cv2-make-go .cv2-ext {
  width: 12px !important;
  height: 12px !important;
  transition: transform .25s ease !important;
}

/* --------------------------------------------------------------------------
   3. Network row (now the talent directory): old face rails and note go.
      Headings keep their styles. #cast-directory is styled by H2.
   -------------------------------------------------------------------------- */
body.alm-cast-v2 .wpb-content-wrapper .cast-network-row #cast-network-faces,
body.alm-cast-v2 .wpb-content-wrapper .cast-network-row .cast-network-rails,
body.alm-cast-v2 .wpb-content-wrapper .cast-network-row .cast-network-note,
body.alm-cast-v2 .wpb-content-wrapper .cast-network-row .wpb_raw_html:has(#cast-network-faces):not(:has(#cast-directory)),
body.alm-cast-v2 .wpb-content-wrapper .cast-network-row .wpb_raw_code:has(#cast-network-faces):not(:has(#cast-directory)) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. Core services (.cast-qual-row, moved above the services row).
      Old fit cards hidden; 3 new cards share subgrid rows so tag, title,
      price, sub, ticks and button line up (mockup .fit3 / .fit / .unsure).
   -------------------------------------------------------------------------- */
body.alm-cast-v2 .wpb-content-wrapper .cast-qual-row #cast-qual-cards,
body.alm-cast-v2 .wpb-content-wrapper .cast-qual-row .cast-qual-grid,
body.alm-cast-v2 .wpb-content-wrapper .cast-qual-row .wpb_raw_html:has(#cast-qual-cards):not(:has(.cv2-core)),
body.alm-cast-v2 .wpb-content-wrapper .cast-qual-row .wpb_raw_code:has(#cast-qual-cards):not(:has(.cv2-core)) {
  display: none !important;
}
/* the block that holds the new cards carries no extra gap; .cv2-core does */
body.alm-cast-v2.page .wpb-content-wrapper .vc_row.cast-qual-row .wpb_raw_html:has(.cv2-core),
body.alm-cast-v2.page .wpb-content-wrapper .vc_row.cast-qual-row .wpb_raw_code:has(.cv2-core),
body.alm-cast-v2.page .wpb-content-wrapper .vc_row.cast-qual-row .wpb_text_column:has(.cv2-core) {
  margin-top: 0 !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: clamp(28px, 4vw, 44px) 0 0 !important;
  padding: 0 !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core > .cv2-core-card:nth-child(n+4) {
  margin-top: 18px !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card {
  position: relative !important;
  display: grid !important;
  grid-row: span 6 !important;
  grid-template-rows: subgrid !important;
  row-gap: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 24px 24px 26px !important;
  background: var(--cv2-white) !important;
  border: 1px solid var(--cv2-hair) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-align: left !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card.is-featured {
  border-color: var(--cv2-red) !important;
  box-shadow: 0 0 0 1px var(--cv2-red) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(17, 17, 17, .10) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card.is-featured:hover {
  box-shadow: 0 0 0 1px var(--cv2-red), 0 14px 30px rgba(17, 17, 17, .12) !important;
}
/* fixed row per part, so a missing part never shifts the others */
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-core-tag   { grid-row: 1 !important; grid-column: 1 !important; }
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-core-title { grid-row: 2 !important; grid-column: 1 !important; }
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-core-price { grid-row: 3 !important; grid-column: 1 !important; }
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-core-sub   { grid-row: 4 !important; grid-column: 1 !important; }
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-core-ticks { grid-row: 5 !important; grid-column: 1 !important; }
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-btn        { grid-row: 6 !important; grid-column: 1 !important; }

body.alm-cast-v2 .wpb-content-wrapper .cv2-core-tag {
  justify-self: start !important;
  align-self: start !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  font-family: var(--cv2-display) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 18.15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cv2-red-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: var(--cv2-red-wash) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card.is-featured .cv2-core-tag {
  color: #FFFFFF !important;
  background: var(--cv2-red) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-title {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  font-family: var(--cv2-display) !important;
  font-weight: 600 !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cv2-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
/* prices are the main highlight of each card */
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-price,
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-sub {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-price {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  font-family: var(--cv2-display) !important;
  font-weight: 600 !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.6px !important;
  color: var(--cv2-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-price small {
  display: block !important;
  margin: 0 0 7px !important;
  font-family: var(--cv2-display) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--cv2-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-price span {
  white-space: nowrap !important;
  font-family: var(--cv2-display) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: var(--cv2-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-price em {
  display: block !important;
  margin: 6px 0 0 !important;
  font-family: var(--cv2-display) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--cv2-ink-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-sub {
  margin: 10px 0 18px !important;
  padding: 0 !important;
  font-family: var(--cv2-body) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 21.7px !important;
  letter-spacing: 0 !important;
  color: var(--cv2-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-ticks {
  display: grid !important;
  align-content: start !important;
  gap: 11px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  list-style: none !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-ticks li {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 3px 0 3px 22px !important;
  list-style: none !important;
  font-family: var(--cv2-body) !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  line-height: 18.9px !important;
  letter-spacing: 0 !important;
  color: var(--cv2-ink-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-ticks li::marker {
  content: none !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-ticks li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: auto !important;
  height: auto !important;
  font-weight: 700 !important;
  color: var(--cv2-green) !important;
  -webkit-text-fill-color: var(--cv2-green) !important;
  background: none !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-btn {
  width: 100% !important;
  align-self: end !important;
}

/* "Not sure which one fits?" line */
body.alm-cast-v2 .wpb-content-wrapper .cv2-unsure {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 22px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 14px 18px !important;
  background: var(--cv2-paper) !important;
  border: 1px solid var(--cv2-hair) !important;
  border-radius: 10px !important;
  font-family: var(--cv2-body) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--cv2-ink-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cv2-unsure > span {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   5. Service offerings: image, badge, title, short subtitle, hairline and
      price only. Desktop cards share subgrid rows, so the hairline (price
      border-top) and the price sit at the same height across each row.
   -------------------------------------------------------------------------- */
body.alm-cast-v2.page .wpb-content-wrapper .vc_row.cast-services-row .cast-whatget,
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-card ul,
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-more,
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-tip-btn,
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-tip-box {
  display: none !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-card {
  border: 1px solid var(--cv2-hair) !important;
  box-shadow: none !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-card.is-featured {
  border: 1px solid var(--cv2-red) !important;
  box-shadow: 0 0 0 1px var(--cv2-red) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-card:hover {
  box-shadow: 0 14px 34px rgba(17, 17, 17, .12) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-card.is-featured:hover {
  box-shadow: 0 0 0 1px var(--cv2-red), 0 14px 34px rgba(17, 17, 17, .12) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-badge {
  align-self: flex-start !important;
  justify-self: start !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-card.is-featured .cast-services-badge {
  color: #FFFFFF !important;
  background: var(--cv2-red) !important;
}
/* the theme gives every <p> width:100%, which pushes inset text past the card edge */
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-sub,
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-price {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-sub {
  line-height: 1.65 !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-price {
  min-height: 0 !important;
  margin-top: auto !important;
  margin-left: 0 !important;  /* the theme's p { margin: 10px auto } would centre it */
  margin-right: 0 !important;
  border-top: 1px solid var(--cv2-hair) !important;
}

@media (min-width: 881px) {
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid {
    row-gap: 0 !important;
    column-gap: 18px !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid > .cast-services-card {
    display: grid !important;
    grid-row: span 5 !important;
    grid-template-rows: subgrid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0 !important;
    min-width: 0 !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid > .cast-services-card:nth-child(n+4) {
    margin-top: 18px !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid > .cast-services-card > .cast-services-body {
    display: contents !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid > .cast-services-card > img {
    grid-row: 1 !important;
    grid-column: 1 !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-body > .cast-services-badge {
    grid-row: 2 !important;
    grid-column: 1 !important;
    margin: 20px 22px 10px !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-body > h4 {
    grid-row: 3 !important;
    grid-column: 1 !important;
    margin: 0 22px 6px !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-body > .cast-services-sub {
    grid-row: 4 !important;
    grid-column: 1 !important;
    align-self: start !important;
    margin: 0 22px 16px !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-body > .cast-services-price {
    grid-row: 5 !important;
    grid-column: 1 !important;
    align-self: stretch !important;
    margin: 0 22px !important;
    padding: 14px 0 24px !important;
  }
}

/* --------------------------------------------------------------------------
   6. Retainer: chips go; 3 plans equal height, buttons on the bottom line;
      featured plan keeps its red edge without moving its content.
   -------------------------------------------------------------------------- */
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-row #cast-retainer-chips,
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-row .cast-retainer-marquee,
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-row .wpb_raw_html:has(#cast-retainer-chips):not(:has(#cast-retainer-plans)),
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-row .wpb_raw_code:has(#cast-retainer-chips):not(:has(#cast-retainer-plans)) {
  display: none !important;
}
/* without the chips, the plans block sits one gap under the intro text */
body.alm-cast-v2.page .wpb-content-wrapper .vc_row.cast-retainer-row .wpb_raw_html:has(#cast-retainer-plans),
body.alm-cast-v2.page .wpb-content-wrapper .vc_row.cast-retainer-row .wpb_raw_code:has(#cast-retainer-plans) {
  margin-top: 0 !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan {
  height: auto !important;
  min-width: 0 !important;
  border: 1px solid var(--cv2-hair) !important;
  box-shadow: none !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan.is-featured {
  border: 1px solid var(--cv2-red) !important;
  box-shadow: 0 0 0 1px var(--cv2-red) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan:hover {
  box-shadow: 0 14px 34px rgba(17, 17, 17, .12) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan.is-featured:hover {
  box-shadow: 0 0 0 1px var(--cv2-red), 0 14px 34px rgba(17, 17, 17, .12) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan > .btn {
  margin-top: auto !important;
}
/* yellow button gets a same-colour 1px border so all three buttons are the same height */
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan > .btn-yellow {
  border: 1px solid var(--cv2-yellow) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan > .btn-yellow:hover {
  border-color: var(--cv2-yellow-hover) !important;
}

/* --------------------------------------------------------------------------
   8. How we're different: ALM Media card green, Typical agencies card red.
   -------------------------------------------------------------------------- */
body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-card {
  padding: 24px 26px 26px !important;
  border: 1px solid rgba(191, 43, 54, .42) !important;
  background: rgba(191, 43, 54, .05) !important;
  box-shadow: none !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-card.is-positive {
  border-color: rgba(31, 164, 99, .55) !important;
  background: rgba(31, 164, 99, .06) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(17, 17, 17, .10) !important;
  border-color: var(--cv2-red) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-card.is-positive:hover {
  border-color: var(--cv2-green) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-card:not(.is-positive) .cast-diff-icon,
body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-icon.is-cross {
  color: var(--cv2-red) !important;
  -webkit-text-fill-color: var(--cv2-red) !important;
}
body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-line {
  border-top-color: rgba(17, 17, 17, .08) !important;
}

/* --------------------------------------------------------------------------
   9. Section backgrounds after the reorder (each row paints its own colour):
      white / cream alternate from "What we cast" down to the FAQ.
   -------------------------------------------------------------------------- */
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-make-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-qual-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-retainer-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-diff-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-guar-row {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-network-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-services-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-addons-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-testi-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-faq-row {
  background: #F7F5F1 !important;
  background-color: #F7F5F1 !important;
}
/* same top spacing for the rows whose neighbours changed in the reorder */
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-qual-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-services-row,
body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-testi-row {
  padding-top: clamp(48px, 7vw, 96px) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* 3 cards per row (as in the mockup) so every "Browse ..." link fits on one line */
  body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991px) and (min-width: 821px) {
  /* 3 narrow core cards: a slightly smaller price keeps "AED 2,500 / talent" on one line */
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core-price {
    font-size: 25px !important;
    letter-spacing: -0.5px !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core-price span {
    font-size: 13px !important;
  }
}

@media (max-width: 880px) {
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid,
  body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans {
    gap: 30px !important;
  }
  /* single column: cards are flex columns again; keep subtitle and price full width */
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-body > .cast-services-sub,
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-body > .cast-services-price {
    align-self: stretch !important;
  }
}

@media (max-width: 820px) {
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core > .cv2-core-card:nth-child(n+4) {
    margin-top: 0 !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card {
    display: flex !important;
    flex-direction: column !important;
    grid-row: auto !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-core-tag {
    align-self: flex-start !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card > .cv2-btn {
    margin-top: auto !important;
  }
}

@media (max-width: 767px) {
  /* hidden on phones: What we cast, Casting work we handle */
  body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-make-row,
  body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-addons-row {
    display: none !important;
  }
  body.alm-cast-v2.page .wpb-content-wrapper > .vc_row.cast-hero-row {
    min-height: max(var(--cast-hero-height, 360px), 560px) !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cv2-unsure {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cv2-unsure .cv2-link {
    justify-content: center !important;
    padding: 11px 8px !important;
    border: 1px solid rgba(191, 43, 54, .35) !important;
    border-radius: 6px !important;
    white-space: normal !important;
  }
  /* "In the UAE" / "Worldwide" pills become full-width centred bars */
  body.alm-cast-v2.page .wpb-content-wrapper .vc_row.cast-services-row .cast-offer-tag {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 8px 12px !important;
  }
}

@media (max-width: 480px) {
  body.alm-cast-v2 .wpb-content-wrapper .cast-hero-row .cv2-hero-actions .cv2-btn {
    width: 100% !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cast-hero-row .cv2-hero-trust li {
    white-space: normal !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.alm-cast-v2 .wpb-content-wrapper .cv2-btn,
  body.alm-cast-v2 .wpb-content-wrapper .cv2-ext,
  body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card,
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card,
  body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-card,
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-card,
  body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan {
    transition: none !important;
  }
  body.alm-cast-v2 .wpb-content-wrapper .cv2-btn:hover,
  body.alm-cast-v2 .wpb-content-wrapper .cv2-btn:hover .cv2-ext,
  body.alm-cast-v2 .wpb-content-wrapper .cv2-link:hover .cv2-ext,
  body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card:hover,
  body.alm-cast-v2 .wpb-content-wrapper .cast-make-grid .cast-make-card:hover > .cv2-make-go .cv2-ext,
  body.alm-cast-v2 .wpb-content-wrapper .cv2-core-card:hover,
  body.alm-cast-v2 .wpb-content-wrapper .cast-diff-grid .cast-diff-card:hover,
  body.alm-cast-v2 .wpb-content-wrapper .cast-services-grid .cast-services-card:hover,
  body.alm-cast-v2 .wpb-content-wrapper .cast-retainer-plans .cast-retainer-plan:hover {
    transform: none !important;
  }
}

/* ---- parts\H2\showcase.css ---- */
/* ==========================================================================
   Casting v2 · Talent directory showcase (part H2)
   Everything rendered by showcase.js inside #cast-directory (.cast-network-row).
   Scope: body.alm-cast-v2 only. New classes: cv2-*. Breakpoints: 1080 / 820 / 767 / 480.
   ========================================================================== */

/* --- Sticky fix (the only change outside the mount) ------------------------
   Global CSS (WPBakery Settings) has `html, body { overflow-x: hidden !important }`.
   html's overflow goes to the viewport, so body keeps its own: overflow-x hidden
   turns its overflow-y into auto and body becomes a scroll container that never
   scrolls. position: sticky then sticks to body instead of the screen, so the dock
   would never follow the bottom of the screen. `clip` cuts the same sideways
   overflow without making body a scroll container. html stays as it is. */
html body.alm-cast-v2 {
  overflow-x: clip !important;
}

/* --- Old face rails stay hidden -------------------------------------------
   almano-custom.body.js (ensureCastingNetworkRails) recreates #cast-network-faces
   as the next sibling of #cast-directory in the same Raw HTML wrapper and fills it
   with the 20 old faces. The showcase replaces them. */
body.alm-cast-v2 #cast-network-faces {
  display: none !important;
}

/* --- Mount + tokens ------------------------------------------------------- */
body.alm-cast-v2 .cv2-directory {
  --cv2-paper: #F7F5F1;
  --cv2-paper-2: #EFEBE3;
  --cv2-ink: #111111;
  --cv2-ink-soft: #3C3A36;
  --cv2-muted: #6E6A62;
  --cv2-hair: #E2DDD3;
  --cv2-line: #D8D2C6;
  --cv2-line-hover: #B9B1A2;
  --cv2-red: #BF2B36;
  --cv2-red-deep: #9E222C;
  --cv2-yellow: #F8C757;
  --cv2-yellow-hover: #F5BD3E;
  --cv2-photo: #2B241F;
  --cv2-display: "Poppins", system-ui, sans-serif;
  --cv2-body: "Inter", system-ui, sans-serif;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 36px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  font-family: var(--cv2-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cv2-ink-soft);
  text-align: left;
}

body.alm-cast-v2 .cv2-directory *,
body.alm-cast-v2 .cv2-directory *::before,
body.alm-cast-v2 .cv2-directory *::after {
  box-sizing: border-box;
}

body.alm-cast-v2 .cv2-directory a {
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

body.alm-cast-v2 .cv2-directory a:focus {
  outline: none;
}

body.alm-cast-v2 .cv2-directory a:focus-visible {
  outline: 2px solid var(--cv2-ink) !important;
  outline-offset: 3px !important;
}

body.alm-cast-v2 .cv2-directory .cv2-cta-bar a:focus-visible {
  outline-color: var(--cv2-yellow) !important;
}

body.alm-cast-v2 .cv2-directory img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover !important;
  object-position: center 30% !important;
}

body.alm-cast-v2 .cv2-directory .cv2-ico {
  display: block;
  flex: none;
  max-width: none !important;
}

body.alm-cast-v2 .cv2-directory .cv2-ico--ext { width: 13px !important; height: 13px !important; }
body.alm-cast-v2 .cv2-directory .cv2-ico--search,
body.alm-cast-v2 .cv2-directory .cv2-ico--arrow { width: 15px !important; height: 15px !important; }
body.alm-cast-v2 .cv2-directory .cv2-ico--heart { width: 14px !important; height: 14px !important; }

body.alm-cast-v2 .cv2-directory .cv2-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* --- Section heads (h3) --------------------------------------------------- */
body.alm-cast-v2 .cv2-directory .cv2-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 36px 0 0;
}

body.alm-cast-v2 .cv2-directory .cv2-head .cv2-head-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--cv2-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 1.76px !important;
  text-transform: uppercase !important;
  color: var(--cv2-ink) !important;
  -webkit-text-fill-color: var(--cv2-ink) !important;
  text-align: left !important;
}

/* --- 1. Search bar picture ------------------------------------------------ */
body.alm-cast-v2 .cv2-directory .cv2-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid var(--cv2-hair);
  border-radius: 10px;
}

body.alm-cast-v2 .cv2-directory .cv2-tbx {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid var(--cv2-line);
  border-radius: 6px;
  font: 400 13.5px/1.2 var(--cv2-body);
  color: var(--cv2-muted) !important;
  white-space: nowrap;
  transition: border-color .2s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-tbx:hover {
  border-color: var(--cv2-line-hover);
}

body.alm-cast-v2 .cv2-directory .cv2-tbx--search {
  flex: 1 1 220px;
}

body.alm-cast-v2 .cv2-directory .cv2-tbx-ph {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.alm-cast-v2 .cv2-directory .cv2-tbx b {
  font-weight: 600;
  color: var(--cv2-ink);
}

body.alm-cast-v2 .cv2-directory .cv2-seg {
  display: flex;
  padding: 3px;
  border: 1px solid var(--cv2-line);
  border-radius: 6px;
  background: #FFFFFF;
}

body.alm-cast-v2 .cv2-directory .cv2-seg-opt {
  padding: 8px 12px;
  border-radius: 4px;
  font: 400 13px/1 var(--cv2-body);
  color: var(--cv2-ink-soft) !important;
  text-align: center;
  transition: background-color .2s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-seg-opt:hover {
  background: var(--cv2-paper);
}

body.alm-cast-v2 .cv2-directory .cv2-seg-opt.is-on {
  background: var(--cv2-ink);
  color: #FFFFFF !important;
  font-weight: 600;
}

/* buttons (own class names so they never mix with the page's other .cv2-btn) */
body.alm-cast-v2 .cv2-directory .cv2-dbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 0;
  border-radius: 4px;
  font: 600 14px/16.8px var(--cv2-display);
  letter-spacing: .14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-dbtn--ink {
  background: var(--cv2-ink);
  color: var(--cv2-paper) !important;
  padding: 12px 18px;
}

body.alm-cast-v2 .cv2-directory .cv2-dbtn--ink:hover {
  background: #2C2B29;
}

body.alm-cast-v2 .cv2-directory .cv2-dbtn--yellow {
  background: var(--cv2-yellow);
  color: var(--cv2-ink) !important;
}

body.alm-cast-v2 .cv2-directory .cv2-dbtn--yellow:hover {
  background: var(--cv2-yellow-hover);
}

body.alm-cast-v2 .cv2-directory .cv2-dbtn--ghost {
  background: transparent;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, .85);
  padding: 12.5px 22.5px;
}

body.alm-cast-v2 .cv2-directory .cv2-dbtn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #FFFFFF;
}

body.alm-cast-v2 .cv2-directory .cv2-search-btn {
  margin-left: auto;
}

body.alm-cast-v2 .cv2-directory .cv2-free {
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--cv2-yellow);
  color: var(--cv2-ink);
  font: 600 10.5px/1 var(--cv2-display);
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* --- 2. Browse by category ------------------------------------------------ */
body.alm-cast-v2 .cv2-directory .cv2-cat-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

body.alm-cast-v2 .cv2-directory .cv2-cat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--cv2-line);
  border-radius: 10px;
  color: var(--cv2-ink) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-cat:hover {
  border-color: var(--cv2-line-hover);
  box-shadow: 0 8px 22px rgba(17, 17, 17, .08);
}

body.alm-cast-v2 .cv2-directory .cv2-cat-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cv2-photo);
}

body.alm-cast-v2 .cv2-directory .cv2-cat-img img {
  transition: transform .5s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-cat:hover .cv2-cat-img img {
  transform: scale(1.04);
}

/* category without a talent yet: quiet dashed tile (still a link) */
body.alm-cast-v2 .cv2-directory .cv2-cat.is-soon {
  border-style: dashed;
  border-color: #CBC3B4;
  background: transparent;
}

body.alm-cast-v2 .cv2-directory .cv2-cat-img.is-soon {
  display: grid;
  place-items: center;
  background: var(--cv2-paper-2);
}

body.alm-cast-v2 .cv2-directory .cv2-cat-soon,
body.alm-cast-v2 .cv2-directory .cv2-cat-chip {
  font: 600 10px/1.2 var(--cv2-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cv2-muted);
  text-align: center;
}

body.alm-cast-v2 .cv2-directory .cv2-cat-chip {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  color: var(--cv2-ink);
}

body.alm-cast-v2 .cv2-directory .cv2-cat-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 12px;
}

body.alm-cast-v2 .cv2-directory .cv2-cat-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font: 600 15px/1.25 var(--cv2-display);
  letter-spacing: -.01em;
  color: var(--cv2-ink);
}

body.alm-cast-v2 .cv2-directory .cv2-cat-name .cv2-ico {
  transition: transform .2s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-cat:hover .cv2-cat-name .cv2-ico {
  transform: translateX(2px);
}

body.alm-cast-v2 .cv2-directory .cv2-cat-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font: 400 12px/1.35 var(--cv2-body);
  color: var(--cv2-muted);
}

/* "All talents" 9th tile: phones only (see "Phones: category thumbnails" below) */
body.alm-cast-v2 .cv2-directory .cv2-cat.cv2-cat--all { display: none; }

/* --- Sticky zone: from the Premium block (fallback: faces) to the dock ----- */
body.alm-cast-v2 .cv2-directory .cv2-sticky-zone {
  position: relative;
  display: block;
  overflow: visible !important;
}

/* --- 3 + 4. Talent cards -------------------------------------------------- */
body.alm-cast-v2 .cv2-directory .cv2-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

body.alm-cast-v2 .cv2-directory .cv2-cards--sm {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

body.alm-cast-v2 .cv2-directory .cv2-tc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--cv2-hair);
  border-radius: 10px;
  color: var(--cv2-ink) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-tc-ph {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cv2-photo);
}

body.alm-cast-v2 .cv2-directory .cv2-tc-ph img {
  transition: transform .5s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-tc-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
}

body.alm-cast-v2 .cv2-directory .cv2-tc--sm .cv2-tc-heart {
  transform: scale(.85);
  transform-origin: top right;
}

body.alm-cast-v2 .cv2-directory .cv2-tc-meta {
  display: grid;
  gap: 2px;
  padding: 9px 11px 11px;
}

body.alm-cast-v2 .cv2-directory .cv2-tc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

body.alm-cast-v2 .cv2-directory .cv2-tc-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 14px/1.2 var(--cv2-display);
  color: var(--cv2-ink);
}

body.alm-cast-v2 .cv2-directory .cv2-tc-num {
  flex: none;
  font: 400 12px/1.2 var(--cv2-body);
  color: var(--cv2-muted);
}

body.alm-cast-v2 .cv2-directory .cv2-tc-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 12px/1.3 var(--cv2-body);
  color: var(--cv2-muted);
}

body.alm-cast-v2 .cv2-directory .cv2-tc--sm:hover {
  border-color: var(--cv2-line-hover);
  box-shadow: 0 10px 26px rgba(17, 17, 17, .08);
}

body.alm-cast-v2 .cv2-directory .cv2-tc--sm:hover .cv2-tc-ph img {
  transform: scale(1.03);
}

/* Premium: dark card, thin gold edge, 3:4 photo, name over a dark fade */
body.alm-cast-v2 .cv2-directory .cv2-tc--prem {
  background: var(--cv2-ink);
  border: 1px solid rgba(248, 199, 87, .45);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(17, 17, 17, .16), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-tc--prem .cv2-tc-ph {
  aspect-ratio: 3 / 4;
}

body.alm-cast-v2 .cv2-directory .cv2-tc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--cv2-yellow);
  color: var(--cv2-ink);
  box-shadow: 0 4px 14px rgba(248, 199, 87, .45);
  font: 600 10px/1 var(--cv2-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.alm-cast-v2 .cv2-directory .cv2-tc--prem .cv2-tc-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  gap: 4px;
  padding: 56px 16px 16px;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0), rgba(17, 17, 17, .9) 62%);
}

body.alm-cast-v2 .cv2-directory .cv2-tc--prem .cv2-tc-name {
  font-size: 17px;
  color: #FFFFFF;
}

body.alm-cast-v2 .cv2-directory .cv2-tc--prem .cv2-tc-num {
  color: var(--cv2-yellow);
}

body.alm-cast-v2 .cv2-directory .cv2-tc--prem .cv2-tc-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .72);
}

body.alm-cast-v2 .cv2-directory .cv2-tc--prem:hover,
body.alm-cast-v2 .cv2-directory .cv2-tc--prem:focus-visible {
  transform: translateY(-4px);
  border-color: var(--cv2-yellow);
  box-shadow: 0 24px 48px rgba(17, 17, 17, .24);
}

body.alm-cast-v2 .cv2-directory .cv2-tc--prem:hover .cv2-tc-ph img {
  transform: scale(1.04);
}

/* --- 4 (fallback). Faces from our network: photo only --------------------- */
body.alm-cast-v2 .cv2-directory .cv2-faces {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

body.alm-cast-v2 .cv2-directory .cv2-face {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--cv2-hair);
  border-radius: 10px;
  background: var(--cv2-paper-2);
}

body.alm-cast-v2 .cv2-directory .cv2-face img {
  transition: transform .5s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-face:hover img {
  transform: scale(1.04);
}

/* --- 5. Sticky dock -------------------------------------------------------
   Follows the bottom of the screen while the cards scroll, then rests in place.
   Needs every ancestor up to the viewport to be free of overflow hidden/auto/scroll
   (see the body fix at the top of this file). */
body.alm-cast-v2 .cv2-directory .cv2-dock {
  position: -webkit-sticky;
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: grid;
  gap: 10px;
  margin-top: 30px;
}

body.alm-cast-v2 .cv2-directory .cv2-cta-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 24px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 12px;
  color: var(--cv2-paper);
  background: rgba(17, 17, 17, .74);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .10);
}

body.alm-cast-v2 .cv2-directory .cv2-cta-bar .cv2-cta-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--cv2-display) !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-align: left !important;
}

body.alm-cast-v2 .cv2-directory .cv2-cta-bar .cv2-cta-copy {
  max-width: 60ch;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  font-family: var(--cv2-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  color: rgba(247, 245, 241, .72) !important;
  -webkit-text-fill-color: rgba(247, 245, 241, .72) !important;
  text-align: left !important;
}

body.alm-cast-v2 .cv2-directory .cv2-cta-bar .cv2-cta-copy b {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

body.alm-cast-v2 .cv2-directory .cv2-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.alm-cast-v2 .cv2-directory .cv2-talent-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  padding: 14px 18px;
  border-radius: 10px;
  font: 400 14px/1.4 var(--cv2-body);
  color: var(--cv2-ink-soft);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 12px 30px rgba(17, 17, 17, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.alm-cast-v2 .cv2-directory .cv2-strip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

body.alm-cast-v2 .cv2-directory .cv2-strip-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 13px/1.3 var(--cv2-display);
  color: var(--cv2-red) !important;
  transition: color .2s ease;
}

body.alm-cast-v2 .cv2-directory .cv2-strip-go:hover {
  color: var(--cv2-red-deep) !important;
}

/* resting place of the dock (JS toggles .is-resting when this is on screen) */
body.alm-cast-v2 .cv2-directory .cv2-dock-end {
  display: block;
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

body.alm-cast-v2 .cv2-directory .cv2-cta-bar,
body.alm-cast-v2 .cv2-directory .cv2-talent-strip {
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* floating = frosted glass over the photos; resting on cream = solid black bar + white strip */
body.alm-cast-v2 .cv2-directory .cv2-dock.is-resting .cv2-cta-bar {
  background: var(--cv2-ink);
  box-shadow: 0 14px 32px rgba(17, 17, 17, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.alm-cast-v2 .cv2-directory .cv2-dock.is-resting .cv2-talent-strip {
  background: #FFFFFF;
  border-color: var(--cv2-hair);
  box-shadow: 0 6px 18px rgba(17, 17, 17, .05);
}

/* no frosted glass support: keep the bars readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.alm-cast-v2 .cv2-directory .cv2-cta-bar { background: rgba(17, 17, 17, .95); }
  body.alm-cast-v2 .cv2-directory .cv2-talent-strip { background: rgba(255, 255, 255, .97); border-color: var(--cv2-hair); }
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (max-width: 1080px) {
  body.alm-cast-v2 .cv2-directory .cv2-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.alm-cast-v2 .cv2-directory .cv2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.alm-cast-v2 .cv2-directory .cv2-cards--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* keep the small-card rows full: 12 cards (3 rows of 4) on tablets, 6 (3 rows of 2) on phones (owner 2026-10-22: half, less scrolling) */
@media (min-width: 768px) and (max-width: 1080px) {
  body.alm-cast-v2 .cv2-directory .cv2-cards--sm > .cv2-tc:nth-child(n+13) { display: none; }
}

@media (max-width: 820px) {
  body.alm-cast-v2 .cv2-directory .cv2-cta-bar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body.alm-cast-v2 .cv2-directory { margin-top: 28px !important; }
  body.alm-cast-v2 .cv2-directory .cv2-head { margin-top: 30px; }
  body.alm-cast-v2 .cv2-directory .cv2-search-btn { width: 100%; margin-left: 0; }
  body.alm-cast-v2 .cv2-directory .cv2-cards--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.alm-cast-v2 .cv2-directory .cv2-cards--sm > .cv2-tc:nth-child(n+7) { display: none; }
  body.alm-cast-v2 .cv2-directory .cv2-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* phones: the bars stay in place (not sticky), so they are solid instead of glass */
  body.alm-cast-v2 .cv2-directory .cv2-dock { position: static; }
  body.alm-cast-v2 .cv2-directory .cv2-dock-end { display: none; }
  body.alm-cast-v2 .cv2-directory .cv2-cta-bar {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px 22px;
    background: var(--cv2-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 12px 30px rgba(17, 17, 17, .14);
  }
  body.alm-cast-v2 .cv2-directory .cv2-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.alm-cast-v2 .cv2-directory .cv2-acts .cv2-dbtn { display: flex; width: 100%; }
  body.alm-cast-v2 .cv2-directory .cv2-talent-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    text-align: center;
    background: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--cv2-hair);
    box-shadow: none;
  }
  body.alm-cast-v2 .cv2-directory .cv2-strip-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.alm-cast-v2 .cv2-directory .cv2-strip-go {
    justify-content: center;
    padding: 11px 8px;
    border: 1px solid rgba(191, 43, 54, .35);
    border-radius: 6px;
  }
}

@media (max-width: 480px) {
  body.alm-cast-v2 .cv2-directory .cv2-tbx,
  body.alm-cast-v2 .cv2-directory .cv2-seg { flex: 1 1 100%; }
  body.alm-cast-v2 .cv2-directory .cv2-seg-opt { flex: 1 1 0; padding: 8px 9px; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.alm-cast-v2 .cv2-directory .cv2-cards { gap: 10px; }
  body.alm-cast-v2 .cv2-directory .cv2-tc--prem .cv2-tc-meta { padding: 40px 10px 10px; }
  body.alm-cast-v2 .cv2-directory .cv2-tc--prem .cv2-tc-name { font-size: 14px; }
  body.alm-cast-v2 .cv2-directory .cv2-tc-sub,
  body.alm-cast-v2 .cv2-directory .cv2-tc--prem .cv2-tc-sub { font-size: 11.5px; }
}

/* --- Phones: category thumbnails, 3 per row (owner 2026-10-23, option A) ---
   Photo tiles with the name on the photo, no description; a dark "All talents" tile fills row 3.
   Comes after the 480px block on purpose: it replaces that block's 2-column category grid. */
@media (max-width: 767px) {
  body.alm-cast-v2 .cv2-directory .cv2-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.alm-cast-v2 .cv2-directory .cv2-cat {
    position: relative;
    aspect-ratio: 1 / 1.08;
    border: 0;
    border-radius: 12px;
    background: #2A2724;
  }
  body.alm-cast-v2 .cv2-directory .cv2-cat:hover { box-shadow: none; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-img { position: absolute; inset: 0; aspect-ratio: auto; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .72) 100%);
    pointer-events: none;
  }
  body.alm-cast-v2 .cv2-directory .cv2-cat-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 9px 8px; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-name { font: 600 13px/1.15 var(--cv2-display); letter-spacing: 0; color: #FFFFFF; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-name .cv2-ico,
  body.alm-cast-v2 .cv2-directory .cv2-cat-desc,
  body.alm-cast-v2 .cv2-directory .cv2-cat-chip { display: none; }
  /* a category without a photo yet: dashed tile, dark name */
  body.alm-cast-v2 .cv2-directory .cv2-cat.is-soon { border: 1px dashed #CBC3B4; background: transparent; }
  body.alm-cast-v2 .cv2-directory .cv2-cat.is-soon .cv2-cat-img::after { display: none; }
  body.alm-cast-v2 .cv2-directory .cv2-cat.is-soon .cv2-cat-name { color: var(--cv2-ink); }
  body.alm-cast-v2 .cv2-directory .cv2-cat-soon { display: none; }

  body.alm-cast-v2 .cv2-directory .cv2-cat.cv2-cat--all { display: grid; place-items: center; background: var(--cv2-ink); color: #FFFFFF !important; text-align: center; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-all { display: grid; justify-items: center; gap: 6px; padding: 8px; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-all b { font: 600 13px/1.15 var(--cv2-display); color: #FFFFFF; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-all small { font: 400 11px/1.2 var(--cv2-body); color: #F8C757; }
  body.alm-cast-v2 .cv2-directory .cv2-cat-all .cv2-ico { color: #FFFFFF; }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.alm-cast-v2 .cv2-directory *,
  body.alm-cast-v2 .cv2-directory *::before,
  body.alm-cast-v2 .cv2-directory *::after { transition: none !important; }
  body.alm-cast-v2 .cv2-directory .cv2-tc--prem:hover,
  body.alm-cast-v2 .cv2-directory .cv2-tc--prem:focus-visible,
  body.alm-cast-v2 .cv2-directory .cv2-tc:hover .cv2-tc-ph img,
  body.alm-cast-v2 .cv2-directory .cv2-cat:hover .cv2-cat-img img,
  body.alm-cast-v2 .cv2-directory .cv2-cat:hover .cv2-cat-name .cv2-ico,
  body.alm-cast-v2 .cv2-directory .cv2-face:hover img { transform: none !important; }
}