html, body {
  background: #ffffff;
  font-family: 'NeueHaas', sans-serif;
  color: #1E222E;
}

/* TYPOGRAPHY */
@font-face {
  font-family: NeueHaas;
  src: url(font/NeueHaasDisplayRoman.ttf);
}

p, li {
  font-size: clamp(1rem, 0.243vw + 0.913rem, 1.125rem);
  line-height: clamp(1.7rem, 0.413vw + 1.551rem, 1.912rem);
  color: #6C717E;
  margin: 0;
}

h1 {
  font-size: clamp(2.125rem, 5.34vw + 0.203rem, 4.875rem);
  line-height: clamp(2.55rem, 6.408vw + 0.243rem, 5.85rem);
  color:#F3F6FF;
}


h2 {
  font-size: clamp(2rem, 3.883vw + 0.602rem, 4rem);
  line-height: clamp(2.8rem, 3.883vw + 1.402rem, 4.8rem);
}

h3 {
  font-size: clamp(1.75rem, 2.427vw + 0.876rem, 3rem);
  line-height: clamp(2.45rem, 2.233vw + 1.646rem, 3.6rem);
}

h4 {
  font-size: clamp(1.5rem, 0.971vw + 1.15rem, 2rem);
  line-height: clamp(2.25rem, 1.456vw + 1.726rem, 3rem);
  color: #3E424D;
}

h5 {
  font-size: clamp(1.25rem, 0.485vw + 1.075rem, 1.5rem);
  line-height: clamp(2rem, 0.777vw + 1.72rem, 2.4rem);
  color: #3E424D;
}

h6 {
  font-size: clamp(0.75rem, 0.243vw + 0.663rem, 0.875rem);
  line-height: clamp(1.35rem, 0.437vw + 1.193rem, 1.575rem);
  color: #6C717E;
}

.accent {
  color: #1A7CFF;
  margin: 0;
}

.highlight {
  color: #1E222E;
}

.statement {
  color: #3E424D;
}

blockquote {
  margin-bottom: 1.2rem;
}
blockquote.large {
  margin-bottom: 2rem;
}

/* BODY FADE */
body {
  animation: fadeInAnimation ease 0.8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* GENERAL */
img {
  width: 100%;
  height: auto;
}

.secondary-bg {
  background-color: #F3F6F8;
}


.mark-bg {
  background-color: #1A7CFF;
}

hr {
  border-top: 1px solid #939BAC;
}

ul {
  padding: 0;
  list-style-type: none;
}

ul.bullet {
  list-style-type: square;
  margin-left: 24px;
  margin-bottom: 0;
}

a {
  color: #1E222E;
  transition: 0.15s ease-in;
  text-decoration: none;
  border-bottom: 2px solid;
}

a:hover {
  color: #1A7CFF;
}

/* Navbar */
.logo, ul.menu {
  padding-top: 8px;
}

.menu a {
  color: #ffffff;
  transition: 0.25s ease-in;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.menu a:hover {
  border-color: #1A7CFF;
}

li.current_page_item a {
  border-color: #1A7CFF;
}

object {
  pointer-events: none;
}

/* NAVIGATION */
header {
  --shadow: hsla(0 0% 0% / 0.08) 0 0.5rem 0.5rem;
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 12px 24px;
  background-color: white;
  z-index: 1001;
  box-shadow: var(--shadow);
}

@supports (animation-timeline: scroll()) {
  header {
    animation: scroll-shadow linear both;
    animation-timeline: scroll();
    animation-range: 0ex 5ex;
  }

  @keyframes scroll-shadow {
    from {
      box-shadow: none;
    }
    to {
      box-shadow: var(--shadow);
    }
  }
}

.menu {
  display: flex;
  gap: 1rem;
  margin: 0;
}

.header-dark {
  background-color: #1E222E;
}

.header-dark a {
  padding-top: 8px;
}

/* INSIGHT WIDGET */
.insight {
  background-color: #F3F6F8;
  padding: 16px;
  border-radius: 16px;
  display: flex;
  align-items: start;
}

object.asterisk {
  padding-right: 8px;
  padding-top: 4px;
}

h5.insight  {
  font-style: italic;
}

a.archive {
  color:#C0C6CF;
  font-style: italic;
}

a.archive:hover {
  color:#F24822;

}

/* SPACING */
.title {
  padding-top: 128px;
}

@media (max-width: 991px) {
  .title {
  padding-top: 64px;
  }
}


.break {
  padding-bottom: 128px;
}

/* CASE STUDY CARD */
.case-study {
  overflow: hidden;
  border: none;
}

.case-study:hover {
  cursor: pointer;
}

.case-study img {
  opacity: 0.9;
  width: 100%;
  transition: all 0.4s ease;
}

.case-study:hover img {
  opacity: 1;
  transform: scale(1.09);
}

.case-study:hover h5 {
  color: #3E424D;
}

.case-study a, a.logo{
  border:none;
}

.card-disclosure {
  background-color: #1D232F;
  color: #ffffff;
  position: absolute;
  width: 100%;
  height: 40px;
  padding-top: 4px;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  transform: translate(0, 32px);
  transition: all 0.2s ease-in-out;
}

.case-study:hover .card-disclosure {
  transform: translate(0, 0);
  opacity: 1;
}

.case-study:hover .card-body {
  background-color: #F2F5F7;
  transform: translate(0, -32px);
  transition: all 0.2s ease-in-out;
}

.card-body {
  background-color: #fff;
  z-index: 1;
  transition: all 0.2s ease-in-out;
}

.card-disclosure p {
  color: #fff;
  padding: 0;
}

/* FOOTER */
footer {
  padding: 64px 0;
}

footer h6 {
  display: flex;
  justify-content: center;
  color: #C0C6CF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

iframe {
  border-radius: 8px;
}

/* SCROLL CONTAINER */
.scroll-container {
  cursor: pointer;
  z-index: 9999;
  width: 40px;
  height: 40px;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  pointer-events: auto;
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}

.scroll-container.hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-container:hover {
  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.4));
  transition: all ease 0.5s;
}

svg:hover path {
  fill: #1A7CFF;
  transition: all ease 0.5s;
}

svg path {
  fill: #6C717E;
  transition: all ease 0.5s;
}

:root {
  --vh: 100vh;
}

.landing {
  height: var(--vh);
}

@media (max-width: 991px) {
  .landing {
    height: auto !important;
    display: block;
  }
}

.hero-bg {
  background: #1E222F; /* Dark background */
  position: relative; /* Positioning for pseudo-element */
  overflow: hidden; /* Prevent overflow from animation */
}

.hero-bg::before {
  content: ""; /* Pseudo-element for the animated effect */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 45deg at 50% 50%,
    hsla(0, 0%, 98%, 1) 0deg,
    #1A7CFF 90deg,
    #FFFFFF 180deg,
    #1A7CFF 270deg,
    #FFFFFF 360deg,
    hsla(0, 0%, 98%, 1) 1turn
  );
  mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2px) 50% 50% / 40px 40px,
        url("https://nicholasbergesen.com/assets/noise-mask.png") 256px 50% / 256px 256px;
/*  for WP = url("img/noise-mask.png") 256px 50% / 256px 256px;*/
  mask-composite: intersect;
  -webkit-mask-composite: intersect; /* For Safari */
  animation: flicker 20s infinite linear;
}

@keyframes flicker {
  to {
    mask-position: 50% 50%, 0 50%;
  }
}

#target-section {
  scroll-margin-top: 64px; /* Match or exceed your header's height */
}