add visual for services

_layouts/services.html

@@ -5,14 +5,23 @@
 		{%- include header.html -%}
 		<div class="container">
 			<main>
-				<section class="flex-container capsule-header">
+						<div class="video-background-container" style="top: 350px">
+							<video autoplay muted loop playsinline class="video-background">
+								<source src="assets/videos/swirly-lines.mp4" type="video/mp4" />
+							</video>
+							<div class="gradient-overlay" style="background: linear-gradient(to bottom, #0f0f0f 0%, rgba(15, 15, 15, 0) 25%, rgba(15, 15, 15, 0) 75%, #0f0f0f 100%), linear-gradient(to right, rgb(15, 15, 15) 0%, rgba(15, 15, 15, 0) 100%)"></div>
+						</div>
+				<section class="flex-container capsule-header video-content">
+
 					<div class="flex-container-inner">
 						<div class="text-well center">
 							<div class="text-well" style="text-align: center; margin: auto">
 								<div class="capsule">services</div>
 							</div>
 							<br>
-							<h1 class="hero-title gradient-text hero-header">hire Distrust to solve your hardest security challenges</h1>
+							<h1 class="hero-title gradient-text hero-header">
+								hire Distrust to solve your hardest security challenges
+							</h1>
 							<br>
 							<p class="hero-p center">Built by the team behind BitGo, Unit410, and Turnkey, we appy hard-earned lessons from securing critical infrastructure to build transparent, resilient, and universally applicable security solutions.</p>
 							<div class="button-container">
@@ -22,34 +31,45 @@
 					</div>
 				</section>
 
-				<section class="flex-container">
+				<section class="flex-container mid-tall-section">
 					<div class="flex-container-inner">
-						<div class="text-well card">
+						<div class="text-well">
-							<h4>security assessments</h4>
+							<h3>security assessments</h3>
-							<p>Our assessments go beyond identifying vulnerabilities—we strategically eliminate risks at their source. Using a first-principles methodology, we pinpoint single points of failure and deliver clear, actionable recommendations to secure your systems against sophisticated threats.</p>
+							<p style="max-width: 540px">Our assessments go beyond identifying vulnerabilities—we strategically eliminate risks at their source. Using a first-principles methodology, we pinpoint single points of failure and deliver clear, actionable recommendations to secure your systems against sophisticated threats.</p>
 							<ul>
 								<li>Penetration testing</li>
 								<li>Secure code review</li>
 								<li>Cloud configuration review</li>
 								<li>Threat modeling</li>
 							</ul>
+							<br>
+							<a href="/contact.html" class="arrow-link">
+								Schedule an assessment
+								<span class="arrow">&#x2192;</span>
+							</a>
 						</div>
 					</div>
 					<div class="flex-container-inner">
-						<div class="text-well card">
+						<div class="text-well">
-							<h4>retainer or fractional CISO</h4>
+							<h3>retainer or fractional CISO</h3>
-							<p>Gain continuous, high-level security leadership tailored precisely to your organization's needs. We work closely with your teams, providing strategic security direction, eliminating blind trust, and protecting critical infrastructure from sophisticated threats.</p>
+							<p style="max-width: 540px">Gain continuous, high-level security leadership tailored precisely to your organization's needs. We work closely with your teams, providing strategic security direction, eliminating blind trust, and protecting critical infrastructure from sophisticated threats.</p>
 							<ul>
 								<li>Security program development</li>
 								<li>Incident response</li>
 								<li>Due diligence</li>
 								<li>Vetting security talent</li>
 							</ul>
+							<br>
+							<a href="/contact.html" class="arrow-link">
+								Work with us
+								<span class="arrow">&#x2192;</span>
+							</a>
 						</div>
 				</section>
+
+
 				<section class="flex-container">
-					<div class="flex-container-inner">
+					<div class="flex-container-inner"></div>
-					</div>
 					<div class="flex-container-inner">
 						<h2 class="gradient-text" style="text-align: left; height: 95px">why Distrust?</h2>
 						<p>

_sass/_dark.scss

@@ -13,15 +13,16 @@
 	--placeholder-color: rgba(0, 0, 0, 0.5);
 	--link-color: var(--base-color);
 	/* yoinkt from Material Design 2014, Deep Purple A200 */
-	--mega-color: #7C4DFF;
+	--purple: #7C4DFF;
-	--dark-purple: #241846;
-	--mid-purple: #473C68;
 	--light-purple: #A998ED;
-	--light-blue: #02CAF2;
+	--mid-purple: #473C68;
-	--light-grey: #9A9A9A;
+	--dark-purple: #241846;
-	--dark-grey: #292929;
 	--light-teal: #6DD4F1;
-	--raisin-black: #120F1A;
+	--mid-blue: #02CAF2;
+	--pink: #F048B5;
+	--light-grey: #9A9A9A;
+	--mid-grey: #292929;
+	--dark-grey: #120F1A;
 	--code-color-1: #aaaaaa;
 	--code-color-2: #ffffcc;
 	--code-color-3: #F00000;

_sass/base.scss

@@ -9,7 +9,7 @@
  * Style variables
  */
 $base-font-family: 'Inter', monospace !default;
-$base-font-size: 1.125rem !default;
+$base-font-size: 1.3rem !default;
 $mobile-font-size: 1.125rem !default;
 $base-line-height: 1.5 !default;
 $container-width: 90% !default;
@@ -80,7 +80,7 @@ h6 {
 }
 
 p {
-	font-size: 18px;
+	font-size: $base-font-size;
 }
 
 p,
@@ -126,7 +126,6 @@ a:hover {
 }
 
 .hero-p {
-  font-size: 20px;
 	max-width: 800px;
 }
 
@@ -135,7 +134,7 @@ a:hover {
 }
 
 .capsule-header {
-	margin-top: 110px;
+	margin-top: 80px;
 	margin-bottom: 30px;
 }
 
@@ -145,11 +144,13 @@ a:hover {
 
 .card {
   transition: border 0.3s ease-in-out;
-	background: var(--raisin-black);
+	background: var(--dark-grey);
 	border: 1px solid var(--mid-purple);
 	border-radius: 20px;
 	padding: 45px;
 	margin: 20px;
+	min-height: 490px;
+	max-width: 550px;
 }
 
 .card:hover {
@@ -354,6 +355,7 @@ a:hover {
   overflow: hidden;
   top: 100px;
   left: 0;
+	z-index: -1;
 }
 
 .gradient-overlay {
@@ -703,18 +705,19 @@ hr {
 @mixin mega {
    border-radius: 30px;
    font-weight: 400;
+	 transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
 }
 
 .mega-inverted.button {
-	border: 1px solid var(--dark-grey);
+	border: 1px solid var(--mid-grey);
-		background: var(--dark-grey);
+	background: var(--mid-grey);
-   color: white;
+	color: white;
-	 @include mega;
+	@include mega;
 }
 
 .mega-inverted.button:hover {
 	transform: translateY(0px);
-	background: var(--mega-color);
+	background: var(--purple);
 	color: var(--base-color);
 }
 
@@ -728,8 +731,9 @@ hr {
 }
 
 .mega.button:hover {
-	background: var(--mega-color);
+	background: var(--purple);
 	color: var(--base-color);
+	border: 2px solid var(--purple);
 }
 
 .button-container {
@@ -743,7 +747,7 @@ hr {
 	width: 100%;
 	border-radius: 10px;
 	height: 60px;
-	background: var(--mega-color);
+	background: var(--purple);
 	color: white;
 	border: 1px solid var(--light-purple);
 }