add some mobile responsiveness

_includes/head.html

@@ -80,16 +80,13 @@
   <div class="menu-content" style="display: none">
     <div class="inner-menu-content">
       <div>
-        <a href="/index.html">Home</a>
-      </div>
-      <div>
-        <a href="/about.html">About</a>
+        <a href="/company.html">Company</a>
       </div>
       <div>
         <a href="/services.html">Services</a>
       </div>
       <div>
-        <a href="/projects.html">Projects</a>
+        <a href="/roadmap.html">Roadmap</a>
       </div>
       <div>
         <a href="/contact.html">Contact</a>

_layouts/contact.html

@@ -5,13 +5,13 @@
 		{%- include header.html -%}
 		<div class="container">
 			<main>
-				<section style="margin-bottom: 80px; margin-top: 100px">
+				<section class="capsule-section">
 					<div class="center">
 						<div class="capsule">contact</div>
 					</div>
 					<br>
 					<br>
-					<h2 style="height: 180px; font-weight: 600 !important" class="gradient-text center">tell us about your biggest security challenges</h2>
+					<h2  class="gradient-text center contact-header">tell us about your biggest security challenges</h2>
 					<br>
 					<p class="hero-p center" style="filter: brightness(70%)">Fill out the form below to start the conversation about how we can help you eliminate single points of failure and build security that doesn't rely on blind trust.</p>
 				</section>

_layouts/landing.html

@@ -8,7 +8,7 @@
 				<section class="flex-container">
 						<div class="flex-container-inner">
 							<div class="text-well">
-								<h1 class="gradient-text" style="min-height: 320px">security without blind trust</h1>
+								<h1 class="gradient-text hero-header">security without blind trust</h1>
 								<p class="hero-p">Eliminate single points of failure. Distrust applies a first principles approach to securing mission critical infrastructure. No guessing, no shortcuts, only verifiable security.</p>
 								<br />
 								<a href="/contact.html" class="mega button">Work with us</a>

_layouts/roadmap.html

@@ -21,13 +21,13 @@
 
 		<div class="container">
 			<main>
-				<section class="flex-container" style="margin-top: 100px; margin-bottom: 30px">
+				<section class="flex-container capsule-header">
 					<div class="flex-container-inner" style="padding-top: 0px">
 						<div class="text-well center">
 							<div class="capsule">roadmap</div>
 							<br>
 							<br>
-							<h1 style="height: 310px">building verifiable security without single points of failure</h1>
+							<h1 class="hero-header">building verifiable security without single points of failure</h1>
 							<br>
 							<br>
 							<p class="hero-p center">Most systems today still rely on single individuals or computers, unverifiable software, and opaque processes. We’re redesigning security from the ground up.</p>

_layouts/services.html

@@ -5,7 +5,7 @@
 		{%- include header.html -%}
 		<div class="container">
 			<main>
-				<section class="flex-container" style="margin-top: 100px">
+				<section class="flex-container capsule-header">
 					<div class="flex-container-inner">
 						<div class="text-well center">
 							<div class="text-well" style="text-align: center; margin: auto">
@@ -13,7 +13,7 @@
 							</div>
 							<br>
 							<br>
-							<h1 class="hero-title gradient-text" style="height: 320px">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>
 							<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>

_sass/base.scss

@@ -130,6 +130,20 @@ a:hover {
 	max-width: 800px;
 }
 
+.hero-header {
+	height: 320px;
+}
+
+.capsule-header {
+	margin-top: 100px;
+	margin-bottom: 30px;
+}
+
+.contact-header {
+	height: 180px;
+	margin-top: 100px;
+}
+
 .card {
 	border: 1px solid gainsboro;
 	border-radius: 20px;
@@ -416,6 +430,7 @@ footer {
 	text-decoration: none;
 	margin-left: 20px;
 	transition: transform 0.5s ease !important;
+	min-width: 200px;
 }
 
 .footer-link:hover {
@@ -1396,9 +1411,18 @@ pre {
 /**
  * media queries
  */
+
+@media (max-width: 1380px) {
+	.vertical-line-container {
+		display: none;
+	}
+}
+
 @media (max-width: 1020px) {
    .flex-container-inner {
       width: 100% !important;
+			margin: 0;
+			margin-bottom: 50px;
    }
 
    .flex-container {
@@ -1415,6 +1439,11 @@ pre {
 }
 
 @media (max-width: 600px) {
+		section {
+			margin-top: 80px;
+			margin-bottom: 80px;
+		}
+
    .companies {
       flex-wrap: wrap;
    }
@@ -1429,5 +1458,34 @@ pre {
       padding-top: 50px;
       padding-left: 10px;
    }
+
+	 .hero-header {
+			height: unset !important;
+	 }
+
+	 .contact-header {
+			margin-top: 50px;
+			height: unset;
+	 }
+
+	 .capsule-header {
+			height: unset;
+			margin-top: 30px;
+			margin-bottom: 30px;
+	 }
+
+	 .footer-link {
+			margin-bottom: 20px;
+	 }
+
+	 h1 {
+		font-size: 70px !important;
+		line-height: 70px !important;
+	 }
+
+	 h2 {
+		font-size: 50px !important;
+		line-height: 50px !important;
+	 }
 }