/* Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	color: #333;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #fff;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
}

.hidden {
	display: none;
}

/* Color Variables */
:root {
	--primary-orange: #ff6d00;
	--light-orange: #f7842c;
	--very-light-orange: #ff9f56;
	--primary-black: #000000;
	--primary-gray: #222020;
	--primary-white: #ffffff;
	--light-gray: #f8f9fa;
	--medium-gray: #666;
	--dark-gray: #333;
	--dropdown-highlight: #fff3ea;
	--dropdown-highlight-border: #ffd2ad;
	--dropdown-btn-bg: #fff;
	--dropdown-btn-bg-hover: #fff3ea;
	--dropdown-btn-border: #ffc794;
	--dropdown-btn-shadow: 0 6px 18px 0 rgba(255, 109, 0, 0.16);
}

/* Individual service list item as button */
.service-list-btn {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 0 2px 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	user-select: none;
	transition: transform 0.18s ease;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	display: block;
	position: relative;
}

.service-list-btn:hover,
.service-list-btn:focus {
	transform: translateX(3px);
}

.service-list-btn .service-list-item {
	position: relative;
	z-index: 1;
	border-radius: 12px;
	background: transparent;
	border: 2px solid transparent;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.service-list-btn:hover .service-list-item,
.service-list-btn:focus .service-list-item {
	background: var(--dropdown-btn-bg-hover);
	border-color: var(--dropdown-btn-border);
	box-shadow: var(--dropdown-btn-shadow);
}

.service-list-btn:focus {
	outline: none;
}

.service-list-btn * {
	text-decoration: none !important;
}
.service-section-btn {
	background: var(--dropdown-btn-bg);
	border: 2px solid transparent;
	border-radius: 16px;
	box-shadow: none;
	padding: 0;
	margin: 0 2px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	display: block;
}

.service-section-btn:focus {
	outline: none;
}

.service-section-btn .service-section {
	border-radius: 16px;
	background: transparent;
	transition: background 0.18s, box-shadow 0.18s, border 0.18s;
}

.service-section-btn:hover,
.service-section-btn:focus {
	background: var(--dropdown-btn-bg-hover);
	border: 2px solid var(--dropdown-btn-border);
	box-shadow: var(--dropdown-btn-shadow);
	z-index: 2;
}

.service-section-btn * {
	text-decoration: none !important;
}

.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 90px;
	z-index: 1000;
	/* Faintly translucent white with a blur, so page content shows through */
	background: rgba(255, 255, 255, 0.025);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-hidden {
  transform: translateY(-100%);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1500px;
  padding: 0 2rem;
  margin: 0 auto;
  position: relative;
  height: 90px;
}

.nav-logo img {
	height: 70px;
	width: auto;
}

.admin-fab {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff6d00, #e85d00);
	box-shadow: 0 4px 20px rgba(255, 109, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	z-index: 9999;
	transition: transform 0.2s, box-shadow 0.2s;
}

.admin-fab:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 28px rgba(255, 109, 0, 0.65);
}

.admin-fab svg {
	width: 20px;
	height: 20px;
	fill: #fff;
	pointer-events: none;
}

.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
}

.nav-item {
	font-size: 19px;
	font-style: normal;
}

.nav-link {
	position: relative;
	text-decoration: none;
	color: var(--primary-black);
	transition: color 0.3s ease;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
}

.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 3px;
	background: var(--primary-orange);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		transform-origin 0s 0.3s;
	/* delay origin change until after transform */
}

.nav-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		transform-origin 0s;
}

.nav-link:not(:hover)::after {
	transform: scaleX(0);
	transform-origin: right;
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		transform-origin 0s;
}

/* Underline effect only under the text */
.free-assessment-btn {
  background: #6e1f2f; /* deep burgundy */
  color: var(--primary-white) !important;
  padding: 0.8rem 1.8rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.4s ease,
    color 0.3s ease;
}

/* Services Dropdown Styles */
.nav-services-dropdown {
	position: relative;
}

.dropdown-arrow {
	display: inline-block;
	margin-left: 3px;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-services-dropdown.is-open .dropdown-arrow,
.nav-services-dropdown:focus-within .dropdown-arrow {
	transform: rotate(180deg);
}

.services-dropdown {
		display: block;
		position: fixed;
		left: 0;
		top: 90px; /* height of navbar */
		width: 100vw;
		background: transparent;
		box-shadow: none;
		z-index: 1100;
		padding: 0;
		border: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}

.services-dropdown.is-open,
.nav-services-dropdown:focus-within .services-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.26s ease, visibility 0s linear 0s;
}

.services-dropdown-inner {
	position: fixed;
	left: 50%;
	top: 100px;
	transform: translateX(-50%) translateY(-10px);
	max-width:  1200px;
	min-width: 320px;
	width: 98vw;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding: 32px 32px 28px 32px;
	gap: 0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 20px 45px rgba(20, 20, 20, 0.18);
	overflow: hidden;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-dropdown-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-orange), var(--very-light-orange), var(--primary-orange));
}

.services-dropdown.is-open .services-dropdown-inner,
.nav-services-dropdown:focus-within .services-dropdown-inner {
	transform: translateX(-50%) translateY(0);
}

.service-section {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0;
	gap: 2px;
	padding: 4px 24px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.32s ease, transform 0.32s ease;
}
.service-section:first-child {
	padding-left: 4px;
}
.service-section:not(:first-child) {
	border-left: 1px solid rgba(0, 0, 0, 0.07);
}

.services-dropdown.is-open .service-section,
.nav-services-dropdown:focus-within .service-section {
	opacity: 1;
	transform: translateY(0);
}
.services-dropdown.is-open .service-section:nth-child(1) { transition-delay: 0.02s; }
.services-dropdown.is-open .service-section:nth-child(2) { transition-delay: 0.08s; }
.services-dropdown.is-open .service-section:nth-child(3) { transition-delay: 0.14s; }

.service-section-title {
	position: relative;
	margin-left: 0;
	margin-bottom: 14px;
	padding-bottom: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--primary-orange);
	letter-spacing: 1px;
	text-transform: uppercase;
}
.service-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 26px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--primary-orange), var(--very-light-orange));
}

.service-list-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	margin: 0 -12px;
	border-bottom: none;
}
.service-list-item:last-child {
	border-bottom: none;
}
.service-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--primary-orange), var(--light-orange));
	color: #fff;
	font-size: 0.92rem;
	transition: transform 0.22s ease;
}
.service-list-btn:hover .service-icon,
.service-list-btn:focus .service-icon {
	transform: scale(1.08) rotate(-4deg);
}
.service-title {
	font-size: 1.02rem;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 0;
}

@media (max-width: 1000px) {
	.services-dropdown-inner {
		max-width: 98vw;
		padding: 24px 8vw;
	}
}

@media (max-width: 600px) {
	.services-dropdown-inner {
		padding: 16px 2vw;
	}
	.service-title {
		font-size: 0.98rem;
	}
}

/* Hover: smoothly fade to orange */
.free-assessment-btn:hover {
  background-color: #3a3a3a;
}

/* Text span for underline */
.free-assessment-btn .btn-text {
  position: relative;
  display: inline-block;
}

/* Underline animation */
.free-assessment-btn .btn-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--very-light-orange);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.5;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform-origin 0s 0.3s;
}

.free-assessment-btn:hover .btn-text::after {
  transform: scaleX(1);
  transform-origin: left;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform-origin 0s;
}

.free-assessment-btn:not(:hover) .btn-text::after {
  transform: scaleX(0);
  transform-origin: right;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform-origin 0s;
}

/* Arrow on right (not underlined) */
.free-assessment-btn::after {
  content: '→';
  font-size: 1rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateX(0);
  opacity: 0.7;
}

.hamburger {
	display: none;
	flex-direction: column;
	cursor: pointer;
}

.bar {
	width: 25px;
	height: 3px;
	background: var(--primary-black);
	margin: 3px 0;
	transition: 0.3s;
}

.hero {
	background: url('images/hero-bg.jpg') center center/cover no-repeat;
	min-height: 100vh;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding: 0;
}

.hero-content {
	position: relative;
	max-width: 750px;
	margin: 0 auto;
	padding: 0 20px 180px 20px;
	/* bottom padding for spacing from edge */
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* align content to bottom */
	align-items: center;
	/* center horizontally */
	z-index: 1;
	text-align: center;
	/* center text inside */
}

.hero-bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(1.5px) brightness(0.7);
	z-index: 0;
	/* Decorative background — not selectable or draggable, so click-dragging
	   over the hero doesn't highlight the image blue. */
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.hero-text h1,
.hero-text p {
	text-align: center;
}

.hero-text h1 {
	font-size: 3.5rem;
	font-weight: 400;
	margin-bottom: 1.5rem;
	line-height: 1.15;
	color: var(--primary-white);
}

.hero-text h1 + h1 {
	margin-top: -1.5rem;
}

.hero-text h1.hero-highlight-line {
	font-size: 3.5rem;
	letter-spacing: 0.03em;
}

.highlight {
	color: var(--primary-orange);
}

.hero-text p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	line-height: 1.7;
	color: #d9d9d9;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

/* Buttons */
.btn {
	display: inline-block;
	padding: 1rem 2rem;
	text-decoration: none;
	border-radius: 25px;
	font-weight: 600;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.btn-primary {
	background: var(--primary-orange);
	color: var(--primary-white);
	box-shadow: 0 4px 15px rgba(255, 109, 0, 0.3);
}

.btn-primary:hover {
	background: #e55a00;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 109, 0, 0.4);
}

.btn-secondary {
	background: #6e1f2f; /* deep burgundy */
	color: var(--primary-white);
	border: none;
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}

.btn-secondary:hover {
	background: #3a3a3a;
	color: var(--primary-white);
}

.btn-large {
	padding: 1.2rem 2.5rem;
	font-size: 1.1rem;
}

/* Our Partners carousel */
/* Top padding (not margin) creates the gap below the hero AND keeps it inside
   the section's own box, so the dot-grid canvas — sized to that box — covers
   the whitespace too instead of leaving a blank band. */
.partners-carousel-section {
	padding: 10rem 0 4.5rem;
	background: var(--primary-white);
}

.partners-carousel-section .container {
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.partners-carousel-title {
	text-align: center;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.45);
	margin: 0 0 1.5rem;
}

.partners-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.partners-carousel-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 4.5rem;
	animation: partners-carousel-scroll 28s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.partners-carousel-track img {
	flex: 0 0 auto;
	width: 140px;
	height: 64px;
	object-fit: contain;
	object-position: center;
	filter: grayscale(85%);
	opacity: 0.85;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

@keyframes partners-carousel-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.partners-carousel-track {
		animation: none;
	}
}

/* Core Services */
.core-services {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 0 80px;
	background: var(--light-gray);
}

.core-services h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--primary-black);
}

.section-subtitle {
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 3rem;
	color: var(--medium-gray);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

@media (max-width: 900px) {
	.services-grid {
		grid-template-columns: 1fr;
	}

	/* The fixed 820px card / 520px photo were sized for a 3-across desktop
	   grid — stacked single-column on mobile that's ~2,400px of scroll for
	   three short feature lists. Let the card follow its content instead. */
	.service-card {
		min-height: 0;
	}

	.service-card-media {
		height: 260px;
	}
}

/* Whole card is a clickable link: a very-light-gray panel with the feature
   list up top and a photo filling the bottom, with the Learn More button
   overlaid on the image's bottom-left. */
.service-card {
	display: flex;
	flex-direction: column;
	min-height: 820px;
	background: #f1f1f1;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	position: relative;
	text-decoration: none;
	color: var(--primary-black);
}

.service-card:hover,
.service-card:focus-visible {
	animation: service-card-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.service-card:not(:hover):not(:focus-visible) {
	animation: service-card-return 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes service-card-pop {
	0% {
		transform: translateY(0) scale(1);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	}
	100% {
		transform: translateY(-12px) scale(1.015);
		box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
	}
}

@keyframes service-card-return {
	0% {
		transform: translateY(-12px) scale(1.015);
		box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
	}
	100% {
		transform: translateY(0) scale(1);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	}
}

.service-card-body {
	flex: 1 1 auto;
	padding: 3rem 2.5rem 2rem;
}

.service-header {
	text-align: center;
	margin-bottom: 2rem;
}

.service-header i {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.service-card.standard .service-header i {
	color: var(--primary-orange);
}

.service-card.customizable .service-header i {
	color: #8a8a8a;
}

.service-header h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: var(--primary-black);
}

.badge {
	display: inline-block;
	padding: 0.3rem 1rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
}

.service-card.standard .badge {
	background: rgba(255, 111, 0, 0.859);
	color: #ffffff;
}

.service-card.customizable .badge {
	background: rgba(138, 138, 138, 0.841);
	color: #ffffff;
}

/* Badge overlaid on the top-right of the card image — solid white so it stays
   legible over the photo (the standard/customizable rules above still set its
   text colour). */
.service-card-media .badge {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 2;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.service-features {
	list-style: none;
}

.service-features li {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	font-size: 0.95rem;
	color: var(--dark-gray);
}

.service-features i {
	color: var(--primary-orange);
	margin-right: 0.8rem;
	font-size: 0.8rem;
}

/* Photo panel filling the bottom of the card edge-to-edge. Its top corners
   are rounded here; the bottom corners are rounded by the card's own clip
   (overflow:hidden + border-radius). margin-top:auto pins it to the bottom. */
.service-card-media {
	position: relative;
	margin-top: auto;
	height: 520px;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
}

.service-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Darken the lower part of the photo so the button stays legible */
.service-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
}

.service-card-cta {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 1;
	background: var(--primary-white);
	color: var(--primary-black) !important;
}

.service-card-cta:hover {
	background: #f0f0f0;
}

/* Page Header */
.page-header {
	background: linear-gradient(135deg, var(--primary-black) 0%, #333 100%);
	color: var(--primary-white);
	padding: 120px 0 80px;
	text-align: center;
}

.page-header h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.page-header p {
	font-size: 1.2rem;
	opacity: 0.9;
}

.page-header--minimal {
	background: var(--primary-white);
	color: var(--primary-black);
	padding: 60px 0;
	min-height: 75vh;
	display: flex;
	align-items: center;
	text-align: left;
}

/* About page's hero fills the full viewport, so there's clear separation
   before Who We Are begins, rather than the two sections running together */
body#about-page .page-header--minimal {
	min-height: 100vh;
}

.page-header-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 3.5rem;
	flex-wrap: wrap;
}

.page-header-text {
	flex: 1 1 420px;
}

.page-header-media {
	flex: 1 1 380px;
}

/* AI page hero: give the image more width than the default text/media split */
body#artificial-intelligence-page .page-header-text {
	flex: 1 1 340px;
}

body#artificial-intelligence-page .page-header-media {
	flex: 1.4 1 520px;
}

/* About page hero: same treatment — bigger image, less width for text */
body#about-page .page-header-text {
	flex: 1 1 340px;
}

body#about-page .page-header-media {
	flex: 1.4 1 520px;
}

/* The default .content-block-image is a forced 1:1 square, which both crops the
   (792x559) source image and makes the box grow taller as it grows wider. Matching
   the box ratio to the real image ratio shows the whole image and only widens it. */
body#artificial-intelligence-page .page-header-media .content-block-image {
	aspect-ratio: 792 / 559;
}

.page-header--minimal h1 {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--medium-gray);
	margin-bottom: 0.9rem;
}

.page-header--minimal p.page-header-quote {
	font-size: 3.5rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.1;
	color: var(--primary-black);
	opacity: 1;
	margin: 0 0 1rem;
}

.page-header--minimal p.page-header-subtext {
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--medium-gray);
	opacity: 1;
	margin: 0 0 2rem;
}

@media (max-width: 800px) {
	.page-header--minimal {
		min-height: auto;
	}
}

/* Interactive dot-grid canvas fills flat empty space, site-wide.
   Dots are drawn by js/dot-grid-effect.js (which also decides, per
   page, which sections to target); these rules just give each target
   section a positioning context and keep its real content above the
   canvas. */
body#it-support-page .page-header--minimal,
body#it-support-page .content-block,
body#it-support-page .cta-section,
body#cyber-compliance-page .page-header--minimal,
body#cyber-compliance-page .content-block,
body#cyber-compliance-page .cta-section,
body#artificial-intelligence-page .page-header--minimal,
body#artificial-intelligence-page .content-block,
body#artificial-intelligence-page .cta-section {
	position: relative;
}

body#it-support-page .page-header--minimal .page-header-inner,
body#it-support-page .content-block .content-block-inner,
body#it-support-page .cta-section > *:not(.dot-grid-canvas),
body#cyber-compliance-page .page-header--minimal .page-header-inner,
body#cyber-compliance-page .content-block .content-block-inner,
body#cyber-compliance-page .cta-section > *:not(.dot-grid-canvas),
body#artificial-intelligence-page .page-header--minimal .page-header-inner,
body#artificial-intelligence-page .content-block .content-block-inner,
body#artificial-intelligence-page .cta-section > *:not(.dot-grid-canvas) {
	position: relative;
	z-index: 1;
}

/* These three pages' sections were each forced to ~90vh via the base
   .content-block rule, so short sections left large empty gaps above/below
   their content. Tightening min-height/padding here keeps sections snug
   without touching .content-block on pages (about, contact) that rely on
   the taller default. */
body#it-support-page .content-block,
body#cyber-compliance-page .content-block,
body#artificial-intelligence-page .content-block {
	min-height: 0;
	padding: 20px 0;
}

/* Matches the gap cyber-compliance already had between #cyber-threats and
   #financial-services (that section's own top spacing, further down this
   file) so every section-to-section gap on these pages reads the same.
   padding-top, not margin-top: the dot-grid canvas is sized to each
   section's own box (border-box, padding included) — a margin sits outside
   that box and renders as a blank, dot-less band between sections. Padding
   keeps the same visual gap but inside the box the canvas covers.
   #modern-compliance is excluded — its lead-in gap is governed by
   #financial-services' min-height, not a margin, and is tuned separately. */
body#it-support-page #our-plans,
body#it-support-page #m365-integration,
body#artificial-intelligence-page #out-of-box-assistants,
body#artificial-intelligence-page #agents-skillz-tools {
	padding-top: 10rem;
}

body#about-page .content-block,
body#about-page .page-header,
body#index-page .core-services,
body#index-page .partners-carousel-section,
body#index-page .compliance-section,
body#index-page .cta-section,
body#contact-page .contact-hero {
	position: relative;
}

body#about-page .content-block > *:not(.dot-grid-canvas),
body#about-page .page-header > *:not(.dot-grid-canvas),
body#index-page .core-services > *:not(.dot-grid-canvas),
body#index-page .partners-carousel-section > *:not(.dot-grid-canvas),
body#index-page .compliance-section > *:not(.dot-grid-canvas),
body#index-page .cta-section > *:not(.dot-grid-canvas),
body#contact-page .contact-hero > *:not(.dot-grid-canvas) {
	position: relative;
	z-index: 1;
}

.dot-grid-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* Anchor-linked content sections (services dropdown sub-pages) */
.content-block {
	position: relative;
	scroll-margin-top: 110px;
	min-height: 90vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 0;
}

/* Small uppercase kicker label used above a section heading/lead statement */
.section-eyebrow {
	display: block;
	text-align: center;
	color: var(--primary-orange);
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 1rem;
}

/* flex-start (not center) so the image+text pair hugs the left edge instead of
   floating in the middle of the row with a big gap between them. Also forces
   them to stay side by side (the base .content-block-inner allows wrapping,
   which was dropping the image below the text well before the row actually
   ran out of space) */
#who-we-are .content-block-inner {
	justify-content: flex-start;
	flex-wrap: nowrap;
}

#who-we-are .content-block-text {
	flex: 0 1 auto;
	max-width: 460px;
	text-align: left;
}

/* .section-eyebrow sets its own text-align directly, so it doesn't inherit the
   parent's text-align above — it needs its own override to actually move */
#who-we-are .section-eyebrow {
	text-align: left;
}

#who-we-are .content-block-media {
	flex: 0 1 560px;
}

.who-we-are-lead {
	font-size: 1.55rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--primary-black);
	margin-bottom: 1.5rem;
}

.who-we-are-sub {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--medium-gray);
}

.content-block--alt {
	background: #ffffff;
}

.floating-scroll-arrow {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 900;
	background: var(--primary-orange);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 52px;
	height: 52px;
	font-size: 1.4rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.35s ease, background 0.2s ease;
}

.floating-scroll-arrow:hover {
	background: var(--light-orange);
}

.floating-scroll-arrow.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.content-block h2 {
	color: var(--primary-black);
	font-size: 2rem;
	margin-bottom: 1rem;
}

.content-block p {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--dark-gray);
	margin-bottom: 1.5rem;
}

/* Alternating image / text layout */
.content-block-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: flex-start;
	gap: 3.5rem;
	flex-wrap: wrap;
}

.content-block-media {
	flex: 1.15 1 440px;
	min-width: 0;
}

.content-block-text {
	flex: 1 1 380px;
	min-width: 0;
}

/* it-support.html, cyber-compliance.html, artificial-intelligence.html —
   give these pages more left/right breathing room */
#support-for-you .content-block-inner,
#our-plans .content-block-inner,
#m365-integration .content-block-inner,
#cyber-threats .content-block-inner,
#financial-services .content-block-inner,
#modern-compliance .content-block-inner,
#chatbots .content-block-inner,
#out-of-box-assistants .content-block-inner,
#agents-skillz-tools .content-block-inner {
	max-width: 1500px;
	padding: 0 3.5rem;
}

/* Our Plans image — wider on the right, without growing taller */
#our-plans .content-block-media {
	flex: 1.8 1 520px;
}

#our-plans .content-block-text {
	flex: 1 1 320px;
}

#our-plans .content-block-image {
	aspect-ratio: 3 / 2;
}

.content-block--reverse .content-block-inner {
	flex-direction: row-reverse;
}

.section-get-started {
	display: inline-block;
	margin-top: 1.75rem;
	background: var(--primary-black);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.section-get-started-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1.75rem;
}

.section-get-started-row .section-get-started,
.section-get-started-row .compliance-cluster {
	margin-top: 0;
}

.section-get-started-row .pricing-visual {
	margin: 0;
}

.section-get-started:hover {
	background: #222;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Meet the Director */
.director-eyebrow {
	display: block;
	color: var(--primary-orange);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1.25rem;
}

.director-quote {
	position: relative;
	margin: 0 0 1.75rem;
	padding: 0;
	border: none;
	font-size: 1.85rem;
	line-height: 1.5;
	color: var(--primary-black);
	font-weight: 500;
}

.director-quote::before {
	content: '\201C';
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	color: var(--medium-gray);
}

.director-quote::after {
	content: '\201D';
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	color: var(--medium-gray);
}

.director-card-text .director-name {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--primary-black);
	margin: 0 0 0.15rem;
}

.director-card-text .director-title {
	font-size: 1.05rem;
	color: var(--medium-gray);
	margin: 0;
}

.director-card-text .director-bio {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--medium-gray);
	margin: 1.75rem 0 0;
}

/* Contact page — single-viewport hero layout */
.contact-hero {
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 110px 2rem 2.5rem;
	background: var(--light-gray);
}

.contact-hero-inner {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 4.5rem;
}

.contact-hero-media {
	flex: 1.2 1 52%;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.contact-hero-media .placeholder-image {
	aspect-ratio: 4 / 3;
}

.contact-hero-label {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--medium-gray);
	margin: 0;
}

.contact-methods {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.contact-method {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 0.9rem 1.25rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.contact-method-label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--medium-gray);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.contact-method-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--primary-black);
	text-decoration: none;
}

.contact-method-value:hover {
	color: var(--primary-orange);
	text-decoration: underline;
}

.contact-hero-form {
	flex: 0.9 1 42%;
}

.support-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--dropdown-highlight);
	border: 1px solid var(--dropdown-highlight-border);
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.25rem;
}

.support-notice i {
	flex: 0 0 auto;
	color: var(--primary-orange);
	font-size: 1.1rem;
	margin-top: 0.15rem;
}

.support-notice p {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--primary-black);
	margin: 0;
}

.support-notice a {
	color: var(--primary-orange);
	font-weight: 600;
	text-decoration: none;
}

.support-notice a:hover {
	text-decoration: underline;
}

.contact-hero-form h1 {
	font-size: 1.9rem;
	color: var(--primary-black);
	margin-bottom: 0.35rem;
}

.contact-hero-form > p {
	color: var(--medium-gray);
	font-size: 0.92rem;
	margin-bottom: 1.1rem;
}

.contact-hero-form .assessment-form {
	max-width: 100%;
	margin: 0;
	padding: 1.5rem 1.75rem;
}

@media (max-width: 900px) {
	.contact-hero {
		min-height: auto;
		padding: 110px 1.25rem 2.5rem;
	}

	.contact-hero-inner {
		flex-direction: column;
		align-items: stretch;
	}

	/* Explicit sizing once stacked — the desktop 52%/42% flex-basis would
	   otherwise apply to height in a column layout instead of width. */
	.contact-hero-media,
	.contact-hero-form {
		flex: 1 1 auto;
		width: 100%;
	}

	.contact-hero-label {
		text-align: center;
	}
}

.director-card {
	max-width: 1250px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	background: #fff;
}

.director-card-text {
	flex: 1 1 55%;
	padding: 4rem 3.5rem;
}

.director-card-media {
	flex: 1 1 45%;
	display: flex;
}

.director-card-media .placeholder-image {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	border: none;
}

.director-photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 16px;
}

@media (max-width: 800px) {
	.director-card {
		flex-direction: column;
	}

	/* Photo first, quote underneath — meet the person, then hear from them. */
	.director-card-media {
		min-height: 260px;
		order: -1;
	}
}

.placeholder-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	background: #ffffff;
	border: 2px dashed rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(0, 0, 0, 0.28);
	font-size: 4rem;
}

.content-block-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	object-fit: cover;
	display: block;
}

/* Scaled down ~15% from the default 100% fill, centered in their column */
#financial-services .content-block-image,
#cyber-threats .content-block-image,
#support-for-you .content-block-image,
#chatbots .content-block-image,
#agents-skillz-tools .content-block-image,
#m365-integration .content-block-image,
#out-of-box-assistants .content-block-image {
	width: 85%;
	margin: 0 auto;
}

/* Us vs. Everyone Else comparison table */
.comparison-table {
	margin-top: 1.5rem;
	background: #fff;
	border-radius: 16px;
	width: fit-content;
	max-width: 100%;
	padding: 0.4rem 0.5rem 0.6rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.comparison-row {
	display: grid;
	grid-template-columns: 200px 64px 100px;
	align-items: center;
	gap: 0.9rem;
	padding: 0.5rem 0.6rem;
	border-radius: 10px;
}

.comparison-row:not(.comparison-header):nth-child(even) {
	background: var(--light-gray);
}

.comparison-header {
	padding: 0.3rem 0.6rem 0.6rem;
}

.comparison-feature {
	font-weight: 600;
	color: var(--primary-black);
	font-size: 0.8rem;
}

.comparison-col {
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: 1rem;
}

.comparison-us i {
	color: var(--primary-orange);
}

.comparison-them i {
	color: #a7abb1;
}

.comparison-header .comparison-col {
	font-weight: 700;
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.comparison-header .comparison-us {
	color: var(--primary-orange);
}

.comparison-header .comparison-them {
	color: var(--medium-gray);
}

/* Financial Services — compliance shield + framework chips */
.compliance-cluster {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1.1rem;
	margin-top: 1.75rem;
	min-width: 260px;
}

.compliance-shield {
	position: relative;
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary-orange), var(--light-orange));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(255, 109, 0, 0.35);
}

.compliance-shield i {
	color: #fff;
	font-size: 1.9rem;
}

.compliance-check {
	position: absolute;
	bottom: -3px;
	right: -3px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--primary-black);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}

.compliance-check i {
	font-size: 0.6rem;
	line-height: 1;
}

.compliance-chips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	flex: 1 1 180px;
}

.compliance-chip {
	background: #fff;
	border: 1.5px solid rgba(255, 109, 0, 0.35);
	color: var(--primary-black);
	font-weight: 600;
	font-size: 0.78rem;
	padding: 0.4rem 0.85rem;
	border-radius: 20px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Chatbots — fake chat window mockup */
.chat-mock {
	margin-top: 1.75rem;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	max-width: 340px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.chat-mock-header {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.65rem 0.9rem;
	background: var(--primary-black);
}

.chat-mock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
}

.chat-mock-title {
	margin-left: 0.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.chat-mock-status {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.66rem;
	color: rgba(255, 255, 255, 0.55);
}

.chat-mock-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3ddc84;
	box-shadow: 0 0 0 rgba(61, 220, 132, 0.6);
	animation: chatStatusPulse 2s infinite;
}

@keyframes chatStatusPulse {
	0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); }
	70% { box-shadow: 0 0 0 6px rgba(61, 220, 132, 0); }
	100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.chat-mock-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	background: var(--light-gray);
}

.chat-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.chat-mock.is-visible .chat-row {
	opacity: 1;
	transform: translateY(0);
}

.chat-mock.is-visible .chat-row:nth-child(1) { transition-delay: 0.1s; }
.chat-mock.is-visible .chat-row:nth-child(2) { transition-delay: 0.5s; }
.chat-mock.is-visible .chat-row:nth-child(3) { transition-delay: 1.1s; }

.chat-row--user {
	justify-content: flex-end;
}

.chat-avatar {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-left: 4px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary-orange), var(--light-orange));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
}

.chat-avatar--first {
	margin-top: 10px;
}

.chat-avatar--second {
	margin-top: -2px;
}

.chat-bubble-col {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: flex-start;
}

.chat-time {
	font-size: 0.62rem;
	color: var(--medium-gray);
	padding-left: 0.2rem;
}

.chat-bubble {
	max-width: 82%;
	padding: 0.55rem 0.85rem;
	border-radius: 14px;
	font-size: 0.82rem;
	line-height: 1.4;
}

.chat-bubble--user {
	background: var(--primary-black);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.chat-bubble--bot {
	background: #fff;
	color: var(--primary-black);
	border-bottom-left-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chat-typing {
	display: flex;
	gap: 0.25rem;
	background: #fff;
	padding: 0.6rem 0.8rem;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chat-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c7cbd1;
	animation: chatTypingBounce 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatTypingBounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* Out of Box Assistants — automation flow strip */
.flow-stat {
	margin-top: 1.75rem;
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	background: #fff;
	border-radius: 12px;
	padding: 0.6rem 1rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.flow-stat-before {
	font-size: 0.85rem;
	color: var(--medium-gray);
	text-decoration: line-through;
}

.flow-stat i {
	color: var(--medium-gray);
	font-size: 0.7rem;
}

.flow-stat-after {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--primary-orange);
}

.flow-stat-label {
	font-size: 0.72rem;
	color: var(--medium-gray);
}

.flow-strip {
	margin-top: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.flow-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.flow-icon {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #e3e5e8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: var(--medium-gray);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.flow-node--active .flow-icon {
	width: 62px;
	height: 62px;
	border: none;
	background: linear-gradient(135deg, var(--primary-orange), var(--light-orange));
	color: #fff;
	font-size: 1.4rem;
	box-shadow: 0 0 0 0 rgba(255, 109, 0, 0.4);
	animation: flowRingPulse 2.2s infinite;
}

@keyframes flowRingPulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 109, 0, 0.4); }
	70% { box-shadow: 0 0 0 12px rgba(255, 109, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 109, 0, 0); }
}

.flow-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--primary-black);
	text-align: center;
}

.flow-arrow {
	position: relative;
	overflow: hidden;
	width: 26px;
	height: 1rem;
	color: #d7dade;
	font-size: 1rem;
}

.flow-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary-orange);
	transform: translateY(-50%);
	animation: flowDotTravel 1.8s infinite ease-in-out;
}

.flow-arrow--2::after {
	animation-delay: 0.7s;
}

@keyframes flowDotTravel {
	0% { left: -6px; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}

/* Agents/Skillz/Tools — ascending tier ladder */
.tier-ladder {
	margin-top: 1.75rem;
	display: flex;
	align-items: flex-end;
	gap: 0.6rem;
}

.tier-connector {
	color: #d7dade;
	font-size: 0.9rem;
	margin-bottom: 2.2rem;
}

.tier-card {
	position: relative;
	flex: 1 1 0;
	background: #fff;
	border-radius: 14px;
	padding: 1.1rem 0.9rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	text-align: center;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tier-icon {
	display: block;
	color: var(--primary-orange);
	font-size: 1.3rem;
	margin: 0.6rem 0 0.2rem;
}

.tier-card h4 {
	font-size: 0.92rem;
	color: var(--primary-black);
	margin: 0.5rem 0 0.3rem;
}

.tier-card p {
	font-size: 0.72rem;
	color: var(--medium-gray);
	line-height: 1.4;
	margin: 0;
}

.tier-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--light-gray);
	color: var(--medium-gray);
	font-weight: 700;
	font-size: 0.8rem;
}

.tier-card--1 {
	transform: translateY(18px);
}

.tier-card--1:hover {
	transform: translateY(10px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.tier-card--2 {
	transform: translateY(6px);
}

.tier-card--2:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.tier-card--3 {
	background: linear-gradient(160deg, var(--primary-orange), var(--light-orange));
	box-shadow: 0 10px 26px rgba(255, 109, 0, 0.35);
}

.tier-card--3:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 32px rgba(255, 109, 0, 0.45);
}

.tier-card--3 .tier-icon,
.tier-card--3 h4,
.tier-card--3 p {
	color: #fff;
}

.tier-card--3 .tier-number {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.tier-card--3::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	animation: tierShimmer 3.5s infinite;
}

@keyframes tierShimmer {
	0% { left: -60%; }
	40%, 100% { left: 140%; }
}

@media (max-width: 800px) {
	.content-block-inner {
		flex-direction: column !important;
		/* The base rule allows wrap for the desktop row layout. In column
		   mode that same "wrap" lets the browser split media/text into two
		   side-by-side column tracks instead of one stacked column — which
		   looks exactly like the image sitting far apart from its text.
		   nowrap forces a single column, so they always stack top-to-bottom. */
		flex-wrap: nowrap;
		/* Cross-axis is horizontal once stacked — flex-start (the desktop
		   top-align value) would let media/text shrink to their content
		   width instead of filling the row. */
		align-items: stretch;
		/* The desktop 3.5rem gap separates side-by-side columns; stacked
		   in a column that same value reads as a big dead gap between the
		   image and the text right below it. */
		gap: 1.5rem;
	}

	/* Every page's desktop flex-basis (e.g. #our-plans' 1.8 1 520px /
	   1 1 320px split, #modern-compliance's 1 1 860px / 1 1 440px) is a
	   WIDTH hint for the desktop row layout. In column mode flex-basis sets
	   preferred HEIGHT instead — e.g. #our-plans' media div got forced to
	   520px tall while the actual (3:2) image only renders ~215px, leaving
	   ~300px of dead blank space between the image and the text below it.
	   flex-basis: auto (via the flex shorthand) makes each box size to its
	   real content height instead; !important is needed to beat those
	   ID-scoped desktop rules, which otherwise outrank a plain class here. */
	.content-block-media,
	.content-block-text {
		flex: 1 1 auto !important;
		width: 100%;
	}
}

/* Assessment Form */
.assessment-section {
	min-height: 90vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 0;
	background: var(--light-gray);
}

.form-header {
	text-align: center;
	margin-bottom: 1.25rem;
}

.form-header h2 {
	color: var(--primary-black);
	font-size: 2.2rem;
	margin-bottom: 0.5rem;
}

.form-header p {
	font-size: 1rem;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.5;
	color: var(--medium-gray);
}

.assessment-form {
	background: var(--primary-white);
	padding: 1.75rem 2rem;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	max-width: 800px;
	margin: 0 auto;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form-group {
	margin-bottom: 0.85rem;
}

.form-group label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	color: var(--primary-black);
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	font-size: 1rem;
	transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--primary-orange);
}

.checkbox-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5rem;
}

.checkbox-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 5px;
	transition: background 0.3s ease;
}

.checkbox-label:hover {
	background: var(--light-gray);
}

.checkbox-label input[type="checkbox"] {
	display: none;
}

.checkmark {
	width: 20px;
	height: 20px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 0.75rem;
	position: relative;
	transition: all 0.3s ease;
}

.checkbox-label input[type="checkbox"]:checked+.checkmark {
	background: var(--primary-orange);
	border-color: var(--primary-orange);
}

.checkbox-label input[type="checkbox"]:checked+.checkmark::after {
	content: "✓";
	position: absolute;
	top: -2px;
	left: 3px;
	color: var(--primary-white);
	font-weight: bold;
}

/* Service section feature grids (it-support / cyber-compliance / AI):
   the "Tailored to your business" badge, the feature tiles, and the 2x2
   Support-for-You layout. */
.service-badge {
	display: inline-block;
	padding: 0.5rem 1.5rem;
	border-radius: 25px;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.service-badge + .feature-grid {
	margin-top: 0;
}

.service-badge.standard {
	background: rgba(255, 109, 0, 0.2);
	color: var(--primary-orange);
}

.service-badge.customisable {
	background: rgba(0, 0, 0, 0.1);
	color: var(--primary-black);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

/* Support for You — balanced 2x2 tile grid, Emergency Support kept on the right */
#support-for-you .feature-grid {
	grid-template-columns: 1fr 1fr;
}

#support-for-you .feature-grid .feature-item:nth-child(1) { grid-column: 1; grid-row: 1; }
#support-for-you .feature-grid .feature-item:nth-child(2) { grid-column: 1; grid-row: 2; }
#support-for-you .feature-grid .feature-item:nth-child(3) { grid-column: 2; grid-row: 1; }
#support-for-you .feature-grid .feature-item:nth-child(4) { grid-column: 2; grid-row: 2; }

@media (max-width: 768px) {
	#support-for-you .feature-grid {
		grid-template-columns: 1fr;
	}

	/* Match the specificity of the base :nth-child placement rules above,
	   otherwise those keep items 3 & 4 pinned to an implicit second column
	   and the single-column reset never actually takes effect on mobile. */
	#support-for-you .feature-grid .feature-item:nth-child(1),
	#support-for-you .feature-grid .feature-item:nth-child(2),
	#support-for-you .feature-grid .feature-item:nth-child(3),
	#support-for-you .feature-grid .feature-item:nth-child(4) {
		grid-column: auto;
		grid-row: auto;
	}
}

.feature-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background: var(--primary-white);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.feature-item i {
	color: var(--primary-orange);
	font-size: 1.5rem;
	margin-top: 0.2rem;
}

.feature-item h4 {
	color: var(--primary-black);
	margin-bottom: 0.5rem;
}

.feature-item p {
	color: var(--medium-gray);
	font-size: 0.9rem;
	margin: 0;
}

/* Our Plans pricing circle (it-support.html #our-plans) */
.pricing-visual {
	max-width: 500px;
	margin: 0 auto;
}

.pricing-circle {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 0 auto;
	border: 4px solid var(--primary-orange);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pricing-center {
	text-align: center;
}

.pricing-center i {
	font-size: 3rem;
	color: var(--primary-orange);
	margin-bottom: 1rem;
}

.pricing-center h3 {
	color: var(--primary-black);
	font-size: 1.2rem;
}

.pricing-segments {
	position: absolute;
	width: 100%;
	height: 100%;
}

.segment {
	position: absolute;
	background: var(--primary-white);
	padding: 0.8rem 1rem;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	font-size: 0.9rem;
	font-weight: 600;
}

.segment.support {
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	border-top: 3px solid var(--primary-orange);
}

.segment.management {
	bottom: 20px;
	left: -20px;
	border-left: 3px solid var(--primary-black);
}

.segment.security {
	bottom: 20px;
	right: -20px;
	border-right: 3px solid var(--primary-black);
}

.segment span {
	display: block;
	color: var(--primary-black);
}

.segment small {
	color: var(--medium-gray);
	font-size: 0.7rem;
}

/* Compliance constellation (index.html, under Core Services): copy on the
   left, a radial hub-and-spoke visual on the right — the Nebula logo hubbed
   in the centre with the compliance frameworks branching out on spokes.
   Each .orbit-item is a single rotated spoke; its .orbit-label sits at the
   outer end and counter-rotates back upright. Angles are set per item via
   the --a custom property in the .orbit-item--N rules below. */
.compliance-section {
	padding: 80px 0;
	background: var(--primary-white);
}

.compliance-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	gap: 3.5rem;
	flex-wrap: wrap;
}

.compliance-copy {
	flex: 1 1 360px;
}

.compliance-eyebrow {
	display: block;
	color: var(--primary-orange);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 1rem;
}

.compliance-copy h2 {
	font-size: 2.2rem;
	line-height: 1.2;
	color: var(--primary-black);
	margin-bottom: 1rem;
}

.compliance-copy p {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--medium-gray);
	margin-bottom: 1.75rem;
}

/* Explore Compliance CTA: black rather than the default orange btn-primary. */
.compliance-copy .btn-primary {
	background: var(--primary-black);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.compliance-copy .btn-primary:hover {
	background: #1a1a1a;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.compliance-visual {
	flex: 1 1 460px;
	display: flex;
	justify-content: center;
}

.compliance-orbit {
	position: relative;
	width: 520px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
}

/* Dashed guide circle the badges sit on (radius = the 195px spoke length). */
.orbit-ring {
	position: absolute;
	inset: 12.5%;
	border: 2px dashed rgba(255, 109, 0, 0.5);
	border-radius: 50%;
}

/* SVG overlay that draws the bright "connecting" arcs on the ring. Both
   circles share the ring radius (195) and are node-aligned by rotate(18deg);
   the second is mirrored so its arcs grow the opposite way round. */
.orbit-connections {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.orbit-arc {
	fill: none;
	stroke: var(--primary-orange);
	stroke-width: 3;
	stroke-linecap: round;
	filter: drop-shadow(0 0 3px rgba(255, 109, 0, 0.6));
	/* 0 122.52 = one dash per 36deg node, invisible; growing the dash to
	   61.26 (half a segment) fills from each node to the midpoints. */
	stroke-dasharray: 0 122.52;
	animation: orbitRingFill 4s ease-in-out infinite;
}

@keyframes orbitRingFill {
	0%, 72% { stroke-dasharray: 0 122.52; opacity: 0; }
	74% { stroke-dasharray: 0 122.52; opacity: 1; }
	96% { stroke-dasharray: 61.26 61.26; opacity: 1; }
	100% { stroke-dasharray: 61.26 61.26; opacity: 0; }
}

/* Everything in the orbit is sized as a % of the (square) container so the
   fixed-radius pieces and the scaling SVG always line up at any width. 132/520
   = 25.4%, 82/132 = 62%. */
.orbit-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 25.4%;
	height: 25.4%;
	border-radius: 50%;
	background: #fff;
	border: 2px solid rgba(255, 109, 0, 0.2);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.orbit-hub img {
	width: 62%;
	height: auto;
}

/* The whole loop runs on one shared 4s clock. The hub ring lights up fast
   (0–10%), then three equal-length phases at a matching pace: the spokes pulse
   out to each node (10–40%), each badge outline draws round to meet on its far
   edge (40–70%), and the ring between the nodes fills in (70–100%); repeat. */
.orbit-hub-ring {
	fill: none;
	stroke: var(--primary-orange);
	stroke-width: 3;
	filter: drop-shadow(0 0 3px rgba(255, 109, 0, 0.6));
	opacity: 0;
	animation: orbitHubLight 4s ease-out infinite;
}

@keyframes orbitHubLight {
	0% { opacity: 0; }
	10% { opacity: 1; }
	92% { opacity: 1; }
	100% { opacity: 0; }
}

/* Each item is one spoke (a thin gradient line) rotated out from the centre. */
.orbit-item {
	position: absolute;
	left: 50%;
	top: 50%;
	/* 195/520 = 37.5%: spoke length as a fraction of the container, so its
	   outer end (and the badge on it) sits exactly on the SVG ring radius. */
	width: 37.5%;
	height: 2px;
	transform-origin: 0 50%;
	transform: rotate(var(--a));
	background: linear-gradient(90deg, rgba(255, 109, 0, 0.25), rgba(255, 109, 0, 0.65));
	z-index: 1;
}

/* A bright pulse of energy runs outward along each spoke from the hub to the
   node, starting with the hub expansion so it reads as one motion. */
.orbit-item::before {
	content: "";
	position: absolute;
	inset: 0;
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(255, 109, 0, 0), var(--primary-orange));
	animation: orbitFlow 4s linear infinite;
}

@keyframes orbitFlow {
	0%, 10% { transform: scaleX(0); opacity: 0; }
	12% { opacity: 1; }
	40% { transform: scaleX(1); opacity: 1; }
	46% { transform: scaleX(1); opacity: 0; }
	100% { transform: scaleX(1); opacity: 0; }
}

/* The label rides the outer end of the spoke, re-uprighted with the inverse
   rotation and centred on that point. */
.orbit-label {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(50%, -50%) rotate(calc(-1 * var(--a)));
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
	background: #fff;
	border: 1.5px solid rgba(255, 109, 0, 0.35);
	color: var(--primary-black);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.35rem 0.7rem;
	border-radius: 20px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	z-index: 2;
}

/* Registered so the conic gradient's angular sweep can animate smoothly. */
@property --sweep {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* Bright outline that draws around the badge: a conic gradient masked down to
   just the border ring. It starts at the badge's point of contact with the
   spoke (from var(--a) + 270deg) and grows symmetrically BOTH ways around the
   perimeter, so the two arms meet on the opposite (far) edge. An angular sweep
   — not a radial clip — is what makes it travel around the pill rather than
   reveal the near edge first. */
.orbit-label::after {
	content: "";
	position: absolute;
	inset: -1.5px;
	border-radius: 20px;
	padding: 2px;
	background: conic-gradient(from calc(var(--a) + 270deg),
		var(--primary-orange) 0deg var(--sweep),
		transparent var(--sweep) calc(360deg - var(--sweep)),
		var(--primary-orange) calc(360deg - var(--sweep)) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	animation: orbitNodeOutline 4s linear infinite;
}

@keyframes orbitNodeOutline {
	0%, 40% { --sweep: 0deg; }
	70%, 100% { --sweep: 180deg; }
}

.orbit-label i {
	color: var(--primary-orange);
	font-size: 0.6rem;
}

/* Spoke angles (--a), evenly spaced 36deg from the top. Each badge's outline
   starts drawing from its contact edge, derived from --a in the conic gradient
   above (var(--a) + 270deg). */
.orbit-item--1  { --a: -90deg; }
.orbit-item--2  { --a: -54deg; }
.orbit-item--3  { --a: -18deg; }
.orbit-item--4  { --a: 18deg; }
.orbit-item--5  { --a: 54deg; }
.orbit-item--6  { --a: 90deg; }
.orbit-item--7  { --a: 126deg; }
.orbit-item--8  { --a: 162deg; }
.orbit-item--9  { --a: 198deg; }
.orbit-item--10 { --a: 234deg; }

/* CTA Section */
.cta-section {
	background: var(--primary-white);
	color: var(--primary-black);
	padding: 80px 0;
	text-align: center;
}

.cta-section h2 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.cta-section p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	opacity: 0.9;
}

/* Home page CTA — oval pill: quote on the left, Get Started button on the
   right. Only used on index.html, so this doesn't touch the plain
   heading+button .cta-section on every other page. */
.cta-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	max-width: 760px;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 1.5rem 3rem;
	background: #6e1f2f;
	border-radius: 100px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	text-align: left;
}

/* .cta-pill prefix needed so this out-specifies the generic `.cta-section p`
   rule above (which otherwise wins on specificity and forces its own
   font-size + a margin-bottom that knocks the text off-center). */
.cta-pill .cta-pill-quote {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--primary-white);
}

.cta-pill .free-assessment-btn {
	flex: 0 0 auto;
	background: var(--primary-white);
	color: var(--primary-black) !important;
}

.cta-pill .free-assessment-btn:hover {
	background: #f0f0f0;
}

@media (max-width: 700px) {
	.cta-pill {
		flex-direction: column;
		text-align: center;
		border-radius: 32px;
		padding: 2rem;
	}
}

body,
html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

/* Footer */
.footer {
  width: 100%;
  background: linear-gradient(120deg, #161718 0%, #2f3032 100%);
  color: #fff;
  padding: 70px 30px 30px 30px;
}

.footer .container {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.footer .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-col {
  padding: 0 15px;
  margin-bottom: 30px;
}

.footer-left {
  flex: 1 1 50%;
  max-width: 600px;
}

.footer-right-group {
  display: flex;
  flex: 1 1 50%;
  justify-content: flex-end;
  gap: 60px;
  flex-wrap: wrap;
  text-align: right;
}

.footer-right-group .footer-col {
  flex: 0 1 auto;
  min-width: 220px;
}

.footer-col h4 {
  font-size: 18px;
  color: #ff9800;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 600;
  position: relative;
  letter-spacing: 0.5px;
}

.footer-col h4::before {
  content: '';
  position: absolute;
  bottom: -10px;
  height: 2.5px;
  width: 50px;
  border-radius: 2px;
  background-color: #ff9800;
}

.footer-left h4::before {
  left: 0;
}

.footer-right-group .footer-col h4::before {
  right: 0;
  left: auto;
}

.footer-contact-info li {
  color: #bbbbbb;
  font-size: 15px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.footer-contact-info a {
  color: #bbbbbb;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-contact-info a:hover {
  color: #ff9800;
}

.footer-contact-info i {
  color: #ff9800;
  font-size: 1.1em;
  min-width: 20px;
  text-align: right;
}

.footer-copy {
  color: #838383;
  font-size: 14px;
}

.footer-right-group .footer-col ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: right;
}

.footer-right-group .footer-contact-info li {
  justify-content: flex-end;
  text-align: right;
}

@media (max-width: 900px) {
  .footer {
    padding: 3rem 1.5rem 2rem;
  }

  .footer .row {
    flex-direction: column;
  }

  .footer-left,
  .footer-right-group {
    width: 100%;
    max-width: none;
  }

  .footer-col {
    margin-bottom: 1.5rem;
  }

  .footer-col h4 {
    margin-bottom: 1.1rem;
  }

  /* Desktop right-aligns this group so its two columns sit flush with the
     row above. Stacked full-width on mobile that reads as everything
     shoved against the right edge with dead space on the left — switch
     back to a normal left-aligned list layout instead. */
  .footer-right-group {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0;
  }

  .footer-right-group .footer-col h4::before {
    left: 0;
    right: auto;
  }

  .footer-right-group .footer-col ul,
  .footer-right-group .footer-contact-info li {
    text-align: left;
    justify-content: flex-start;
  }
}

#meet-the-director {
	min-height: 75vh;
	padding: 33px 0;
}

/* Who We Are and Our Commitments are separate sections but kept snug (no
   min-height floor, modest padding) so there's little gap between them —
   unlike #meet-the-director, which still gets the full-viewport treatment */
#who-we-are,
#our-commitments {
	min-height: auto;
	padding: 32px 0;
}

/* padding-top, not margin-top: a margin sits outside this section's box, and
   the dot-grid canvas (sized to the box) would leave that 2rem gap as a blank,
   dot-less band between Who We Are and Our Commitments. Folding it into the top
   padding keeps the same gap but inside the dotted area. */
#our-commitments {
	padding-top: calc(32px + 2rem);
}

#our-commitments h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--primary-black);
}

.commitments-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.commitment-card {
	background: var(--light-gray);
	padding: 2.5rem;
	border-radius: 15px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border-top: 4px solid var(--primary-orange);
}

.commitment-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.commitment-number {
	display: block;
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	color: rgba(0, 0, 0, 0.22);
	margin-bottom: 1rem;
}

.commitment-card h3 {
	color: var(--primary-black);
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

.commitment-card h4 {
	color: var(--primary-orange);
	font-size: 1.1rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

.commitment-card p {
	color: var(--primary-black);
	line-height: 1.7;
	font-size: 0.95rem;
}

/* Responsive updates for commitments */
@media (max-width: 768px) {
	.commitments-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.commitment-card {
		padding: 2rem;
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	/* --- Navigation: collapse the desktop bar to a hamburger drawer --- */
	.hamburger {
		display: flex;
	}

	/* Keep the navbar pinned on mobile — don't let the scroll-direction
	   auto-hide (js/script.js toggles .navbar-hidden) slide it out of view. */
	.navbar.navbar-hidden {
		transform: none;
	}

	.nav-menu {
		position: fixed;
		left: -100%;
		top: 90px;
		flex-direction: column;
		align-items: stretch;
		background-color: var(--primary-white);
		width: 100%;
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		text-align: center;
		transition: left 0.3s ease;
		box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
		padding: 1.5rem 0;
		gap: 0;
	}

	.nav-menu.active {
		left: 0;
	}

	.nav-item {
		margin: 0.5rem 0;
	}

	/* The header CTA and the hover mega-menu don't suit touch: hide the
	   header button (Contact is in the drawer) and turn Services into a
	   tap-to-expand accordion rendered inline in the drawer. */
	.navbar .free-assessment-btn {
		display: none;
	}

	.nav-services-dropdown {
		position: static;
	}

	.services-dropdown {
		position: static;
		top: auto;
		width: 100%;
		display: none;
	}

	.services-dropdown.is-open {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.services-dropdown-inner,
	.services-dropdown.is-open .services-dropdown-inner {
		position: static;
		transform: none;
		flex-direction: column;
		width: 100%;
		max-width: none;
		min-width: 0;
		gap: 0;
		padding: 0.5rem 0 0;
		border-radius: 0;
		box-shadow: none;
	}

	.services-dropdown-inner::before {
		display: none;
	}

	.service-section {
		padding: 0.75rem 0;
		border-left: none;
	}

	.service-section:not(:first-child) {
		border-left: none;
		border-top: 1px solid rgba(0, 0, 0, 0.07);
	}

	/* --- Hero --- */
	.hero-text h1,
	.hero-text h1.hero-highlight-line {
		font-size: 2.2rem;
	}

	.hero-buttons {
		justify-content: center;
	}

	/* --- Our Trusted Partners: the 10rem top gap was tuned for the desktop
	       hero-to-section transition and reads as dead space on mobile --- */
	.partners-carousel-section {
		padding: 4rem 0 3rem;
	}

	/* --- Page header (service / about hero split) --- */
	.page-header--minimal {
		min-height: auto;
		padding: 110px 0 40px;
	}

	/* body#about-page .page-header--minimal (line ~957) forces 100vh with
	   higher specificity than the rule above — it needs its own override
	   here so the about hero also shrinks to fit its content on mobile. */
	body#about-page .page-header--minimal {
		min-height: auto;
	}

	/* Photo first, then a centred headline block underneath — reads better
	   as a single stacked column than the left-aligned desktop split.
	   Applies to every page.html header (about, it-support, cyber-compliance,
	   artificial-intelligence) that uses .page-header--minimal. */
	.page-header-inner {
		text-align: center;
	}

	.page-header-media {
		order: -1;
	}

	.page-header-inner {
		gap: 1.75rem;
		padding: 0 1.25rem;
	}

	.page-header--minimal p.page-header-quote {
		font-size: 2.1rem;
	}

	.page-header--minimal p.page-header-subtext {
		font-size: 1rem;
	}

	/* --- About page: let the sections below the hero size to their own
	       content instead of each forcing 90vh, which left large empty
	       gaps once the text reflows narrower/taller on a phone --- */
	body#about-page .content-block {
		min-height: 0;
		padding: 3rem 0;
	}

	/* --- Who We Are: stretch the stacked image/text to the full width
	       instead of shrinking to content width in column mode --- */
	#who-we-are .content-block-inner {
		align-items: stretch;
	}

	#who-we-are .content-block-media {
		flex: 0 1 auto;
		width: 100%;
	}

	#who-we-are .content-block-text {
		max-width: none;
		width: 100%;
	}

	.who-we-are-lead {
		font-size: 1.3rem;
	}

	/* --- Our Commitments: tighten the desktop rhythm now the cards
	       stack in a single column --- */
	.commitments-grid {
		gap: 1.25rem;
		margin-top: 2rem;
	}

	/* --- Meet the Director: the desktop padding/quote size is far too
	       large once the card stacks to a single column --- */
	.director-card-text {
		padding: 2.25rem 1.5rem;
		text-align: center;
	}

	.director-card-text .director-name,
	.director-card-text .director-title {
		text-align: center;
	}

	.director-quote {
		font-size: 1.4rem;
	}

	/* --- Content-block sections: tighten side padding and the large
	       between-section gaps that only make sense on desktop --- */
	#support-for-you .content-block-inner,
	#our-plans .content-block-inner,
	#m365-integration .content-block-inner,
	#cyber-threats .content-block-inner,
	#financial-services .content-block-inner,
	#modern-compliance .content-block-inner,
	#chatbots .content-block-inner,
	#out-of-box-assistants .content-block-inner,
	#agents-skillz-tools .content-block-inner {
		padding: 0 1.25rem;
	}

	body#it-support-page #our-plans,
	body#it-support-page #m365-integration,
	body#artificial-intelligence-page #out-of-box-assistants,
	body#artificial-intelligence-page #agents-skillz-tools,
	body#cyber-compliance-page #financial-services {
		padding-top: 3.5rem;
	}

	.content-block h2 {
		font-size: 1.6rem;
	}

	.content-block p {
		font-size: 1rem;
	}

	.core-services h2 {
		font-size: 1.9rem;
	}

	/* --- Compliance constellation: the radial orbit can't fit a phone, so
	       collapse it to the hub on top with the framework badges wrapping
	       centred below. --- */
	.compliance-orbit {
		width: 100%;
		max-width: 360px;
		aspect-ratio: auto;
		text-align: center;
	}

	.orbit-ring,
	.orbit-connections {
		display: none;
	}

	.orbit-hub {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		margin: 0 auto 1.25rem;
	}

	.orbit-item {
		position: static;
		width: auto;
		height: auto;
		transform: none;
		background: none;
		display: inline-flex;
		margin: 0.25rem;
	}

	.orbit-item::before {
		display: none;
	}

	.orbit-label {
		position: static;
		transform: none;
	}

	/* --- Forms --- */
	.form-row {
		grid-template-columns: 1fr;
	}

	.checkbox-group {
		grid-template-columns: 1fr;
	}

	.assessment-form {
		padding: 2rem;
	}

	/* Full-width submit is an easier tap target than a left-aligned
	   inline-block button once the form spans the whole screen. */
	.assessment-form .free-assessment-btn {
		display: block;
		width: 100%;
		text-align: center;
	}

	.feature-grid {
		grid-template-columns: 1fr;
	}

	/* --- Comparison table (Cyber Threats): shrink columns to fit --- */
	.comparison-table {
		width: 100%;
	}

	.comparison-row {
		grid-template-columns: 1fr 44px 60px;
		gap: 0.5rem;
	}

	.comparison-feature {
		font-size: 0.72rem;
	}

	.comparison-header .comparison-col {
		font-size: 0.55rem;
	}

	/* Card is full width now, so centre the row instead of space-between
	   (which left the Get Started button stranded at the left edge once
	   the card wrapped onto its own line). */
	.section-get-started-row {
		justify-content: center;
	}

	.section-get-started-row .pricing-visual {
		width: 100%;
	}

	/* --- Our Plans: a ring with floating pills can't survive a phone, so
	       render it as a rounded card — the price on top, the three tiers
	       stacked cleanly below (no absolute positioning to overflow it). --- */
	.pricing-circle {
		width: 100%;
		max-width: 340px;
		height: auto;
		border-width: 2px;
		border-radius: 20px;
		flex-direction: column;
		gap: 1.25rem;
		padding: 1.75rem 1.5rem;
	}

	.pricing-center i {
		font-size: 2.4rem;
		margin-bottom: 0.5rem;
	}

	.pricing-segments {
		position: static;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	/* Neutralise the desktop absolute placement. This needs the
	   .segment.<name> specificity to win — a bare .segment can't override the
	   translateX on .segment.support (which was flinging it off the card) or
	   the left/right offsets on management/security. */
	.segment,
	.segment.support,
	.segment.management,
	.segment.security {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		transform: none;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		text-align: center;
		font-size: 0.85rem;
		padding: 0.6rem 0.8rem;
	}

	/* --- Agents/Skillz/Tools: stack the tier ladder as soon as the section
	       goes single-column, not only on the smallest phones. --- */
	.tier-ladder {
		flex-direction: column;
		align-items: stretch;
	}

	/* Base is flex: 1 1 0 — in a vertical column with no set height that
	   collapses each card to a sliver. Size them to their content instead. */
	.tier-card {
		flex: 0 0 auto;
	}

	.tier-connector {
		transform: rotate(90deg);
		margin: 0.1rem auto;
	}

	.tier-card--1,
	.tier-card--2,
	.tier-card--3 {
		transform: none;
	}

	.tier-card--1:hover,
	.tier-card--2:hover,
	.tier-card--3:hover {
		transform: translateY(-4px);
	}

	/* --- CTA --- */
	.cta-section h2 {
		font-size: 1.9rem;
	}

	.cta-pill-quote {
		font-size: 1.25rem;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 0 15px;
	}

	.hero-text h1,
	.hero-text h1.hero-highlight-line {
		font-size: 1.9rem;
	}

	.page-header--minimal p.page-header-quote {
		font-size: 1.8rem;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.assessment-form {
		padding: 1.5rem;
	}

	.btn {
		padding: 0.8rem 1.5rem;
		font-size: 0.9rem;
	}

	.service-card-body {
		padding: 1.5rem 1.5rem 1.25rem;
	}

	/* --- About page: tighten further for small phones --- */
	.who-we-are-lead {
		font-size: 1.15rem;
	}

	.director-card-text {
		padding: 1.75rem 1.25rem;
	}

	.director-quote {
		font-size: 1.2rem;
	}
}

/* Reveal-on-scroll: elements get .fade-in from js/script.js, then .visible
   once they scroll into view. Uses the independent `translate` property (not
   `transform`) so it never clobbers hover/other transforms on the same element
   — the two compose. */
.fade-in {
	opacity: 0;
	translate: 0 24px;
	transition: opacity 0.6s ease, translate 0.6s ease;
	will-change: opacity, translate;
}

.fade-in.visible {
	opacity: 1;
	translate: 0 0;
}

/* Respect users who prefer less motion: show everything, no slide. */
@media (prefers-reduced-motion: reduce) {
	.fade-in,
	.fade-in.visible {
		opacity: 1;
		translate: 0 0;
		transition: none;
	}
}

/* Form Validation Styles */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
	border-color: #dc3545;
}

.error-message {
	color: #dc3545;
	font-size: 0.875rem;
	margin-top: 0.25rem;
	display: none;
}

.error-message.show {
	display: block;
}

/* Success Message */
.success-message {
	background: #d4edda;
	color: #155724;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	border: 1px solid #c3e6cb;
	display: none;
}

.success-message.show {
	display: block;
}

/* Standalone submitted state that replaces the contact form after a
   successful send (persisted via the nbt_contact_submitted cookie). */
.contact-submitted {
	text-align: center;
	padding: 2rem 1.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
}

.submit-another-btn {
	display: block;
	margin: 1.25rem auto 0;
	background: none;
	border: none;
	color: #155724;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
}

.submit-another-btn:hover {
	color: #0d3d18;
}

.submit-error-message {
	background: rgba(220, 38, 38, 0.1);
	border: 1px solid rgba(220, 38, 38, 0.4);
	color: #fca5a5;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

/* Loading State */
.btn.loading {
	position: relative;
	color: transparent;
}

.btn.loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	margin-left: -10px;
	margin-top: -10px;
	border: 2px solid transparent;
	border-top-color: var(--primary-white);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Modern Compliance now embeds the Essential Eight progress bar inline,
   under the Get Started button. Structure:
     #modern-compliance          — the scroll runway. Its own min-height
                                    is NOT the section's real floor — a
                                    position:sticky child still occupies
                                    normal flow, so .essential8-sticky-
                                    viewport's own `height` sets the true
                                    minimum; min-height here only matters
                                    once it's set above that.
       .essential8-sticky-viewport — pins at top:0, sized by its own
                                    `height` (currently 60vh), and flex-
                                    centers its content. Centering
                                    is exact regardless of content height
                                    (unlike a top:Xvh + translateY(-50%)
                                    fudge factor), because it's real
                                    flexbox centering, not a transform hack.
         .content-block-inner    — the actual image+text+bar content. */
/* min-height was a viewport-relative 55vh, which on taller viewports still
   exceeds this section's actual (short) content — .content-block's
   justify-content:center then splits that leftover space evenly above AND
   below the content, and the bottom half was inflating the gap before
   #modern-compliance well past every other section-to-section gap on this
   page. Dropping min-height lets the box hug its real content instead, so
   the gap before #modern-compliance is just its own .essential8-sticky-
   viewport margin-top, not also whatever slack financial-services had left. */
body#cyber-compliance-page #financial-services {
	min-height: 0;
	padding-top: 10rem;
}

body#cyber-compliance-page #modern-compliance {
	display: block;
	min-height: 210vh;
	padding: 0;
}

.essential8-sticky-viewport {
	position: sticky;
	top: 0;
	height: 100vh;
	margin-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	/* #modern-compliance now gets one continuous dot-grid canvas across
	   its whole box, same as every other section — this keeps the actual
	   content stacked above it. */
	z-index: 1;
}

#modern-compliance .content-block-inner {
	position: relative;
	align-items: stretch;
	max-width: 1650px;
	width: 100%;
}

#modern-compliance .content-block-text {
	flex: 1 1 860px;
	/* Must be opaque, not just higher z-index: z-index alone only wins
	   the paint order — it doesn't stop the canvas from showing through
	   wherever this box has no actual glyph/element covering a pixel.
	   A solid background is what truly hides the dots behind the whole
	   column instead of just behind the text characters themselves. */
	background: var(--primary-white);
}

#modern-compliance .content-block-media {
	flex: 1 1 440px;
}

#modern-compliance .content-block-image {
	height: 100%;
	aspect-ratio: auto;
}

.essential8-inline {
	margin-top: 2rem;
	width: 900px;
	max-width: 100%;
}

.essential8-progress-title {
	width: 900px;
	max-width: 100%;
	text-align: center;
	font-size: 1.6rem;
	color: #222;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 auto 1.25rem;
}

.essential8-progress-bar-wrap {
	width: 900px;
	max-width: 100%;
	height: 238px;
	overflow: visible;
}

.essential8-progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  background: #f5f5f5;
  border-radius: 2rem;
  padding: 2.5rem 1.5rem 4rem 2.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 1000px;
  text-align: center;
  transform: scale(0.9);
  transform-origin: top left;
}

/* Base track bar behind the progress fill */
.essential8-progress-bar::before {
  content: "";
  position: absolute;
  left: 86px;
  right: 80px;
  /* Fixed px, not top:50%: the bar's bottom padding grew to make room for
     the lower label/check text, and a percentage-based center would have
     shifted down along with it. This keeps the track line exactly where
     it was before that change. translateY(-50%) still centers this 8px
     bar precisely on that point, same as before. */
  top: 112px;
  height: 8px;
  width: 844px;
  background: #eee;
  border-radius: 4px;
  transform: translateY(-50%);
}

/* The dynamic fill bar that grows with scroll */
.progress-fill {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 112px;
  height: 8px;
  background: linear-gradient(90deg, #ff9800 0%, #ffd180 100%);
  border-radius: 4px;
  transform: translateY(-50%);
  width: 0;
  transition: background 0.3s ease;
}

/* When all steps are filled, this turns the bar green */
.progress-fill.complete {
  background: #4caf50 !important; /* Solid green */
}

.essential8-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 90px;
	min-width: 90px;
	height: 160px;
	margin: 0 2px;
	opacity: 0.3;
	transition: opacity 0.4s;
}

.essential8-step.filled {
	opacity: 1;
}

.step-icon {
	background: #fff;
	border: 3px solid #ff9800;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #ff9800;
	margin-bottom: 0.7rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: border-color 0.3s, color 0.3s;
}

.essential8-step.filled .step-icon {
	border-color: #4caf50;
	color: #4caf50;
}

.step-label {
	font-size: 0.98rem;
	color: #333;
	margin-bottom: 0.5rem;
	margin-top: 3.2rem;
	font-weight: 500;
	min-height: 2.2em;
	flex-shrink: 0;
}

.step-check {
	font-size: 1.2rem;
	color: #4caf50;
	opacity: 0;
	margin-top: 0.15rem;
	flex-shrink: 0;
	transition: opacity 0.3s;
}

.essential8-step.filled .step-check {
	opacity: 1;
}

.scroll-down-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  background: none;
  border: none;
  color: #fff;
  opacity: 0.55;
  padding: 0;
  cursor: default;
  pointer-events: none;
}
.scroll-mouse {
  display: block;
  width: 24px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 14px;
  position: relative;
}
.scroll-mouse-wheel {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  animation: scrollMouseWheel 1.8s ease infinite;
}

@keyframes scrollMouseWheel {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.scroll-down-btn.hide {
  opacity: 0;
}

/* ==========================================================================
   Mobile fixes — MUST stay at the end of the file.
   The #modern-compliance / Essential-Eight desktop base rules are defined
   *later* in this stylesheet than the main responsive block above, and with
   equal specificity the later rule wins — so an override placed up there is
   silently clobbered on mobile. That left phones running the desktop
   scroll-jack and the 1000px-wide bar: it overflowed the viewport (which in
   turn broke the position:fixed navbar) and overlapped Financial Services.
   Defined here (after the base rules) these finally take effect on mobile.
   Uses 900px so tablets get the clean checklist too, before the wide bar
   would start overflowing.
   ========================================================================== */
@media (max-width: 900px) {
	/* Nothing should be able to push the page wider than the viewport and
	   scroll the content out from under the fixed, full-width navbar. */
	html,
	body {
		overflow-x: hidden;
	}

	/* Modern Compliance: drop the sticky scroll-jack; the section hugs its
	   content instead of a 210vh scroll runway. */
	body#cyber-compliance-page #modern-compliance {
		min-height: 0;
		padding: 0;
	}

	/* Base rule gives this a 10rem top padding for the desktop scroll gap —
	   far too much once the scroll-jack is gone, and it exaggerated the
	   overlap into the Modern Compliance image. */
	body#cyber-compliance-page #financial-services {
		padding-top: 3.5rem;
	}

	.essential8-sticky-viewport {
		position: static;
		height: auto;
		margin-top: 0;
	}

	.essential8-inline {
		width: 100%;
		margin-top: 1.5rem;
	}

	.essential8-progress-title {
		width: 100%;
		font-size: 1.25rem;
	}

	.essential8-progress-bar-wrap {
		width: 100%;
		height: auto;
	}

	/* Render the horizontal scroll-linked bar as a plain vertical checklist. */
	.essential8-progress-bar {
		width: 100%;
		transform: none;
		flex-direction: column;
		align-items: stretch;
		padding: 1.25rem;
		gap: 0.9rem;
	}

	.essential8-progress-bar::before,
	.progress-fill {
		display: none;
	}

	.essential8-step {
		flex-direction: row;
		align-items: center;
		width: 100%;
		min-width: 0;
		height: auto;
		margin: 0;
		opacity: 1;
		gap: 0.75rem;
		text-align: left;
	}

	.step-icon {
		margin-bottom: 0;
	}

	.step-label {
		margin: 0;
		min-height: 0;
		text-align: left;
	}

	.step-check {
		display: none;
	}
}