.arc-featured { position: relative; background: #fff; }
.arc-featured__stage { position: relative; height: clamp(520px, 43.5vw, 836px); overflow: hidden; }
.arc-featured__slide { position: absolute; inset: 0; visibility: hidden; }
.arc-featured__slide.is-active { visibility: visible; z-index: 2; }
.arc-featured__slide.is-next { visibility: visible; z-index: 1; }
.arc-featured__media { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.arc-featured__img { margin: 0; height: 100%; overflow: hidden; transition: transform .8s ease-in-out; }
.arc-featured__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Leaving slide: the left image rises out, the right one drops out, and the card collapses upwards (Figma smart-animate, .8s ease-in-out). */
.arc-featured__slide.is-leaving .arc-featured__img--left { transform: translateY(-104%); }
.arc-featured__slide.is-leaving .arc-featured__img--right { transform: translateY(104%); }
.arc-featured__card-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.arc-featured__panel { width: min(1100px, calc(100% - 2 * var(--arc-gutter))); pointer-events: auto; clip-path: inset(0); transition: clip-path .8s ease-in-out; }
.arc-featured__slide.is-leaving .arc-featured__panel { clip-path: inset(0 0 100% 0); }
.arc-featured__slide.is-resetting, .arc-featured__slide.is-resetting * { transition: none !important; }
.arc-featured__card { min-height: 238px; background: #fff; color: #000; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(32px, 8vw, 160px); padding: 56px 80px 56px 56px; }
.arc-featured__card--dark { background: #000; color: #fff; }
.arc-featured__title { margin: 0; font-family: var(--arc-font-serif); font-weight: 400; font-size: clamp(36px, 3vw, 58px); line-height: 1; letter-spacing: -.01em; }
.arc-featured__loc { margin-top: clamp(24px, 3.3vw, 64px); }
.arc-featured__loc, .arc-featured__meta { font-family: var(--arc-font-sans); font-size: 11px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .75); }
.arc-featured__card--dark .arc-featured__loc, .arc-featured__card--dark .arc-featured__meta { color: rgba(255, 255, 255, .75); }
/* The mark: no frame, and it keeps redrawing itself like the GIF in the design — stroke draws on, fills, holds, fades, repeats. */
.arc-featured__mark { width: 117px; height: 109px; display: flex; align-items: center; justify-content: center; color: inherit; }
.arc-featured__logo path { stroke-width: 12; fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; animation: arcFeaturedMark 5.6s cubic-bezier(.65, 0, .35, 1) infinite; }
.arc-featured__logo path:nth-child(2) { animation-delay: .38s; }
@keyframes arcFeaturedMark {
  0%    { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
  20%   { stroke-dashoffset: 0; fill-opacity: 0; }
  30%   { stroke-dashoffset: 0; fill-opacity: 1; }
  80%   { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 1; }
  90%   { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 0; }
  90.1% { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 0; }
  100%  { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
}
.arc-featured__aside { display: flex; flex-direction: column; gap: clamp(32px, 4.7vw, 91px); min-width: 178px; }
.arc-featured__aside .arc-btn { align-self: flex-start; }
.arc-featured__meta { display: flex; justify-content: space-between; gap: 24px; }
@media (max-width: 991.98px) {
  /* Below the desktop breakpoint the slides stack statically (no cycling animation) and the card sits centred over the images. */
  .arc-featured__stage { height: auto; }
  .arc-featured__slide { position: relative; inset: auto; display: none; visibility: visible; }
  .arc-featured__slide.is-active { display: block; }
  .arc-featured__media { height: clamp(360px, 52vw, 520px); }
  .arc-featured__panel { width: calc(100% - 2 * var(--arc-gutter)); }
  .arc-featured__card { min-height: 0; grid-template-columns: 1fr auto; grid-template-areas: "main mark" "aside aside"; align-items: start; gap: 28px 16px; padding: 28px 24px; }
  .arc-featured__main { grid-area: main; }
  .arc-featured__mark { grid-area: mark; width: auto; height: auto; align-self: start; }
  .arc-featured__mark .arc-logo svg { width: auto; height: 36px; }
  .arc-featured__loc { margin-top: 20px; }
  .arc-featured__aside { grid-area: aside; gap: 24px; min-width: 0; }
}
@media (max-width: 575.98px) {
  .arc-featured__media { grid-template-columns: 1fr; height: auto; }
  .arc-featured__img { aspect-ratio: 4 / 3; }
  .arc-featured__panel { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .arc-featured__img, .arc-featured__panel { transition: none; }
  .arc-featured__logo path { animation: none; fill-opacity: 1; stroke-dashoffset: 0; }
}