/* Quiet entrance, frosted actions, and a first-screen mobile landing. */
.hero{--home-header-height:93px;display:flex;flex-direction:column;min-height:calc(100svh - var(--home-header-height))}
.hero .hero-grid{min-height:0;flex:1;padding:clamp(28px,5svh,52px) 0 24px;align-content:center}
.hero>.scroll-cue{position:relative;left:auto;bottom:auto;transform:none;align-self:center;flex-shrink:0;margin:0 auto 18px}
.hero>.scroll-cue svg{animation:home-cue-tug 3.4s cubic-bezier(.22,.61,.36,1) 1s 1}
.hero>.scroll-cue:hover svg{transform:translateY(3px)}
.hero-route{animation:home-card-arrive 720ms cubic-bezier(.16,1,.3,1) 90ms backwards}
.hero-route:nth-child(2){animation-delay:190ms}
.hero-route:nth-child(3){animation-delay:290ms}
.hero-route:focus-within{animation:none}
.hero-route .button{
 position:relative;isolation:isolate;overflow:hidden;
 background-color:#f7fbfc;
 background-image:linear-gradient(155deg,rgba(255,255,255,.98),rgba(255,255,255,.35) 58%,rgba(223,245,247,.25));
 color:#0b3c5d;border:1px solid rgba(255,255,255,.9);
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(11,60,93,.07),0 5px 18px rgba(0,0,0,.16),0 0 0 1px rgba(255,255,255,.04);
 transition:transform 260ms cubic-bezier(.22,1,.36,1),background-color 260ms ease,border-color 260ms ease,box-shadow 260ms ease;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .hero-route .button{background-color:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%)}
}
@media(hover:hover) and (pointer:fine){
 .hero-route .button:hover{background-color:rgba(255,255,255,.99);border-color:#fff;color:#0b3c5d;transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(11,60,93,.06),0 8px 24px rgba(0,0,0,.2),0 0 18px rgba(230,251,255,.09)}
}
.hero-route .button:active{transform:translateY(0) scale(.985)}
.hero-route .button:focus-visible,.hero>.scroll-cue:focus-visible{outline:3px solid #a0f2ef!important;outline-offset:4px!important;box-shadow:0 0 0 2px #091725!important}
@keyframes home-card-arrive{
 from{opacity:0;filter:blur(5px);transform:translateY(14px) scale(.992)}
 to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}
@keyframes home-cue-tug{
 0%,18%,42%,58%,82%,100%{transform:translateY(0)}
 28%,68%{transform:translateY(5px)}
 35%,75%{transform:translateY(1px)}
}
@media(max-width:1180px){.hero{--home-header-height:73px}}
@media(max-width:640px){
 .hero{--home-header-height:69px;min-height:calc(100dvh - var(--home-header-height))}
 .hero .hero-grid{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-height:0;padding:22px 0 8px;gap:14px}
 .hero .hero-content{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;width:100%}
 .hero #hero-heading{flex-shrink:0;font-size:clamp(1.7rem,7vw,2.1rem);line-height:1.15;margin:0 0 20px}
 .hero-routes{width:100%;max-width:440px;flex:1;max-height:450px;min-height:324px;grid-template-rows:repeat(3,minmax(min-content,1fr));gap:12px}
 .hero-route{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 130px;grid-template-rows:auto auto;column-gap:14px;row-gap:8px;padding:16px;align-content:center;align-items:center;border-radius:16px}
 .hero-route-vector{position:static;grid-column:1;grid-row:1;align-self:center;justify-self:start;width:28px;height:28px;margin:0}
 .hero-route h2{grid-column:1/-1;grid-row:1;padding-left:38px;margin:0;font-size:19px;line-height:1.25;align-self:center}
 .hero-route p{grid-column:1;grid-row:2;margin:0;max-width:none;font-size:13px;line-height:1.45}
 .hero-route .button{grid-column:2;grid-row:2;align-self:center;margin:0;width:100%;min-height:46px;padding:10px;font-size:12px;line-height:1.35;gap:5px;white-space:normal;text-align:center}
 .hero-social{flex-shrink:0;margin:0;gap:10px}
 .hero-social a{width:40px;min-height:40px;justify-content:center;border-radius:50%}
 .hero-social a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .hero-social svg{width:19px;height:19px}
 .hero>.scroll-cue{margin:0 auto max(10px,env(safe-area-inset-bottom));min-height:44px;font-size:12px}
}
@media(max-width:360px){
 .hero-route{grid-template-columns:minmax(0,1fr) 112px;column-gap:10px;padding:12px}
 .hero-route h2{font-size:17px;padding-left:34px}
 .hero-route-vector{width:24px;height:24px}
 .hero-route p{font-size:12.5px}
 .hero-route .button{font-size:12px;padding-inline:8px}
}
/* Keep all content scrollable when text is enlarged or the viewport is short. */
@media(max-width:640px) and (max-height:680px){
 .hero .hero-grid{padding:12px 0 6px;gap:8px}
 .hero #hero-heading{font-size:25px;margin-bottom:14px}
 .hero-routes{min-height:288px;gap:8px}
 .hero-route{padding-block:10px;row-gap:5px}
 .hero-route-vector{width:24px;height:24px}
 .hero-route h2{font-size:17px;padding-left:34px}
 .hero-route p{font-size:12.5px;line-height:1.4}
 .hero-route .button{min-height:42px;padding-block:8px}
 .hero-social a{min-height:32px;width:36px}
 .hero>.scroll-cue{margin-bottom:max(8px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
 .hero-route,.hero>.scroll-cue svg{animation:none!important}
 .hero-route .button{transition:none!important}
 .hero-route .button:hover,.hero-route .button:active,.hero>.scroll-cue:hover svg{transform:none}
}
@media(forced-colors:active){.hero-route .button{background:ButtonFace;color:ButtonText;border-color:ButtonText;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}}