:root{
  --turquoise:#0f91a0;
  --turquoise-light:#39bfca;
  --turquoise-dark:#075b68;
  --navy:#092f3a;
  --sand:#e8d4a6;
  --cream:#f7f3ea;
  --white:#fff;
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--cream);color:var(--navy);font-family:var(--sans);display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.login-header{min-height:96px;padding:16px clamp(22px,5vw,82px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(9,47,58,.14);background:rgba(247,243,234,.93)}
.login-brand{display:block;width:clamp(180px,18vw,260px)}
.login-brand img{display:block;width:100%;height:64px;object-fit:contain;object-position:left center}
.back-home{display:inline-flex;align-items:center;gap:.7rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(9,47,58,.36);padding:.35rem 0}
.back-home span{font-size:1.15rem;color:var(--turquoise)}
main{width:min(1180px,calc(100% - 40px));margin:0 auto;flex:1;padding:clamp(56px,8vw,108px) 0 54px}
.login-intro{max-width:760px;text-align:center;margin:0 auto clamp(38px,6vw,66px)}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:.8rem;margin:0 0 1.2rem;color:var(--turquoise-dark);font-size:.68rem;font-weight:700;letter-spacing:.17em}
.eyebrow span{width:34px;height:1px;background:var(--turquoise)}
h1{font:600 clamp(3.2rem,7vw,6.2rem)/.92 var(--display);letter-spacing:-.045em;margin:0}
.intro-copy{max-width:650px;margin:1.5rem auto 0;color:rgba(9,47,58,.68);font-size:clamp(.96rem,1.35vw,1.08rem);line-height:1.75}
.login-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.8vw,34px)}
.login-option{position:relative;min-height:440px;padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(9,47,58,.13);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.login-option::before{content:"";position:absolute;inset:auto -100px -160px auto;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.08)}
.login-option:hover,.login-option:focus-visible{transform:translateY(-6px);box-shadow:0 22px 54px rgba(9,47,58,.14);outline:none}
.login-option--client{background:linear-gradient(145deg,var(--turquoise-light),var(--turquoise));color:var(--white)}
.login-option--admin{background:var(--white);color:var(--navy)}
.login-option--admin:hover,.login-option--admin:focus-visible{border-color:var(--turquoise)}
.option-number{position:absolute;right:clamp(24px,4vw,46px);top:clamp(24px,4vw,42px);font:600 .72rem var(--sans);letter-spacing:.14em;opacity:.7}
.option-icon{width:74px;height:74px;border:1px solid rgba(255,255,255,.48);border-radius:50%;display:grid;place-items:center;margin-bottom:2.6rem}
.option-icon span{position:relative;width:25px;height:15px;border:2px solid currentColor;border-radius:18px 18px 8px 8px;border-top:0}
.option-icon span::before{content:"";position:absolute;width:13px;height:13px;border:2px solid currentColor;border-radius:50%;left:4px;bottom:12px;background:transparent}
.option-icon--admin{border-color:rgba(15,145,160,.3);color:var(--turquoise-dark)}
.option-icon--admin span{width:24px;height:24px;border:2px solid currentColor;border-radius:4px}
.option-icon--admin span::before{width:8px;height:7px;border:2px solid currentColor;border-bottom:0;border-radius:8px 8px 0 0;left:6px;bottom:22px}
.option-label{margin:0 0 .75rem!important;font-size:.65rem!important;font-weight:700;letter-spacing:.16em;opacity:.74}
.login-option h2{font:600 clamp(2.35rem,4vw,3.5rem)/1 var(--display);letter-spacing:-.035em;margin:0 0 1.2rem}
.login-option>p{max-width:470px;margin:0;font-size:.92rem;line-height:1.7;opacity:.78}
.login-option strong{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:2rem;border-top:1px solid currentColor;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.login-option strong span{font-size:1.4rem;transition:transform .2s ease}
.login-option:hover strong span{transform:translateX(5px)}
.login-help{margin-top:clamp(28px,4vw,44px);padding:24px clamp(24px,4vw,42px);display:grid;grid-template-columns:minmax(240px,1fr) auto auto;align-items:center;gap:clamp(20px,4vw,56px);background:var(--navy);color:var(--white)}
.login-help div{display:flex;flex-direction:column;gap:.25rem}
.login-help small{font-size:.6rem;letter-spacing:.16em;color:var(--sand)}
.login-help strong{font:600 1.55rem var(--display)}
.login-help>a{font-size:.82rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:.25rem}
footer{padding:23px;text-align:center;color:rgba(9,47,58,.58);font-size:.66rem;letter-spacing:.08em;border-top:1px solid rgba(9,47,58,.12)}
@media(max-width:760px){
  .login-header{min-height:80px;padding:10px 20px}.login-brand{width:164px}.login-brand img{height:54px}.back-home{font-size:0;width:44px;height:44px;border:1px solid rgba(9,47,58,.2);display:grid;place-items:center;padding:0}.back-home span{font-size:1.35rem}
  main{width:min(100% - 28px,560px);padding:48px 0 36px}.eyebrow{font-size:.6rem}.intro-copy{line-height:1.65}.login-options{grid-template-columns:1fr}.login-option{min-height:390px;padding:32px 28px}.option-icon{margin-bottom:2rem}.login-help{grid-template-columns:1fr;text-align:center;gap:1rem}.login-help div{margin-bottom:.25rem}.login-help>a{justify-self:center}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.login-option,.login-option strong span{transition:none}}