/* Variables */
@font-face {
	font-family:'Kollektif Bold';
	src:url('../fonts/Kollektif-Bold.woff2') format('woff2'),
      url('../fonts/Kollektif-Bold.ttf') format('truetype');
	font-weight:600;
	font-style:normal;
}
:root {
  /* Colors */
  --bluegray:#6B7591;
  --navy:#182B61;
  --paleblue:#F6F9FC;
  /* Typography */
  --kollektif-stack:'Kollektif Bold',sans-serif;
  --roboto-stack:'Roboto',sans-serif;
}

/* Typography */
body { font-family:var(--roboto-stack); }
h1 + h2 { padding:min(1.75em,2.5rem) 0; }

/* Layout */
main {
	container:main / inline-size;
	width:max(100%, 320px);
}

/* Hero Area */
#hero {
  align-items:center;
  background:url('../img/splash.jpg') bottom center / cover no-repeat scroll #081D69;
  box-sizing:border-box;
  color:white;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  height:auto;
  min-height:95vh;
  justify-content:flex-end;
  padding:min(8.75% + 2rem, 5.375em) min(8.75%, 5em) min(12.5%, 4.5em);
  position:relative;
  z-index:1;
}
@supports (-webkit-overflow-scrolling:touch) { #hero { background-image:none; background-attachment:scroll; } }
#hero div.content { width:min(100%,80em); }
#hero div.content > * { max-width:46.25rem; }
#hero h1,
footer h4,
body.inside nav h4 {
  font-family:var(--kollektif-stack);
  font-kerning:normal;
  font-size:clamp(4em, 13.3333vw, 7em);
  font-variant-ligatures:normal;
  letter-spacing:-0.025em;
  line-height:1em;
  margin:0;
  text-transform:lowercase;
}
footer a { text-decoration:none; }
#hero h1 > span,
footer h4 > span,
body.inside nav h4 > span { letter-spacing:-0.045em; }
#hero h1 > span:first-of-type,
footer h4 > span:first-of-type,
body.inside nav h4 > span:first-of-type { letter-spacing:-0.0375em; }
#hero h1 > span.ligature,
footer h4 > span.ligature,
body.inside nav h4 > span.ligature { letter-spacing:normal; }
#hero h1[aria-hidden] + h1 { font-size:0; }
#hero h2,
body.inside #more h2 {
  font-size:clamp(1em, 3.3333vw, 1.75em);
  font-weight:400;
  letter-spacing:0.125em;
  line-height:min(1.75em, 2.5rem);
  text-transform:uppercase;
}
#hero p {
  font-size:clamp(1em, 3.3333vw, 1.25em); /* vw calculated at 480px */
  letter-spacing:0.03125em;
  line-height:clamp(1.75em, 5.8333vw, 2em); /* vw calculated at 480px */
}
@container main (min-width:912px) {
  #hero { padding:5.375em clamp(5em, 8.3333%, 7.5em) clamp(4.5em, 7.8889%, 6.5em); }
}
@container main (min-width:1440px) {
  body:not(.inside) #hero div.content > * {
    max-width:none;
    width:clamp(46.25rem,51.3889vw,65rem);
  }
  body:not(.inside) #hero h1:first-of-type { font-size:clamp(7em,7.7778vw,9.75em); }
  body:not(.inside) #hero h2 {
    font-size:clamp(1.75em,1.9444vw,2.25em);
    padding:clamp(2.5rem,2.7778vw,3.25rem) 0;
  }
  body:not(.inside) #hero p { font-size:clamp(1.25em,1.3889vw,1.75em); }
}


/* Navigation */
nav {
  box-sizing:border-box;
  left:0;
  max-width:90em;
  padding:min(8.75%,3.25em) min(8.75%,5em) 0; /* 8.75% = 28px @ 320vw, 48px @ 548px */
  position:absolute;
  top:0;
  width:100%;
}
@container main (min-width:90em) {
  #hero nav { left:50%; margin-left:-45em; }
}
nav ul {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  margin:-1.125rem -.5rem 0;
}
nav ul li,
nav ul li a { display:block; }
nav ul li a {
  border:2px solid transparent;
  /* border-radius:0.25em; */
  box-sizing:border-box;
  color:white;
  font-size:0.75em;
  font-weight:700;
  letter-spacing:0.125em;
  line-height:1rem;
  padding:calc(1rem - 2px) calc(.5rem - 2px);
  text-decoration:none;
  text-transform:uppercase;
}
nav ul li a:focus,
nav ul li a:hover { background:rgba(255,255,255,0.2); }
nav ul li a:focus {
  border:2px solid white;
  outline:none;
}
@container main (min-width:540px) {
  nav ul {
    gap:0.25rem;
    justify-content:flex-end;
    margin:-0.875rem -1rem 0;
  }
  nav ul li a {
    font-size:clamp(1em,2.7778vw,1.25em);
    line-height:1.25rem;
    padding:calc(.875rem - 2px) calc(1rem - 2px);
  }
}

/* Projects */
#projects {
  background:var(--paleblue);
  padding:min(15%, 7.5em) min(8.75%, 5em);
}
#projects ul,
body.inside #more ul {
  display:flex;
  flex-direction:column;
  gap:clamp(1.75em, 10.6060cqw, 2.5em);
}
#projects ul li.card,
body.inside #more ul li.card {
  background:white no-repeat left top;
  background-size:contain;
  /* box-shadow:0 0 4px rgba(24,43,97,0.05), 0 4px 8px rgba(24,43,97,0.1); */
  box-sizing:border-box;
  container:card / inline-size;
  display:block;
  padding:50% 0 0;
  position:relative;
  transform:scale(1);
  transition:transform 0.25s;
}
@container main (min-width:738px) {
  #projects ul,
  body.inside #more ul {
    flex-direction:row;
    flex-wrap:wrap;
    margin:0 auto;
    max-width:80em;
  }
  #projects ul li.card,
  body.inside #more ul li.card {
    padding:calc(25% - 1.25em) 0 0;
    width:calc(50% - 1.25em);
  }
}
@container main (min-width:912px) {
  #projects { padding:min(15%, 7.5em) clamp(5em, 8.3333%, 7.5em) clamp(5em, 8.3333%, 7.5em); }
}
#projects ul li.card:hover,
body.inside #more ul li.card:hover { transform:scale(1.06); }
#projects ul li.card div,
body.inside #more ul li.card div {
  background:white;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0.75em 1em;
  padding:clamp(0.75em, 4.2255cqw, 1.25em) clamp(1em, 5.6338cqw, 1.75em);
}
#projects ul li.card div > *,
body.inside #more ul li.card div > * { display:block; } 
#projects ul li.card div > span,
body.inside #more ul li.card div > span {
  color:var(--navy);
  font-size:0.75em;
  font-size:clamp(0.75em, 4.5455cqw, 1.25em);
  font-weight:700;
  letter-spacing:0.125em;
  line-height:min(2.3333em,2.75rem);
  padding-left:0.125rem;
  text-transform:uppercase;
}
#projects ul li.card div > h3,
body.inside #more ul li.card div > h3 {
  color:var(--navy);
  flex-grow:1;
  font-family:var(--kollektif-stack);
  font-kerning:normal;
  font-size:clamp(2.5em, 15.1515cqw, 4em);
  font-variant-ligatures:normal;
  letter-spacing:-0.025em;
  line-height:1em;
  margin:0;
  text-transform:lowercase;
}
#projects ul li.card div > h3 span.e,
#projects ul li.card div > h3 span.x,
body.inside#nexus h1 span.e,
body.inside#nexus h1 span.x,
body.inside #more ul li.card div > h3.span.e,
body.inside #more ul li.card div > h3.span.x { letter-spacing:-0.045em; }
#projects ul li.card div > h3 span.w,
body.inside#weconnectpartners h1 span.w,
body.inside #more ul li.card div > h3.span.w { letter-spacing:-.0625em; }
#projects ul li.card div > h3 span.ex,
body.inside#nexus h1 span.ex,
body.inside #more ul li.card div > h3.span.ex { letter-spacing:-0.1em; }
#projects ul li.card div > h3 + h3,
body.inside #more ul li.card div > h3 + h3 { font-size:0; }
#projects ul li.card div > h3 + span,
body.inside #more ul li.card div > h3 + span {
  color:var(--bluegray);
  font-weight:400;
  letter-spacing:0.0325em;
  padding-top:1.25rem;
  text-transform:none;
}
@container card (min-width:284px) {
  #projects ul li.card div > h3 + span,
  body.inside #more ul li.card div > h3 + span {
    font-size:clamp(1em, 5.6338cqw, 1.25em);
    line-height:clamp(1.75em, 9.8592cqw, 2.75rem);
    letter-spacing:0.025em;
    padding-top:clamp(1.5rem,1.6em,2rem);
  }
}
#projects ul li.card a,
body.inside #more ul li.card a {
  background:no-repeat right bottom;
  /* background-image: url('data:image/svg+xml,%3Csvg%20id%3D%27rightArrow%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2048%27%3E%3Cpath%20fill%3D%27%23182b61%27%20d%3D%27M29.85%2C24.84H13.82v-2.08h16.03l-7.5-7.5%2C1.47-1.46%2C10%2C10-10%2C10-1.47-1.46s7.5-7.5%2C7.5-7.5Z%27%2F%3E%3C%2Fsvg%3E'); */
  background-size:48px 48px;
  border:2px solid transparent;
  box-sizing:border-box;
  cursor:pointer;
  font-size:0;
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
#projects ul li.card a:focus,
body.inside #more ul li.card a:focus {
  border:2px solid var(--navy);
  outline:none;
}
#projects ul li#goKinetic,
#more ul li#goKinetic { background-image:url('../img/projects.goKinetic.jpg'); }
#projects ul li#kineticNexus,
#more ul li#kineticNexus { background-image:url('../img/projects.nexus.jpg'); }
#projects ul li#quotingTool,
#more ul li#quotingTool { background-image:url('../img/projects.quotingTool.jpg'); }
#projects ul li#WEConnectPartners,
#more ul li#WEConnectPartners { background-image:url('../img/projects.WEConnectPartners.jpg'); }

/* Footer */
footer {
  background:var(--bluegray);
  padding:.75em min(8.75%,5em);
}
footer .content { margin:0 auto; max-width:1280px; }
footer h4,
body.inside nav h4 {
  border-top:1px solid rgba(255,255,255,0.5);
  color:white;
  font-size:2em;
  order:1;
  padding:1rem 0;
  text-align:right;
  white-space:nowrap;
}
body.inside nav h4 { color:var(--navy); }
footer h4 + h4,
body.inside nav h4 + h4 {
  border:none;
  font-size:0;
  padding:0;
}
footer nav,
body.inside nav {
  order:2;
  padding:0;
  position:static;
}
footer nav ul { margin:0 -.5rem; }
@container main (min-width:912px) {
  footer .content,
  body.inside nav ul { display:flex; }
  footer h4 { border-top:none; }
  footer nav ul { margin:.5rem -.5rem; }
}
/* footer nav ul li a:focus { border-color:transparent; } */

/* Inside Pages */
/* Navigation */
body.inside nav {
  background:white;
  max-width:none;
  padding:0.75em min(8.75%,5em);
  position:fixed;
  z-index:2;
}
body.inside nav ul {
  margin-top:0;
  order:2;
}
body.inside nav a { color:var(--navy); }
body.inside main > nav a:focus {
  background-color:rgba(107,117,145,0.2);
  border-color:transparent;
}
body.inside nav h4 {
  display:none;
  border:none;
  line-height:1.3096em;
  order:1;
  padding:0 0 .1094em;
}
body.inside nav a {text-decoration:none;}
@container main (min-width:860px) {
  body.inside nav:not(.tabs) {
    display:flex;
    justify-content:space-between;
  }
  body.inside nav h4 { display:block; }
}
body.inside main { padding-top:4.5em; }
/* Hero */
body.inside { background:var(--paleblue); }
body.inside #hero {
  min-height:0;
  padding:50% 0 0;
}
body.inside #hero .content {
  box-sizing:border-box;
  color:var(--navy);
  padding:clamp(2em, 10vw, 4.25em) clamp(1.75em, 8.75vw, 5em);
  width:min(100%, 53.75em);
}
body.inside #hero .content {
  box-sizing:border-box;
  color:var(--navy);
  padding:clamp(2em, 10vw, 4.25em) clamp(1.75em, 8.75vw, 5em);
  width:min(100%, 53.75em);
}
body.inside#gokinetic #hero { background:url('../img/projects.goKinetic.jpg') top center / contain no-repeat var(--paleblue); }
body.inside#nexus #hero { background:url('../img/projects.nexus.jpg') top center / contain no-repeat var(--paleblue); }
body.inside#quotingtool #hero { background:url('../img/projects.quotingTool.jpg') top center / contain no-repeat var(--paleblue); }
body.inside#weconnectpartners #hero { background:url('../img/projects.WEConnectPartners.jpg') top center / contain no-repeat var(--paleblue); }
body.inside #hero .content { background:transparent; }
@container main (min-width:912px) {
  body.inside #hero {
    align-items:center;
    aspect-ratio:2/1;
    display:flex;
    justify-content:center;
    padding:0;
  }
  body.inside#gokinetic #hero { background:url('../img/projects.goKinetic.jpg') center center / cover no-repeat #22A66A; }
  body.inside#nexus #hero { background:url('../img/projects.nexus.jpg') center center / cover no-repeat #F06625; }
  body.inside#quotingtool #hero { background:url('../img/projects.quotingTool.jpg') center center / cover no-repeat #6C449A; }
  body.inside#weconnectpartners #hero { background:url('../img/projects.WEConnectPartners.jpg') center center / cover no-repeat #302F34; }
  body.inside #hero .content {
    background:white;
    box-shadow:0 0 20px rgba(0,0,0,0.075);
  }  
}
body.inside #hero .content h2 {
  font-weight:700;
  padding-bottom:0;
}
body.inside article,
body.inside #more {
  box-sizing:border-box;
  margin:0 auto;
  padding:0 clamp(1.75rem, 8.75vw, 5rem);
  width:min(100%, 53.75rem);
}
body.inside article {
  color:var(--navy);
  font-size:clamp(1em, 5vw, 1.375em);
  line-height:2em;
  padding-bottom:2.9091em;
}
body.inside article h3 {
  font-size:clamp(1.25rem, 6.25vw, 2rem);
  letter-spacing:0.125em;
  margin:0;
  padding-top:2em;
  text-transform:uppercase;
}
@container main (min-width:1440px) {
  body.inside article,
  body.inside #more { width:clamp(53.75rem, 59.7222vw, 63.75rem); }
  body.inside article { font-size:clamp(1.375em, 1.5278vw, 1.6875em); }
  body.inside article h3 { font-size:clamp(2rem, 2.2222vw, 2.25rem); }
}
body.inside article p,
body.inside article li,
body.inside article figure {
  letter-spacing:0.01em;
  padding-top:1.8182em;
}
body.inside article ul { margin-left:1em; }
body.inside article figure img {
  box-shadow:0 0 0.25rem rgba(24, 43, 97, 0.05), 0 0.25rem 0.5rem rgba(24, 43, 97, 0.1);
  display:block;
  width:100%;
}
body.inside article figure.half {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
}
body.inside article figure figcaption {
  border-bottom:1px solid rgba(107,117,145,0.25);
  color:var(--bluegray);
  font-size:0.8182em;
  line-height:2em;
  padding:2.2222em 0;
}
body.inside article figure.half figcaption {
  grid-column-start:1;
  grid-column-end:3;
  padding-top:0;
}
body.inside #more { padding-bottom:3em; }
body.inside #more h2 {
  border-top:1px solid rgba(107,117,145,0.25);
  color:var(--bluegray);
  font-weight:700;
  padding:0.8571em 0;
}

/* Galleries */
div.gallery {
  box-sizing:border-box;
	display:grid;
	gap:1rem;
  margin:0 auto;
  max-width:1512px;
	padding:1.75em clamp(1.75em, 8.75vw, 4.5em) clamp(3.5em, 17.5vw, 4.25em);
}
div.gallery img {
	background-clip:border-box;
	/*border-radius:8px;*/
	box-shadow: 0 0 0.25rem rgba(24, 43, 97, 0.05), 0 0.25rem 0.5rem rgba(24, 43, 97, 0.1);
	width:100%;
}
@container main (min-width:480px) {
  div.gallery { grid-template-columns:1fr 2fr; }
  div.gallery.half { grid-template-columns:1fr 1fr; }
  div.gallery img.full { grid-column:span 2; }
}
@container main (min-width:1260px) {
  #portfolio li div.grid { max-width:1260px; }
  #portfolio li div.grid {
      gap:24px;
      margin:-88px auto 0;
      padding:0 36px 72px;
  }
}

/* Tab Bar */
body.inside nav.tabs {
  background:none;
  margin:0 auto;
  padding:0 min(8.75%,5em);
  position:static;
  width:min(100%, 53.75rem);
}
@container main (min-width:912px) {
  body.inside nav.tabs { padding:1.5em min(8.75%,5em) 0; }
}
@container main (min-width:1440px) {
  body.inside nav.tabs { width:clamp(53.75rem, 59.7222vw, 63.75rem); }
}
body.inside nav.tabs ul {
  border-bottom:1px solid rgba(107,117,145,0.5);
  gap:2em;
  justify-content:flex-start;
  margin:0;
}
body.inside nav.tabs ul li { margin-bottom:-1px; }
body.inside nav.tabs ul li a {
  border-bottom:4px solid transparent;
  border-left:none;
  border-right:none;
  border-top:none;
  color:var(--bluegray);
  cursor:pointer;
  padding:1.375rem 0 calc(1.375rem - 4px);
  position:relative;
}
body.inside nav.tabs ul li a:focus,
body.inside nav.tabs ul li a:hover { border-bottom-color:var(--bluegray); }
body.inside nav.tabs ul li a.current,
body.inside nav.tabs ul li a.current:focus,
body.inside nav.tabs ul li a.current:hover {
  border-bottom-color:var(--navy);
  color:var(--navy);
}
body.inside nav.tabs ul li a:focus { background:transparent; }
body.inside nav.tabs ul li a:focus::before {
  background:var(--bluegray);
  content:'';
  height:calc(100% + 4px);
  left:-1em;
  opacity:0.2;
  position:absolute;
  top:0;
  width:calc(100% + 2em);
  z-index:-1;
}

/* Animation */
html { scroll-behavior:smooth; }
@media screen and (prefers-reduced-motion:reduce) {
	html { scroll-behavior:auto; }
}

/* @keyframes appear {
  entry 0% {
    opacity:0;
    transform:translateY(4em);
  }
  entry 100%,
  exit 0%,
  exit 100% {
    opacity:1;
    transform:translateY(0);
  }
  /* entry 100% { transform:rotateX(0); }
} */
/* #projects ul li {
  animation:linear appear;
  animation-timeline:view();
  opacity:0;
  transform:translateY(4em);
  transition:opacity 0.25s, transform 0.25s;
} */