/* Clear, restrained feedback for a corporate site. */
:root { --motion-ease: cubic-bezier(.22, .61, .36, 1); }
/* One persistent navigation bar, with room for WordPress's editing toolbar. */
:root {
  --site-header-height: 88px;
  --site-admin-offset: var(--wp-admin--admin-bar--height, 0px);
  --site-scroll-offset: calc(var(--site-header-height) + var(--site-admin-offset) + 20px);
}
html { scroll-padding-top: var(--site-scroll-offset); }
.site-header {
  height: 88px;
  min-height: 0;
  padding: 12px 4.5%;
  position: sticky;
  top: var(--site-admin-offset);
  z-index: 100;
  transition: box-shadow .25s;
}
.site-header .header-right { gap: 0; }
.site-header .brand { min-height: 44px; justify-content: center; }
.site-header .brand>span { font-size: 30px; letter-spacing: 5px; }
.site-header .brand-diamond { width: 10.5px; height: 10.5px; margin-right: 7px; }
.site-header.is-scrolled { box-shadow: 0 4px 20px #183d4214; }
.skip-link { z-index: 101; }
.skip-link:focus { top: calc(var(--site-admin-offset) + 10px); }
.editorial h2 { scroll-margin-top: 0; }
.article-nav, .form-aside { top: var(--site-scroll-offset); }
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header .brand>span { font-size: 26px; letter-spacing: 4px; }
}
@media (max-width: 900px) {
  :root { --site-header-height: 56px; }
  .site-header { height: 56px; padding: 0 0 0 6%; flex-wrap: nowrap; gap: 0; }
  .site-header .brand>span { font-size: 23px; letter-spacing: 4.5px; }
  .site-header .brand-diamond { width: 9px; height: 9px; margin-right: 6px; }
  .site-header .menu-toggle {
    width: 56px; height: 56px; flex: 0 0 56px;
    justify-content: center; padding: 0; gap: 0;
    background: var(--deep); color: #fff;
    transition: background-color .25s;
  }
  .menu-toggle:focus-visible { outline-color: #fff; outline-offset: -6px; }
  .menu-lines {
    width: 24px; height: 18px; border: 0;
    background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  }
  .menu-lines::before, .menu-lines::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor; transition: transform .25s var(--motion-ease);
  }
  .menu-lines::before { top: 0; }
  .menu-lines::after { top: auto; bottom: 0; }
  .menu-toggle[aria-expanded="true"] .menu-lines { background: none; }
  .menu-toggle[aria-expanded="true"] .menu-lines::before { transform: translateY(8.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines::after { transform: translateY(-8.25px) rotate(-45deg); }
  .site-header .header-right {
    position: absolute; top: 100%; left: 0; right: 0; width: 100%;
    max-height: calc(100vh - var(--site-header-height) - var(--site-admin-offset));
    max-height: calc(100dvh - var(--site-header-height) - var(--site-admin-offset));
    overflow-y: auto; overscroll-behavior: contain;
    background: #fff; box-shadow: 0 12px 20px #183d4214;
  }
  .site-header .header-right.is-open { padding: 12px 6% 24px; }
}
@media (max-width: 600px) {
  /* WordPress's toolbar scrolls away on narrow screens. */
  :root { --site-admin-offset: 0px; }
}
.nav-contact, .recruitment-hero-contact, .solid-button, .primary-link, .outline-button,
.contact-links>a, .company-links>a, .related-grid>a {
  --hover-fill: #32636a;
  background-image: linear-gradient(var(--hover-fill), var(--hover-fill));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size .42s var(--motion-ease), background-color .25s, color .25s,
    border-color .25s, padding .35s var(--motion-ease), box-shadow .35s;
}
.primary-link { --hover-fill: #235c78; }
.outline-button, .contact-links>a { --hover-fill: #fff; }
.company-links>a, .related-grid>a { --hover-fill: #244b50; }
.company-links>a p, .company-links>a span, .related-grid>a p, .contact-links>a p, .contact-links>a span {
  transition: color .25s;
}
a>svg, button>svg, .text-link>span { transition: transform .35s var(--motion-ease), color .25s, background .25s; }
.underlined-link, .link-button, .recruitment-hero-service {
  background: linear-gradient(#e8efed, #e8efed) left center / 0% 100% no-repeat;
  transition: background-size .4s var(--motion-ease), color .25s, border-color .25s;
}
.main-nav>a:not(.nav-contact)::after {
  content: ''; position: absolute; left: 0; bottom: -10px; width: 100%; height: 2px;
  background: #a68a53; transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--motion-ease);
}
.main-nav>a[aria-current="page"]::after { width: 24px; transform: scaleX(1); }
.footer-nav-groups a, .article-nav a, .position-links a { transition: color .25s, background-color .25s; }
.faq-list summary, .job summary { transition: background-color .25s, color .25s; }
.faq-list details[open] summary, .job details[open] summary { color: #28585e; }
.message-image img, .recruit-image img, .member-photo img, .service-team-scenes img {
  transition: transform .8s var(--motion-ease);
}
.service-team-main, .service-team-consultation, .service-team-phone { overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  .nav-contact:hover, .recruitment-hero-contact:hover, .solid-button:not(:disabled):hover,
  .primary-link:hover, .outline-button:hover, .contact-links>a:hover,
  .company-links>a:hover, .related-grid>a:hover {
    background-image: linear-gradient(var(--hover-fill), var(--hover-fill));
    background-repeat: no-repeat; background-position: left center; background-size: 100% 100%;
  }
  .outline-button:hover, .contact-links>a:hover { color: #183d42; }
  .contact-links>a:hover p, .contact-links>a:hover span { color: #526965; }
  .company-links>a:hover, .related-grid>a:hover { color: #fff; padding-left: 18px; padding-right: 18px; }
  .company-links>a:hover p, .company-links>a:hover span, .related-grid>a:hover p { color: #d6e5e2; }
  .underlined-link:hover, .link-button:hover, .recruitment-hero-service:hover {
    background-size: 100% 100%; color: #183d42; border-color: #937445; text-decoration: none;
  }
  .main-nav>a:not(.nav-contact):hover::after { transform: scaleX(1); }
  .footer-nav-groups a:hover, .article-nav a:hover, .position-links a:hover { color: #327898; }
  .article-nav a:hover, .position-links a:hover, .faq-list summary:hover, .job summary:hover { background-color: #e8efed; }
  a:hover>svg, button:not(:disabled):hover>svg { transform: translateX(5px); }
  a[target="_blank"]:hover>svg { transform: translate(3px, -3px); }
  .message-image:hover img, .recruit-image:hover img, .member-photo:hover img { transform: scale(1.025); }
  .service-team-scenes>div:hover img { transform: scale(1.035); }
}

/* Keyboard and touch get clear feedback as well. */
.nav-contact:focus-visible, .recruitment-hero-contact:focus-visible,
.solid-button:focus-visible, .primary-link:focus-visible { background-size: 100% 100%; }
.outline-button:focus-visible, .contact-links>a:focus-visible { background-size: 100% 100%; color: #183d42; }
.contact-links>a:focus-visible p, .contact-links>a:focus-visible span { color: #526965; }
.main-nav>a:not(.nav-contact):focus-visible::after { transform: scaleX(1); }
.solid-button:active, .primary-link:active, .recruitment-hero-contact:active { background-size: 100% 100%; }
@media (max-width: 900px) { .main-nav>a:not(.nav-contact)::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}