:root{
  --bg: #000;
  --title: #fff;
  --text: #aaa;
  --muted: #bfc9cf;
  --accent: #00cc75;
  --accent-dark: #00894a;
  --header-height: 60px;
  --nav-gap: 30px;
  --underline-width: 30px;
  --underline-height: 3px;
  --logo-padding-vertical: 10px;
  --logo-padding-horizontal: 20px;

	--dot-base:#bdbdbd;   /* base grey dot */
    --dot-green:#4ea277;  /* green at close proximity */

}
*{box-sizing:border-box}
html,body{
	height:100%;
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;
	font-size: 16px;
	line-height: 1.3em;
}

body a { /* Targets all links on the site */
    color: var(--accent); /* Default link color */
    text-decoration: none; /* Removes underline */
    transition: color 0.3s ease; /* Smooth hover effect */
}

/* Unvisited links */
body a:link {
    color: var(--text);
}

/* Visited links */
body a:visited {
    color: var(--muted); /* A different color for visited links */
}

/* Mouse over links */
body a:hover {
    color: var(--accent-dark); /* Darker blue on hover */
    text-decoration: underline; /* Add underline on hover */
}

/* When the link is clicked */
body a:active {
    color: var(--text); /* Even darker when active */
}


.strong {
	color: #FFF;
	font-weight: 700;
}
/* Styling for navigation links */
.main-nav a { /* Example: Targets links within a .main-nav class */
    padding: 10px 15px;
    display: inline-block;
}


h1 {
	font-size: 4em;
	margin:20px 0 30px 0;
	line-height: 1em;
	color:var(--title);
}
h2 {
	font-size: 2.5em;
	margin:0 0 20px;
	color:var(--title);
}
h3 {
	font-size: 1.25em;
	margin: 12px 0 0px;
	color:var(--title);
}
.mice-type {
	font-size: 0.7em;
	color: (--muted);
}
.code{
	font-family:  Courier, Courier Prime, Consolas, Roboto Mono, Cousine, Latin Modern Mono, monospace;
}

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

.textpadding {
	padding: 5px;
}
.overlay{
	/*osition: absolute;*/
    top: -500; /* Position at the top of the container */
    /*left: 0; /* Position at the left of the container */
    /*idth: 100%; /* Occupy full width of the container */
    /*eight: 100%; /* Occupy full height of the container */
    /*background-color: rgba(255, 0, 0, 0.5); /* Example with transparency */
    z-index: 2; /* Ensure it's on top */
}

.container-center{
	max-width:1200px;
	text-align: center;
	margin:0 auto;
	padding:0 20px;
	z-index: 250;
}

.container-center P{
	max-width:750px;
    text-align: center;
	margin:0 auto;
}

.worker-img {
  width: min(1200px, 100%); /* Fixed width on desktop, 100% on mobile */
  height: auto;
  display: block;
  margin: 0 auto;
  align-self: center;
}


.border-bottom {
	/*border-bottom: 1px solid #333; /* First line */
	/*box-shadow: 0 10px 0 0 #000; /* Second line with a gap */
	border-bottom: 5px double #222; /* Adjust thickness and color as needed */
	/*padding-bottom: 10px; /* Optional: Add padding for spacing above the border */
}

/* Background Dots */

  .lattice-section {
    position: relative;
    height: 720px;            /* visible band */
    overflow: hidden;
  }

  canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    cursor:crosshair;
  }

 x-canvas{
    /*display:block;*/
	/*position: relative;*/
    /*z-index: -1;*/
    width:100vw;
    height: 100vh;
    cursor:crosshair;
    touch-action: none; /* allow custom touch handling */
	position: absolute;
    top: 0;
    left: 0;
    /*width: 100%;*/
    /*eight: 60%;*/
    z-index: 1;
	/*padding-bottom: 200px;*/
  }

/* Header full width */
.site-header{
	width:100%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:100;
	background-image:linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
	border-bottom:1px solid rgba(255,255,255,0.2)
}
.header-inner{
	display:flex;
	align-items:center;
	gap:20px;
	height:var(--header-height);
	padding:0 20px;
	max-width:var(--maxw);
	margin:0 auto;
}
.logo-link{
	display:flex;
	align-items:center;
	padding:var(--logo-padding-vertical) var(--logo-padding-horizontal);
	height:100%
}
.logo-img{
	height:30px;
	display:block
}

/* Nav */
.nav{
	margin-left:20px;
	margin-right: 50px;
	flex:1;
}
.nav-list{
	display:flex;
	float: right;
	gap:var(--nav-gap);
	align-items:center;
	list-style:none;
	margin:0;
	padding:0;
	height:100%;
}
.nav-item{
	color: var(--muted);
	text-decoration:none;
	font-weight:500;
	font-size: .8em;
	letter-spacing: 0.05em;
	padding:10px 0;
	position:relative;
	display:inline-block
}

.nav-item:hover{
	color:var(--text);
}

.nav-item img {
	height: 8px;
	margin: 0 5px;
}



/* Hamburger menu - hidden by default */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 101;
  margin-left: auto;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* Hamburger animation when active */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile styles */
@media (max-width: 768px) {
  .hamburger {
    display: flex !important;
  }
  
  .nav {
    position: fixed !important;
    top: var(--header-height, 70px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #000 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: none !important;
    display: none !important;
  }
  
  .nav-list {
    display: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 20px !important;
    float: none !important;
    width: 100% !important;
  }
  
  /* Show menu when active */
  .nav-list.active {
    display: flex !important;
  }
  
  .nav:has(.nav-list.active) {
    display: block !important;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  
  .nav-list li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.3);
  }
  
  .nav-list li:last-child {
    border-bottom: none;
  }
  
  .nav-item {
    display: block !important;
    padding: 15px 0 !important;
    font-size: 1em !important;
    width: 100% !important;
    color: #fff !important;
  }
  
  .header-actions {
    display: none !important;
  }
}






/* Underline for active */
.nav-item.active::after{
  content:'';
  position:absolute;
  left:0;
  bottom:5px;
  width:var(--underline-width);
  height:var(--underline-height);
  background:var(--accent);
  border-radius:0px;
}

/* Dropdown container */
.dropdown {
  position: relative;
}

/* Dropdown menu list */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(20,20,20,0.95);
  border: 1px solid rgba(255,255,255,0.15);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 180px;
  display: none; /* hidden by default */
  flex-direction: column;
  backdrop-filter: blur(8px);
  z-index: 200;
}

/* Show menu on hover (desktop) */
.dropdown:hover .dropdown-menu {
  display: flex;
}

/* Dropdown links */
.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: var(--muted);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  white-space: nowrap;
	text-decoration: none;
}

.dropdown-menu li a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.1);
}

/* Mobile: open/close class */
.dropdown.open .dropdown-menu {
  display: flex;
}
/* Crosshair button */
.crosshair-btn {
      --corner-offset: -2px;
      --corner-thickness: 1.5px;
      --corner-color: #4ea277;
  
      margin: 10px;
      color: #fff;
      background: rgba(255,255,255,0.10);
      border: 1px solid #2c5639;
      padding: 7px 25px 10px 30px;
      font-weight: 600;
	  font-size: 0.8em;
      letter-spacing: 1px;
      text-transform: uppercase;
      position: relative;
      cursor: pointer;
      transition: background 0.15s ease;
      overflow: visible;
    }
  
    .crosshair-btn:hover {
      background: rgba(0, 255, 0, 0.08);
    }
  
    .crosshair-btn:active {
      background: limegreen;
      animation: flicker 0.2s;
    }
  
    @keyframes flicker {
      0%   { background: limegreen; }
      50%  { background: #00ff00; }
      100% { background: limegreen; }
    }
  
    .crosshair-btn::before,
    .crosshair-btn::after,
    .crosshair-btn .c1,
    .crosshair-btn .c2 {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      pointer-events: none;
      z-index: 1;
    }
  
    .crosshair-btn::before {
      top: var(--corner-offset);
      left: var(--corner-offset);
      border-top: var(--corner-thickness) solid var(--corner-color);
      border-left: var(--corner-thickness) solid var(--corner-color);
    }
  
    .crosshair-btn::after {
      top: var(--corner-offset);
      right: var(--corner-offset);
      border-top: var(--corner-thickness) solid var(--corner-color);
      border-right: var(--corner-thickness) solid var(--corner-color);
    }
  
    .crosshair-btn .c1 {
      bottom: var(--corner-offset);
      left: var(--corner-offset);
      border-bottom: var(--corner-thickness) solid var(--corner-color);
      border-left: var(--corner-thickness) solid var(--corner-color);
    }
  
    .crosshair-btn .c2 {
      bottom: var(--corner-offset);
      right: var(--corner-offset);
      border-bottom: var(--corner-thickness) solid var(--corner-color);
      border-right: var(--corner-thickness) solid var(--corner-color);
    }

/* Hero and panels */
main{
	padding-top:0px
}
.hero{
	padding:250px 20px 150px 20px;
	min-height:720px;
	height: 80%;
	/*background:linear-gradient(180deg, rgba(150,150,150,0.52), transparent);*/
	/*border-bottom:1px solid rgba(255,255,255,0.03)*/
}
.hero-short{
	padding:200px 20px 50px 20px;
	min-height:400px;
	/*height: 100%;*/
	/*background:linear-gradient(180deg, rgba(150,150,150,0.52), transparent);*/
	/*border-bottom:1px solid rgba(255,255,255,0.3)*/
}

.dots{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.hero h1{
	margin:20px 0 30px
}
.hero p{
	color:var(--muted);
	max-width:500px
}
.hero-short p{
	color:var(--muted);
	max-width:500px
}

/* panels */
.panel{
	min-height:400px;
	/*border-bottom:1px solid rgba(255,255,255,0.02);*/
	padding:50px 20px
}

.panel-diagram{
	min-height:400px;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(51, 51, 51, 0), rgba(66, 66, 66, 0.5), rgba(51, 51, 51, 0), rgba(0, 0, 0, 0));
	/*background-image: radial-gradient(rgba(51, 51, 51, 1), rgba(0, 0, 0, 1));*/
	/*border-bottom:1px solid rgba(255,255,255,0.02);*/
	padding: 100px 20px;
	z-index: 200;
}

.panel-workers{
	min-height:500px;
	background-image: url('../assets/grid.png'), linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(34, 34, 34, 0.7), rgba(0, 0, 0, 1));
	border-bottom:1px solid rgba(255,255,255,0.02);
	padding:100px 20px
}

.panel-platform{
	min-height:600px;
	background-image: url('../assets/grid.png'), linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(34, 34, 34, 0.7), rgba(0, 0, 0, 1));
	border-bottom:1px solid rgba(255,255,255,0.02);
	padding:150px 20px 48px 20px;
}

.panel-deployment{
	min-height:500px;
	background-image: url('../assets/grid.png'), linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(34, 34, 34, 0.7));
	border-bottom:1px solid rgba(255,255,255,0.02);
	padding:50px 20px
}

.security{
	background-image: url("../assets/DCP-backgroundlogo.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 100%;
	padding: 100px 0;
	min-height: 500px;
}
.security-btn{
	padding: 30px 20px 0px 0px;
	align-content: center;
}

.security-spacing{
	padding: 10px 0px 130px 0px;
}

.worker-btn{
	padding: 0px 0px 0px 0px;
	align-content: center;
}

/* footer */
.site-footer{
	padding:28px 20px;
	/*border-top:1px solid rgba(255,255,255,0.03);*/
	margin-top:40px
}
.footer-bottom{
	padding:10px 20px;
	border-top:1px solid rgba(255,255,255,0.03);
	margin-top:10px
}
.footer-right{
	padding:10px 20px;
	float: right;
	border-top:1px solid rgba(255,255,255,0.03);
	margin-top:10px
}
.footer-inner{
	display:flex;
	justify-content:space-between;
	align-items:top;
	gap:20px
}
	
.footer-brand{
	width: 50%;
	justify-content:space-between;
	align-items:top;
	gap:20px
}
.logo-small{
	height:28px
}
.tagline{
	font-family:  Courier, Courier Prime, Consolas, Roboto Mono, Cousine, Latin Modern Mono, monospace;
	/*font-size: 21px;*/
}
.footer-links{
	display: flow-root;
	float: right;
	gap:var(--nav-gap);
	align-items:center;
	list-style:none;
	margin:0;
	padding:0;
	/* border: 1px #ccc solid; */  /* Use this comment style */
}

.footer-links a{
	color:var(--muted);
	text-decoration:none;
	text-transform: uppercase;
	font-weight:500;
	font-size: .8em;
	letter-spacing: 0.05em;
	padding:10px 0;
	position:relative;
	display:inline-block
}
.footer-links a:hover{
	color:var(--text)
}

}
/* demo styles */

.demo-container {
     /*display: grid;*/
     /*grid-template-columns: 1fr 1fr;*/
     /*gap: 30px; /* Optional: adds space between columns */
	 background-color: aqua;
	 border: 1px solid #990000; /* Optional: for visualization */
	 display:flex;
     gap: 10px;
     align-items: flex-start;
    }

.demo {
	 /*background-color: aqua;*/
	 /*border: 1px solid #990000; /* Optional: for visualization */
	 display:flex;
     gap: 10px;
     align-items: flex-start;
    }

.column {
    flex: 1;
    min-width: 0;
	/*padding: 1rem; /* Optional: adds internal spacing */
    /*border: 1px solid #ccc; /* Optional: for visualization */
	/*flex: 1;*/
    /*min-width: 0;*/
}
    
    /* Neutralize Highlight.js spacing */
.hljs,
.hljs * {
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.5 !important;
    }
  
    /* Code block styling (matches VS Code Dark) */
    pre {
      background-color: #000 !important;
      margin: 0 !important;
      padding: 8px !important;
      border: 1px solid #333;
      display: block;
      font-family: 'Fira Code', monospace;
      font-size: 12px;
      line-height: 1.2;
      white-space: pre;
      overflow-y: auto;
      border-radius: 0;
      max-height: calc(1.5em * 16 + 8px);
    }
    pre code {
      background-color: #000 !important;
      padding: 0 !important;
    }
  
    /* Console textareas styled to match code blocks */
    textarea {
      width: 100%;
      box-sizing: border-box;
      background-color: #000 !important;
      color: #fff !important;
      border: 1px solid #444;
      padding: 8px;
      font-family: 'Fira Code', monospace;
      font-size: 12px;
      line-height: 1.5;
      white-space: pre;
      resize: vertical;      /* allow manual resizing */
      overflow-y: auto;
      /* removed max-height so rows=".." works */
    }

  
    /* Override any highlight.js color bleed */
    textarea *,
    textarea.hljs {
      background: #000 !important;
      color: #fff !important;
    }
 
/* Panel container */
.three-box-panel {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    width: 100%;
	margin: 50px 0 20px 0;
}

/* Outer box */
.three-box-panel .box {
    flex: 1;
    border: 1px solid #333333;
    display: flex; /* allows inner box to stretch full height */
    padding: 10px;
}

/* Inner box */
.three-box-panel .box-inner {
    background: #000;
    padding: 20px;
    text-align: center;
    flex-grow: 1; /* ensures equal height regardless of content length */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box-inner-left {
    background: #000;
    padding: 20px;
    text-align: left;
}

.box-inner-left p{
    padding: 8px;
    text-align: left;
}

.box-inner-left li{
    padding: 5px;
    text-align: left;
}


.box-row {
  display: flex;
  gap: 20px;
  width: 100%;
  padding-bottom: 20px;
}

/* Individual boxes */
.box-content {
  flex: 1 1 0;        /* ← IMPORTANT */
  min-width: 0;       /* ← CRITICAL FIX */
  border: 1px solid #222;
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* align-items: center;        /* Horizontally centered text */
  justify-content: flex-start;/* Top-aligned content */
  /* text-align: center; */
  box-sizing: border-box;
}

.center {
  align-items: center;        /* Horizontally centered text */
  text-align: center;
}

.left {
  align-items: left;        /* Horizontally centered text */
  text-align: left;
}

.box-code {
  border: 1px solid #222;
  padding: 20px;
  background-color: #111;
  justify-content: flex-start;/* Top-aligned content */
  box-sizing: border-box;
  align-items: left;        /* Horizontally centered text */
  text-align: left;
  font-family:  Courier, Courier Prime, Consolas, Roboto Mono, Cousine, Latin Modern Mono, monospace;
}



/* Icon */
.box-icon {
    width: 60px;
    height: 60px;
    margin: 30px 0;
    object-fit: contain;
	opacity: 0.5;
}


/* ==========================
   Split Panel
   ========================== */

.split-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 50vh;
}

/* Each half */
.split-side {
  display: flex;
}

/* Backgrounds */
.split-side.left {
  align-items: right;
  /*background: #000;*/
}

.split-side.right {
  align-items: left;
  background: #000;
}

/* Content wrapper */
.split-content {
  /*width: 600px;*/
  max-width: var(--maxw);
  padding: 80px 40px;
}

/* Align content inward */
.split-side.left .split-content {
  margin-left: auto;
}

.split-side.right .split-content {
  margin-right: auto;
}

/* Typography */
.split-content h2 {
  margin-bottom: 20px;
}

.split-content p {
  max-width: 480px;
}

.split-background {
	background-image: url("../assets/palebluedot.png");
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ==========================
   Logo Panel
   ========================== */

.logo-panel {
  width: 100%;
  min-height: 200px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(20, 20, 20, 0.2), rgba(51, 51, 51, 0.2));
  /*background: #000;*/
  padding: 30px 0 50px;
  overflow: hidden;
}

.logo-panel-title {
  text-align: center;
  margin-bottom: 20px;
  color: var(--muted);
}

/* Viewport */
.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Modern browsers */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );}

/* Moving container */
.logo-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Single set */
.logo-set {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-right: 60px;
}

/* Logos */
.logo-set img {
  height: 100px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.logo-set img:hover {
  opacity: 1;
}

/* Edge fade mask */
/* Optional: subtle visual reinforcement */
.logo-marquee::before,
.logo-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.logo-marquee::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,1),
    rgba(0,0,0,0)
  );
}

.logo-marquee::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(0,0,0,1),
    rgba(0,0,0,0)
  );
}

/* GDPR Banner */
.gdpr-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #000;
  color: #fff;
  z-index: 9999;
  border-top: 1px solid rgba(255,255,255,0.2);
  display: none;
}

.gdpr-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.gdpr-content p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #ccc;
  flex: 1 1 60%;
}

/* Actions */
.gdpr-actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

/* Buttons */
.btn-primary {
  background: #00a356;
  color: #000;
  border: none;
  padding: 10px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover {
  background: #00c96b;
}

.btn-secondary {
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  padding: 10px 18px;
  font-size: 0.8rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}


/* HERO */
.hero-panel {
  height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
}

/* STORY CONTAINER DEFINES SCROLL BOUNDARY */

.story-container {
  position: relative;
  width: 100%;
}

.story-stick-region {
  position: relative;
}

/* FLEX, NOT GRID */
.story-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;

}


/* LEFT COLUMN */
.story-text {
  width: 50%;
  padding-right: 40px;
}

/* RIGHT COLUMN */
.story-visual {
  padding-top; width: 50%;
  position: relative;
}

/* THIS IS THE KEY */
.story-visual img {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  max-width: 100%;
  transition: opacity 0.4s ease;
}

/* PANELS */
.story-panel {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: 20vh;
}

/* FINAL PANEL */
.final-panel {
  padding: 200px 20px;
  max-width: 1200px;
  margin: 0 auto;
}


/* STORY WRAPPER */
.story-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* STICKY VISUAL */
.sticky-visual {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-visual img {
  max-width: 100%;
  max-height: 100%;
  transition: opacity 0.4s ease;
}

/* TEXT PANELS */
.story-panels {
  padding-right: 40px;
}

.story-panel h2 {
  margin-bottom: 12px;
}

.diagram {
	position: relative;
	top:-50px;
}

/* ==========================
   Responsive
   ========================== */

/* Responsive */
/* Mobile: Single column layout */
@media (max-width: 768px) {
    .demo {
        flex-direction: column;
    }
    
    .column {
        width: 100%;
    }
}

@media (max-width: 768px) {
  .gdpr-content {
    flex-direction: column;
    align-items: flex-start;
  }

h1 {
	font-size: 2.5em;
	margin:20px 0 30px 0;
	line-height: 1em;
	color:var(--title);
}
h2 {
	font-size: 2em;
	margin:0 0 20px;
	color:var(--title);
}
h3 {
	font-size: 1.25em;
	margin: 12px 0 0px;
	color:var(--title);
}
.split-panel {
    grid-template-columns: 1fr;
  }

.split-content {
    padding: 60px 20px;
    margin: 0 auto;
  }

.three-box-panel {
        flex-direction: column;
        gap: 30px;
        padding: 40px 5%;
    }

  .nav-list{gap:18px}
  .hero h1{font-size:32px}
  .header-inner{padding:0 12px}
  .logo-img{height:30px}
  .portal-btn::before,.portal-btn::after{display:none}

.footer-links{
		display: none;
	}

.security {
	background-image: none;
	min-height: 50px;
	}
.security-spacing{
	padding: 10px 0px 10px 0px;
}
.diagram {
	position: relative;
	top:0px;
}



}