:root {
  --palette-1: #ff9d02ff;
  --palette-2: #317b74ff;
  --palette-3: #efefefff;
  --palette-4: #faf8f4ff;
  --palette-5: #2b2e2aff;
} 
 :root {

  --color-dark: #202020;
  --color-dark-glare: lch(from var(--color-dark) calc(l + 20) c h);
  --color-dark-shade: lch(from var(--color-dark) calc(l - 20) c h);

  --color-medium: #dfdfdf;

  --color-light: var(--palette-4);
  --color-light-glare: lch(from var(--color-light) calc(l + 30) c h);
  --color-light-shade: lch(from var(--color-light) calc(l - 20) c h);

  --color-light-alpha: rgba(from var(--color-light) r g b .1);

  --color-primary: var(--palette-1);
  --color-primary-glare: lch(from var(--color-primary) calc(l + 20) c h);
  --color-primary-shade: lch(from var(--color-primary) calc(l - 20) c h);

  --color-secondary: var(--palette-2);
  --color-secondary-glare: lch(from var(--color-secondary) calc(l + 20) c h);
  --color-secondary-shade: lch(from var(--color-secondary) calc(l - 20) c h);
  
  --color-tertiary: var(--palette-3);
  --color-tertiary-glare: lch(from var(--color-tertiary) calc(l + 20) c h);
  --color-tertiary-shade: lch(from var(--color-tertiary) calc(l - 20) c h);

  --color-quarternary: var(--palette-4);
  --color-quarternary-glare: lch(from var(--color-quarternary) calc(l + 20) c h);
  --color-quarternary-shade: lch(from var(--color-quarternary) calc(l - 20) c h);

  --color-quintary: var(--palette-5);
  --color-quintary-glare: lch(from var(--color-quintary) calc(l + 20) c h);
  --color-quintary-shade: lch(from var(--color-quintary) calc(l - 20) c h);

  --flow-space: var(--size-600, 1.33rem);
  
  --size-100: calc(1rem * 0.66);
  --size-200: calc(1rem * 0.69);
  --size-300: calc(1rem * 0.75);
  --size-400: calc(1rem * 1);
  --size-500: calc(1rem * 1.33);
  --size-600: calc(1rem * 1.77);
  --size-700: calc(1rem * 2.36);
  --size-800: calc(1rem * 3.15);
  --size-900: calc(1rem * 4.2);
  --size-major: calc(1rem * 5.6);
}

.color-dark {color: var(--color-dark) !important;}
.color-dark-shade {color: var(--color-dark-shade) !important;}
.color-dark-glare {color: var(--color-dark-glare) !important;}
.color-light {color: var(--color-light) !important;}
.color-light-shade {color: var(--color-light-shade) !important;}
.color-light-glare {color: var(--color-light-glare) !important;}
.color-light-alpha {color: var(--color-light-alpha) !important;}
.color-primary {color: var(--color-primary) !important;}
.color-primary-shade {color: var(--color-primary-shade) !important;}
.color-primary-glare {color: var(--color-primary-glare) !important;}
.color-secondary {color: var(--color-secondary) !important;}
.color-secondary-shade {color: var(--color-secondary-shade) !important;}
.color-secondary-glare {color: var(--color-secondary-glare) !important;}
.color-tertiary {color: var(--color-tertiary) !important;}
.color-tertiary-shade {color: var(--color-tertiary-shade) !important;}
.color-tertiary-glare {color: var(--color-tertiary-glare) !important;}
.color-quarternary {color: var(--color-quarternary) !important;}
.color-quarternary-shade {color: var(--color-quarternary-shade) !important;}
.color-quarternary-glare {color: var(--color-quarternary-glare) !important;}
.color-quintary {color: var(--color-quintary) !important;}
.color-quintary-shade {color: var(--color-quintary-shade) !important;}
.color-quintary-glare {color: var(--color-quintary-glare) !important;}

.hover-color-dark { &:hover, &:focus { color: var(--color-dark) !important; }}
.hover-color-dark-shade { &:hover, &:focus { color: var(--color-dark-shade) !important; }}
.hover-color-dark-glare { &:hover, &:focus { color: var(--color-dark-glare) !important; }}
.hover-color-light { &:hover, &:focus { color: var(--color-light) !important; }}
.hover-color-light-shade { &:hover, &:focus { color: var(--color-light-shade) !important; }}
.hover-color-light-glare { &:hover, &:focus { color: var(--color-light-glare) !important; }}
.hover-color-light-alpha { &:hover, &:focus {color: var(--color-light-alpha) !important; }}
.hover-color-primary { &:hover, &:focus { color: var(--color-primary) !important; }}
.hover-color-primary-shade { &:hover, &:focus { color: var(--color-primary-shade) !important; }}
.hover-color-primary-glare { &:hover, &:focus { color: var(--color-primary-glare) !important; }}
.hover-color-secondary { &:hover, &:focus { color: var(--color-secondary) !important; }}
.hover-color-secondary-shade { &:hover, &:focus { color: var(--color-secondary-shade) !important; }}
.hover-color-secondary-glare { &:hover, &:focus { color: var(--color-secondary-glare) !important; }}
.hover-color-tertiary { &:hover, &:focus { color: var(--color-tertiary) !important; }}
.hover-color-tertiary-shade { &:hover, &:focus { color: var(--color-tertiary-shade) !important; }}
.hover-color-tertiary-glare { &:hover, &:focus { color: var(--color-tertiary-glare) !important; }}
.hover-color-quarternary { &:hover, &:focus { color: var(--color-quarternary) !important;}}
.hover-color-quarternary-shade { &:hover, &:focus { color: var(--color-quarternary-shade) !important;}}
.hover-color-quarternary-glare { &:hover, &:focus { color: var(--color-quarternary-glare) !important;}}
.hover-color-quintary { &:hover, &:focus { color: var(--color-quintary) !important;}}
.hover-color-quintary-shade { &:hover, &:focus { color: var(--color-quintary-shade) !important;}}
.hover-color-quintary-glare { &:hover, &:focus { color: var(--color-quintary-glare) !important;}}

.bg-dark {background-color: var(--color-dark) !important;}
.bg-dark-shade {background-color: var(--color-dark-shade) !important;}
.bg-dark-glare {background-color: var(--color-dark-glare) !important;}
.bg-light {background-color: var(--color-light) !important;}
.bg-light-shade {background-color: var(--color-light-shade) !important;}
.bg-light-glare {background-color: var(--color-light-glare) !important;}
.bg-light-alpha {background-color: var(--color-light-alpha) !important;}
.bg-primary {background-color: var(--color-primary) !important;}
.bg-primary-shade {background-color: var(--color-primary-shade) !important;}
.bg-primary-glare {background-color: var(--color-primary-glare) !important;}
.bg-secondary {background-color: var(--color-secondary) !important;}
.bg-secondary-shade {background-color: var(--color-secondary-shade) !important;}
.bg-secondary-glare {background-color: var(--color-secondary-glare) !important;}
.bg-tertiary {background-color: var(--color-tertiary) !important;}
.bg-tertiary-shade {background-color: var(--color-tertiary-shade) !important;}
.bg-tertiary-glare {background-color: var(--color-tertiary-glare) !important;}
.bg-quarternary {background-color: var(--color-quarternary) !important;}
.bg-quarternary-shade {background-color: var(--color-quarternary-shade) !important;}
.bg-quarternary-glare {background-color: var(--color-quarternary-glare) !important;}
.bg-quintary {background-color: var(--color-quintary) !important;}
.bg-quintary-shade {background-color: var(--color-quintary-shade) !important;}
.bg-quintary-glare {background-color: var(--color-quintary-glare) !important;}

.hover-bg-dark { &:hover, &:focus { background-color: var(--color-dark) !important; }}
.hover-bg-dark-shade { &:hover, &:focus { background-color: var(--color-dark-shade) !important; }}
.hover-bg-dark-glare { &:hover, &:focus { background-color: var(--color-dark-glare) !important; }}
.hover-bg-light { &:hover, &:focus { background-color: var(--color-light) !important; }}
.hover-bg-light-shade { &:hover, &:focus { background-color: var(--color-light-shade) !important; }}
.hover-bg-light-glare { &:hover, &:focus { background-color: var(--color-light-glare) !important; }}
.hover-bg-light-alpha { &:hover, &:focus {background-color: var(--color-light-alpha) !important; }}
.hover-bg-primary { &:hover, &:focus { background-color: var(--color-primary) !important; }}
.hover-bg-primary-shade { &:hover, &:focus { background-color: var(--color-primary-shade) !important; }}
.hover-bg-primary-glare { &:hover, &:focus { background-color: var(--color-primary-glare) !important; }}
.hover-bg-secondary { &:hover, &:focus { background-color: var(--color-secondary) !important; }}
.hover-bg-secondary-shade { &:hover, &:focus { background-color: var(--color-secondary-shade) !important; }}
.hover-bg-secondary-glare { &:hover, &:focus { background-color: var(--color-secondary-glare) !important; }}
.hover-bg-tertiary { &:hover, &:focus { background-color: var(--color-tertiary) !important; }}
.hover-bg-tertiary-shade { &:hover, &:focus { background-color: var(--color-tertiary-shade) !important; }}
.hover-bg-tertiary-glare { &:hover, &:focus { background-color: var(--color-tertiary-glare) !important; }}
.hover-bg-quarternary { &:hover, &:focus { background-color: var(--color-quarternary) !important;}}
.hover-bg-quarternary-shade { &:hover, &:focus { background-color: var(--color-quarternary-shade) !important;}}
.hover-bg-quarternary-glare { &:hover, &:focus { background-color: var(--color-quarternary-glare) !important;}}
.hover-bg-quintary { &:hover, &:focus { background-color: var(--color-quintary) !important;}}
.hover-bg-quintary-shade { &:hover, &:focus { background-color: var(--color-quintary-shade) !important;}}
.hover-bg-quintary-glare { &:hover, &:focus { background-color: var(--color-quintary-glare) !important;}}


.flow-space-300 {
  --flow-space:0.75rem
}
.flow-space-400 {
  --flow-space:1rem
}
.flow-space-500 {
  --flow-space:1.33rem
}
.flow-space-600 {
  --flow-space:1.77rem
}
.flow-space-700 {
  --flow-space:2.36rem
}
.flow-space-800 {
  --flow-space:3.15rem
}
.flow-space-900 {
  --flow-space:4.2rem
}
.flow-space-major {
  --flow-space:5.6rem
}

.gap-top-300 {
  margin-top:.75rem !important;
}
.gap-top-400 {
  margin-top:1rem !important;
}
.gap-top-500 {
  margin-top:1.33rem !important;
}
.gap-top-600 {
  margin-top:1.77rem !important;
}
.gap-top-700 {
  margin-top:2.36rem !important;
}
.gap-top-800 {
  margin-top:3.15rem !important;
}
.gap-top-900 {
  margin-top:4.2rem !important;
}
.gap-top-major {
  margin-top:5.6rem !important;
}
.leading-double {
  line-height: 2;
}
.leading-loose {
  line-height:1.7
}
.leading-tight {
  line-height:1.3
}
.leading-flat {
  line-height:1.1
}
.measure-micro {
  max-width:10ch
}
.measure-small {
  max-width:18ch
}
.measure-compact {
  max-width:30ch
}
.measure-short {
  max-width:40ch
}
.measure-long {
  max-width:65ch
}
.text-300 {
  font-size:.75rem
}
.text-400 {
  font-size:1rem
}
.text-500 {
  font-size:1.33rem
}
.text-600 {
  font-size:1.77rem
}
.text-700 {
  font-size:2.36rem
}
.text-800 {
  font-size:3.15rem
}
.text-900 {
  font-size:4.2rem
}
.text-major {
  font-size:5.6rem
}
.weight-normal {
  font-weight:400
}
.weight-bold {
  font-weight:900
}

@media screen and (min-width: 42em) {
  .md:flow-space-300 {
    --flow-space:0.75rem
  }
  .md\:flow-space-400 {
    --flow-space:1rem
  }
  .md\:flow-space-500 {
    --flow-space:1.33rem
  }
  .md\:flow-space-600 {
    --flow-space:1.77rem
  }
  .md\:flow-space-700 {
    --flow-space:2.36rem
  }
  .md\:flow-space-800 {
    --flow-space:3.15rem
  }
  .md\:flow-space-900 {
    --flow-space:4.2rem
  }
  .md\:flow-space-major {
    --flow-space:5.6rem
  }
  .md\:gap-top-300 {
    margin-top:.75rem
  }
  .md\:gap-top-400 {
    margin-top:1rem
  }
  .md\:gap-top-500 {
    margin-top:1.33rem
  }
  .md\:gap-top-600 {
    margin-top:1.77rem
  }
  .md\:gap-top-700 {
    margin-top:2.36rem
  }
  .md\:gap-top-800 {
    margin-top:3.15rem
  }
  .md\:gap-top-900 {
    margin-top:4.2rem
  }
  .md\:gap-top-major {
    margin-top:5.6rem
  }
  .md\:measure-micro {
    max-width:10ch
  }
  .md\:measure-compact {
    max-width:30ch
  }
  .md\:measure-short {
    max-width:40ch
  }
  .md\:measure-long {
    max-width:65ch
  }
  .md\:text-300 {
    font-size:.75rem
  }
  .md\:text-400 {
    font-size:1rem
  }
  .md\:text-500 {
    font-size:1.33rem
  }
  .md\:text-600 {
    font-size:1.77rem
  }
  .md\:text-700 {
    font-size:2.36rem
  }
  .md\:text-800 {
    font-size:3.15rem
  }
  .md\:text-900 {
    font-size:4.2rem
  }
  .md\:text-major {
    font-size:5.6rem
  }
}
@media screen and (min-width:62em) {
  .lg\:flow-space-300 {
    --flow-space:0.75rem
  }
  .lg\:flow-space-400 {
    --flow-space:1rem
  }
  .lg\:flow-space-500 {
    --flow-space:1.33rem
  }
  .lg\:flow-space-600 {
    --flow-space:1.77rem
  }
  .lg\:flow-space-700 {
    --flow-space:2.36rem
  }
  .lg\:flow-space-800 {
    --flow-space:3.15rem
  }
  .lg\:flow-space-900 {
    --flow-space:4.2rem
  }
  .lg\:flow-space-major {
    --flow-space:5.6rem
  }
  .lg\:gap-top-300 {
    margin-top:.75rem
  }
  .lg\:gap-top-400 {
    margin-top:1rem
  }
  .lg\:gap-top-500 {
    margin-top:1.33rem
  }
  .lg\:gap-top-600 {
    margin-top:1.77rem
  }
  .lg\:gap-top-700 {
    margin-top:2.36rem
  }
  .lg\:gap-top-800 {
    margin-top:3.15rem
  }
  .lg\:gap-top-900 {
    margin-top:4.2rem
  }
  .lg\:gap-top-major {
    margin-top:5.6rem
  }
  .lg\:measure-micro {
    max-width:10ch
  }
  .lg\:measure-compact {
    max-width:30ch
  }
  .lg\:measure-short {
    max-width:40ch
  }
  .lg\:measure-long {
    max-width:65ch
  }
  .lg\:text-300 {
    font-size:.75rem
  }
  .lg\:text-400 {
    font-size:1rem
  }
  .lg\:text-500 {
    font-size:1.33rem
  }
  .lg\:text-600 {
    font-size:1.77rem
  }
  .lg\:text-700 {
    font-size:2.36rem
  }
  .lg\:text-800 {
    font-size:3.15rem
  }
  .lg\:text-900 {
    font-size:4.2rem
  }
  .lg\:text-major {
    font-size:5.6rem
  }
}

.radius {
  border-radius: var(--radius-size, 1rem);
}

.radius-100 {
  border-radius: 100%;
} 
 .about-more {

  & ul.nationalities {
    margin-top: var(--size-600) !important;
    list-style: none;
    grid-gap: 0 var(--size-600);
    padding: var(--size-300) var(--size-600) var(--size-600) !important;
    line-height: 2.7;

    & li {
      border-bottom: 1px solid #0002;
      word-spacing: 1ex;
    }
  }

  & ul.credentials {
    margin-top: var(--size-800);
    padding:var(--size-800);

    li {
      display: flex;
      flex-direction: column;
      gap: 2ex;
      text-align: center;
      filter: brightness(.95);
      transition: .5s;
      max-width: 240px;

      & > em {
        padding: var(--size-100);
        font-size: var(--size-400);
        max-width: 80%;
        margin: auto;
      }

      & img {
        height: 5rem;
        margin: 1ex;
        object-fit: contain;
        object-position: top;
        
        /*
        border: 10px ridge currentColor;
        box-shadow: inset 0 0 0 2ex var(--color-quarternary-glare), inset 0 0 calc(2ex + 4px) var(--color-dark), 0 1px 4px #0006;
        */
        scale: .95;
        transition-property: scale;
        transition-duration: .2s;
      }

      &:hover { 
        filter: brightness(1);
        & img {
          z-index: 1;
          scale: 1;
        }
      }
    }

    &:has(li:hover) li:not(:hover) {
      filter: brightness(.9) saturate(.7);
      transition: .75s .25s;
    }
  }

  & p > img {
    aspect-ratio: 4/3 !important;
    height: auto;
    object-fit: cover;
    object-position: top;
    overflow: hidden;
    border: 1px solid var(--color-light-alpha);
    width: 100%;
  }
} 
 .avatar {
  aspect-ratio: 1 !important;
  overflow: hidden;
  min-height: calc(var(--size-600) * 4);
  min-width: calc(var(--size-600) * 4);
  color: var(--color-light-shade);
  font-size: var(--size-100);
  text-align: center;
  object-fit: cover;
  object-position: top center;
  border: 2px solid currentColor;
} 
 .button {
	--box-shadow-color: #0000;
	border-radius: calc(var(--size-100)  /2);
	border: 0px solid transparent;
	box-shadow: inset 0 0 0 2px var(--box-shadow-color);
	display: inline-block;
	font-weight: bold;
	line-height: inherit;
	outline-offset: 0;
	padding: 0.5rem 2rem;

	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	
	transition-property: outline, color, background;
	transition-duration: .25s;
	
	&:not([class*="bg-color-"]) {
		background: var(--color-primary);
	}

	&:not([class*="color-"]) {
		color: var(--color-light);
	}

	
  
	&:focus,
  	&:hover {
		background: var(--color-primary-shade);
		color: var(--color-light-glare);
		border-color: var(--color-primary);
		transition-delay: 0s;
		transition-duration: .1s;
	}

	/* Add a ghost modifier */
	&[data-variant='ghost'] {
		background: transparent !important;
		color: var(--color-secondary-glare);
    	--box-shadow-color: currentColor;

		&:focus,
		&:hover {
			color: var(--color-secondary);
		}

		&:is([class*="bg-secondary"] .button, [class*="bg-secondary-dark"] .button) {
			
			&:focus,
			&:hover {
				color: var(--color-light-glare);
			}
		}

	}

} 
 .contact-options {
  & ul {
    display: grid;
    gap: var(--flow-space);
    background: white;
    border-radius: var(--size-200);
    padding: calc(var(--flow-space) * 2) !important;
    
    @media (max-width: 42em) {
      padding: calc(var(--size-200));
    }

    & li {
      border-radius: var(--size-200);
      background-color: var(--color-light);
      grid-column: 1 / -1;
      gap: 0 var(--size-500);
      padding: var(--size-400);
      
      & > * { 
        grid-column: 2 / -1 ;
      }

      & a {
        color: var(--color-dark-glare);
        text-decoration-color: transparent;

        &:hover {
          color: var(--color-dark-shade);
          text-decoration-color: currentColor;
        }
      }

      & > [class^="material-symbols"] {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 3rem;
        height: 3rem;
        text-align: center;
         
        line-height: 3rem;
        border-radius: 100%;
        background: var(--color-light-glare);
        place-self: center;
      }

      & strong {
        text-transform: capitalize;
        color: var(--color-dark-shade);
        
        @media (max-width: 42em) {
         display: none;
        }
      }
    }
  }
  
  & ul.subject {
    margin:0;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-200) var(--size-400);

    & li {
      padding: var(--size-200);
      & label {
        display: block;
        cursor: pointer;
      }

      &:has(input:checked) {
        background-color: var(--color-secondary);
        color: var(--color-light)
      }
    }
  }

  & > * {
    background: white;
    border-radius: var(--size-200);
    padding: calc(var(--size-200) * 3);
    @media (max-width: 42em) {
      padding: calc(var(--size-200));
    }
  }

  & figure {
    
    padding: var(--size-800);

  }
} 
 .courses-landing {
  
  & article:nth-child(even) {
    background-color: var(--color-light);
  }

  @media screen and (min-width: 42em) {

    grid-auto-flow: dense;
    
    & figure {

      padding: var(--size-700);

      & figcaption {
        grid-column: 1 / span 6;
      }
  
      & .gallery__media {
        grid-column: 8 / span 6;
        grid-row: 1;
        position: relative;
        background-color: var(--color-light-glare);

        & img {
          height: 100% !important;
          opacity: .75;
          --inset: var(--size-100);
          clip-path: xywh(
            var(--inset) var(--inset) calc(100% - calc(var(--inset) * 2)) calc(100% - calc(var(--inset) * 2))
          );

          transition: clip-path .2s, opacity .25s .05s;

          &[alt*="logo"] {
            max-height: 160px;
          }
        }
      }

      &:hover, &:focus-within {
        & .gallery__media {
          & img {
            --inset: 0rem;
            opacity: 1;
          }
        }
      }

      &:target {
        & img {
          opacity: 1;
        }
        & p {
          color: var(--color-dark-shade) !important;
        }
      }

      &:not(:target) {
        a.button {
          background-color: transparent !important;
          color: var(--color-secondary-glare);
          border: 2px solid currentColor!important;
        }
      }

      &:nth-child(even) {
        & figcaption {
          grid-column: 8 / span 5;
        }
    
        & .gallery__media {
          grid-column: 1 / span 6;
        } 
      }
    }
  }
}

.course-item {

  & .hero__inner {
    margin-top: 0;
    opacity: 0;
    scale: .99;
    translate: 0 1ex;
    --to-opacity: 1;
    --to-scale: 1;
    --to-translate: 0 0;
    animation: fade .5s .25s cubic-bezier(0.165, 0.84, 0.44, 1) 1 normal forwards;

    & .hero__content {
      padding: var(--flow-space);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(.25ex);

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--color-secondary-shade);
        opacity: .85;
        z-index: 0;
      }

      & > * {
        position: relative;
        z-index: 1;
      }

      & .headline {
        
      }
    }
  }

  & .hero__image {
    aspect-ratio:21/9;
    width:100%;
    height: 100%;
    object-fit: cover;
    position:absolute;
    inset:0; margin:0;
    pointer-events:none;
    --to-opacity: 1;
    --to-scale: 1;
    opacity:0;
    z-index:0;
    animation: fade .5s .2s cubic-bezier(0.165, 0.84, 0.44, 1) 1 normal forwards;
  }

  & .course-contents .grid {
    padding: var(--flow-space);

    & > *:first-of-type {
      grid-column: 1 / span 7;
    }
    & > *:nth-of-type(even) {
      grid-column: 9 / span 3;
      margin: 0;
    }
  }
} 
 .cta {
	
	/* This is a dark panel, so we need to flip the selection styles */
	::selection {
		background: var(--color-light);
		color: var(--color-dark-shade);
	}

	& .cta__inner {
		display: flex;
		flex-direction: column;
		gap: var(--flow-space);
	}

  @media (min-width: 42em) {
  
		& .cta__inner {
			display: grid;
			grid-gap: var(--size-700) var(--size-500);
			grid-template-columns: repeat(12, 1fr);

			@supports (display: grid) {
				> * {
					margin: 0;
				}
			}
		}

		& .cta__heading {
			grid-column: 2/-2;
			margin: auto;
			text-align: center;
			font-weight: 400;
		}

		& .cta__summary {
			grid-row: 2;
			grid-column: 2/-2;
			text-align: center;
			margin: auto;
		}

		& .cta__action {
			grid-row: 3;
			grid-column: 2/-2;
			text-align: center;
			margin: auto;
		}
	}

  @media (min-width: 62em) {

    & .cta__inner {
      grid-gap: var(--flow-space);
    }
  
    & .cta__summary {
      grid-column: 1/13;
    }
  
    & .cta__action {
      grid-column: 1/13;
    }
  }
}
 
 form {

  --auto-grid-gap: var(--size-400);

  & fieldset {
    border: 1px solid transparent;

    display: flex;
    flex-direction: column;
    gap: var(--auto-grid-gap) !important;
    padding: 0;
    margin: 0;
    position: relative;
    

    &[disabled] {
      cursor: wait;
      filter: saturate(0);
      & > * {
        cursor: wait;
      }
    }

    &:has(input) {
      &::after {
        content: 'een momentje!';
        inset: 0;
        position: absolute;
        text-align: center;
        background: #fffc;
        opacity: 0;
        place-content: center;
        pointer-events: none;
      }

      &[disabled] {
        &::after {
          opacity: 1;
        }
      }
    }

    &:last-of-type {
      margin-top: var(--flow-space);
      justify-content: end;

      @media (min-width: 32rem) {
        flex-direction: row;
      }
    }

    & > label {
      align-content: start;
      font-weight: 600;
      grid-column: 1 / -1;
      padding-block-start: calc(2px + 0.75rem);
      text-transform: capitalize;

      &:has(input[type="checkbox"]),
      &:has(input[type="radio"]) {
        grid-column: unset;
        display: flex;
        gap: 1ex;
        align-items: baseline;
      }
    }
    
    & > span {
      grid-column: 1 / -1;
      font-weight: 600;
      padding-block-start: calc(2px + 0.75rem);
    }

    & div.flex{
      display: flex;
      flex-wrap: wrap;
      gap: var(--size-400, 2rem);
      grid-column: 1 / -1;
      align-content: center;
      text-transform: capitalize;
      
      & label {
        display: flex;
        gap: .5ex;
        color: var(--color-dark-glare);
        &:has(input:checked) {
          color: var(--color-dark-shade);
        }
      }
    }

    & input,
    & textarea {
      grid-column: 1 / -1;
      border-radius: calc(var(--size-100) /2);
      border-style: solid;
      border-width: 2px;
      font-size: inherit;
      padding: 0.75rem 1rem;
      resize: block;
      accent-color: var(--color-secondary);
      
      &:focus {
        border-color: var(--color-secondary);
        outline-offset: -2px !important;
        outline-color: transparent !important;
        outline-style: solid;
        transition: outline .3s;

        & + span {
          color: var(--color-dark-shade);
        }
      }
      &[type="checkbox"],
      &[type="radio"] {
        grid-column: 1;
      }
    }
  }
} 
 @property --blur-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.gallery__item {
  & .gallery__heading {
    word-wrap: break-word;
  }
  
  & .gallery__media {
    & a {
      height: 100%;
      display: block;
    }
    & img {
      height: auto;
      width: 100% !important;
      object-fit: cover;
    }
  }
}

/* logos */
.mini-gallery {
  & li {
    overflow: hidden;
    overflow: clip;

    & img {
      max-width: 200px;
    }
  }

  &.client-logo-list {

    & li {
      padding-inline: var(--flow-space);
      color: var(--color-secondary-glare);
    }
    & a {
      display: block;
      height: 100%;
      min-height: 150px;
      padding-inline: var(--flow-space);

      background-color: currentColor;

      mask-image: var(--mask-image);
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      transition: color, background-color, opacity;
      transition-delay: .25s;
      transition-duration: .5s;
      transform-origin: center;
    }

    & li {
      & a:hover, & a:focus {
          color: var(--color-secondary);
          transition-delay: 0s;
          transition-duration: .5s;
        &:not([href]) {
          color: var(--color-secondary-glare);
        }
      }
    }

    &:has(a:hover) li a:not(:hover), &:has(a:focus) li a:not(:focus) {
      
      color: var(--color-light-shade);
      transition-duration: 2s;
      transition-delay: 0s;
      opacity: .75;
      
    }
  }
} 
 body > header {
  display: flex;
  justify-content: space-between;
}

.site-head {
	padding: var(--size-300) 0;
	position: relative;
	z-index: 1;

	& .site-head__inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	& .site-head__brand {
		flex-shrink: 0;
		flex-grow: 0;
		margin-inline-end: var(--size-600); 
    /* Prevents nav bunching up to the logo*/

		svg {
			width: 200px;
			display: block;
			margin-left: -4px;
		}
	}

	& .site-head__nav {
		padding: var(--size-300) 0;
	}
  /* FIXME
	@include media-query('md') {
		& .site-head__brand {
			svg {
				width: 160px;
			}
		}
	}*/
} 
 .headline {
	font-size: var(--size-600);
	/* max-width: 18ch; */

	& strong {
		font-weight: 900;
	}

  & + p {
		align-content: last baseline;
	}

  @media (min-width: 42em) {
		font-size: var(--size-800);
	}

  @media (min-width:62em) {
		font-size: var(--size-900);
	}
}
 
 
.hero-image-wrap {
	position: absolute;
  inset: 0;
	
	@media (max-width: 42em) {
		opacity: .5;
		filter: blur(3px);
		bottom: calc(var(--size-major) * -1);
	}
	
	&::after {
		content: '';
		background-color: var(--color-secondary);
		position: absolute;
		inset: 60% 0 0 65%;
		clip-path: xywh(0 0 100% 100%);
		border-radius: inherit;
		opacity: 0;
		--to-opacity: 1;
		animation: fade .5s .25s linear normal forwards;
	}

	& .hero-image {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.01;
		translate: 0 -10%;
		--to-opacity: 1;
		--to-scale: 1;
		--to-translate: -51%;
		animation: fade 1s .5s cubic-bezier(.08,.82,.17,1) normal forwards;
		z-index: 1;

		max-width: 80rem;
		left: 50%;
		translate: -50%;
		object-fit: contain;
		object-position: right bottom;
	}
}
.intro {
	/* Default is a single column layout where the header overlaps the media */
	/* display: grid;
	grid-template-rows: var(--size-700) minmax(0, 1fr) var(--size-700) auto;
	grid-gap: var(--size-500); */

	z-index: 1;
  position: relative;

	/* Force items to span 1 column */
	> * {
		grid-column: 1;
	}

	& .intro__header {
		padding: var(--size-300) 0;
		grid-row: 2;
		margin: 0 var(--size-500); /* Adds a horizontal gutter */
	
		/* Prevents it from stretching to fill the space */
		align-self: center;
	}
	
	& .intro__content {
		margin: 0 var(--size-500); /* Adds a horizontal gutter */
	}

	& .intro__heading {
		
		color: var(--color-dark);

		em {
			font-style: normal;
			display: block;
	
			/* The weight change creates a weird indent, so this */
			/* optical adjustment fixes it */
			transform: translateX(-3px);
		}
	}
	
	& .intro__media {
		grid-row: 1/4;
		position: relative;
	
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	& .intro__content {
		grid-row: 4;
	}
}

@media (min-width: 42em) {
	.intro {
		/* grid-template-rows: var(--size-500) auto auto auto; */
		grid-template-columns: minmax(15rem, 1fr) 2fr;
	
		& .intro__header {
			padding: var(--size-500) 0;
			grid-column: 1/-1;
			align-self: end;
		}
	
		& .intro__media {
			grid-column: 3/2;
			grid-row: 1/5;
		}
	
		& .intro__content {
			grid-row: 3;
			grid-column: 1 / -1;
		}
	}
}

/* Flip the ratio for larger breakpoints */
@media (min-width: 62em) {
	.intro {
		grid-template-columns: 1fr minmax(44rem, 1fr);

	/* Because it's so large, it make sense to limit the image height too */
		& .intro__media {
			height: 28rem;
		}
	}
}

.featured-case {
	
	& .button[data-variant="ghost"]:hover {
		color: var(--color-secondary-shade) !important;
	}
	
	.featured-case__inner {
		padding: var(--flow-space);
		border-radius: calc(var(--flow-space) / 4);
		grid-gap: var(--size-500); 

		& .featured-case__intro {
			display: contents;
			& > * {
				grid-column: 1 / 6;
			}
			& h2 {
				position: relative;
				margin-top: var(--size-600);

				& span {
					font-variant: small-caps;
					position: absolute;
					top: -2rem;
				}
			}
		}

		& .featured-case__testimonial {
			grid-column: 2 / -2;
  		grid-row: 1 / span 3;
		}
		& .featured-case__media {
			aspect-ratio: 21/9;
			width: 100%;
			height: auto;
			object-fit: cover;
			background-color: var(--color-secondary-shade);
		}
	}
} 
 #main-content.industries {
  background-image: linear-gradient(to bottom, transparent, var(--color-secondary-shade));
}

.industries-blocks {
  & li {
    display: flex; /* simple fix to grow all (3) child elements to 100% height */
    justify-content: center;
    & a {
      display: block;
      padding: var(--size-800) var(--size-400);
      border-radius: var(--size-100);
      border: 1px solid transparent;
      box-shadow: 0 0 0em var(--color-secondary-glare);
      text-align: center;

      transition-property: color, box-shadow;
      transition-duration: .3s;

      & *[class^="material-symbols"] {
        font-size: var(--size-700) !important;
      }

      & > * {
        text-align: start;
        transition: color;
        transition-duration: .75s;
      }

      &:hover {
        
        & *[class^="material-symbols"] {
          color: var(--color-primary);
        }

        & > * {
          transition-duration: .25s;
          &:is(h3,p) {
            color: var(--color-light-glare);
          }
        }
      }
    }
  }
} 
 .key-facts {
  & .key-facts__list {

    --auto-grid-gap: var(--flow-space);

    & li > * {
      display: block;

      &:first-child {
        letter-spacing: -.1ex;
      }
    }
  }
} 
 nav.nav {
	line-height: 1;
	/* margin-inline-start: var(--size-400); */
	

	& .nav__list {
		display: flex;
		flex-wrap: wrap;
    	gap: var(--size-600);

		@media (min-width: 48rem) {
			justify-content: end;
		}

		& > li > a {
			text-decoration: none;
			display: block;
			position: relative;
			color: var(--color-dark-glare);
			line-height: 1.7;

			&:focus, &:hover {
				color: var(--color-secondary)
			}

			/* Adds indicator to active state items */
			&[data-state='active'],
			&[aria-current='page'] {
				color: var(--color-secondary-shade);
				&:before {
					content: '';
					display: block;
					width: 100%;
					height: 0.25rem;
					position: absolute;
					top: 100%;
					left: 0;
					margin-top: 0.25rem;
					background: var(--color-secondary);
				}
			}
		}

		
		@media (max-width: 48rem) {
			flex-direction: column;
		}
	}
	
}
/* collapse and show menu toggle for handheld */
input#toggle-menu {
	display: none;
}

nav.sub-nav {
	position: sticky;
  top: calc( calc(var(--size-300) * 2) + 1.33em + calc(var(--size-300) * 2) - 1px);
  z-index: 1;
  background: white;
	background-color: white;
  padding-block: var(--size-600);
  box-shadow: 0 1px 2px -1px var(--color-light-shade);

	& ol {
		list-style: decimal;
    gap: 0 calc(var(--flow-space) * 2);
    padding-inline: var(--flow-space);

		&:before {
			content: 'cursus ';
			font-variant: small-caps;
			font-weight: bold;
			font-size: var(--size-300);
		}

		& li {
			& a { 
				text-decoration-color: transparent;
				&:hover {
					text-decoration-color: currentColor;
				}
				&[data-state="active"] {
					pointer-events: none;
					font-weight: bold;
					color: var(--color-secondary-shade) !important;
				}
			}
		}
	}

}

@media (min-width: 48rem) {
	label[for="toggle-menu"] {
		display: none;
		z-index: 20;
	}
}

@media (max-width: 48rem) {
	.site-head {
		z-index: 10;

		& nav.nav {
			position: absolute;
			padding: 0 var(--size-600);
			left: 0;
			top: calc( calc(var(--size-400) * 4));
			width: 100%;
			background: var(--color-light);
			pointer-events: none;
			max-height: 0;
			overflow: hidden;
			box-shadow: inset 0 1px 1.2ex -1ex, 0 1ex 2ex -1ex;
			transition: max-height .5s 0s;

			& ul.nav__list {
				
				opacity: 0;
				translate: 0 1rem;
				transition: translate .5s 0.2s, opacity .5s 0.15s;
				padding-block: var(--size-800);
				gap:0;
				
				& > li {
					&:not(:last-child) {
						box-shadow: 0 1px 0 0 var(--color-tertiary);
					}
					& > a {
						position: relative;
						display: block;
						line-height: 5;

						&[data-state="active"], &[aria-current="page"] {
							text-indent: 2ex;
							color: var(--color-secondary);
							&::before {
								width: .25rem;
								top: 67%;
								translate: 0 calc(.25lh * -1);
							}
						}
					}
				}
			}
		}

		& label[for="toggle-menu"] {
			position: absolute;
			inset: -1rem 0 -1rem calc(100% - 5rem);
			display: flex;
			place-content: center;
			place-items: center;

			& span {
				font-size: 24px !important;
				color: var(--color-secondary);
			}	
		}

		& #toggle-menu:checked {
			& + label[for="toggle-menu"] span {
				color: var(--color-secondary-shade);
			}

			& ~ nav.nav {
				max-height: 22lh;
				overflow: hidden;
				opacity: 1;
				pointer-events: all;

				& ul.nav__list {
					translate: 0;
					opacity: 1;
					transition: translate .5s 0s, opacity .5s .15s;
				}
			}
		}
	}
	nav.sub-nav {
		top: calc( calc(var(--size-300) * 2) + var(--size-700));
		
		& ol li:last-child {
			padding-inline-end: 1.33rem;
		}
	}
} 
 .page-header {
  .page-header__heading {
    color: var(--color-dark);
  }
  & ul {
    list-style: none;
    padding: 0;
    & li {
      margin-bottom: 1ex;
    }
  }
} 
 .panel {
  margin: 0;
  padding:calc(var(--size-700) * 2) 0;
}

@media (min-width: 42em) {
  .panel {
    /* margin:calc(var(--size-800) * 2) 0; */
    padding:calc(var(--size-800) * 2) 0;
  }
}

article.panel + article.panel {
}

header + .panel {
  background-color: var(--color-light);
}  
 @keyframes unclip {
  0% {clip-path: inset(var(--flow-space) var(--flow-space) var(--flow-space) var(--flow-space) round 1ex); }
  5% {clip-path: inset(0 0 0 0 round 1rem); }
  20% {clip-path: inset(0 0 0 0 round 1rem);}
  25% {clip-path: inset(var(--flow-space) var(--flow-space) var(--flow-space) var(--flow-space) round 1ex);}
  100% {clip-path: inset(var(--flow-space) var(--flow-space) var(--flow-space) var(--flow-space) round 1ex);}
}

.tiles__list {
  & > li  {
    display: flex;
    
    a {
      display: flex;
      flex: 1 0 100%;
      flex-direction: column;
      justify-content: start;
      position: relative;
      text-decoration: none;
      padding: calc(var(--flow-space) * 2);
      transition: background-color .15s, clip-path .25s;
      clip-path: inset(var(--flow-space) var(--flow-space) var(--flow-space) var(--flow-space) round 1ex);

      animation: unclip 10s cubic-bezier(.79,.14,.15,.86) infinite normal forwards;
      animation-delay: inherit;

      @media (min-width: 32rem) {
        
      }

      & img {
        
        /* border-radius: var(--size-100);*/
        height: 9svh;
        object-fit: cover;
        object-position: center;
      }

      & h3 {word-break: break-word; transition: color .2s}

      & span[class^="material-symbols"] {
        
        align-self: end;
        height: 2em;
        border: 2px solid transparent;
        overflow: hidden;
        line-height: 1;
        border-radius: 100%;
        padding: 0.3rem;
        aspect-ratio: 1;
        text-align: center;
        line-height: 1.3;
        transition-property: all;
        transition-duration: .2s;
        transition-delay: .1s;
      }

      &:focus, &:hover {
        background: var(--color-secondary) !important;
        color: var(--color-light-glare);
        clip-path: inset(0 0 0 0 round 1rem) !important;
        animation-play-state: paused;

        & h3 {color: inherit !important;}
        & p { color: inherit !important}

        & span[class^="material-symbols"] {
          transition-duration: .2s;
          transition-delay: 0s;
        }
      }

      @media (max-width: 32rem) {
        & span[class^="material-symbols"] {
          display: none;
        }
      }

      @media (max-width: 45em) {
        & img {
          grid-row: 2;
          grid-column: 1 / span all;
          width: 100%;
          height: unset;
          aspect-ratio: 16/9;
        }
        & h3 {
          grid-row: 1;
          grid-column: 1 / span 10
        }
        & p {
          grid-row:3;
          grid-column: 1 / span 10
        }
        & span {
          grid-row: 3;
          grid-column: 10/ span 2
        }
      }
    }
    &:nth-child(1) { animation-delay: 0s;}
    &:nth-child(2) { animation-delay: 2.5s;}
    &:nth-child(3) { animation-delay: 5s;}
    &:nth-child(4) { animation-delay: 7.5s;}
  }

  &:has(a:hover) a:not(:hover) {
    clip-path: inset(var(--flow-space) var(--flow-space) var(--flow-space) var(--flow-space) round 1ex) !important;
    animation-play-state: paused;
  }
}  
 footer {
  padding: var(--size-800) 0 var(--size-major) 0;
  
  
	& .site-head__brand {
    grid-column: 1 / 5;
		flex-shrink: 0;
    flex-grow: 0;
		margin-inline-end: var(--size-600); 
    
    /* Prevents nav bunching up to the logo*/

		svg {
			width: 200px;
			display: block;
      margin-left: -4px;
		}
  }

  & .ident {
    grid-column: 1 / 5;
  }

  & .nav {
    grid-column: 8 / -1;

    & a {
      &::before {
        content: unset !important;
      }
    }
  }

  & .copyright {
    grid-column: 1 / span 5;
  }
  
  & .colophon {
    grid-column: 6 / 8;
  }

  a.social {
    grid-column: -2 / -1;
    text-align: end;
    & svg {
      display: inline;
      width: var(--size-300);
      height: var(--size-300);
      vertical-align: top;

      & path {
        fill: var(--color-secondary-glare);
      }
    }
  }


  @media (max-width: 42em) {
    .ident,
    .nav,
    .copyright {
      grid-column: 1 / span all;
    }
  }
}  
 .skip-link {
	position: absolute;
	top: var(--size-100);
	left: var(--size-100);
	z-index: 99;

	&:not(:focus)  {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
} 
 /*
  AUTO GRID
  Set the minimum item size with `--auto-grid-min-size` and you’ll
  get a fully responsive grid with no media queries.

  https://piccalil.lihttps://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
*/
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size, 16rem), 1fr));
  grid-gap: var(--auto-grid-gap, var(--size-500));
}

.center {
  display: grid;
  place-items: center;
  text-align: center;
  justify-content: center;
}  
 /* small */
@media (max-width: 48rem) {
  /* main menu */

  nav.nav a[href*="/contact/"] {
    display: none;
  }

  .site-head .site-head__inner {

    & a.button[href*="/contact/"] {
      display: none;
    }

    & .site-head__brand { 
      margin-inline-end: 0;
      img {
        max-width: 50vw !important;
      }
    }
  }

  main nav.sub-nav {
    overflow-x: auto;
    &.wrapper {
      padding: 0;
    }
    
    & ol.flex {
      justify-content: start;
      li {
        flex-shrink: 0;
      }
    }
  }
}

/* large */ 
@media (min-width: 48rem) {
  .site-head .site-head__inner nav a[href*="/contact/"] {
    display: none;
  }
}  
 .flow > * + * {
  margin-top:var(--flow-space,1.77rem)
}  
 .flex {
  display: flex;
  --flex-gap: var(--flow-space, 1ex);
  gap: var(--flex-gap);
  
  @media (max-width: 42em) {
    flex-direction: column;
  }

  &.align-center {
    align-items: center;
  }

  &.align-items-start {
    align-items: start;
  }
  
  &.wrap {
    flex-wrap: wrap;
  }
  &.nowrap {
    flex-wrap: nowrap;
  }
  &.row {
    flex-direction: row;
  }
  &.column {
    flex-direction: column;
  }
  &.space-between {
    justify-content: space-between;
  }
}  
 /* <uniquifier>: Use a unique and descriptive class name */
/* <weight>: Use a value from 200 to 800 */

.plus-jakarta-sans {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-display: swap;
}

.font-serif {
  font-family: Literata,Georgia,serif
}

.font-sans {
  font-family:"Work Sans", "Segoe UI", Roboto,"Helvetica Neue",Arial,sans-serif;
}  
 .fullbleed {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 2ex -1ex var(--color-light-shade);
}  
 .grid {

  @media (min-width: 42em) {

    display: grid;
    grid-gap: var(--size-700) var(--size-500);
    grid-template-columns: repeat(12, 1fr);

    @supports (display: grid) {
      > * {
        margin: 0;
      }
    }
  }
}  
 /* https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

blockquote, body, dd, dl, figure, h1, h2, h3, h4, ol[class], p, ul[class] {
  margin: 0
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: var(--scroll-margin-size, 5ex);
}

ol[class], ul[class] {
  padding: 0;
  list-style: none;
}  
 .site-wrap {
  /* padding .site-head + padding .nav + line-height .nav__list > li > a */
  margin-top: calc( calc(var(--size-300) * 2) + 1.33em + calc(var(--size-300) * 2) );
  @media (max-width: 48rem) {
    /* padding .site-head + menu toggle button icon font-size */
    margin-top: calc( calc(var(--size-300) * 2) + var(--size-700));
  }
}

.site-head {
  position: fixed;
  top: 0;
  width: 100vw;
  box-shadow: 0 0 1px var(--color-light-shade);
  z-index: 100;

  &::after {
    content: '';
    background: #ffffffE0;
    inset: 0;
    position: absolute;
    z-index: -1;
    backdrop-filter: blur(40px);
  }
}

.wrapper {
  max-width: 80rem;
  padding: 0 1.33rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}