.home-casting-showcase {
  --casting-gutter: clamp(22px, 4.4vw, 70px);
  --casting-card-width: clamp(185px, 15.2vw, 246px);
  position: relative;
  isolation: isolate;
  padding: 54px 0 36px;
  overflow: clip;
  color: var(--navy);
  background:
    radial-gradient(ellipse at 0% 39%, #8ce2c930, transparent 30%),
    radial-gradient(ellipse at 100% 13%, #adcdec50, transparent 34%),
    linear-gradient(125deg, #fafdfd, #fff 50%, #f2f8ff);
}

.home-casting-showcase:before {
  position: absolute;
  z-index: -1;
  top: -42%;
  left: -12%;
  width: 108%;
  height: 90%;
  content: '';
  border-radius: 50%;
  background: #ffffffbc;
  transform: rotate(6deg);
  pointer-events: none;
}

.home-casting-flourish {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-casting-flourish path {
  stroke: #0dccb550;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.home-casting-flourish .home-casting-wave {
  fill: #d5e9fc30;
  stroke: none;
}

.home-casting-heading {
  text-align: center;
  margin-bottom: 21px;
}

.home-casting-heading-accent {
  display: block;
  width: 37px;
  height: 4px;
  border-radius: 4px;
  margin: 0 auto 22px;
  background: var(--green);
}

.home-casting-title {
  font-size: clamp(32px, 3.3vw, 45px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.home-casting-title strong {
  font-weight: 700;
}

.home-casting-heading p {
  margin-top: 14px;
  color: #647383;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.55;
  letter-spacing: -.01em;
}

.home-casting-carousel {
  position: relative;
}

.home-casting-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--casting-gutter);
  scrollbar-width: none;
  padding: 19px var(--casting-gutter) 20px;
}

.home-casting-rail::-webkit-scrollbar {
  display: none;
}

.home-casting-rail:focus-visible {
  outline: 2px solid var(--green-ink);
  outline-offset: -4px;
}

.home-casting-card {
  --casting-tilt: 1.5deg;
  position: relative;
  flex: 0 0 var(--casting-card-width);
  height: clamp(420px, 34vw, 535px);
  overflow: clip;
  scroll-snap-align: start;
  border: 1px solid #fff;
  border-radius: 34px;
  background: #e5eef3;
  box-shadow: 0 10px 24px #8caac41a;
  transform: rotate(var(--casting-tilt));
  transition: transform .3s ease, box-shadow .3s ease;
}

.home-casting-card:nth-child(even) {
  --casting-tilt: -1.35deg;
}

.home-casting-card:hover,
.home-casting-card:focus-within {
  transform: translateY(-4px) rotate(var(--casting-tilt));
  box-shadow: 0 12px 27px #8caac42a;
}

.home-casting-portrait {
  display: block;
  width: 100%;
  height: 100%;
  overflow: clip;
}

.home-casting-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--casting-focus, 50% 25%);
  filter: saturate(.8) contrast(1.025);
  transform: translateY(var(--casting-photo-y)) scale(var(--casting-photo-zoom));
  transform-origin: 50% 20%;
}

.home-casting-card-base {
  position: absolute;
  inset: auto 0 0;
  min-height: 166px;
  padding: 20px 24px 19px;
  border-radius: 36px 36px 31px 31px;
  background: linear-gradient(135deg, #fff, #f8fbff);
}

.home-casting-card-accent {
  display: block;
  width: 24px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 3px;
  background: var(--green);
}

.home-casting-card-base h3 {
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.home-casting-firstname {
  display: block;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 700;
  letter-spacing: -.025em;
}

.home-casting-lastname {
  display: block;
  margin-top: 7px;
  font-size: clamp(10px, .9vw, 13px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .25em;
}

.home-casting-networks {
  display: flex;
  gap: 13px;
  margin-top: 15px;
}

.home-casting-network {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef3f8;
  color: var(--navy);
}

.home-casting-network svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

a.home-casting-network:hover {
  background: #d6f7ed;
}

.home-casting-network.unconfigured {
  opacity: .75;
}

.home-casting-arrow {
  position: absolute;
  z-index: 3;
  top: 51%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 13px;
  border: 1px solid #eaf0f5;
  border-radius: 50%;
  background: #ffffffef;
  box-shadow: 0 7px 22px #8ea9c326;
  color: var(--navy);
  transform: translateY(-50%);
}

.home-casting-arrow svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.5;
}

.home-casting-arrow:disabled {
  opacity: .45;
}

.home-casting-arrow--previous {
  left: 12px;
}

.home-casting-arrow--previous svg {
  transform: rotate(180deg);
}

.home-casting-arrow--next {
  right: 12px;
}

.home-casting-pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-top: 7px;
}

.home-casting-pagination button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 28px;
  padding: 0;
  border-radius: 20px;
  background: transparent;
}

.home-casting-pagination button:after {
  width: 7px;
  height: 7px;
  content: '';
  border-radius: 8px;
  background: #dce6ef;
}

.home-casting-pagination button[aria-pressed=true] {
  width: 40px;
}

.home-casting-pagination button[aria-pressed=true]:after {
  width: 30px;
  background: var(--green);
}

.home-casting-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  align-items: center;
  margin-top: 13px;
  color: #7b8b99;
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

.home-casting-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 11px;
  border-bottom: 1px solid #b1c1cf;
  padding-bottom: 2px;
}

.home-casting-all svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1050px) {
  .home-casting-showcase { --casting-card-width: 23vw; }
  .home-casting-card { height: 440px; }
  .home-casting-card-base { padding-inline: 23px; }
  .home-casting-heading p { max-width: 490px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .home-casting-showcase { --casting-card-width: 38vw; padding-block: 40px 30px; }
  .home-casting-heading { margin-bottom: 16px; }
  .home-casting-heading-accent { height: 3px; width: 29px; margin-bottom: 19px; }
  .home-casting-heading p { font-size: 14px; max-width: 350px; margin-top: 12px; }
  .home-casting-card { height: 440px; border-radius: 29px; }
  .home-casting-card-base { border-radius: 32px 32px 27px 27px; }
  .home-casting-firstname { font-size: 20px; }
  .home-casting-lastname { font-size: 12px; }
  .home-casting-arrow { width: 42px; height: 42px; padding: 10px; }
  .home-casting-arrow--previous { left: 7px; }
  .home-casting-arrow--next { right: 7px; }
  .home-casting-caption { flex-direction: column; gap: 9px; max-width: 390px; }
}

@media (max-width: 480px) {
  .home-casting-showcase { --casting-card-width: 71vw; }
  .home-casting-card { height: 435px; }
  .home-casting-card-base { min-height: 158px; padding-inline: 24px; }
  .home-casting-title { font-size: 32px; }
  .home-casting-rail { gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-casting-card { transition: none; }
  .home-casting-rail { scroll-behavior: auto; }
}