@charset "utf-8";
/* CSS Document */

/* ---- Tuning knobs -------------------------------------------------------
   --btn-glow        halo around the left/right spin buttons
   --btn-glow-hover  same, on hover
   --pulse-dot-min / --pulse-dot-max   hotspot centre dot breathe range
   --pulse-ring-peak brightest point of the expanding hotspot ring
   Raise the pulse values for more presence, lower the glow for less halo.  */
:root {
	--btn-glow: 0 0 5px 1px rgba(255, 255, 255, 0.3);
	--btn-glow-hover: 0 0 9px 2px rgba(255, 255, 255, 0.5);
	--pulse-dot-min: 0.6;
	--pulse-dot-max: 0.9;
	--pulse-ring-peak: 0.85;
}

body {
	margin: 0;
	font-family: "canada-type-gibson", arial;
	color: black;
	font-size: 18px;
	font-weight: 300;
}
h2 {
	color: #242a75;
}
ul {
	padding: 0 0 0 20px;
	font-size: 0.8em;
}
#header {
	padding: 20px 0;
}
img {
	max-width: 100%;
}
#customers {
	padding: 50px 0;
}
#header img {
	max-height: 50px;
}
/* Footer Styles */
#footer {
    padding: 50px 0;
    border-top: 2px solid #afc9e5;
	background-color: #141534;
	color: white;
	margin-bottom: 0;
	border-bottom: none;
}
#footer img {
    padding-bottom: 20px;
}
#main {
	min-height: 500px;
}
.cover, .mobcover {
	width: 100%;
	height: 622px;
/*	background: url("../images/bg.jpg") center bottom no-repeat; */
	border-radius: 20px;
	position: absolute;
	z-index: 10;
	padding-top: 20%;
}
.cover p, .mobcover p {
	color: white;
}
.mobcover {
	display: none;
}
.mobcover img {
	margin-bottom: 10px;
}
.title {
	position: absolute;
	top: 10%;;
	width: 45%;
	z-index: 4;
	left: 50%;
	transform: translateX(-50%);
}
.title img {
	max-height: 100px;
	margin-bottom: 15px;
}
.title p {
	color: white;
}
/* Each phrase is its own nowrap span, so a line break can only ever fall on a
   pipe separator -- never inside "Multi-tenant & Scalable Architecture". The
   fluid font-size keeps all three phrases on one line down to ~1100px. */
.subhead span {
	white-space: nowrap;
}
.subhead .sep {
	padding: 0 0.45em;
	opacity: 0.65;
}
@media (min-width: 993px) {
	.title {
		width: 80%;
	}
	.subhead {
		font-size: clamp(14px, 1.35vw, 19px);
	}
}
.wheel {
	max-width: 300px;
	position: absolute;
	z-index: 2;
	transform-origin: 172.5px;
}
.lunacont {
	position: relative;
}
.hsmcont {
    width: 100%;
    height: 622px;
}
.hsmcont img {
    width: 100%;
    height: auto;   /* never let an HTML height attribute distort the frames */
    position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}
.active {
    z-index: 2;
}
.whitebg {
	width: 100%;
	background: url("../images/black-bg.jpg") center bottom no-repeat; 
	background-size: cover;
	border-radius: 20px;
	height: 622px;
	position: absolute;
	z-index: 1;
}
.resource-cont {
	position: absolute;
	z-index: 4;
	overflow: auto;
	height: 622px;
	width: 100%;
	scroll-snap-type: none;
	overscroll-behavior-x: contain;
	display: grid;
	scrollbar-width: none;
	grid-template-columns: repeat(1, 1fr);
	scroll-behavior: auto;
}
.resource {
	scroll-snap-align: center;
	/* 76 frames x 50px/step x 15 loops = 57000. Must stay a clean multiple of
	   (TOTAL_FRAMES x SCROLL_STEP) or the last loop ends mid-rotation.
	   Keep LOOPS in script.js in sync with the multiplier used here. */
	width: 57000px;
}
.hotspot {
	position: absolute;
	z-index: 5;
	transform: translate(-50%, -50%);
	opacity: 1;
	transition: opacity 0.2s ease;
}
/* JS toggles this instead of display:none. Using visibility keeps the pulse
   animation running in place, so hotspots no longer restart mid-cycle (which
   is what made them pop/blink hard as they came back into range). */
.hotspot.hs-hidden {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.hotspotactive {
	z-index: 6;
}
.hs-1 {
	left: 46.9%;
	top: 71%;
}
.hs-2 {
	left: 31.9%;
	top: 64%;
}
.hs-3 {
	left: 49%;
	top: 48%;
}
.hs-4 {
	left: 21.5%;
	top: 68.8%;
}
.hs-5 {
	left: 54.2%;
	top: 64.6%;
}
.hs-6 {
	left: 58.7%;
	top: 70.6%;
}
/* ---- Hotspot pulse ------------------------------------------------------
   Two layers, both animating only opacity + transform (GPU-composited, so 16
   of these are cheap). Both keyframes start AND end fully transparent /
   identical, so the loop restart is invisible -- this is what removes the
   hard blink. Delays are staggered via --pulse-delay so they don't flash in
   unison. Negative delays start each one mid-cycle, already desynced.        */
.pulse {
	position: absolute;
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	opacity: 0.55;
	box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.55); /* soft halo, breathes with the dot */
	animation: pulsedot 3.4s ease-in-out infinite;
	animation-delay: var(--pulse-delay, 0s);
}
.pulse::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	opacity: 0;
	transform: scale(1);
	animation: pulsering 3.4s ease-out infinite;
	animation-delay: var(--pulse-delay, 0s);
	will-change: transform, opacity;
}
@keyframes pulsedot {
	0%, 100% { opacity: var(--pulse-dot-min); }
	50%      { opacity: var(--pulse-dot-max); }
}
@keyframes pulsering {
	0%   { transform: scale(1);    opacity: 0; }
	16%  { transform: scale(1.16); opacity: var(--pulse-ring-peak); }
	74%  { transform: scale(2.1);  opacity: 0; }
	100% { transform: scale(2.1);  opacity: 0; }
}
/* stagger: 8 offsets, repeating across the 16 hotspots */
.hotspots-cont .hotspot:nth-child(8n+1) { --pulse-delay: 0s; }
.hotspots-cont .hotspot:nth-child(8n+2) { --pulse-delay: -0.42s; }
.hotspots-cont .hotspot:nth-child(8n+3) { --pulse-delay: -0.85s; }
.hotspots-cont .hotspot:nth-child(8n+4) { --pulse-delay: -1.27s; }
.hotspots-cont .hotspot:nth-child(8n+5) { --pulse-delay: -1.70s; }
.hotspots-cont .hotspot:nth-child(8n+6) { --pulse-delay: -2.12s; }
.hotspots-cont .hotspot:nth-child(8n+7) { --pulse-delay: -2.55s; }
.hotspots-cont .hotspot:nth-child(8n+8) { --pulse-delay: -2.97s; }
/* respect OS-level motion reduction */
@media (prefers-reduced-motion: reduce) {
	.pulse { animation: none; opacity: var(--pulse-dot-max); }
	.pulse::after { animation: none; opacity: 0.5; transform: scale(1.3); }
	.hotspot { transition: none; }
}
.hs-btn, .hs-btn2 {
	background: url("../images/hotspot.svg") center center no-repeat;
	width: 25px;
	height: 25px;
	opacity: 0.8;
	transition: all 0.3s;
	position: absolute;
	z-index: 6;
	-webkit-transition: all 0.3s;
}
.hs-btn:hover, .hs-btn2:hover {
	opacity: 1;
	cursor: pointer;
}
/* .hs-btn / .hs-btn2 rules follow */
.hotspot-copy {
	/* One width for every tooltip. The position classes below set only offsets,
	   never width, so all detail popups render at identical size regardless of
	   how much copy they hold. Change this one value to resize them all. */
	width: 180px;
	text-align: center;
	background-color: white;
	padding: 0 0 8px;
	border-radius: 10px;
	position: absolute;
	display: none;
	box-shadow: 0px 0px 8px 0px #555555;
}
.hotspot-copy img {
	border-radius: 10px 10px 0 0;
	margin-bottom: 5px;
	
}
.showtt {
	display: block;
}
.posbot-1 {
	left: -78px;
	top: 130%;
}
.posbot-2 {
	left: -78px;
	top: 130%;
}
.posright-1 {
	left: 36px;
	top: -270%;
}
.posright-2 {
	left: 36px;
	top: -269%;
}
.postop-1 {
	left: -78px;
	top: -533%;
}
.postop-2 {
	left: -78px;
	top: -593%;
}
.hotspot-copy p {
	margin: 0;
	font-size: 0.7em;
	padding: 0 5px;
	/* balance evens out line lengths in these short headings, which stops
	   "Dual hot swap power / supplies" and "Decommission Button & / LED"
	   from dropping a single orphan word onto the last line. */
	text-wrap: balance;
	overflow-wrap: break-word;
}
/* Longer descriptive paragraphs read better with pretty (orphan prevention
   without forcing equal line lengths). */
.hotspot-copy p + p {
	text-wrap: pretty;
}
.popupbox {
	padding: 20px;
	position: absolute;
	z-index: 7;
	background-color: white;
	width:70%;
	left: 50%;
	top: 5%;
	transform: translateX(-50%);
	border-radius: 10px;
	box-shadow: 0px 0px 10px 1px #000000;
	display: none;
}
.flexcont {
	text-align: left;
	display: flex;
	column-gap: 25px;
}
.flexcont div {
	flex-basis: 33%;
}
.flexcont p {
	font-size: 0.8em;
}
.flexcont img {
	max-width: 100%;
	margin-bottom: 10px;
	border-radius: 5px;
}
.closebtn {
	display: block;
	width: 20px;
	height: 20px;
	background: url("../images/close-icon.png") center center no-repeat;
	background-size: contain;
	float: right;
}
.closebtn:hover {
	cursor: pointer;
}
.carousel-control-next-icon {
	background-image: url("../images/next-icon.svg");
}
.carousel-control-prev-icon {
	background-image: url("../images/prev-icon.svg");
}
.btncont {
	position: absolute;
	z-index: 5;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	margin-top: 20px;
	width: 100%;
}
/* Native button reset — these are real <button> elements now, so strip the
   UA default border/background/padding/font and restore a visible focus ring. */
.btnleft, .btnright, .closebtn, .hs-btn2 {
	border: none;
	padding: 0;
	background-color: transparent;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}
.btnleft:focus-visible, .btnright:focus-visible,
.closebtn:focus-visible, .hs-btn2:focus-visible, .hs-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
/* H1 wrapper around the title art must not inherit heading margins */
.title h1 {
	margin: 0;
	font-size: 0;
	line-height: 0;
}
.btnleft, .btnright {
	width: 30px;
	height: 30px;
	background: url("../images/arrow.svg") center center no-repeat;
	margin: 0 20px;
	border-radius: 50%;
	box-shadow: var(--btn-glow);
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}
.btnleft {
	transform: rotate(180deg);
}
.btnleft:hover, .btnright:hover {
	cursor: pointer;
	box-shadow: var(--btn-glow-hover);
}
@media (max-width: 1200px) {
	.hsmcont, .whitebg, .resource-cont, .cover, .mobcover {
		height: 530px;
	}
	.popupbox {
		width: 80%;
	}
}
@media (max-width: 992px) {
	body {
		line-height: 1.3;
	}
	h2 {
		font-size: 1.6em;
	}
	.title img {
		max-height: 70px;
	}
	.title p {
		font-size: 16px;
	}
	.hsmcont, .whitebg, .resource-cont, .cover, .mobcover {
		height: 400px;
	}
	.title {
		width: 75%;
	}
	.popupbox {
		width: 90%;
		padding-bottom: 5px;
	}
	.popupbox p, ul {
		margin-bottom: 10px;
		font-size: 0.7em;
	}
	.flexcont {
		column-gap: 10px;
	}
	.btnleft, .btnright, .pulse, .hs-btn, .hs-btn2 {
		width: 22px;
		height: 22px;
	}
}
@media (max-width: 768px) {
	.title img {
		max-height: 50px;
		margin-bottom: 10px;
	}
	.hsmcont, .whitebg, .resource-cont, .cover, .mobcover {
		height: 310px;
	}
	.title {
		width: 80%;
	}
	.title p {
		font-size: 14px;
	}
	.btncont {
		bottom: 20px;
	}
	.btnleft, .btnright, .pulse, .hs-btn, .hs-btn2 {
		width: 20px;
		height: 20px;
	}
	.btncont {
		display: none;
	}
	.popupbox {
		padding-bottom: 20px;
	}
	.flexcont {
		height: 200px;
		overflow-y: scroll;
	}
	.hotspot-copy {
		width: 150px;
	}
	.posbot-1, .posbot-2, .postop-1, .postop-2 {
		left: -63px;   /* re-centre for the narrower box */
	}
}
@media (max-width: 596px) {
	.title {
		top: 7%;
	}
	.title img {
		max-height: 50px;
	}
	.title p {
		font-size: 13px;
	}
	.hsmcont, .whitebg, .resource-cont, .cover, .mobcover {
		height: 250px;
	}
	.hotspot-copy {
		padding: 5px 0;
		width: 105px;
	}
	.posbot-1, .posbot-2, .postop-1, .postop-2 {
		left: -41px;   /* re-centre for the narrower box */
	}
	.hotspot-copy p {
		font-size: 0.7em;
	}
	.flex-services {
		flex-wrap: wrap;
	}
	#footer ul {
		margin: 0;
		padding: 0;
	}
	#footer img {
		max-width: 60%;
	}
	#footer {
		padding: 20px;
	}
	.mobcover {
		display: block;
	}
}