/* Shared refinement for the homepage and transfer inquiry. */
:root{--care-ink:#251c36;--care-purple:#6435ad;--care-paper:#fcfbfe;--care-line:#e5dfed}
body{background:var(--care-paper);color:var(--care-ink)}
#navbar{background:rgba(252,251,254,.98)!important;box-shadow:none!important;border-bottom:1px solid var(--care-line);backdrop-filter:none!important}
.btn-spring{box-shadow:none!important;border-radius:8px!important;transition:background-color .18s ease,transform .18s ease!important}
.btn-spring:hover{transform:translateY(-1px)}
.bg-brand-600{background-color:var(--care-purple)}
.home-hero{padding:136px 24px 0;max-width:1280px;margin:auto}
.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero-kicker{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--care-purple);font-weight:700;margin:0 0 22px}
.hero-copy h1{font-size:clamp(48px,5.6vw,76px);line-height:1.04;letter-spacing:-.035em;color:var(--care-ink)}
.hero-copy h1 span{color:var(--care-purple);font-family:inherit}
.hero-intro{font-size:18px;line-height:1.7;color:#534c60;max-width:490px;margin-top:24px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:28px}
.primary-action{display:inline-flex;justify-content:center;align-items:center;gap:20px;padding:16px 20px;border-radius:8px;background:var(--care-purple);color:#fff;font-size:15px;font-weight:600;transition:background-color .18s}
.primary-action:hover{background:#4c258a}.primary-action:active{background:#391b6a}
.text-action{font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:5px;color:var(--care-ink)}
.hero-followup{font-size:13px;line-height:1.6;color:#655c71;margin-top:15px;max-width:490px}
.secondary-action{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 18px;border:1px solid #bcb0ce;border-radius:8px;color:var(--care-purple);font-size:14px;font-weight:600;line-height:1.4;min-height:58px;transition:background-color .18s}
.secondary-context{font-size:12px;font-weight:400;color:#655c71}
.secondary-action:hover{background:#f3eff8}.secondary-action:active{background:#e8dff2}
.hero-actions .primary-action{min-height:58px;white-space:nowrap}
p,li,dd,figcaption{ text-wrap:pretty }h1,h2,h3{ text-wrap:balance }
.hero-photo{margin:0;align-self:stretch;display:flex;flex-direction:column;min-width:0}
.hero-photo img{width:100%;height:100%;min-height:450px;max-height:570px;object-fit:cover;object-position:48% center;border-radius:12px}
.hero-photo figcaption{font-size:13px;color:#655c71;margin-top:12px}
.transfer-facts{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:36px;padding:30px 0;margin-top:42px;border-top:1px solid var(--care-line);border-bottom:1px solid var(--care-line)}
.transfer-facts strong{display:block;font-size:16px;font-weight:600}.transfer-facts span{display:block;font-size:14px;line-height:1.6;margin-top:6px;color:#655c71}
body[data-page=home] section:not(.home-hero){padding-top:72px;padding-bottom:72px}
body[data-page=home] #transfers{padding-top:80px}
body[data-page=home] .grain::after,body[data-page=home] .grain::before{display:none}
body[data-page=home] .reveal{opacity:1;transform:none}
body[data-page=home] h2{color:var(--care-ink)}
body[data-page=home] #transfers img{box-shadow:none!important;border-radius:12px}
body[data-page=home] #how{background:#f3eff8}
body[data-page=home] #services{background:#f6f3f9}
body[data-page=home] #services .service-card{box-shadow:none!important}
#start{background:#f3eff8}#transfer-form{box-shadow:none!important;border:1px solid #ded5e9;border-radius:16px}
#step-bar{background:var(--care-purple);transition:width .2s ease}
#main>section:first-child h1{font-size:clamp(40px,4.5vw,60px);line-height:1.08!important}
#main>section:first-child>div>div:first-child{box-shadow:none!important;border-radius:14px;background:#2b1646!important}
#main>section:first-child{padding-bottom:32px}
#main>section{padding-top:64px;padding-bottom:64px}
#main>section:first-child{padding-top:112px}
#main .rounded-3xl{border-radius:14px}
#main .step-num{color:var(--care-purple)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #6435ad;outline-offset:4px}
@media(min-width:768px) and (max-width:1100px){#navbar .md\:flex{gap:12px}#navbar .md\:flex>a{font-size:12px}#navbar img{max-width:210px}}
@media(max-width:899px){.hero-layout{gap:32px;grid-template-columns:1fr}.home-hero{padding-top:112px}.hero-photo img{height:380px;min-height:0}.hero-copy h1{font-size:60px}.hero-intro{max-width:600px}.transfer-facts{gap:22px}.hero-photo{margin-top:8px}}
@media(max-width:600px){.home-hero{padding:104px 20px 0}.hero-copy h1{font-size:52px}.hero-kicker{font-size:11px;line-height:1.6;margin-bottom:18px}.hero-intro{font-size:17px;margin-top:20px}.hero-actions{gap:10px;flex-wrap:nowrap;align-items:stretch}.hero-actions .primary-action{width:auto;flex:1;padding:12px 10px;font-size:14px;gap:8px}.secondary-action{flex:1;padding:10px;font-size:14px}.hero-copy h1{font-size:clamp(42px,13vw,52px)}.hero-photo img{height:300px}.transfer-facts{grid-template-columns:1fr;gap:20px;margin-top:28px;padding:24px 0}.transfer-facts strong{font-size:16px}.transfer-facts span{margin-top:3px}body[data-page=home] section:not(.home-hero){padding-top:48px;padding-bottom:48px}#main>section{padding-top:44px;padding-bottom:44px}#transfer-form{padding:24px 18px}#main .grid-cols-2.lg\:grid-cols-4{grid-template-columns:1fr}#navbar img{max-width:230px}#mobile-menu a{min-height:44px;display:flex;align-items:center}body{padding-bottom:88px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Aligned actions, centered benefits, and a manually controlled services row. */
.hero-actions{align-items:stretch}
.hero-actions .primary-action,.hero-actions .secondary-action{height:60px;min-height:60px;box-sizing:border-box}
.transfer-facts{grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;gap:28px;padding:32px 0}
.transfer-facts>div{display:flex;flex-direction:column;align-items:center}
.transfer-facts .benefit-mark{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 0 14px;border-radius:50%;background:#eee7f7;color:var(--care-purple)}
.benefit-icon{width:24px;height:24px}.transfer-facts strong{white-space:nowrap}.transfer-facts>div>span:last-child{max-width:32ch}
.rate-panel{display:flex;flex-direction:column;text-align:center;gap:20px;background:#eee7f7!important}
.rate-panel>div{max-width:760px}.rate-panel .font-display{font-size:clamp(30px,3.5vw,44px);text-wrap:balance}.rate-action{display:flex;justify-content:center;width:100%;margin-top:4px}
body[data-page=home] #about .about-title{font-size:clamp(23px,2.6vw,36px);white-space:nowrap;letter-spacing:-.035em}
.service-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;color:#655c71;font-size:14px}
.service-controls>div{display:flex;gap:10px}.service-controls button{height:46px;width:46px;border:1px solid #bcb0ce;border-radius:50%;background:#fcfbfe;color:var(--care-purple);font-size:24px;transition:background .18s}
.service-controls button:hover:not(:disabled){background:#e8dff2}.service-controls button:active:not(:disabled){background:#dcd0ed}.service-controls button:disabled{opacity:.35;cursor:default}
.service-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 20px;scrollbar-width:thin;scrollbar-color:#bcb0ce transparent}
#service-track>div{flex:0 0 calc((100% - 48px)/3);width:auto;display:flex;flex-direction:column;scroll-snap-align:start;box-shadow:none!important;border:1px solid #e5dfed;transform:none}
#service-track h3{min-height:56px}#service-track>div>a{margin-top:auto;min-height:44px;font-size:13px}
@media(max-width:1000px){#service-track>div{flex-basis:calc((100% - 24px)/2)}.transfer-facts strong{white-space:normal}}
@media(max-width:600px){.transfer-facts{grid-template-columns:1fr;gap:28px}#service-track>div{flex-basis:88%}body[data-page=home] #about .about-title{font-size:clamp(21px,5.9vw,34px)}.hero-actions .primary-action,.hero-actions .secondary-action{height:60px;min-height:60px}}
#about,#services{scroll-margin-top:88px}
body[data-page=home] .text-white h2{color:#fcfbfe}
/* Photography gives each program its own identity; motion follows interaction. */
.service-photo{height:180px;overflow:hidden;border-radius:10px;margin-bottom:24px;background:#eee7f7;flex-shrink:0}
.service-photo img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(.22,1,.36,1)}
#service-track>div{padding:18px 18px 22px}
#service-track h3,#service-track>div>p,#service-track>div>a{margin-left:8px;margin-right:8px}
.reveal{opacity:1;transform:none;transition:none!important}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
  #service-track>div:hover .service-photo img{transform:scale(1.035)}
  .hero-actions a,.service-controls button{transition:transform 180ms cubic-bezier(.22,1,.36,1),background-color 180ms cubic-bezier(.22,1,.36,1)}
  .hero-actions a:hover{transform:translateY(-2px)}
  .hero-actions a:active,.service-controls button:active:not(:disabled){transform:scale(.98)}
  .benefit-mark svg{transition:transform 300ms cubic-bezier(.22,1,.36,1)}
  .transfer-facts>div:hover .benefit-mark svg{transform:translateY(-3px)}
}
.keyboard-motion *, .keyboard-motion *::before,.keyboard-motion *::after{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.service-photo img{transform:none!important}.hero-actions a,.benefit-mark svg{transform:none!important}}
/* Finite presentation scenes: depth, a credential reveal, and five-step emphasis. */
.hero-photo,.pathways{perspective:1200px}
.credential-badge{transform-origin:70% 80%;z-index:2}
.support-features>div{transform-origin:20px 20px}
#how .animated-steps>li{position:relative;isolation:isolate;background:#fcfbfe!important;color:var(--care-ink);border:1px solid #dfd5eb;border-radius:16px;overflow:hidden;padding:24px}
#how .animated-steps>li::before{content:'';position:absolute;inset:0;background:#6435ad;opacity:0;z-index:-1;transition:opacity 420ms cubic-bezier(.22,1,.36,1)}
#how .animated-steps>li h3,#how .animated-steps>li p{color:inherit}
#how .animated-steps>li>p:first-child,#how .animated-steps .step-num{color:#6435ad;background:transparent;font-size:32px;margin-top:0}
#how .animated-steps>li.step-spotlight{color:#fcfbfe}
#how .animated-steps>li.step-spotlight::before{opacity:1}
#how .animated-steps>li.step-spotlight>p:first-child,#how .animated-steps>li.step-spotlight .step-num{color:#e9d5ff!important}
.pathways a{transform-origin:center bottom}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
 .pathways a{transition:transform 550ms cubic-bezier(.16,1,.3,1)}
 .pathways a:hover{transform:perspective(1200px) rotateY(-2deg) translateY(-6px)}
 .pathways a:nth-child(2):hover{transform:perspective(1200px) rotateY(2deg) translateY(-6px)}
 .credential-badge:hover{transform:translateY(-4px) rotate(2deg);transition:transform 350ms cubic-bezier(.16,1,.3,1)}
}
@media(max-width:1023px){.credential-badge{display:block!important;position:relative;bottom:auto;right:auto;margin:-28px 16px 0 auto;width:max-content;max-width:calc(100% - 32px);padding:16px}}
@media(prefers-reduced-motion:reduce){.pathways a,.credential-badge{transform:none!important}#how .animated-steps>li::before{transition:none}}

/* A stationary introduction gives the moving steps a clear reference point. */
body[data-page="home"] #how{overflow:visible}
.transfer-story{display:grid;gap:40px}
.story-intro>p{margin-top:24px;max-width:36rem}
#how .story-steps{display:grid;grid-template-columns:1fr;overflow:visible;margin:0;padding:0;gap:16px}
#how .story-steps>li{width:auto;min-height:180px;padding:28px 32px;display:flex;flex-direction:column;justify-content:center}
#how .story-steps h3{font-size:22px;letter-spacing:-.02em}
#how .story-steps>li>p:last-child{font-size:16px;max-width:30rem}
#how .story-steps>li::before{transition:opacity 300ms cubic-bezier(.22,1,.36,1)}
@media(min-width:1024px) and (min-height:650px){
 .transfer-story{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(48px,7vw,110px)}
 .story-intro{position:sticky;top:140px;padding-bottom:24px}
 #how .story-steps>li{min-height:260px}
 #how .story-steps{gap:24px}
}
/* Separate image planes move gently through their frame; copy stays stable. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference) and (min-width:1024px){
  .hero-photo>img{animation:hero-depth linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .about-depth>div:first-child{animation:photo-depth linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .about-depth>div:nth-child(2){animation:foreground-depth linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
 }
}
@keyframes hero-depth{from{transform:scale(1)}to{transform:scale(1.065) translateY(10px)}}
@keyframes photo-depth{from{transform:translateY(12px)}to{transform:translateY(-12px)}}
@keyframes foreground-depth{from{transform:translateY(22px) rotate(-2deg)}to{transform:translateY(-22px) rotate(0)}}
@media(prefers-reduced-motion:reduce){.story-intro{position:static}.about-depth>div,.hero-photo>img{animation:none!important;transform:none!important}}
