#home-hero {
  position:relative;
  overflow:hidden;
  background-color:var(--color-bg-soft);
  background-image:linear-gradient(90deg,rgb(245 247 250 / .98) 0%,rgb(245 247 250 / .94) 48%,rgb(245 247 250 / .72) 100%),url("../../images/backgrounds/engineering-grid.webp");
  background-position:center;
  background-size:cover;
  padding-top:3.5rem
}
#home-hero::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:radial-gradient(rgb(37 99 235 / .15) 1px,transparent 1px);
  background-size:1.25rem 1.25rem;
  mask-image:linear-gradient(90deg,#000 0%,transparent 72%)
}
#home-hero .container {
  position:relative
}
.home-hero-grid {
  display:grid;
  gap:3rem;
  align-items:center
}
#home-hero h1 {
  max-width:12em;
  text-wrap:balance
}
#home-hero h1 em {
  font-style:normal;
  color:var(--color-accent)
}
#home-hero .lead {
  max-width:36rem
}

.workflow-panel {
  overflow:hidden;
  background:var(--color-primary);
  color:white;
  padding:2rem;
  border-radius:var(--radius-xl);
  position:relative;
  box-shadow:0 1.5rem 3.5rem rgb(15 39 71 / .16)
}
.workflow-panel::before {
  content:'';
  position:absolute;
  width:14rem;
  height:14rem;
  right:-6rem;
  top:-6rem;
  border:1px solid rgb(219 227 236 / .3);
  border-radius:50%
}
.workflow-panel .eyebrow {
  position:relative;
  color:#dbe3ec
}
.workflow-panel h2 {
  position:relative;
  color:white;
  font-size:1.55rem
}
.workflow-panel ol {
  list-style:none;
  padding:0;
  margin:2rem 0;
  display:grid;
  gap:.75rem
}
.workflow-panel li {
  display:grid;
  grid-template-columns:2.2rem 1fr;
  gap:1rem;
  margin:0;
  padding:1rem;
  border:1px solid rgb(219 227 236 / .18);
  border-radius:var(--radius-md);
  background:rgb(255 255 255 / .07)
}
.workflow-panel li span {
  color:#dbe3ec;
  font-size:.875rem
}
.workflow-panel li strong {
  display:block;
  font-size:1.1rem
}
.workflow-panel li small {
  display:block;
  color:#dbe3ec;
  margin-top:.15rem
}
.workflow-panel figcaption {
  position:relative;
  font-size:.875rem;
  color:#dbe3ec;
  border-top:1px solid #5d6878;
  padding-top:1rem
}
.workflow-tags {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap
}
.workflow-tags span {
  border:1px solid rgb(219 227 236 / .32);
  border-radius:2rem;
  padding:.3rem .7rem;
  font-size:.875rem
}

#home-trust {
  padding-block:2.5rem;
  background:var(--color-surface-tint)
}
#home-trust .split {
  gap:2rem;
  align-items:center
}
#home-trust h2 {
  max-width:24rem;
  font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem)
}
#home-trust .media-wall {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-height:0
}
#home-trust .media-wall__item {
  position:relative;
  min-height:0;
  aspect-ratio:1 / 1;
  margin:0;
  border:1px solid rgb(191 210 231 / .8)
}
#home-trust .media-wall__item img {
  width:100%;
  height:100%;
  object-fit:cover
}
#home-trust .media-wall__item figcaption {
  position:absolute;
  inset:auto 0 0;
  padding:.85rem 1rem;
  background:linear-gradient(transparent,rgb(9 26 50 / .86));
  color:white;
  font-size:var(--font-size-sm);
  font-weight:700;
  line-height:1.35
}
#home-trust .media-caption {
  margin-top:1.25rem;
  color:var(--color-muted);
  font-size:var(--font-size-sm)
}
#home-paths .card {
  min-height:100%;
  padding:1.65rem
}
#home-paths .number {
  font-size:1rem
}
#home-paths .grid {
  gap:2rem
}
#home-paths .card:nth-child(2) {
  background:var(--color-surface-tint)
}
#home-paths .card:nth-child(4) {
  background:#f8fafc
}

#home-courses-preview .bundle-summary {
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  border:1px solid #bfd2e7;
  border-radius:var(--radius-lg);
  background:var(--color-surface-tint);
  padding:2rem
}
#home-about-preview .about-mark {
  display:flex;
  align-items:flex-end;
  min-height:14rem;
  padding:2rem;
  border:0;
  border-radius:var(--radius-xl);
  background:var(--color-primary);
  box-shadow:var(--shadow-card);
  font-size:clamp(2rem,1.5rem + 2vw,3.25rem);
  color:white;
  font-weight:700;
  line-height:1.22
}
#home-courses-preview {
  background-color:white;
  background-image:linear-gradient(90deg,rgb(255 255 255 / .97),rgb(255 255 255 / .86)),url("../../images/backgrounds/structural-workflow.webp");
  background-position:center right;
  background-size:cover
}
#home-corporate-training,#home-services-preview {
  background-color:var(--color-bg-soft);
  background-image:linear-gradient(90deg,rgb(245 247 250 / .98) 0%,rgb(245 247 250 / .92) 55%,rgb(245 247 250 / .28) 100%),url("../../images/backgrounds/bim-collaboration.webp");
  background-position:center right;
  background-size:cover
}
#home-featured-articles {
  background-color:var(--color-bg-soft);
  background-image:linear-gradient(90deg,rgb(245 247 250 / .98),rgb(245 247 250 / .88)),url("../../images/backgrounds/ai-data-pattern.webp");
  background-position:center right;
  background-size:cover
}

@media(min-width:1024px) {
  .home-hero-grid {
  grid-template-columns:1.2fr 1fr;
  gap:4rem
}
#home-hero {
  padding-bottom:5rem
}
.workflow-panel {
  padding:2.5rem
}
#home-trust {
  padding-block:3rem
}

}

@media(min-width:768px) {
  #home-trust .media-wall {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:767px) {
  #home-hero {
    background-image:linear-gradient(rgb(245 247 250 / .92),rgb(245 247 250 / .92)),url("../../images/backgrounds/engineering-grid.webp")
  }
  #home-courses-preview {
    background-image:linear-gradient(rgb(255 255 255 / .92),rgb(255 255 255 / .92)),url("../../images/backgrounds/structural-workflow.webp")
  }
  #home-corporate-training,#home-services-preview {
    background-image:linear-gradient(rgb(245 247 250 / .92),rgb(245 247 250 / .92)),url("../../images/backgrounds/bim-collaboration.webp")
  }
  #home-featured-articles {
    background-image:linear-gradient(rgb(245 247 250 / .92),rgb(245 247 250 / .92)),url("../../images/backgrounds/ai-data-pattern.webp")
  }
}


#home-courses-preview .split {
  grid-template-columns:1fr
}

@media(min-width:1024px) {
  #home-courses-preview .split {
  grid-template-columns:1.6fr 1fr
}

}
