/* Section 1: aligned room and transparent foreground layers; readable HTML copy. */
.care-hero { position: relative; isolation: isolate; overflow: hidden; background: #f3f2ee; aspect-ratio: 1672 / 794; }
.care-scene { position: absolute; inset: 0; overflow: hidden; }
.care-layer { position: absolute; top: -16px; left: -2%; width: 104%; }
.care-layer img { display: block; width: 100%; height: auto; max-width: none; user-select: none; pointer-events: none; }
.care-hero[data-motion-running] .care-layer { will-change: transform; }
.care-layer-foreground img { transform-origin: 32% 55%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .care-layer-foreground img { transition: transform 420ms cubic-bezier(.22, 1, .36, 1); }
    .care-layer-foreground.is-hovered img { transform: scale(1.025); }
}
/* Hidden for 400 ms, then fade in until 1000 ms; independent of scroll transforms. */
@keyframes care-foreground-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
    .care-layer-foreground { animation: care-foreground-reveal 600ms ease-in-out 400ms both; }
    /* Start the reveal only once the image can be painted, including slow connections. */
    .care-hero[data-care-loading] .care-layer-foreground { animation: none; opacity: 0; }
}
/* A soft white wash behind the title keeps the room visible without losing contrast. */
.care-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff0 49%, #ffffff26 56%, #ffffffe8 66%, #fffffff7 100%); }
.care-content { position: relative; z-index: 1; display: grid; width: 100%; grid-template-columns: 61% 39%; align-items: center; height: 100%; pointer-events: none; }
.care-copy { grid-column: 2; padding-block: 32px; }
.care-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: #333; font-size: 11px; font-weight: 600; letter-spacing: .19em; }
.care-eyebrow > span { width: 30px; height: 2px; background: var(--brand); }
.care-copy h1 { max-width: 590px; font-size: clamp(30px, 3.1vw, 52px); line-height: 1.22; font-weight: 400; letter-spacing: -.035em; hyphens: none; }
.care-title-service { font-weight: 550; }
.care-title-purpose { color: var(--brand-dark); }
@media (max-width: 1200px) and (min-width: 981px) {
    .care-copy h1 { font-size: 30px; }
    .care-content { grid-template-columns: 61% 39%; }
}
@media (max-width: 980px) {
    .care-hero { display: flex; flex-direction: column; aspect-ratio: auto; }
    .care-content { order: -1; display: block; height: auto; background: #fff; }
    .care-copy { padding-block: 34px 36px; }
    .care-eyebrow { margin-bottom: 15px; }
    .care-copy h1 { max-width: 780px; font-size: clamp(26px, 4.1vw, 39px); line-height: 1.3; }
    .care-scene { position: relative; flex: none; aspect-ratio: 1.5; }
    .care-scene::after { background: linear-gradient(180deg, #fff8 0%, #fff0 17%); }
    .care-layer { top: -10px; left: -8%; width: 165%; }
}
@media (max-width: 600px) {
    .care-copy { padding-block: 28px 30px; }
    .care-copy h1 { font-size: clamp(25px, 6.5vw, 33px); letter-spacing: -.03em; }
}
@media (prefers-reduced-motion: reduce) {
    .care-layer { transform: none !important; }
}
@media print {
    .care-hero { aspect-ratio: auto; }
    .care-scene { display: none; }
    .care-content { display: block; }
    .care-copy { padding-block: 30px; }
}