.appointment{background:#071d35;color:white;padding:0 24px 90px;scroll-margin-top:110px}
.appointment-card{position:relative;isolation:isolate;overflow:hidden;max-width:1180px;margin:auto;padding:50px 58px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;border:1px solid #34778f;border-radius:24px;background:radial-gradient(circle at 100% 0,rgba(255,255,255,.04) 138px,rgba(255,255,255,.15) 139px,rgba(255,255,255,.025) 140px,rgba(255,255,255,.025) 183px,transparent 184px),linear-gradient(110deg,#0d3b60,#087e9e)}
.appointment-eyebrow{margin:0 0 13px;color:#86deeb;font-size:11px;letter-spacing:2px;font-weight:700}
.appointment h2{margin:0;font-size:38px;line-height:1.2;letter-spacing:-1px}
.appointment-description{margin:16px 0 20px;max-width:680px;font-size:16px;line-height:1.6;color:#daebf5}
.appointment-benefits{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0;padding:0;list-style:none;font-size:12px;color:#daebf5}
.appointment-action{text-align:center}
.appointment-action>p{margin:0 0 12px;font-size:11px;color:#bbdfeb}
.appointment-action .button{font-size:16px;white-space:nowrap;padding:16px 24px}
@keyframes appointment-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes appointment-left{from{opacity:0;transform:translateX(-35px)}to{opacity:1;transform:none}}
@keyframes appointment-right{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:none}}
.js .appointment-enter{animation:appointment-up 650ms var(--ease) backwards}
.js .appointment-enter .appointment-copy{animation:appointment-left 650ms var(--ease) 100ms backwards}
.js .appointment-enter .appointment-action{animation:appointment-right 650ms var(--ease) 100ms backwards}
.js .appointment-enter li{animation:appointment-up 500ms var(--ease) 250ms backwards}
.js .appointment-enter li:nth-child(2){animation-delay:350ms}.js .appointment-enter li:nth-child(3){animation-delay:450ms}
@media(max-width:1100px){.appointment-card{padding:38px 32px;gap:28px}.appointment h2{font-size:32px}.appointment-action .button{font-size:14px;padding:15px 18px}}
@media(max-width:900px){.appointment-card{grid-template-columns:1fr;gap:26px}.appointment-action{text-align:left}.appointment-description{max-width:none}}
@media(max-width:599px){.appointment{padding:0 20px 56px}.appointment-card{padding:30px 24px;border-radius:20px}.appointment h2{font-size:28px}.appointment-description{font-size:14px}.appointment-benefits{flex-direction:column;gap:12px}.appointment-action .button{width:100%;white-space:normal}.js .appointment-enter .appointment-copy,.js .appointment-enter .appointment-action{animation-name:appointment-up}}
@media(prefers-reduced-motion:reduce){.appointment *{animation:none!important;transition:none!important}}