/* V59 / one quiet handover, then the page is yours. */
#page-transfer{display:grid;position:fixed;inset:0;z-index:2147483000;place-items:center;background:#fff;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s ease,visibility 0s .38s}
#page-transfer .transfer-mark{width:64px;height:64px;animation:transfer-sun-ccw 3.2s linear infinite;will-change:transform}
#page-transfer svg{display:block;width:100%;height:100%}
html.page-pending #page-transfer,html.is-leaving #page-transfer{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s ease;animation:transfer-failsafe 0s 6s forwards}
@keyframes transfer-sun-ccw{to{transform:rotate(-360deg)}}
/* The TOP has already rendered this exact sun beneath the loading layer. */
html.sun-handover.page-ready:not(.is-leaving) #page-transfer{transition:none;opacity:0;visibility:hidden;pointer-events:none}
html.page-pending .opening-mark,html.page-pending .recruit-logo-target{visibility:hidden}
.page-ready .lower-hero .hero-type,.page-ready .purpose-opening h1,.page-ready .purpose-opening-lead{animation:page-arrive .85s cubic-bezier(.2,.7,.15,1) both}
.page-ready .lower-hero>.hero-photo,.page-ready .lower-hero>.care-hero-scene{animation:page-arrive 1s .08s cubic-bezier(.2,.7,.15,1) both}
@keyframes page-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.quiet-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:900px;transform:translateY(var(--lower-drift,0px))}
.quiet-petal{position:absolute;width:var(--size);height:var(--size);transform:rotate(var(--turn));perspective:600px}
.quiet-petal svg{width:100%;height:100%;overflow:visible;animation:quiet-flight var(--duration) ease-in-out var(--delay) infinite alternate;filter:drop-shadow(0 9px 8px #263c3610)}
@keyframes quiet-flight{0%{transform:translate3d(-8px,-24px,-20px) rotateX(12deg) rotateY(-22deg) rotateZ(-12deg)}100%{transform:translate3d(18px,28px,55px) rotateX(-14deg) rotateY(30deg) rotateZ(18deg)}}
html.motion-off *,html.is-leaving *,html.page-hidden *{animation-play-state:paused!important}
.lower-page .page-header{backdrop-filter:none;background:#fff}
.lower-page .content-section .section-label h2{line-height:1.7}
.lower-page:not(.purpose-page) .content-section{background:#ffffffef}
.lower-page .hero-photo img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.lower-page .hero-photo:hover img{transform:scale(1.018)}
.lower-page .related-pages a{border-radius:0;background:#fff;border-top:1px solid #b7c4bd;transition:background .3s,transform .3s}
.lower-page .related-pages a:hover{background:#f2f9f5;transform:translateY(-4px)}
.lower-page .related-pages p{font-size:clamp(21px,2vw,30px)}
.reveal-on-enter.is-revealed{animation:page-arrive .85s cubic-bezier(.2,.7,.15,1) both}
@media(max-width:767px){.quiet-petal{width:calc(var(--size)*.65);height:calc(var(--size)*.65)}#page-transfer .transfer-mark{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){#page-transfer .transfer-mark{animation:none}#page-transfer{transition:none}.page-ready .lower-hero .hero-type,.page-ready .purpose-opening h1,.page-ready .purpose-opening-lead,.page-ready .lower-hero>.hero-photo,.page-ready .lower-hero>.care-hero-scene,.reveal-on-enter.is-revealed{animation:none}.quiet-petal svg{animation:none}.quiet-atmosphere{transform:none}}

html.is-leaving:not(.motion-off) #page-transfer .transfer-mark{animation-play-state:running!important}

html.motion-off .reveal-on-enter.is-revealed,html.motion-off .page-ready .hero-type,html.motion-off.page-ready .lower-hero .hero-type,html.motion-off.page-ready .purpose-opening h1,html.motion-off.page-ready .purpose-opening-lead,html.motion-off.page-ready .lower-hero>.hero-photo,html.motion-off.page-ready .lower-hero>.care-hero-scene{animation:none!important}

/* A clearer shared typographic scale across the practical information pages. */
.lower-page:not(.purpose-page) .lower-hero h1{font-family:var(--sans);font-weight:600;font-size:clamp(38px,4.5vw,70px);line-height:1.55;letter-spacing:-.055em}
.lower-page .hero-lead{font-size:16px;line-height:2.25}
.lower-page .prose{font-size:16px;line-height:2.3}
.lower-page .section-label h2{font-size:23px;font-weight:500}
@media(max-width:767px){.lower-page:not(.purpose-page) .lower-hero h1{font-size:clamp(31px,7.3vw,47px)}.lower-page .hero-lead{font-size:14px}.lower-page .prose{font-size:15px}.lower-page .section-label h2{font-size:22px}}