/* Homepage care banner — 3D photo reel on the right */
.banner-care.has-reel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy reel" "links reel"; column-gap: 32px; row-gap: 28px; align-items: center; isolation: isolate; }
.banner-care.has-reel::after { opacity: .45; z-index: 0; }
.banner-care.has-reel .banner-copy { grid-area: copy; z-index: 1; }
.banner-care.has-reel .banner-links { grid-area: links; align-self: start; }
.reel { grid-area: reel; position: relative; z-index: 1; display: block; text-decoration: none; color: #fff; outline: none; }
.reel-halo { position: absolute; left: 50%; top: 42%; width: 120%; height: 90%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--halo, rgba(255,210,120,.55)), transparent 72%); filter: blur(26px); transition: background 1s ease; pointer-events: none; z-index: -1; }
.reel-track { position: relative; height: 300px; perspective: 1200px; perspective-origin: 50% 45%; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.reel-track.dragging { cursor: grabbing; }
.reel-card { position: absolute; left: 50%; top: 50%; width: 300px; aspect-ratio: 16 / 10.4; margin: 0; border-radius: 18px; overflow: hidden; background: #0d1130; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease, filter .8s ease, box-shadow .8s ease; will-change: transform; -webkit-user-drag: none; }
.reel-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transition: transform 5s ease; }
.reel-card.is-active { box-shadow: 0 24px 60px -8px var(--glow, rgba(10,25,70,.6)), 0 0 0 2px rgba(255,255,255,.55); }
.reel-card.is-active img { transform: scale(1.06); }
.reel-copy { text-align: center; margin-top: 4px; }
.reel-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff6d6; opacity: .9; }
.reel-title { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -.01em; margin-top: 6px; min-height: 1.25em; text-shadow: 0 2px 18px rgba(10,20,60,.35); }
.reel-title.swap { animation: reel-in .6s cubic-bezier(.2,.8,.2,1); }
@keyframes reel-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.reel-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.reel-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.4); transition: width .4s ease, background .4s ease; }
.reel-dots i.on { width: 22px; background: #fff; }
.reel-go { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 14.5px; padding: 8px 16px; border-radius: 999px; background: rgba(10,25,70,.45); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); transition: background .3s ease, transform .3s ease; }
.reel:hover .reel-go, .reel:focus-visible .reel-go { background: rgba(10,25,70,.7); transform: translateY(-2px); }
.reel:focus-visible .reel-track { outline: 2px solid #fff; outline-offset: 4px; border-radius: 18px; }
@media (max-width: 960px) {
  .banner-care.has-reel { grid-template-columns: 1fr; grid-template-areas: "copy" "reel" "links"; }
  .reel-track { height: 230px; }
  .reel-card { width: 250px; }
}
@media (max-width: 560px) {
  .reel-track { height: 190px; margin: 0 -22px; }
  .reel-card { width: 210px; }
}
@media (prefers-reduced-motion: reduce) { .reel-card, .reel-card img { transition: none; } }
.banner-care.has-reel .banner-links { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 440px; }