/* Shared service cards in desktop dropdown and mobile drawer. */
.nav-services-options{position:fixed;top:88px;left:50%;width:min(1160px,calc(100vw - 36px));min-width:0;padding:24px;background:#f4f2ee;color:#263036;transform:translateX(-50%);box-shadow:0 30px 75px rgba(0,0,0,.24)}
.nav-services-versions[open] .nav-services-options{animation:servicesMenuEnter .72s cubic-bezier(.2,.7,.2,1) both}
.nav-services-options::before{height:3rem;bottom:100%}
.nav-services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nav-service-card{--card-delay:.1s;min-width:0;display:grid;grid-template-columns:40% minmax(0,1fr);min-height:224px;background:#fff;border:1px solid rgba(38,48,54,.12);overflow:hidden;transition:background-color .35s ease,border-color .35s ease}
:is(.nav-services-versions,.mobile-services-versions)[open] .nav-service-card{animation:servicesCardEnter .7s cubic-bezier(.2,.7,.2,1) var(--card-delay) both}
.nav-service-card:nth-child(2){--card-delay:.18s}.nav-service-card:nth-child(3){--card-delay:.26s}.nav-service-card:nth-child(4){--card-delay:.34s}
.nav-service-card:hover,.nav-service-card:focus-within{background:#e9eeed;border-color:#aab9ba}
.nav-service-card.is-current{border-color:#799296}
.desktop-nav .nav-services-options .nav-service-media,.mobile-nav .mobile-services-versions .nav-service-media{display:block;padding:0;overflow:hidden;opacity:1;background:#d8dfde}
:is(.nav-services-versions,.mobile-services-versions)[open] .nav-service-media{animation:servicesPhotoEnter .8s cubic-bezier(.2,.7,.2,1) calc(var(--card-delay) + .12s) both}
.nav-service-media img{display:block;width:100%;height:100%;min-height:224px;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.nav-service-card:hover .nav-service-media img,.nav-service-media:focus-visible img{transform:scale(1.06)}
.nav-service-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:25px 28px}
:is(.nav-services-versions,.mobile-services-versions)[open] .nav-service-info>*{animation:servicesDetailEnter .65s cubic-bezier(.2,.7,.2,1) both}
.nav-service-info>*:nth-child(1){animation-delay:calc(var(--card-delay) + .2s)}.nav-service-info>*:nth-child(2){animation-delay:calc(var(--card-delay) + .32s)}.nav-service-info>*:nth-child(3){animation-delay:calc(var(--card-delay) + .44s)}
.desktop-nav .nav-services-options .nav-service-title,.mobile-nav .mobile-services-versions .nav-service-title{display:block;padding:0;background:none;color:#263036;font:650 clamp(20px,1.5vw,23px)/1.14 var(--head);letter-spacing:-.015em;text-transform:uppercase;opacity:1}
.desktop-nav .nav-services-options .nav-service-title:hover,.desktop-nav .nav-services-options .nav-service-title[aria-current],.mobile-nav .mobile-services-versions .nav-service-title:hover,.mobile-nav .mobile-services-versions .nav-service-title[aria-current]{background:none;color:#4c686d}
.nav-service-info p{font:400 15px/1.55 var(--body);letter-spacing:0;text-transform:none;color:#566367;margin:.75rem 0 1rem}
.desktop-nav .nav-services-options .nav-service-more,.mobile-nav .mobile-services-versions .nav-service-more{display:inline-flex;align-items:center;gap:.55rem;margin-top:auto;padding:.65rem .85rem;background:#263036;color:#fff;font:700 13px/1.2 var(--body);letter-spacing:.045em;text-transform:uppercase;opacity:1;transition:background-color .3s ease,color .3s ease}
.desktop-nav .nav-services-options .nav-service-more:hover,.mobile-nav .mobile-services-versions .nav-service-more:hover{background:#d7e0df;color:#263036}
.nav-service-more svg{width:14px;height:14px;stroke-width:2}
.nav-service-media:focus-visible,.nav-service-title:focus-visible,.nav-service-more:focus-visible{outline:2px solid #536f74;outline-offset:2px}
@keyframes servicesMenuEnter{from{opacity:0;filter:blur(7px);transform:translate(-50%,-12px)}to{opacity:1;filter:blur(0);transform:translate(-50%,0)}}
@keyframes servicesCardEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes servicesPhotoEnter{from{opacity:0;clip-path:inset(0 14% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes servicesDetailEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:620px) and (min-width:961px){.nav-services-options{max-height:calc(100dvh - 98px);overflow-y:auto}}
@media(max-width:960px){
  .mobile-services-versions>.mobile-services-options{display:block;padding:.75rem 0 1.25rem 1rem}
  .mobile-services-options .nav-services-grid{grid-template-columns:1fr;gap:14px}
  .mobile-services-options .nav-service-card{grid-template-columns:36% minmax(0,1fr);min-height:168px}
  .mobile-services-options .nav-service-media img{min-height:168px}
  .mobile-services-options .nav-service-info{padding:16px}
  .mobile-nav .mobile-services-versions .nav-service-title{font-size:18px}
  .mobile-services-options .nav-service-info p{font-size:13px;margin:.45rem 0 .7rem}
  .mobile-nav .mobile-services-versions .nav-service-more{font-size:11px}
}
@media(max-width:390px){.mobile-services-options .nav-service-card{grid-template-columns:32% minmax(0,1fr)}.mobile-services-options .nav-service-info{padding:12px}.mobile-services-options .nav-service-info p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.nav-services-versions[open] .nav-services-options,:is(.nav-services-versions,.mobile-services-versions)[open] .nav-service-card,:is(.nav-services-versions,.mobile-services-versions)[open] .nav-service-media,:is(.nav-services-versions,.mobile-services-versions)[open] .nav-service-info>*{animation:none}.nav-service-media img,.nav-service-card,.nav-service-more{transition:none}}
/* Balanced proportions inside the mobile drawer. */
@media(max-width:960px){
  .mobile-menu .brand-tooth{width:40px;height:50px}
  .mobile-menu .brand-wordmark{width:180px}
  .mobile-menu .mobile-contact{font-size:calc(.85rem + 2px)}
  .mobile-menu .mobile-contact svg{width:18px;height:18px}
  .mobile-nav>a,.mobile-nav>.mobile-services-versions>summary,.mobile-nav>.mobile-home-versions>summary{font-size:19px}
}
@media(max-width:360px){
  .mobile-menu .brand-tooth{width:36px;height:46px}
  .mobile-menu .brand-wordmark{width:152px}
}

/* Main links in the mobile drawer have clear rhythm without heavy rules. */
@media(max-width:960px){
  .mobile-nav>a,.mobile-nav>details{border-bottom:1px solid rgba(38,48,54,.1)}
  .mobile-nav>a,.mobile-nav>details>summary{padding:.78rem 0;text-transform:uppercase;letter-spacing:.015em}
}