/* CSS for SargNet */
/*   default color:   sargnet blue #0f6bb5;
     primary color:   sargnet blue #0f6bb5;
     secondary color: sargnet black #000;
     alt color dark:  navy navy;
     alt color light: white #FFF;
     highlight color: aqua aqua;
*/

  :root {
    --primary: #0f6bb5;
    --secondary: #000000;
    --altdark: #1a2e45;
    --altlight: #ffffff;
    --highlight: #3a9e9e;
    --bg-color: #ffffff;
    --bg-image: url(/Images/SargNet.png);
    --bg-video: url(/Videos/SargNet.mp4);
    --overlay-bg: rgba(0, 0, 0, 0.35); /* panel overlay color */
    /*--bar-bg: rgba(255,255,255,0.08);*/ /* header/footer bar background (mostly transparent) */
	/*--bar-bg: #000000;*/
    /*--glass-border: rgba(255,255,255,0.12);*/
    --glass-border: rgba(71, 163, 238, 0.185);
    --gap: 12px;
    --safe-pad: 16px;
	  
	--content-h1: #3a9e9e;
	--content-h2: #ffffff;
	--content-h3: #6b7280;
	--content-text: lightblue;

	--navy:      #1a2e45;
	--teal:      #2a7f7f;
	--teal-lt:   #3a9e9e;
	--cream:     #f7f4ef;
	--warm-grey: #e8e4de;
	--text:      #2c2c2c;
	--muted:     #6b7280;
	--white:     #ffffff;
	--accent:    #c8963e;
	--sage:      #4a7c6f;
	--sage-lt:   #6a9e90;
	--sage-pale: #edf4f2;
	--charcoal:  #1e2d2a;
	--warm-off:  #f5f2ee;
	--warm-mid:  #e8e2da;
	--rust:      #b8602a;
  }

  /* Reset */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}

  body{
    min-height:100vh;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.2rem;
    font-weight: normal;
    color: var(--altlight);
    letter-spacing: .03em;
    background: center/cover no-repeat var(--bg-image);
    position:relative;
	background-size: auto;
  }
  body.clientspartners {
	  --bg-image: url(/Images/SargTigerFur-Dark.jpg);
  }
  body.about {
	  --bg-image: url(/Images/SargTigerFur-Dark.jpg);
  }
  body.services {
	  --bg-image: url(/Images/SargTigerFur-Dark.jpg);
  }
  body.contact {
	  --bg-image: url(/Images/SargTigerFur-Dark.jpg);
  }
  
  body strong {
	  font-weight: 500;
  }

  /* optional dark overlay over image for contrast */
  body::before{
    content:"";
    position:fixed;
    inset:0;
	background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.45));
    z-index:0;
    pointer-events:none;
  }
  
  body[class] {
	  background-size: cover;
	  background: center / cover repeat var(--bg-image);
  }
  
  body[class] header.bar,
  body[class] footer.bar  {
	  background: var(--altlight);
  }
  
  .bg-video {
	  position:fixed;
	  top:0;
	  left:0;
	  width:100%;
	  height:100%;
	  object-fit:fill;
	  z-index:-2;
	  background:black;
  }

  /* header & footer bars (fixed, full width) */
  .bar {
    position:fixed;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gap);
    padding: calc(var(--safe-pad)/4) calc(var(--safe-pad));
    backdrop-filter: blur(10px) saturate(0%);
    background: var(--bar-bg);
    border-bottom: 1px solid transparent;
    z-index: 40;
    overflow:hidden;
  }
  
  body[class] .bar {
     background: var(--altlight);
  }
  
  header.bar{
    min-height: 15%;
    max-height: 17%;
    top:0;
    border-bottom-color: var(--glass-border);
  }
  
  footer.bar{
    bottom:0;
    border-top: 1px solid transparent;
    border-top-color: var(--glass-border);
    width: 100%;
    display: block;
  }
  
  footer.bar .slot-row {
     padding: 0.8rem;
  }

	footer.bar .slot-row .slot a.slot {
		padding: 1px 6px;
		font-size: 0.8em;
	}

  /* inner row of 3 divs */
  .bar .slot-row {
    display:flex;
    width:100%;
    max-width:100%;
    min-width: 100%;
    margin: 0 auto;
    gap: var(--gap);
    align-items:center;
    justify-content:space-between;
    min-height: -webkit-fill-available;
  }
  
  .btn{
    top: 15px;
    position: relative;
  }

  .btn,
  .bar .slot {
    min-width: 0;
    padding:8px 12px;
    text-align:center;
    border-radius:10px;
    transition: transform .18s ease, background .18s ease;
    user-select:none;
  }
  
  .bar .slot.center {
    text-align:center;
  }
  
  a,
  button {
    background: var(--altlight);
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
  }
  
  header .menu a {
	background-color: unset;
	color: var(--altlight);
	margin: 0 3%;
	padding: 6px 10px;
  }
  
  a:hover,
  button:hover {
    background: var(--primary) !important;
    color: var(--altlight);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 10px;
  }
  
  header a.active {
    background: unset;
    color: var(--highlight) !important;
    font-weight: 500;
  }
  
  #h-center {
    margin-top: 3%;
    text-align: right;
    width: 65%;
    background: unset; /*var(--secondary);*/
    color: var(--primary);
    position: relative;
  }
  
  #h-left {
    display: inline-block;
    width: 30%;
    min-height: 12vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 50%;
    background-color: unset; /*var(--secondary);*/
    margin-left: 5vw;
  }

	#h-left:hover {
	  background-color: unset !important;
	}
	 
	.logo-globe {
	  display: inline-block;
	  width: 25%;
	  height: 12vh;
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: left center;
	  background-image: url(/Images/SargNet-Logo-Globe.png);
	}
	 
	.logo-text {
	  display: inline-block;
	  width: 40%;
	  height: 12vh;
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: left center;
	  background-image: url(/Images/SargNet-Logo-Text.png);
	}

  /* main overlay container sits above background, centered */
  .main-overlay{
    height: 100%;
    width: 100%;
    position: relative;
    align-items:center;
    justify-content:center;
    z-index: 30;
    /* pointer-events: none; /* allow specific children to accept clicks while container itself won't block things */
    pointer-events: auto;
  }
  
  body[class] .main-overlay {
    position: relative !important;
    display: block !important;
  }

  /* two panels side-by-side */
  .panels{
    width: 100%;
    display:flex;
    gap: 1rem;
    pointer-events: auto; /* allow clicks inside */
	  height: 100%;
  }

  a.panel{
    display:block;
    flex:1 1 0;
    border-radius: 14px;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    transition: transform .18s ease, box-shadow .18s ease;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  a.panel:hover{
    /* transform: translateY(-6px) scale(1.01); */
    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
	color: var(--primary);
  }
  
  a.panel:hover > .inner {
    background: var(--altlight);
    opacity: 90%;
  }
  
  a.panel.emp-pnl:hover > .inner {
    background: var(--primary);
    color: var(--secondary);
  }
  a.panel.client-pnl:hover > .inner {
    background: var(--secondary);
    color: var(--primary);
  }

  /* content inside each panel */
  .panel .inner {
    padding: 28px;
    width:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
    justify-content:center;
    pointer-events:none; /* inner content shouldn't intercept link clicks */
  }
  
  .panel h2{
    margin:0;
    font-size: clamp(30px, 2.4vw, 45px);
    font-weight:600;
    letter-spacing:0.2px;
  }
  
  .panel p{
    margin:0;
    font-size: clamp(15px, 1.4vw, 20px);
    opacity:0.9;
  }

  /* optional overlay icon/faint background within panel */
  .panel::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.25));
    mix-blend-mode: multiply;
    pointer-events:none;
  }

  a.panel:focus{
    outline: 3px solid rgba(255,255,255,0.14);
    outline-offset: 4px;
  }
  
	.hamburger,
	.menu {
	  display: none;
	}

	.menu {
	  position: relative;
	  left: 50%;
	  transform: translateX(-50%);
	  background: unset;
	  backdrop-filter: blur(10px);
	  border-radius: 12px;
	  padding: 14px 0;
	  /*border: 2px solid rgb(110,190,78,0.15);*/ /*rgba(255,255,255,0.15);*/
	  display: block;
	  flex-direction: column;
	  min-width: 160px;
	  /*box-shadow: 0 8px 30px rgb(110,190,78,0.4);*/ /*rgba(0,0,0,0.4);*/
	  z-index: 300;
	  /*border: 2px solid var(--secondary) !important;*/
	}

	.menu a {
	  margin: 0 5%;
	  padding: 10px 10px;
	  color: var(--altlight);
	  text-decoration: none;
	  white-space: nowrap;
	  transition: background .2s ease;
	  text-align: center;
	}

	.menu a:hover {
	  background: var(--primary);
	  border-radius: 8px;
	}
	
	.main {
		height: 100%;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 30;
		pointer-events: none;
		margin-right: auto;
		margin-left: auto;
	}
	
	 body[class] .main {
		 display: block;
	 }
	
	
	.content-section {
	   position: relative;
	   display: block;
	   max-width: 100%;
	   width: 80%;
	   min-height: 100%;
	   margin: 0 auto;
	   padding: 10% 10%;
	   padding-bottom: 20%;
	   background-size: cover;
	   background-repeat: no-repeat;
	   background-position: left center;
	   /* background-image: url(/Images/SargTigerFur-Dark.jpg); */
	   /* background-color: rgba(202, 250, 254, 0.7) !important; */
	   background-blend-mode: lighten;
	   font-size: 1.5rem;
	}
	
	.content-section form {
		font-size:1.1rem;
		color: black;
	}
	
	.content-section form div {
		margin: 1rem 0rem;
	}
	
	.content-section form div label {
		color: var(--altdark);
	}
	
	.content-section .full-width {
		width: 100%;
	}
	.content-section .half-width {
		width: 49%;
		margin-right: 1%;
		float: left;
		clear: right;
	}
	.content-section .quarter-width {
		width: 25%;
		margin-right: 1%;
		float: left;
		clear: right;
	}
	
	.content-section.tab-0 {
		display: block;
		width: 100%;
		height: 1%;
	}
	.content-section.tab-1 {
		display: none;
		width: 100%;
		height: 100%;
	}
	.content-section.tab-1.active {
		display: block;
		width: 100%;
		height: 100%;
	}
	.content-section.tab-2 {
		display: none;
		width: 100%;
		height: 100%;
	}
	.content-section.tab-2.active  {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	section {
	  display:block;
	  padding: 1rem 1rem;
	  max-width: 100%;
	  margin: 1rem;
	  color: var(--content-text);
	}
	
	section h1 {
		color: var(--content-h1);
		font-size: 2.1rem;
		margin-bottom: 10px;
		margin-top: 15px;
		font-weight: 700;
		line-height: 1.3;
	}
	section h2 {
		color: var(--content-h2);
		font-size: 2rem;
		margin-bottom: 5px;
		margin-top: 10px;
		font-weight: 500;
		line-height: 1.2;
	}
	section h3 {
		color: var(--content-h3);
		font-size: 1.7rem;
		margin-bottom: 5px;
		margin-top: 5px;
		font-weight: 500;
		line-height: 1.1;
	}
	
	section strong {
		font-weight: 500;
	}

	main:has(div.clientspartners) {
		align-items: end;
	}
	
	.clientspartners > div {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.clientspartners > div > div {
		display: flex;
		flex-direction: column;
		width: 20%;
		margin-left: 3%;
	}

	.clientspartners a img {
		width: 100%;
		height: 100%;
		background: var(--altdark);
	}

	.clientspartners label	 {
		text-align: center;
		width: 100%;
		margin-top: 5px;
		color: var(--content-text);
		font-weight: 500;
	}
	
	.link-list {
		margin-top: 5px;
	}
	
	.link-list a,
	button.link-btn {
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 5px 15px;
	}
	
	a.link-left {
		float: left;
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 5px 15px;
		margin: 1rem;
	}
	
	a.link-right {
		float: right;
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 5px 15px;
		margin: 1rem;
	}
	
	.link-btn,
	a.link-btn {
		border-radius: 10px;
		border: 1px solid var(--secondary);
		/* padding: 2px 10px; */
		padding: 5px 15px;
		margin: 2rem;
		font-size: 1rem;
	}
	
	footer {
		font-size: 1rem;
		color: var(--altlight);
	}
	
	body[class] footer .footer{
		background: var(--altlight);
		color: var(--primary);
	}

    .intro {
      text-align: center;
      max-width: 800px;
      margin: auto;
    }

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

    .value-card {
      background: var(--secondary);
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
	    font-size: 1.8rem;
    }

    .value-card i {
      font-size: 1.2rem;
      color: var(--primary);
      margin-bottom: 1rem;
    }

	.value-card p {
	  font-size: 1.2rem;
	  margin-bottom: 1rem;
    color: var(--altdark);
	}

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

    .founder-card {
      background: var(--altlight);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
	    width: 25%;
    }

    .founder-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .founder-content {
      padding: 1rem;
    }

    .founder-content h3 {
      margin-bottom: 0.2rem;
      font-weight: 500;
    }

    .founder-content span {
      color: var(--altdark);
      font-size: 0.8rem;
      font-weight: bold;
    }

    .founder-content p {
      margin-top: 0.7rem;
      font-size: 0.9rem;
    }
	
	.slot-row.cta {
		background: var(--primary);
		border-radius:10px;
	}
	
	.slot-row.cta.emp-cta {
		background: #2a8ac3 !important;
		color: #fff !important;
	}
	.slot-row.cta.client-cta {
		background: #6ebe4e !important;
		color: #000 !important;
	}
	
	.slot-row.cta h2 {
		max-width: 30%;
		clear: right;
		float: left;
		font-weight: 500;
	}
	
	.slot-row.cta p {
		max-width: 40%;
		float: left;
	}
	
	.slot-row.cta div,
	.slot-row.cta .link-list {
		max-width: 30%;
		float: right;
		font-weight: 500;
	}
	
	.slot-row.cta div a:hover,
	.slot-row.cta .link-list a:hover {
		background: var(--secondary);
		color: var(--altlight);
		border-color: var(--secondary);
		font-weight: 500;
	}
	
	.slot-row.cta.client-cta div a:hover,
	.slot-row.cta.client-cta .link-list a:hover {
		background: var(--primary);
		color: var(--altlight);
		border-color: var(--secondary);
		font-weight: 500;
	}
	
	.slot-row.footer {
		max-height: 8%;
	}


/* from legal page */
/* ── HERO BANNER ── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  padding: 4rem 2rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-eyebrow {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-lt);
  margin-bottom: .75rem;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--white);
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-sub {
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  max-width: 560px;
  margin: 0 auto;
}

.hero-date {
  display: inline-block;
  margin-top: 1.5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: .3rem 1rem;
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .05em;
}

/* ── LAYOUT ── */
.page-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.info-box {
color: var(--primary);
}
.note-box {
color: var(--secondary);
}

/* ── TOC ── */
.toc {
  background: var(--white);
  border-left: 4px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 1.5rem 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.toc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: .75rem;
  font-weight: 600;
}

.toc-list {
font-size: 0.6em;
}

.toc ol {
  padding-left: 1.2rem;
}

.toc li {
  margin-bottom: .35rem;
}

.toc a {
  color: var(--teal);
  text-decoration: none;
  font-size: .9rem;
  transition: color .2s;
}
.toc a:hover { color: var(--navy); text-decoration: underline; }

/* ── SECTIONS ── */
.section {
  background: var(--white);
  border-radius: 10px;
  padding: 2.2rem 2.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  scroll-margin-top: 90px;
}

.section-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--warm-grey);
}

.section-num {
  width: 32px; height: 32px;
  background: var(--teal);
  border-radius: 50%;
  color: white;
  font-size: .8rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}

.section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--navy);
  font-weight: 600;
}

.section p {
  font-size: .95rem;
  color: var(--text);
  margin-bottom: .85rem;
}

.section p:last-child { margin-bottom: 0; }

.section ul {
  padding-left: 1.4rem;
  margin-bottom: .85rem;
}

.section ul li {
  font-size: .95rem;
  margin-bottom: .4rem;
  color: var(--text);
}

.section ul li::marker { color: var(--teal); }

/* ── CALLOUT BOX ── */
.callout {
  background: #eef7f7;
  border: 1px solid #b2d8d8;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: .9rem;
  color: #1f5c5c;
}

.callout strong { color: var(--navy); }

/* ── WARNING BOX ── */
.warning {
  background: #fef9ec;
  border: 1px solid #f0d070;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: .9rem;
  color: #7a5f10;
}

/* ################ */
/* from Privacy */

.logo-mark svg { width: 18px; height: 18px; fill: var(--sage-lt); }

/* ── LAYOUT ── */
.outer {
  max-width: 1060px;
  margin: 0 auto;
  padding: 3.5rem 2rem 6rem;
  /* display: grid; */
  /* grid-template-columns: 220px 1fr; */
  gap: 3rem;
  /* align-items: start; */
}

/* ── SIDEBAR TOC ── */

.sidebar {
  top: 90px;
}

.toc-compliance {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--warm-mid);
}

.compliance-label {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}

.compliance-badge {
  background: var(--sage-pale);
  border-radius: 6px;
  padding: .5rem .7rem;
  font-size: .75rem;
  color: var(--sage);
  margin-bottom: .4rem;
  font-weight: 400;
}

.s-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--sage-pale);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.s-icon svg {
  width: 18px; height: 18px;
  fill: var(--sage);
}

.section-body {
  padding: 1.6rem 2rem;
}

.section-body p {
  font-size: .92rem;
  margin-bottom: .9rem;
  color: var(--text);
}

.section-body p:last-child { margin-bottom: 0; }

.section-body ul, .section-body ol {
  padding-left: 1.3rem;
  margin-bottom: .9rem;
}

.section-body li {
  font-size: .92rem;
  margin-bottom: .4rem;
  color: var(--text);
}

.section-body li::marker { color: var(--sage); }

/* rights list */
.rights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: .9rem 0;
}

.right-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: var(--warm-off);
  border-radius: 8px;
  padding: .75rem .9rem;
}

.right-check {
  width: 20px; height: 20px;
  background: var(--sage);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}

.right-check svg { width: 11px; height: 11px; fill: white; }

.right-text {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.4;
}

@media (max-width:1300px) {
	body,
	footer {
		font-size: 0.9rem;
	}

	header .menu a {
		margin: 0 1%;
		padding: 3px 6px;
	}
}

/* small screens: stack panels vertically, shrink header slots */
@media (max-width:900px){

	.panels {
		width: 100%;
	}

	.bar .slot-row{
		padding:0 8px;
		display: flex;
	}

	.bar{padding:10px}

	.bar .slot{padding:6px 8px; flex: 1 1 0;}

	header.bar {overflow:visible;}

	header.bar .slot-row, footer.bar .slot-row{align-items:center}
	
	.btn {
		font-size: 1.2rem;
	}
	
	.main-overlay {
		position: relative;
	}
	
	footer.bar .slot-row {
		display: block;
		letter-spacing: 0;
	} 
	
	footer.bar .slot-row .slot {
		margin: 5px 0px;
	} 

	#h-left, 
	#h-right {
		background-size: contain;
		border-radius: 10px;
		background-color: unset;
		height: -webkit-fill-available;
		min-height: -webkit-fill-available;
	}

	header.bar .slot.center {
		text-align: center;
		max-width: 100px !important;
	}
	
	.hamburger {
		width: auto;
		height: 24px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
		z-index: 200;
		padding: 4px;
		margin: 0 25%;
	}
	
	.hamburger span {
		height: 3px;
		width: 100%;
		background: var(--primary);
		border-radius: 3px;
		transition: 0.3s ease;
	}
	
	.hamburger.active {
	  width: 34px;
	  height: 30px;
	}
	
	/* animate to X */
	.hamburger.active span:nth-child(1) {
	  transform: translateY(10px) rotate(45deg);
	}

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

	.hamburger.active span:nth-child(3) {
	  transform: translateY(-10px) rotate(-45deg);
	}
	
	.menu {
	  position: absolute;
	  top: 48px;
	  left: -90%;
	  transform: translateX(-50%);
	  backdrop-filter: blur(10px);
	  border-radius: 12px;
	  padding: 14px 0;
	  border: 1px solid rgba(255,255,255,0.15);
	  flex-direction: column;
	  min-width: 160px;
	  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
	  z-index: 300;
	  display: none;
	  background-color: var(--altdark);
	}
	
	.menu a {
	  padding: 10px 18px;
	  color: var(--altlight);
	  text-decoration: none;
	  text-align: center;
	}
	
	.menu.open {
	  display: flex;
	}
	
	.bg-video {
	  object-fit:cover;
	}
	
  .content-section {
	   width: 100%;
	   margin: 0 auto;
	   padding: 5% 5%;
	}
	
	.founders {
		display: block;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	
	.founder-card {
	  width: 100%;
	  margin-top: 2rem;
	}
	
	.slot-row.cta h2 {
		max-width: 100%;
		clear: unset;
		float: unset;
	}
	
	.slot-row.cta p {
		max-width: 100%;
		float: unset;
	}
	
	slot-row.cta div, 
	.slot-row.cta .link-list {
		max-width: 100%;
		float: unset;
	}
	
	.link-btn, a.link-btn {
		margin: 0;
	}
	
	.link-list {
		margin-top: 22px;
	}

	/* .outer {
	  grid-template-columns: 1fr;
	} */

	/*.sidebar { 
	  position: static; 
	}*/
}

/* very small: compress */
@media (max-width:600px) {

  .bar .slot {padding:1px 6px; flex: 1 1 0;}

  .panels {
    width: 100%;
  }

  a.panel { min-height:220px }
	
	header.bar .slot.center {
		text-align: center;
		max-width: 12% !important;
	}
	
	.hamburger {
	  margin: 0 0%;
  }
	
	.slot-row.cta h2 {
		max-width: 100%;
		clear: unset;
		float: unset;
	}
	
	.slot-row.cta p {
		max-width: 100%;
		float: unset;
	}
	
	slot-row.cta div, 
	.slot-row.cta .link-list {
		max-width: 100%;
		float: unset;
	}
	
	.link-btn, a.link-btn {
		margin: 0;
	}
	
	.link-list {
		margin-top: 22px;
	}
	
	footer {
		font-size: 0.7rem;
	}

	.content-section {
	   width: 100%;
	   margin: 0 auto;
	   padding: 1% 1%;
	}
	
  .content-section,
  .content-section.services,
  .content-section.about {
     margin-top: 25%;
     padding-bottom: 100%;
  }
  
  .content-section.clientspartners {
     margin-top: 40%;
  }
	
  .section-body { padding: 1.25rem 1.25rem; }
  .section-head { padding: 1.1rem 1.25rem; }

  .rights-grid {
    display: block;
  }

  .outer {
    padding: 3.5rem 2rem 18rem;
  }
}