/*
 * WordPress-only integration. Purchased template.css remains byte-for-byte intact.
 * Homepage styling is preserved. Only the explicitly requested intro is refined.
 */
.whm-skip-link { position: fixed; top: -10rem; left: 1rem; z-index: 100000000; }
/* Curated capability medallions; scoped to the homepage cards only. */
#services .capability-visual {
	position: relative;
	width: 140px;
	height: 140px;
	padding: 7px;
	margin: 0 auto 1.6rem;
	overflow: visible;
	border: 1px solid rgba(180, 151, 107, .45);
	border-radius: 50%;
	background: #faf8f4;
}
#services .capability-visual::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 2px;
	bottom: -1px;
	left: calc(50% - 11px);
	background: #baa27d;
}
#services .capability-visual img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
#services .capability-visual--design img { object-position: 57% 43%; }
#services .capability-visual--visualization img { object-position: 60% 52%; }
#services .capability-visual--interactive img { object-position: 38% 50%; }
@media (max-width: 575px) {
	#services .capability-visual { width: 128px; height: 128px; margin-bottom: 1.4rem; }
}
.whm-skip-link:focus { top: 1rem; padding: 0.75rem 1rem; color: #2c2c2c; background: #fff; }
.whm-scroll-progress { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: var(--accent-color); z-index: 9999; transition: width 0.1s ease; pointer-events: none; }
body.admin-bar #mainNav { top: 32px; }
body.admin-bar .whm-scroll-progress { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar #mainNav, body.admin-bar .whm-scroll-progress { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar #mainNav, body.admin-bar .whm-scroll-progress { top: 0; }
}
/* WordPress menu depth is supported without replacing Bootstrap's offcanvas. */
#primary-menu .sub-menu { list-style: none; padding-left: 1rem; }

/* WHM identity: compact mark, supporting wordmark, then a restrained hairline. */
#preloader.whm-intro {
	background: #2c2c2c;
	/* CSS also clears the overlay if JS is blocked, throws, or never loads. */
	animation: whm-intro-exit 0.7s ease 2.95s forwards;
}
#preloader.whm-intro.loaded {
	animation: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0.7s ease;
}
#preloader.whm-intro .logo-animation {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 220px;
	max-width: calc(100vw - 64px);
}
.whm-intro-mark {
	position: relative;
	width: 112px;
	aspect-ratio: 311 / 300;
	margin-bottom: 28px;
	opacity: 0;
	transform: translateY(5px);
	animation: whm-intro-appear 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}
.whm-intro-mark img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.78;
}
.whm-intro-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,0.12) 46%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.12) 54%, transparent 58%);
	background-size: 300% 100%;
	background-position: 150% 0;
	-webkit-mask: url("../images/whm-logo.png") center / contain no-repeat;
	mask: url("../images/whm-logo.png") center / contain no-repeat;
	opacity: 0;
	pointer-events: none;
	animation: whm-intro-sweep 1s cubic-bezier(0.4, 0, 0.2, 1) 1.55s both;
}
.whm-intro-wordmark {
	display: block;
	padding-left: 0.3em; /* Balance the trailing letter spacing around the center. */
	color: rgba(255,255,255,0.84);
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.3em;
	opacity: 0;
	transform: translateY(4px);
	animation: whm-intro-appear 0.55s ease 0.65s forwards;
}
#preloader.whm-intro .logo-line {
	width: 76px;
	height: 1px;
	margin: 21px 0 0;
	background: #c78a42;
	/* Thicken equally above/below without changing the centered layout's height. */
	box-shadow: 0 -0.25px 0 #c78a42, 0 0.25px 0 #c78a42;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: center;
	animation: whm-intro-line 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}
@keyframes whm-intro-appear {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes whm-intro-line {
	to { opacity: 1; transform: scaleX(1); }
}
@keyframes whm-intro-sweep {
	0% { opacity: 0; background-position: 150% 0; }
	15% { opacity: 0.75; }
	80% { opacity: 0.75; }
	100% { opacity: 0; background-position: -50% 0; }
}
@keyframes whm-intro-exit {
	0% { opacity: 1; visibility: visible; }
	99% { visibility: visible; }
	100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 575px) {
	.whm-intro-mark { width: 100px; margin-bottom: 25px; }
	.whm-intro-wordmark { font-size: 11px; }
	#preloader.whm-intro .logo-line { width: 70px; margin-top: 19px; }
}
/* Homepage Process: compact vertical rhythm, with shared typography and columns. */
#process.section-padding { padding-block: 4rem; background-color: #34312e !important; }
#process .section-header { margin-bottom: 2.5rem; }
#process .process-step { padding-block: 1.5rem; }
@media (min-width: 992px) {
  #process .step-number::before {
    content: "";
    position: absolute;
    top: calc(50% + 5px);
    left: calc(50% + 2.5rem);
    width: calc(100% - 1.5rem);
    height: 1.5px;
    background: var(--accent-color);
    opacity: .38;
    pointer-events: none;
  }
  #process .col-lg-3:last-child .step-number::before { content: none; }
}
.whm-contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#contact .contact-info .contact-item h5 { text-transform: uppercase; }
#contact .contact-info .contact-item { margin-bottom: 1.25rem; }
#contact .contact-info .contact-item + .contact-item { padding-top: 1.25rem; border-top: 1px solid rgba(180, 151, 107, .22); }
#contact .contact-info .contact-item:last-child { margin-bottom: 0; }
#contact .contact-form { padding-bottom: 4rem; }
#contact .contact-info { padding-top: 3rem; }
#contact .contact-info .contact-item p { margin-bottom: 0; }
#contact .whm-contact-verification { max-width: 100%; }
@media (max-width: 991px) {
  #contact .contact-info { padding: 2rem 0 0; }
}