/* Public banner and administrator preview share the original 2.2:1 canvas. */
.pl-hero { aspect-ratio: 2.2 / 1; height: auto; min-height: 0; isolation: isolate; }
.hero.skill-carousel { aspect-ratio: 2.2 / 1; height: auto; min-height: 0; isolation: isolate; padding: 3%; background: #fff8ee; border: 1px solid #e9dfd9; border-radius: 16px; box-shadow: 0 5px 22px #39213f04; }
.skill-carousel::after { display: none; }
.carousel-slides, .carousel-slide, .carousel-slide > a { position: absolute; inset: 0; display: block; }
.carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skill-carousel::before, .pl-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,#fff8ee 0%,#fff8eef5 18%,#fff8eedb 29%,#fff8ee70 40%,#fff8ee00 61%); }
.skill-carousel .hero-copy { width: 68%; z-index: 2; pointer-events: none; }
.pl-hero .eyebrow { color: #ef6f29; font-size: clamp(10px, max(12.96px, .9vw), 13px); font-weight: 700; letter-spacing: 1.3px; margin-bottom: 14px; }
.skill-carousel .hero-copy .eyebrow { color: #ef6f29; font-size: clamp(10px, max(12.96px, .9vw), 13px); font-weight: 700; letter-spacing: 1.3px; margin-bottom: 14px; }
.skill-carousel .hero-copy h1 { color: #39213f; font-size: clamp(36px, max(53.28px, 3.7vw), 58px); font-weight: 800; line-height: 1.22; letter-spacing: -1.5px; }
.skill-carousel .hero-copy h2 { color: #39213f; font-size: clamp(17px, max(24.48px, 1.7vw), 25px); line-height: 1.5; margin-top: 12px; }
.skill-carousel .hero-copy p { color: #625169; font-size: 16px; margin: 12px 0 28px; letter-spacing: 0; }
.carousel-explore { pointer-events: auto; padding: 14px 23px; border-radius: 13px; gap: 15px; font-size: 15px; }
.carousel-controls { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); }
.carousel-stepper, .carousel-dots { display: flex; align-items: center; border: 1px solid #eee2df; background: #fffcf6ed; color: #39213f; border-radius: 16px; padding: 5px; min-height: 43px; box-shadow: 0 4px 14px #39213f08; }
.carousel-stepper button { display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 0; background: transparent; color: #39213f; border-radius: 9px; }
.carousel-stepper button:hover { background: #e9ddf4; }
.carousel-counter { min-width: 60px; padding: 0 5px; text-align: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carousel-dots { padding: 7px 10px; flex-wrap: wrap; justify-content: center; max-width: 180px; }
.carousel-dots button { position: relative; width: 17px; height: 25px; border: 0; padding: 0; background: transparent; }
.carousel-dots button::after { content: ""; display: block; width: 9px; height: 9px; margin: auto; border: 1px solid #ef7c2f; border-radius: 50%; }
.carousel-dots button[aria-pressed="true"]::after { background: #ef7c2f; }
.carousel-slide > a:focus-visible { outline-offset: -5px; }