*,
::before,
::after {
  box-sizing: border-box
}

html {
  margin: 0;
  padding: 0
}

body {
  margin: 0;
  font-family: 'Literata', serif;
  background: #000;
  color: #F7F6E7;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .015em
}

img {
  max-width: 100%;
  height: auto
}

.top-band {
  background: linear-gradient(135deg, #04B3FF 0%, #001a26 100%);
  padding: 8px 0;
  border-bottom: 1px solid #04b3ff26
}

.top-band-deck {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px
}

.quick-contact {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #F7F6E7;
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .48s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.contact-item:hover {
  color: #fff
}

.contact-item i {
  font-size: 17px;
  opacity: .85
}

.lang-indicator {
  font-size: 15px;
  color: #F7F6E7;
  opacity: .7;
  letter-spacing: .03em
}

.primary-bar {
  background: #0a0a0a;
  border-bottom: 1px solid #1a1a1a;
  position: relative;
  z-index: 100
}

.primary-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #04b3ff4d 50%, transparent 100%)
}

.primary-bar-deck {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px
}

.brand-pod {
  display: flex;
  align-items: center;
  gap: 16px
}

.mark-cell {
  border: 2px dashed #04b3ff66;
  padding: 8px;
  border-radius: 4px;
  background: #04b3ff08;
  box-shadow: 0 1px 4px 0 #04b3ff12;
  transition: border-color .52s ease-in-out, box-shadow .52s ease-in-out
}

.mark-cell:hover {
  border-color: #04b3ffb3;
  box-shadow: 0 4px 25px 0 #04b3ff17
}

.mark-cell img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain
}

.brand-label {
  font-size: 27px;
  font-weight: 700;
  color: #F7F6E7;
  letter-spacing: -.01em;
  line-height: 1.2
}

.primary-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.nav-link {
  padding: 16px;
  font-size: 17px;
  color: #F7F6E7;
  text-decoration: none;
  letter-spacing: .01em;
  position: relative;
  transition: color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 4px
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: #04B3FF;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .58s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.nav-link:hover {
  color: #04B3FF
}

.nav-link:hover::before {
  transform: scaleX(1);
  transform-origin: left center
}

.nav-link:focus {
  outline: 2px solid #04B3FF;
  outline-offset: 4px
}

.nav-link:focus::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid #04b3ff4d;
  border-radius: 4px;
  pointer-events: none
}

@media (max-width: 1200px) {
  .primary-bar-deck {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
  }

  .primary-links {
    width: 100%;
    justify-content: flex-start
  }
}

@media (max-width: 900px) {
  .quick-contact {
    gap: 16px
  }

  .top-band-deck {
    flex-direction: column;
    align-items: flex-start
  }

  .nav-link {
    padding: 16px 8px;
    font-size: 15px
  }

  .nav-link::before {
    left: 8px;
    right: 8px
  }
}

@media (max-width: 600px) {
  .contact-item {
    font-size: 15px
  }

  .brand-label {
    font-size: 27px
  }

  .primary-links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px
  }

  .nav-link {
    width: 100%;
    text-align: left
  }
}

.base-plate {
  background: #0d0d0d;
  border-top: 1px solid #1a1a1a;
  position: relative
}

.base-plate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #5a271a66 50%, transparent 100%)
}

.base-deck {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 16px 40px
}

.columns-pod {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 80px;
  margin-bottom: 80px
}

.column-cell {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.column-heading {
  font-size: 17px;
  font-weight: 700;
  color: #04B3FF;
  letter-spacing: .02em;
  margin-bottom: 8px;
  text-transform: uppercase;
  line-height: 1.2
}

.vertical-links {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.vertical-link {
  font-size: 17px;
  color: #F7F6E7;
  text-decoration: none;
  letter-spacing: .01em;
  transition: color .5s ease-in-out, padding-left .5s ease-in-out;
  padding-left: 0
}

.vertical-link:hover {
  color: #04B3FF;
  padding-left: 8px
}

.vertical-link:focus {
  outline: 2px solid #04B3FF;
  outline-offset: 4px
}

.vertical-link:focus::after {
  content: '';
  position: absolute;
  margin-left: -6px;
  margin-top: -4px;
  padding: 4px 6px;
  border: 1px solid #04b3ff4d;
  border-radius: 4px;
  pointer-events: none
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  color: #F7F6E7;
  letter-spacing: .015em;
  line-height: 1.6
}

.detail-row i {
  margin-top: 4px;
  color: #5A271A;
  font-size: 17px;
  flex-shrink: 0
}

.detail-link {
  color: #F7F6E7;
  text-decoration: none;
  transition: color .48s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.detail-link:hover {
  color: #04B3FF
}

.brand-pod-base {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px
}

.mark-cell-small {
  border: 2px dashed #5a271a66;
  padding: 4px;
  border-radius: 4px;
  background: #5a271a0d
}

.mark-cell-small img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain
}

.brand-label-small {
  font-size: 17px;
  font-weight: 700;
  color: #F7F6E7;
  letter-spacing: 0;
  line-height: 1.2
}

.about-text {
  font-size: 15px;
  color: #f7f6e7bf;
  line-height: 1.9;
  letter-spacing: .015em;
  max-width: 480px
}

.legal-band {
  border-top: 1px solid #1a1a1a;
  padding: 40px 0
}

.legal-deck {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap
}

.copyright-text {
  font-size: 15px;
  color: #f7f6e799;
  letter-spacing: .015em
}

.service-links {
  display: flex;
  gap: 40px;
  flex-wrap: wrap
}

.service-link {
  font-size: 15px;
  color: #f7f6e7b3;
  text-decoration: none;
  letter-spacing: .01em;
  transition: color .45s ease-in-out
}

.service-link:hover {
  color: #04B3FF
}

.service-link:focus {
  outline: 2px solid #04B3FF;
  outline-offset: 4px
}

.service-link:focus::after {
  content: '';
  position: absolute;
  margin-left: -6px;
  margin-top: -4px;
  padding: 4px 6px;
  border: 1px solid #04b3ff4d;
  border-radius: 4px;
  pointer-events: none
}

@media (max-width: 900px) {
  .columns-pod {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .legal-deck {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
  }

  .service-links {
    gap: 16px;
    flex-direction: column
  }
}

@media (max-width: 600px) {
  .base-deck {
    padding: 40px 16px 16px
  }

  .columns-pod {
    margin-bottom: 40px
  }

  .legal-band {
    padding: 16px 0
  }
}

.consent-toast {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 680px;
  background: #0d0d0d;
  border: 1px solid #04b3ff4d;
  border-radius: 4px;
  padding: 40px;
  box-shadow: 0 12px 52px 0 #04b3ff1f;
  z-index: 1500;
  transform: translateX(-120%);
  transition: transform .32s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.consent-toast.visible {
  transform: translateX(0)
}

.consent-intro {
  font-size: 15px;
  color: #F7F6E7;
  line-height: 1.6;
  letter-spacing: .015em;
  margin-bottom: 16px
}

.consent-uses {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.consent-uses li {
  font-size: 15px;
  color: #f7f6e7cc;
  letter-spacing: .015em;
  padding-left: 24px;
  position: relative
}

.consent-uses li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #5A271A;
  border-radius: 36px
}

.choice-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.choice-btn {
  flex: 1;
  min-width: 160px;
  padding: 16px 40px;
  font-size: 15px;
  font-family: 'Literata', serif;
  letter-spacing: .02em;
  text-transform: lowercase;
  background: transparent;
  border: 2px solid #04b3ff80;
  color: #F7F6E7;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .5s ease-in-out, color .5s ease-in-out
}

.choice-btn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  left: 0;
  background: #04b3ff26;
  transition: right .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1
}

.choice-btn:hover {
  border-color: #04B3FF;
  color: #fff
}

.choice-btn:hover::before {
  right: 0
}

.choice-btn:focus {
  outline: 2px solid #04B3FF;
  outline-offset: 4px
}

.choice-btn:focus::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid #04b3ff66;
  border-radius: 4px;
  pointer-events: none
}

.opt-notice {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #5a271a4d
}

.opt-heading {
  font-size: 15px;
  font-weight: 700;
  color: #5A271A;
  letter-spacing: .02em;
  margin-bottom: 8px;
  line-height: 1.2
}

.opt-description {
  font-size: 15px;
  color: #f7f6e7bf;
  line-height: 1.6;
  letter-spacing: .015em;
  margin-bottom: 16px
}

.opt-control {
  display: flex;
  align-items: center;
  gap: 16px
}

.opt-toggle {
  padding: 8px 16px;
  font-size: 15px;
  font-family: 'Literata', serif;
  letter-spacing: .015em;
  background: transparent;
  border: 1px solid #5a271a80;
  color: #F7F6E7;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .48s cubic-bezier(0.25, 0.46, 0.45, 0.94), background .48s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.opt-toggle:hover {
  border-color: #5A271A;
  background: #5a271a1a
}

.opt-toggle:focus {
  outline: 2px solid #5A271A;
  outline-offset: 4px
}

.opt-status {
  font-size: 15px;
  color: #f7f6e799;
  letter-spacing: .015em
}

@media (max-width: 600px) {
  .consent-toast {
    top: 16px;
    left: 16px;
    right: 16px;
    margin: 0;
    padding: 16px
  }

  .choice-row {
    flex-direction: column
  }

  .choice-btn {
    width: 100%
  }

  .opt-notice {
    margin-top: 16px;
    padding-top: 16px
  }

  .opt-control {
    flex-direction: column;
    align-items: flex-start
  }
}

.tqz-legal-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 16px;
  background: #0a0a0a;
  color: #f5f5f5
}

.tqz-legal-content h1 {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 40px;
  color: #fff
}

.tqz-legal-content h2 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 80px 0 16px;
  color: #fff
}

.tqz-legal-content h3 {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  margin: 40px 0 16px;
  color: #04B3FF;
  text-transform: uppercase
}

.tqz-legal-content h4,
.tqz-legal-content h5,
.tqz-legal-content h6 {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  margin: 40px 0 8px;
  color: #fff
}

.tqz-legal-content p {
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .01em;
  margin: 0 0 16px;
  color: #e8e8e8
}

.tqz-legal-content ul,
.tqz-legal-content ol {
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .01em;
  margin: 0 0 16px;
  padding: 0 0 0 40px;
  color: #e8e8e8
}

.tqz-legal-content li {
  margin: 0 0 8px
}

.tqz-legal-content li:last-child {
  margin-bottom: 0
}

.tqz-legal-content a {
  color: #04B3FF;
  text-decoration: none;
  border-bottom: 1px solid #04b3ff4d;
  transition: border-color .5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.tqz-legal-content a:hover {
  border-bottom-color: #04B3FF
}

.tqz-legal-content em,
.tqz-legal-content i {
  font-style: italic;
  color: #F7F6E7
}

.tqz-legal-content strong {
  font-weight: 600;
  color: #fff
}

.tqz-legal-content div {
  margin: 0 0 16px
}

.tqz-legal-content h1+p,
.tqz-legal-content h1+div {
  margin-top: 40px
}

.tqz-legal-content h2+p,
.tqz-legal-content h2+div,
.tqz-legal-content h2+ul,
.tqz-legal-content h2+ol {
  margin-top: 16px
}

@media (max-width: 900px) {
  .tqz-legal-content {
    padding: 40px 16px
  }

  .tqz-legal-content h1 {
    font-size: 27px;
    margin-bottom: 16px
  }

  .tqz-legal-content h2 {
    font-size: 17px;
    margin-top: 40px
  }

  .tqz-legal-content h3 {
    font-size: 15px;
    margin-top: 16px
  }

  .tqz-legal-content p,
  .tqz-legal-content ul,
  .tqz-legal-content ol {
    font-size: 15px
  }

  .tqz-legal-content ul,
  .tqz-legal-content ol {
    padding-left: 16px
  }
}

@media (max-width: 600px) {
  .tqz-legal-content {
    padding: 16px
  }

  .tqz-legal-content h2 {
    margin-top: 16px
  }
}

.lrn-prog {
  background: #000;
  color: #F7F6E7;
  min-height: 100vh
}

.lrn-prog img {
  max-width: 100%;
  height: auto
}

.lrn-prog .opening-visual {
  position: relative;
  padding: 80px 16px;
  overflow: hidden;
  background: linear-gradient(217deg, #04b3ff26 0%, #000f 45%), linear-gradient(127deg, #5a271a1f 0%, #000f 50%), linear-gradient(336deg, #f7f6e714 0%, #000f 55%);
  max-width: 1200px;
  margin: 0 auto
}

.lrn-prog .opening-visual::before {
  content: '';
  position: absolute;
  top: 20%;
  left: -10%;
  width: 400px;
  height: 400px;
  border: 2px solid #04b3ff26;
  border-radius: 50% 40% 45% 55%;
  transform: rotate(-25deg);
  pointer-events: none
}

.lrn-prog .opening-visual::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 5%;
  width: 300px;
  height: 350px;
  border: 2px solid #5a271a1f;
  border-radius: 45% 55% 50% 50%;
  transform: rotate(15deg);
  pointer-events: none
}

.lrn-prog .visual-left-anchor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 680px;
  position: relative;
  z-index: 2
}

.lrn-prog .top-label {
  font-size: 17px;
  line-height: 1.6;
  color: #04B3FF;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 600
}

.lrn-prog .main-statement {
  font-size: 68px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: #F7F6E7;
  font-weight: 700;
  margin: 0
}

.lrn-prog .support-description {
  font-size: 17px;
  line-height: 1.9;
  color: #f7f6e7d9;
  letter-spacing: .2px;
  margin: 8px 0 0;
  max-width: 580px
}

.lrn-prog .visual-with-tint {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  overflow: hidden;
  z-index: 1
}

.lrn-prog .visual-with-tint img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.4) brightness(0.6);
  transition: filter .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.lrn-prog .visual-with-tint::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #000000f2 0%, #04b3ff40 100%);
  pointer-events: none
}

.lrn-prog .visual-with-tint:hover img {
  filter: saturate(1) brightness(1)
}

@media (max-width: 900px) {
  .lrn-prog .opening-visual {
    padding: 40px 16px
  }

  .lrn-prog .main-statement {
    font-size: 51px
  }

  .lrn-prog .visual-with-tint {
    display: none
  }

  .lrn-prog .visual-left-anchor {
    max-width: 100%
  }
}

@media (max-width: 600px) {
  .lrn-prog .main-statement {
    font-size: 27px
  }

  .lrn-prog .top-label {
    font-size: 15px
  }
}

.lrn-prog .stepped-showcase {
  padding: 80px 16px;
  background: #0a0a0a;
  position: relative
}

.lrn-prog .stepped-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, transparent, transparent 8px, #04b3ff4d 8px, #04b3ff4d 12px, transparent 12px, transparent 20px, #5a271a4d 20px, #5a271a4d 24px)
}

.lrn-prog .stepped-inner {
  max-width: 1200px;
  margin: 0 auto
}

.lrn-prog .stepped-header {
  text-align: center;
  margin-bottom: 80px
}

.lrn-prog .stepped-header h2 {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: #F7F6E7;
  margin: 0 0 16px;
  position: relative;
  display: inline-block
}

.lrn-prog .stepped-header h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #04B3FF, transparent);
  animation: lrn-prog-draw-line .65s ease-in-out .3s forwards
}

@keyframes lrn-prog-draw-line {
  to {
    transform: translateX(-50%) scaleX(1)
  }
}

.lrn-prog .stepped-header p {
  font-size: 17px;
  line-height: 1.6;
  color: #f7f6e7bf;
  margin: 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto
}

.lrn-prog .three-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start
}

.lrn-prog .step-column {
  background: #121212;
  border-radius: 36px;
  padding: 40px;
  box-shadow: 0 4px 25px 0 #04b3ff17;
  transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: center;
  opacity: 0;
  animation: lrn-prog-slide-in .6s ease-in-out forwards
}

.lrn-prog .step-column:nth-child(1) {
  min-height: 380px;
  animation-delay: .1s
}

.lrn-prog .step-column:nth-child(2) {
  min-height: 460px;
  animation-delay: .25s
}

.lrn-prog .step-column:nth-child(3) {
  min-height: 420px;
  animation-delay: .4s
}

@keyframes lrn-prog-slide-in {
  from {
    opacity: 0;
    transform: translateX(-60px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.lrn-prog .step-column:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.lrn-prog .step-num {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: linear-gradient(135deg, #04b3ff33, #5a271a33);
  color: #04B3FF;
  font-size: 27px;
  font-weight: 700;
  line-height: 56px;
  margin-bottom: 16px
}

.lrn-prog .step-column h3 {
  font-size: 27px;
  line-height: 1.2;
  color: #F7F6E7;
  margin: 0 0 16px;
  letter-spacing: -.3px
}

.lrn-prog .step-column p {
  font-size: 17px;
  line-height: 1.9;
  color: #f7f6e7bf;
  margin: 0;
  letter-spacing: .1px
}

@media (max-width: 900px) {
  .lrn-prog .three-step-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .lrn-prog .step-column:nth-child(1),
  .lrn-prog .step-column:nth-child(2),
  .lrn-prog .step-column:nth-child(3) {
    min-height: auto
  }

  .lrn-prog .stepped-header h2 {
    font-size: 27px
  }
}

.lrn-prog .metrics-showcase {
  padding: 80px 16px;
  background: radial-gradient(circle at 25% 35%, #04b3ff14 0%, #000f 60%), radial-gradient(circle at 75% 70%, #5a271a0f 0%, #000f 55%);
  position: relative
}

.lrn-prog .metrics-inner {
  max-width: 1200px;
  margin: 0 auto
}

.lrn-prog .metrics-intro {
  text-align: center;
  margin-bottom: 80px
}

.lrn-prog .metrics-intro h2 {
  font-size: 51px;
  line-height: 1.2;
  color: #F7F6E7;
  margin: 0 0 16px;
  letter-spacing: -.5px
}

.lrn-prog .metrics-intro p {
  font-size: 17px;
  line-height: 1.9;
  color: #f7f6e7cc;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto
}

.lrn-prog .four-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px
}

.lrn-prog .metric-card {
  background: #0d0d0d;
  border-radius: 4px;
  padding: 40px;
  text-align: center;
  border: 1px solid #04b3ff26;
  transition: border-color .45s ease-in-out, transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden
}

.lrn-prog .metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #04b3ff0d, transparent);
  transition: right .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.lrn-prog .metric-card:hover::before {
  right: 100%
}

.lrn-prog .metric-card:hover {
  border-color: #04b3ff66;
  transform: translateY(-4px)
}

.lrn-prog .metric-value {
  font-size: 68px;
  line-height: 1.2;
  color: #04B3FF;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -1px
}

.lrn-prog .metric-label {
  font-size: 17px;
  line-height: 1.6;
  color: #f7f6e7d9;
  margin: 0;
  letter-spacing: .2px
}

@media (max-width: 900px) {
  .lrn-prog .four-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px
  }

  .lrn-prog .metrics-intro h2 {
    font-size: 27px
  }
}

@media (max-width: 600px) {
  .lrn-prog .four-metrics {
    grid-template-columns: 1fr
  }

  .lrn-prog .metric-value {
    font-size: 51px
  }
}

.lrn-prog .quote-extract {
  padding: 80px 16px;
  background: #000;
  position: relative
}

.lrn-prog .quote-extract::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, transparent, transparent 16px, #f7f6e726 16px, #f7f6e726 18px, transparent 18px, transparent 22px, #f7f6e726 22px, #f7f6e726 26px, transparent 26px, transparent 34px, #f7f6e726 34px, #f7f6e726 38px)
}

.lrn-prog .quote-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 80px;
  align-items: center
}

.lrn-prog .quote-main {
  flex: 1.5
}

.lrn-prog .quote-main h2 {
  font-size: 51px;
  line-height: 1.2;
  color: #F7F6E7;
  margin: 0 0 40px;
  letter-spacing: -.5px;
  text-align: center
}

.lrn-prog .quote-content {
  background: linear-gradient(135deg, #04b3ff0d, #5a271a0d);
  border-radius: 36px;
  padding: 40px;
  border-left: 4px solid #04B3FF;
  box-shadow: 0 4px 25px 0 #5a271a17;
  position: relative
}

.lrn-prog .quote-content::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 40px;
  font-size: 120px;
  line-height: 1;
  color: #04b3ff33;
  font-weight: 700
}

.lrn-prog .quote-text {
  font-size: 27px;
  line-height: 1.6;
  color: #F7F6E7;
  margin: 0 0 16px;
  font-style: italic;
  letter-spacing: -.2px;
  text-align: center
}

.lrn-prog .quote-author {
  font-size: 17px;
  line-height: 1.6;
  color: #f7f6e7b3;
  margin: 0;
  text-align: center;
  letter-spacing: .3px
}

.lrn-prog .quote-side {
  flex: 1
}

.lrn-prog .quote-side p {
  font-size: 17px;
  line-height: 1.9;
  color: #f7f6e7cc;
  margin: 0 0 16px;
  letter-spacing: .1px;
  text-align: center
}

.lrn-prog .quote-side p:last-child {
  margin-bottom: 0
}

.lrn-prog .quote-side p:first-child {
  font-size: 27px;
  line-height: 1.6;
  color: #F7F6E7;
  font-weight: 600
}

@media (max-width: 900px) {
  .lrn-prog .quote-inner {
    flex-direction: column;
    gap: 40px
  }

  .lrn-prog .quote-main h2 {
    font-size: 27px
  }

  .lrn-prog .quote-text {
    font-size: 17px
  }

  .lrn-prog .quote-side p:first-child {
    font-size: 17px
  }
}

@media (max-width: 600px) {
  .lrn-prog .quote-content {
    padding: 40px 16px
  }
}

.lrn-prog ::selection {
  background: #04b3ff40;
  color: #F7F6E7
}

.srvcs-pg {
  background: #000;
  color: #F7F6E7;
  overflow-x: clip
}

.srvcs-pg * {
  box-sizing: border-box
}

.srvcs-pg .rad-spotlight {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: radial-gradient(ellipse at 15% 25%, #04b3ff2e 0%, #0000 55%), radial-gradient(ellipse at 85% 75%, #5a271a24 0%, #0000 60%), #000;
  overflow: hidden
}

.srvcs-pg .rad-spotlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 80px, #04b3ff08 80px, #04b3ff08 160px);
  pointer-events: none;
  opacity: .4
}

.srvcs-pg .rad-spotlight-ctn {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1
}

.srvcs-pg .txt-zone {
  padding: 40px 80px 40px 40px
}

.srvcs-pg .multi-head {
  margin: 0 0 40px
}

.srvcs-pg .primary-hdln {
  font-size: 68px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: #F7F6E7;
  font-weight: 700
}

.srvcs-pg .secondary-hdln {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
  color: #04B3FF;
  font-weight: 600
}

.srvcs-pg .tertiary-hdln {
  font-size: 27px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 16px 0 0;
  color: #f7f6e7bf;
  font-weight: 400
}

.srvcs-pg .img-zone {
  padding: 16px 40px 16px 16px;
  position: relative
}

.srvcs-pg .img-container-hero {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.srvcs-pg .img-container-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
  transition: opacity .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs-pg .img-container-hero:hover img {
  opacity: .85
}

@media (max-width: 900px) {
  .srvcs-pg .rad-spotlight-ctn {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 16px
  }

  .srvcs-pg .txt-zone {
    padding: 16px
  }

  .srvcs-pg .img-zone {
    padding: 16px
  }

  .srvcs-pg .primary-hdln {
    font-size: 51px
  }

  .srvcs-pg .secondary-hdln {
    font-size: 27px
  }

  .srvcs-pg .img-container-hero {
    height: 380px
  }
}

@media (max-width: 600px) {
  .srvcs-pg .primary-hdln {
    font-size: 27px
  }

  .srvcs-pg .secondary-hdln {
    font-size: 17px
  }

  .srvcs-pg .tertiary-hdln {
    font-size: 17px
  }

  .srvcs-pg .img-container-hero {
    height: 280px
  }
}

.srvcs-pg .metric-showcase {
  background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
  position: relative;
  padding: 80px 40px
}

.srvcs-pg .metric-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 280px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100,20 Q150,40 160,90 T140,160 Q110,180 70,170 T40,110 Q30,60 70,35 T100,20" fill="none" stroke="#5a271a26" stroke-width="2"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .6;
  pointer-events: none
}

.srvcs-pg .metric-showcase-ctn {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.srvcs-pg .showcase-header {
  text-align: center;
  margin: 0 0 80px
}

.srvcs-pg .showcase-title {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: #F7F6E7;
  font-weight: 700
}

.srvcs-pg .showcase-subtitle {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .02em;
  margin: 0;
  color: #f7f6e7b3;
  max-width: 720px;
  margin: 0 auto
}

.srvcs-pg .metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px
}

.srvcs-pg .metric-card {
  background: #0f0f0f;
  border-radius: 4px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 25px 0 #04b3ff17;
  transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs-pg .metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #04B3FF 0%, #04b3ff00 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs-pg .metric-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.srvcs-pg .metric-card:hover::before {
  transform: scaleX(1)
}

.srvcs-pg .comparison-nums {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 16px;
  justify-content: center
}

.srvcs-pg .before-num {
  font-size: 27px;
  line-height: 1.2;
  color: #f7f6e766;
  font-weight: 400;
  text-decoration: line-through;
  letter-spacing: -.01em
}

.srvcs-pg .after-num {
  font-size: 68px;
  line-height: 1.2;
  color: #04B3FF;
  font-weight: 700;
  letter-spacing: -.02em
}

.srvcs-pg .metric-label {
  font-size: 17px;
  line-height: 1.6;
  color: #F7F6E7;
  margin: 0 0 8px;
  font-weight: 600;
  text-align: center
}

.srvcs-pg .metric-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #f7f6e7a6;
  margin: 0;
  text-align: center;
  letter-spacing: .01em
}

@media (max-width: 900px) {
  .srvcs-pg .metric-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .srvcs-pg .showcase-title {
    font-size: 27px
  }

  .srvcs-pg .after-num {
    font-size: 51px
  }
}

@media (max-width: 600px) {
  .srvcs-pg .metric-showcase {
    padding: 80px 16px
  }

  .srvcs-pg .metric-card {
    padding: 40px 16px
  }

  .srvcs-pg .showcase-header {
    margin: 0 0 40px
  }
}

.srvcs-pg .complex-offering {
  background: radial-gradient(ellipse at 50% 0%, #5a271a1f 0%, #0000 70%), radial-gradient(ellipse at 50% 100%, #04b3ff14 0%, #0000 65%), #000;
  padding: 80px 40px;
  position: relative
}

.srvcs-pg .complex-offering::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: .03;
  pointer-events: none
}

.srvcs-pg .complex-offering-ctn {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.srvcs-pg .offering-header {
  text-align: center;
  margin: 0 0 80px
}

.srvcs-pg .offering-title {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: #F7F6E7;
  font-weight: 700;
  position: relative;
  display: inline-block
}

.srvcs-pg .offering-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #04B3FF 50%, transparent 100%);
  transition: transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs-pg .offering-header:hover .offering-title::after {
  transform: translateX(-50%) scaleX(1)
}

.srvcs-pg .offering-intro {
  font-size: 17px;
  line-height: 1.9;
  color: #f7f6e7cc;
  max-width: 840px;
  margin: 0 auto 40px;
  text-align: center;
  letter-spacing: .01em
}

.srvcs-pg .offering-body {
  font-size: 15px;
  line-height: 1.6;
  color: #f7f6e7b3;
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: .02em
}

.srvcs-pg .offering-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  margin: 80px 0 0;
  align-items: start
}

.srvcs-pg .offering-visual {
  position: relative
}

.srvcs-pg .img-container-offering {
  width: 100%;
  height: 580px;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 4px 25px 0 #5a271a17;
  position: relative
}

.srvcs-pg .img-container-offering img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs-pg .img-container-offering:hover img {
  transform: scale(1.05)
}

.srvcs-pg .breakout-element {
  position: absolute;
  bottom: -40px;
  right: -40px;
  background: #0f0f0f;
  border-radius: 4px;
  padding: 40px;
  box-shadow: 0 12px 52px 0 #04b3ff1f;
  max-width: 280px;
  z-index: 2
}

.srvcs-pg .breakout-stat {
  font-size: 51px;
  line-height: 1.2;
  color: #04B3FF;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -.02em
}

.srvcs-pg .breakout-label {
  font-size: 15px;
  line-height: 1.6;
  color: #f7f6e7cc;
  margin: 0
}

.srvcs-pg .offering-details {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.srvcs-pg .detail-item {
  background: #0a0a0a;
  border-radius: 4px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: background .5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.srvcs-pg .detail-item::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, #04b3ff0d 100%);
  transition: right .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none
}

.srvcs-pg .detail-item:hover::before {
  right: 0
}

.srvcs-pg .detail-item:hover {
  background: #0f0f0f
}

.srvcs-pg .detail-icon {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: linear-gradient(135deg, #04b3ff26 0%, #5a271a26 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px
}

.srvcs-pg .detail-icon i {
  font-size: 27px;
  color: #04B3FF
}

.srvcs-pg .detail-heading {
  font-size: 27px;
  line-height: 1.2;
  color: #F7F6E7;
  margin: 0 0 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center
}

.srvcs-pg .detail-text {
  font-size: 15px;
  line-height: 1.6;
  color: #f7f6e7b3;
  margin: 0;
  text-align: center;
  letter-spacing: .01em
}

.srvcs-pg .word-highlight-container {
  display: inline;
  position: relative
}

.srvcs-pg .word-highlight-container .highlight-word {
  display: inline;
  position: relative;
  transition: color .45s ease-in-out;
  cursor: default
}

.srvcs-pg .word-highlight-container .highlight-word::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #04b3ff26;
  transition: height .45s ease-in-out;
  z-index: -1
}

.srvcs-pg .word-highlight-container .highlight-word:hover {
  color: #04B3FF
}

.srvcs-pg .word-highlight-container .highlight-word:hover::before {
  height: 100%
}

@keyframes scanline-drift {
  0% {
    transform: translateY(-100%)
  }

  100% {
    transform: translateY(100vh)
  }
}

.srvcs-pg .complex-offering::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #04b3ff4d 50%, transparent 100%);
  animation: scanline-drift 8s linear infinite;
  pointer-events: none;
  opacity: .4
}

@media (max-width: 1200px) {
  .srvcs-pg .breakout-element {
    right: 16px;
    bottom: 16px
  }
}

@media (max-width: 900px) {
  .srvcs-pg .offering-layout {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .srvcs-pg .offering-title {
    font-size: 27px
  }

  .srvcs-pg .img-container-offering {
    height: 420px
  }

  .srvcs-pg .breakout-element {
    position: static;
    margin: 16px auto 0
  }
}

@media (max-width: 600px) {
  .srvcs-pg .complex-offering {
    padding: 80px 16px
  }

  .srvcs-pg .offering-header {
    margin: 0 0 40px
  }

  .srvcs-pg .offering-layout {
    margin: 40px 0 0
  }

  .srvcs-pg .detail-item {
    padding: 40px 16px
  }

  .srvcs-pg .img-container-offering {
    height: 320px
  }

  .srvcs-pg .breakout-stat {
    font-size: 27px
  }
}

.srvcs-pg .divider-partial {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px
}

.srvcs-pg .divider-line {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #04b3ff4d 50%, transparent 100%);
  margin: 0 auto
}

@media (max-width: 600px) {
  .srvcs-pg .divider-partial {
    padding: 0 16px
  }

  .srvcs-pg .divider-line {
    width: 80%
  }
}

::selection {
  background: #04b3ff40;
  color: #F7F6E7
}

.abt-us {
  background: #000;
  color: #F7F6E7;
  overflow-x: clip
}

.abt-us * {
  box-sizing: border-box
}

.abt-us .intro-vis {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative
}

.abt-us .intro-vis::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 20%, #04b3ff26, transparent 50%), radial-gradient(ellipse at 70% 60%, #5a271a1f, transparent 50%), radial-gradient(ellipse at 50% 80%, #f7f6e714, transparent 60%);
  pointer-events: none;
  z-index: 0
}

.abt-us .intro-vis>* {
  position: relative;
  z-index: 1
}

.abt-us .img-frame {
  width: 100%;
  max-width: 680px;
  margin-bottom: 40px;
  opacity: 0;
  animation: img-reveal .65s ease-in-out .2s forwards
}

@keyframes img-reveal {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.abt-us .img-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  opacity: .85
}

.abt-us .head-txt {
  text-align: center;
  max-width: 900px
}

.abt-us .head-txt h1 {
  font-size: 51px;
  line-height: 1.2;
  margin: 0 0 40px;
  letter-spacing: -.02em;
  opacity: 0;
  animation: txt-reveal .55s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s forwards
}

@keyframes txt-reveal {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.abt-us .gradient-word {
  background: linear-gradient(135deg, #04B3FF, #5A271A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.abt-us .wave-divider {
  width: 100%;
  height: 80px;
  background: #000;
  position: relative;
  overflow: hidden
}

.abt-us .wave-divider svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.abt-us .wave-divider path {
  fill: #0a0a0a
}

.abt-us .split-narrative {
  background: #0a0a0a;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 60px));
  position: relative;
  padding-bottom: 80px
}

.abt-us .split-narrative::before {
  content: '';
  position: absolute;
  top: 8%;
  right: 5%;
  width: 420px;
  height: 420px;
  background: linear-gradient(145deg, #04b3ff1f, #5a271a14);
  border-radius: 36px;
  transform: rotate(12deg);
  opacity: .4;
  pointer-events: none;
  z-index: 0
}

.abt-us .split-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 16px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  position: relative;
  z-index: 1
}

.abt-us .left-dominant {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.abt-us .right-support {
  flex: 0 0 calc(40% - 40px);
  display: flex;
  flex-direction: column;
  gap: 40px
}

.abt-us .story-card {
  background: linear-gradient(165deg, #121212 0%, #0d0d0d 100%);
  padding: 40px;
  border-radius: 36px;
  box-shadow: 0 4px 25px 0 #04b3ff17;
  border: 1px solid #f7f6e70d;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: col-appear-1 .6s ease-in-out .1s forwards
}

@keyframes col-appear-1 {
  from {
    opacity: 0;
    transform: translateX(-24px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.abt-us .story-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #04B3FF, transparent);
  opacity: .3
}

.abt-us .story-card h2 {
  font-size: 27px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #F7F6E7;
  text-align: center;
  letter-spacing: -.01em;
  position: relative;
  display: inline-block;
  width: 100%
}

.abt-us .story-card h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #04B3FF, #5A271A);
  transition: width .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.abt-us .story-card:hover h2::after {
  width: 60%
}

.abt-us .story-card p {
  font-size: 17px;
  line-height: 1.9;
  margin: 0;
  color: #f7f6e7d9;
  text-align: center;
  letter-spacing: .01em
}

.abt-us .story-card p:first-of-type {
  font-size: 17px;
  color: #F7F6E7;
  margin-bottom: 16px
}

.abt-us .metric-panel {
  background: linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 100%);
  padding: 40px;
  border-radius: 36px;
  box-shadow: 0 12px 52px 0 #5a271a1f;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  animation: col-appear-2 .6s ease-in-out .3s forwards;
  position: relative;
  box-shadow: inset 0 3px 6px #04b3ff14
}

@keyframes col-appear-2 {
  from {
    opacity: 0;
    transform: translateX(24px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.abt-us .metric-item {
  text-align: center;
  padding: 16px;
  border-radius: 4px;
  background: #04b3ff08;
  transition: background .5s ease-in-out, transform .45s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.abt-us .metric-item:hover {
  background: #04b3ff14;
  transform: translateY(-4px)
}

.abt-us .metric-item:nth-child(1) {
  background: #04b3ff0f
}

.abt-us .metric-item:nth-child(2) {
  background: #5a271a14
}

.abt-us .metric-item:nth-child(3) {
  background: #f7f6e70a
}

.abt-us .metric-num {
  font-size: 51px;
  line-height: 1.2;
  font-weight: 700;
  color: #04B3FF;
  display: block;
  margin-bottom: 8px;
  letter-spacing: -.03em
}

.abt-us .metric-label {
  font-size: 15px;
  line-height: 1.6;
  color: #f7f6e7bf;
  letter-spacing: .02em
}

.abt-us .img-showcase {
  background: #0d0d0d;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 4px 25px 0 #04b3ff17;
  opacity: 0;
  animation: col-appear-3 .6s ease-in-out .5s forwards
}

@keyframes col-appear-3 {
  from {
    opacity: 0;
    transform: translateX(24px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.abt-us .img-showcase img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  opacity: .75;
  transition: opacity .55s ease-in-out, transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.abt-us .img-showcase:hover img {
  opacity: 1;
  transform: scale(1.05)
}

.abt-us .values-grid {
  background: #000;
  padding: 80px 16px
}

.abt-us .values-container {
  max-width: 1200px;
  margin: 0 auto
}

.abt-us .values-header {
  text-align: center;
  margin-bottom: 40px
}

.abt-us .values-header h3 {
  font-size: 27px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #F7F6E7;
  letter-spacing: -.01em
}

.abt-us .values-header p {
  font-size: 17px;
  line-height: 1.9;
  margin: 0;
  color: #f7f6e7bf;
  max-width: 720px;
  margin: 0 auto;
  letter-spacing: .01em
}

.abt-us .grid-irregular {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 40px
}

.abt-us .grid-col-1 {
  grid-column: span 5;
  opacity: 0;
  animation: grid-reveal-1 .6s ease-in-out .2s forwards
}

@keyframes grid-reveal-1 {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.abt-us .grid-col-2 {
  grid-column: span 4;
  opacity: 0;
  animation: grid-reveal-2 .6s ease-in-out .4s forwards
}

@keyframes grid-reveal-2 {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.abt-us .grid-col-3 {
  grid-column: span 3;
  opacity: 0;
  animation: grid-reveal-3 .6s ease-in-out .6s forwards
}

@keyframes grid-reveal-3 {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.abt-us .value-box {
  background: linear-gradient(165deg, #0f0f0f 0%, #0a0a0a 100%);
  padding: 40px;
  border-radius: 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .5s ease-in-out;
  box-shadow: 0 1px 4px 0 #04b3ff12
}

.abt-us .value-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.abt-us .value-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #04b3ff14, transparent);
  transition: left .6s ease-in-out
}

.abt-us .value-box:hover::before {
  left: 100%
}

.abt-us .grid-col-1 .value-box {
  border: 1px solid #04b3ff26;
  background: linear-gradient(165deg, #04b3ff14 0%, #0a0a0a 100%)
}

.abt-us .grid-col-2 .value-box {
  border: 1px solid #5a271a26;
  background: linear-gradient(165deg, #5a271a14 0%, #0a0a0a 100%)
}

.abt-us .grid-col-3 .value-box {
  border: 1px solid #f7f6e714;
  background: linear-gradient(165deg, #f7f6e70d 0%, #0a0a0a 100%)
}

.abt-us .value-box h4 {
  font-size: 27px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #F7F6E7;
  letter-spacing: -.01em;
  position: relative;
  z-index: 1
}

.abt-us .value-box p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
  color: #f7f6e7bf;
  letter-spacing: .01em;
  position: relative;
  z-index: 1
}

.abt-us .img-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px
}

.abt-us .img-cell {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 25px 0 #5a271a17;
  position: relative
}

.abt-us .img-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, #0006);
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease-in-out
}

.abt-us .img-cell:hover::after {
  opacity: 1
}

.abt-us .img-cell img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  opacity: .7;
  transition: opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.abt-us .img-cell:hover img {
  opacity: 1;
  transform: scale(1.08)
}

.abt-us .line-divider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.abt-us .line-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #04B3FF, transparent)
}

.abt-us .line-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #04B3FF;
  border-radius: 50%;
  box-shadow: 0 0 12px #04b3ff99
}

.abt-us .cross-mark {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 1
}

.abt-us .cross-mark::before,
.abt-us .cross-mark::after {
  content: '';
  position: absolute;
  background: #F7F6E7;
  left: 50%;
  top: 50%
}

.abt-us .cross-mark::before {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%)
}

.abt-us .cross-mark::after {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%)
}

@media (max-width: 900px) {
  .abt-us .intro-vis {
    padding: 40px 16px
  }

  .abt-us .head-txt h1 {
    font-size: 27px
  }

  .abt-us .split-container {
    flex-direction: column;
    padding: 40px 16px
  }

  .abt-us .left-dominant,
  .abt-us .right-support {
    flex: 1 1 100%
  }

  .abt-us .split-narrative::before {
    width: 280px;
    height: 280px;
    right: -40px;
    top: 5%
  }

  .abt-us .story-card,
  .abt-us .metric-panel {
    padding: 40px
  }

  .abt-us .story-card h2 {
    font-size: 27px
  }

  .abt-us .metric-num {
    font-size: 27px
  }

  .abt-us .img-showcase img {
    height: 240px
  }

  .abt-us .values-grid {
    padding: 40px 16px
  }

  .abt-us .values-header h3 {
    font-size: 27px
  }

  .abt-us .grid-irregular {
    grid-template-columns: 1fr
  }

  .abt-us .grid-col-1,
  .abt-us .grid-col-2,
  .abt-us .grid-col-3 {
    grid-column: span 1
  }

  .abt-us .value-box {
    padding: 40px
  }

  .abt-us .value-box h4 {
    font-size: 27px
  }

  .abt-us .img-dual {
    grid-template-columns: 1fr
  }

  .abt-us .img-cell img {
    height: 220px
  }
}

@media (max-width: 600px) {
  .abt-us .intro-vis {
    padding: 40px 8px
  }

  .abt-us .head-txt h1 {
    font-size: 27px;
    margin-bottom: 16px
  }

  .abt-us .img-frame {
    margin-bottom: 16px
  }

  .abt-us .split-container {
    padding: 40px 8px;
    gap: 16px
  }

  .abt-us .story-card,
  .abt-us .metric-panel,
  .abt-us .value-box {
    padding: 16px
  }

  .abt-us .story-card h2,
  .abt-us .value-box h4,
  .abt-us .values-header h3 {
    font-size: 17px
  }

  .abt-us .metric-num {
    font-size: 27px
  }

  .abt-us .metric-label,
  .abt-us .value-box p,
  .abt-us .story-card p,
  .abt-us .values-header p {
    font-size: 15px
  }

  .abt-us .values-grid {
    padding: 40px 8px
  }

  .abt-us .grid-irregular {
    gap: 8px
  }

  .abt-us .img-showcase img,
  .abt-us .img-cell img {
    height: 180px
  }
}

.strt-pg {
  background: #000;
  color: #F7F6E7;
  margin: 0;
  padding: 0
}

.strt-pg .rad-bloom {
  position: relative;
  background: radial-gradient(ellipse at center, #04b3ff26 0%, #5a271a14 40%, #000 100%);
  padding: 80px 16px;
  overflow: hidden
}

.strt-pg .rad-bloom .bloom-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px
}

.strt-pg .rad-bloom .bloom-txt {
  flex: 1;
  z-index: 2
}

.strt-pg .rad-bloom .bloom-ttl {
  font-size: 68px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: #F7F6E7
}

.strt-pg .rad-bloom .bloom-desc {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0 0 40px;
  color: #f7f6e7d9
}

.strt-pg .rad-bloom .bloom-lnk {
  display: inline-block;
  padding: 16px 40px;
  background: #04B3FF;
  color: #000;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: .02em;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.strt-pg .rad-bloom .bloom-lnk::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #5A271A;
  transition: right .6s ease-in-out;
  z-index: -1
}

.strt-pg .rad-bloom .bloom-lnk:hover::before {
  right: 0
}

.strt-pg .rad-bloom .bloom-lnk:hover {
  color: #F7F6E7
}

.strt-pg .rad-bloom .bloom-img-wrap {
  flex: 1;
  position: relative
}

.strt-pg .rad-bloom .bloom-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  position: relative
}

.strt-pg .rad-bloom .bloom-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #04b3ff4d 0%, transparent 60%);
  pointer-events: none
}

@media (max-width: 900px) {
  .strt-pg .rad-bloom .bloom-inner {
    flex-direction: column
  }

  .strt-pg .rad-bloom .bloom-ttl {
    font-size: 51px
  }

  .strt-pg .rad-bloom .bloom-img {
    height: 360px
  }
}

@media (max-width: 600px) {
  .strt-pg .rad-bloom {
    padding: 40px 16px
  }

  .strt-pg .rad-bloom .bloom-ttl {
    font-size: 27px
  }

  .strt-pg .rad-bloom .bloom-img {
    height: 280px
  }
}

.strt-pg .lng-val {
  background: #0a0a0a;
  padding: 80px 16px;
  position: relative
}

.strt-pg .lng-val::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #5a271a26 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: bleed-val 8s ease-in-out infinite
}

@keyframes bleed-val {

  0%,
  100% {
    opacity: .3
  }

  50% {
    opacity: .6
  }
}

.strt-pg .lng-val .val-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2
}

.strt-pg .lng-val .val-ttl {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 40px;
  color: #F7F6E7;
  position: relative;
  display: inline-block
}

.strt-pg .lng-val .val-ttl::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #04B3FF;
  transition: width .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.strt-pg .lng-val .val-ttl:hover::after {
  width: 100%
}

.strt-pg .lng-val .val-intro {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0 auto 40px;
  max-width: 800px;
  color: #F7F6E7
}

.strt-pg .lng-val .val-body {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  margin: 0 auto;
  max-width: 800px;
  color: #f7f6e7cc
}

@media (max-width: 900px) {
  .strt-pg .lng-val .val-ttl {
    font-size: 27px
  }
}

@media (max-width: 600px) {
  .strt-pg .lng-val {
    padding: 40px 16px
  }
}

.strt-pg .shp-exp {
  background: #000;
  padding: 80px 16px;
  position: relative
}

.strt-pg .shp-exp .exp-inner {
  max-width: 1200px;
  margin: 0 auto
}

.strt-pg .shp-exp .exp-ttl {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 40px;
  text-align: center;
  color: #F7F6E7;
  position: relative;
  display: inline-block;
  width: 100%
}

.strt-pg .shp-exp .exp-ttl::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #5A271A;
  transition: width .5s ease-in-out
}

.strt-pg .shp-exp:hover .exp-ttl::after {
  width: 60%
}

.strt-pg .shp-exp .exp-grd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px
}

.strt-pg .shp-exp .exp-crd {
  background: #1a1a1a;
  padding: 40px;
  border-radius: 36px;
  text-align: center;
  box-shadow: 0 4px 25px 0 #04b3ff17;
  transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden
}

.strt-pg .shp-exp .exp-crd::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #04B3FF;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s ease-in-out
}

.strt-pg .shp-exp .exp-crd:hover::before {
  transform: scaleX(1)
}

.strt-pg .shp-exp .exp-crd:nth-child(1) {
  border: 2px solid #04B3FF;
  border: 4px solid #04B3FF
}

.strt-pg .shp-exp .exp-crd:nth-child(2) {
  border: 2px solid #5A271A;
  border: 4px solid #5A271A
}

.strt-pg .shp-exp .exp-crd:nth-child(3) {
  border: 2px solid #F7F6E7;
  border: 4px solid #F7F6E7
}

.strt-pg .shp-exp .exp-crd:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.strt-pg .shp-exp .exp-crd-ttl {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: #F7F6E7
}

.strt-pg .shp-exp .exp-crd-txt {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0;
  color: #f7f6e7cc
}

@media (max-width: 900px) {
  .strt-pg .shp-exp .exp-grd {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .strt-pg .shp-exp .exp-ttl {
    font-size: 27px
  }
}

@media (max-width: 600px) {
  .strt-pg .shp-exp {
    padding: 40px 16px
  }

  .strt-pg .shp-exp .exp-crd {
    padding: 16px
  }
}

.strt-pg .dist-appr {
  background: linear-gradient(135deg, #0a0a0a 0%, #000 100%);
  padding: 80px 16px;
  position: relative
}

.strt-pg .dist-appr .appr-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start
}

.strt-pg .dist-appr .appr-sidebar {
  flex: 0 0 33.333%;
  position: sticky;
  top: 80px
}

.strt-pg .dist-appr .appr-sidebar-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 12px 52px 0 #5a271a1f;
  transition: box-shadow .45s ease-in-out
}

.strt-pg .dist-appr .appr-sidebar-img:hover {
  box-shadow: 0 12px 52px 0 #5a271a40
}

.strt-pg .dist-appr .appr-main {
  flex: 1
}

.strt-pg .dist-appr .appr-ttl {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 40px;
  text-align: center;
  color: #F7F6E7
}

.strt-pg .dist-appr .appr-intro {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0 0 40px;
  text-align: center;
  color: #F7F6E7
}

.strt-pg .dist-appr .appr-body {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  margin: 0;
  text-align: center;
  color: #f7f6e7cc
}

@media (max-width: 900px) {
  .strt-pg .dist-appr .appr-inner {
    flex-direction: column
  }

  .strt-pg .dist-appr .appr-sidebar {
    position: static;
    width: 100%
  }

  .strt-pg .dist-appr .appr-sidebar-img {
    height: 360px
  }

  .strt-pg .dist-appr .appr-ttl {
    font-size: 27px
  }
}

@media (max-width: 600px) {
  .strt-pg .dist-appr {
    padding: 40px 16px
  }

  .strt-pg .dist-appr .appr-sidebar-img {
    height: 280px
  }
}

.strt-pg .rl-ppl {
  background: #000;
  padding: 80px 16px;
  position: relative;
  overflow: hidden
}

.strt-pg .rl-ppl::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(/visual_directory/new-img11.jpg);
  background-size: cover;
  background-position: center;
  opacity: .15;
  pointer-events: none
}

.strt-pg .rl-ppl::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #000000b3 0%, #000000d9 100%);
  pointer-events: none
}

.strt-pg .rl-ppl .ppl-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2
}

.strt-pg .rl-ppl .ppl-ttl {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 40px;
  text-align: center;
  color: #F7F6E7
}

.strt-pg .rl-ppl .ppl-grd {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px
}

.strt-pg .rl-ppl .ppl-crd {
  background: #1a1a1ae6;
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0 4px 25px 0 #04b3ff17;
  text-align: center;
  position: relative;
  transition: background .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden
}

.strt-pg .rl-ppl .ppl-crd::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #04b3ff0d;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  pointer-events: none
}

.strt-pg .rl-ppl .ppl-crd:hover::before {
  opacity: 1
}

.strt-pg .rl-ppl .ppl-crd:hover {
  background: #1a1a1aff
}

.strt-pg .rl-ppl .ppl-crd-nm {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: #04B3FF
}

.strt-pg .rl-ppl .ppl-crd-txt {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0;
  color: #f7f6e7d9
}

@media (max-width: 900px) {
  .strt-pg .rl-ppl .ppl-grd {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .strt-pg .rl-ppl .ppl-ttl {
    font-size: 27px
  }
}

@media (max-width: 600px) {
  .strt-pg .rl-ppl {
    padding: 40px 16px
  }

  .strt-pg .rl-ppl .ppl-crd {
    padding: 16px
  }
}

.strt-pg .cnd-wrk {
  background: #0a0a0a;
  padding: 80px 16px;
  position: relative
}

.strt-pg .cnd-wrk .wrk-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center
}

.strt-pg .cnd-wrk .wrk-dvdr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 40px;
  gap: 16px
}

.strt-pg .cnd-wrk .wrk-dvdr-ln {
  width: 80px;
  height: 1px;
  background: #04b3ff66
}

.strt-pg .cnd-wrk .wrk-dvdr-dmnd {
  width: 8px;
  height: 8px;
  background: #04B3FF;
  transform: rotate(45deg)
}

.strt-pg .cnd-wrk .wrk-ttl {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 40px;
  color: #F7F6E7;
  position: relative;
  display: inline-block
}

.strt-pg .cnd-wrk .wrk-ttl::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #5A271A;
  transition: width .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.strt-pg .cnd-wrk .wrk-ttl:hover::after {
  width: 100%
}

.strt-pg .cnd-wrk .wrk-intro {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0 auto 40px;
  max-width: 800px;
  color: #F7F6E7
}

.strt-pg .cnd-wrk .wrk-body {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  margin: 0 auto 40px;
  max-width: 800px;
  color: #f7f6e7cc
}

.strt-pg .cnd-wrk .wrk-img-wrap {
  max-width: 800px;
  margin: 0 auto;
  position: relative
}

.strt-pg .cnd-wrk .wrk-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 36px;
  box-shadow: 0 12px 52px 0 #04b3ff1f;
  transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.strt-pg .cnd-wrk .wrk-img:hover {
  transform: translateY(-16px)
}

@media (max-width: 900px) {
  .strt-pg .cnd-wrk .wrk-ttl {
    font-size: 27px
  }

  .strt-pg .cnd-wrk .wrk-img {
    height: 320px
  }
}

@media (max-width: 600px) {
  .strt-pg .cnd-wrk {
    padding: 40px 16px
  }

  .strt-pg .cnd-wrk .wrk-img {
    height: 240px
  }
}

.aid-hub {
  background: #000;
  color: #F7F6E7;
  overflow-x: clip
}

.aid-hub * {
  box-sizing: border-box
}

.aid-hub .split-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 85vh;
  position: relative
}

.aid-hub .split-intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #5A271A 0%, #5A271A 48%, #04B3FF 52%, #04B3FF 100%);
  z-index: 1
}

.aid-hub .text-zone {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 80px 40px 120px 80px
}

.aid-hub .visual-zone {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px
}

.aid-hub .frame-wrapper {
  position: relative;
  max-width: 540px
}

.aid-hub .frame-wrapper::before,
.aid-hub .frame-wrapper::after {
  content: '';
  position: absolute;
  border: 1px solid #f7f6e74d;
  pointer-events: none
}

.aid-hub .frame-wrapper::before {
  top: -16px;
  left: -16px;
  right: -16px;
  bottom: -16px
}

.aid-hub .frame-wrapper::after {
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px
}

.aid-hub .intro-visual {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  position: relative;
  z-index: 1
}

.aid-hub .intro-visual::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 40%, #0006 100%);
  pointer-events: none;
  border-radius: 4px
}

.aid-hub .intro-heading {
  font-size: 68px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: #F7F6E7
}

.aid-hub .intro-description {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0;
  color: #f7f6e7e6;
  max-width: 480px
}

.aid-hub .resource-panel {
  background: #0a0a0a;
  padding: 80px 40px;
  position: relative
}

.aid-hub .resource-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, #04b3ff4d 50%, transparent 100%);
  transform: translateX(-50%)
}

.aid-hub .resource-container {
  max-width: 1200px;
  margin: 0 auto
}

.aid-hub .resource-title {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  margin: 0 0 80px;
  color: #F7F6E7;
  position: relative
}

.aid-hub .resource-title::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #04B3FF 50%, transparent 100%)
}

.aid-hub .resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px
}

.aid-hub .resource-card {
  background: #1a1a1a;
  border-radius: 36px;
  padding: 40px;
  position: relative;
  transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 25px 0 #04b3ff17;
  border: 2px solid #2a2a2a;
  text-align: center
}

.aid-hub .resource-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  border: 1px solid #04b3ff1a;
  pointer-events: none
}

.aid-hub .resource-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.aid-hub .card-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #04b3ff26 0%, #5a271a26 100%);
  border-radius: 36px
}

.aid-hub .card-icon {
  font-size: 40px;
  color: #04B3FF
}

.aid-hub .card-heading {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.005em;
  margin: 0 0 16px;
  color: #F7F6E7
}

.aid-hub .card-text {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0 0 16px;
  color: #f7f6e7cc
}

.aid-hub .card-detail {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  margin: 0;
  color: #04b3ffe6;
  font-weight: 500
}

.aid-hub .reach-section {
  background: linear-gradient(125deg, #000 0%, #1a1a1a 35%, #000 70%, #0a0a0a 100%);
  padding: 80px 40px;
  position: relative
}

.aid-hub .reach-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #5a271a4d 20%, #04b3ff4d 50%, #5a271a4d 80%, transparent 100%)
}

.aid-hub .reach-wrapper {
  max-width: 720px;
  margin: 0 auto
}

.aid-hub .reach-header {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  margin: 0 0 40px;
  color: #F7F6E7
}

.aid-hub .reach-intro {
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .01em;
  text-align: center;
  margin: 0 0 40px;
  color: #f7f6e7d9
}

.aid-hub .reach-body {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  text-align: center;
  margin: 0 0 16px;
  color: #f7f6e7bf
}

.aid-hub .contact-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0 0
}

.aid-hub .contact-item {
  background: #04b3ff0d;
  border: 1px solid #04b3ff33;
  border-radius: 4px;
  padding: 16px;
  text-align: center;
  transition: background .5s ease-in-out, border-color .5s ease-in-out
}

.aid-hub .contact-item:hover {
  background: #04b3ff14;
  border-color: #04b3ff59
}

.aid-hub .contact-label {
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: #f7f6e799;
  text-transform: uppercase
}

.aid-hub .contact-value {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .005em;
  margin: 0;
  color: #04B3FF;
  font-weight: 500
}

.aid-hub .contact-value a {
  color: inherit;
  text-decoration: none;
  transition: color .45s ease-in-out
}

.aid-hub .contact-value a:hover {
  color: #F7F6E7
}

@media (max-width: 1200px) {
  .aid-hub .split-intro {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .aid-hub .text-zone {
    padding: 80px 40px 40px
  }

  .aid-hub .visual-zone {
    padding: 40px
  }

  .aid-hub .resource-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width: 900px) {
  .aid-hub .intro-heading {
    font-size: 51px
  }

  .aid-hub .resource-title,
  .aid-hub .reach-header {
    font-size: 27px
  }

  .aid-hub .card-heading {
    font-size: 17px
  }

  .aid-hub .resource-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .aid-hub .contact-options {
    grid-template-columns: 1fr
  }
}

@media (max-width: 600px) {

  .aid-hub .text-zone,
  .aid-hub .visual-zone,
  .aid-hub .resource-panel,
  .aid-hub .reach-section {
    padding: 40px 16px
  }

  .aid-hub .intro-heading {
    font-size: 27px
  }

  .aid-hub .intro-description,
  .aid-hub .reach-intro {
    font-size: 15px
  }

  .aid-hub .resource-card {
    padding: 16px
  }
}

.kontakt-os {
  background: #000;
  color: #F7F6E7;
  min-height: 100vh
}

.kontakt-os .intro-zone {
  background: linear-gradient(217deg, #04b3ff14 0%, #000f 45%), linear-gradient(127deg, #5a271a0f 0%, #000f 50%), linear-gradient(336deg, #f7f6e70a 0%, #000f 55%);
  padding: 80px 16px;
  position: relative;
  overflow: hidden
}

.kontakt-os .intro-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 40px, #04b3ff05 40px, #04b3ff05 80px);
  pointer-events: none;
  z-index: 1
}

.kontakt-os .intro-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
  padding-top: 80px
}

.kontakt-os .intro-overskrift {
  font-size: 68px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 40px;
  color: #F7F6E7
}

.kontakt-os .intro-beskrivelse {
  font-size: 27px;
  line-height: 1.6;
  letter-spacing: .01em;
  max-width: 800px;
  margin: 0 auto 16px;
  color: #f7f6e7eb
}

.kontakt-os .intro-detaljer {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .02em;
  max-width: 700px;
  margin: 0 auto;
  color: #f7f6e7c7
}

.kontakt-os .formular-sektion {
  background: #0a0a0a;
  padding: 80px 16px;
  position: relative
}

.kontakt-os .formular-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start
}

.kontakt-os .formular-info {
  background: #1a1a1a;
  padding: 40px;
  border-radius: 36px;
  border: 1px solid #04b3ff26;
  position: relative;
  box-shadow: 0 12px 52px 0 #04b3ff1f;
  overflow: hidden
}

.kontakt-os .formular-info::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: linear-gradient(225deg, #04B3FF 0%, transparent 70%);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: .4;
  pointer-events: none
}

.kontakt-os .info-overskrift {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 40px;
  color: #F7F6E7;
  text-align: center
}

.kontakt-os .info-element {
  margin: 0 0 40px;
  text-align: center;
  transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt-os .info-element:hover {
  transform: translateY(-4px)
}

.kontakt-os .info-element:last-child {
  margin-bottom: 0
}

.kontakt-os .info-ikon {
  width: 48px;
  height: 48px;
  background: #04b3ff1f;
  border-radius: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  transition: background-color .5s ease-in-out
}

.kontakt-os .info-element:hover .info-ikon {
  background: #04b3ff38
}

.kontakt-os .info-ikon i {
  font-size: 27px;
  color: #04B3FF
}

.kontakt-os .info-etiket {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #f7f6e799;
  margin: 0 0 8px
}

.kontakt-os .info-vaerdi {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F7F6E7;
  margin: 0
}

.kontakt-os .info-vaerdi a {
  color: #04B3FF;
  text-decoration: none;
  transition: color .45s ease-in-out
}

.kontakt-os .info-vaerdi a:hover {
  color: #5A271A
}

.kontakt-os .formular-boks {
  background: #141414;
  padding: 40px;
  border-radius: 4px;
  border: 1px solid #5a271a33;
  box-shadow: 0 4px 25px 0 #5a271a17
}

.kontakt-os .formular-titel {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 8px;
  color: #F7F6E7;
  text-align: center
}

.kontakt-os .formular-undertitel {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .02em;
  margin: 0 0 40px;
  color: #f7f6e7b3;
  text-align: center
}

.kontakt-os .felt-gruppe {
  margin: 0 0 40px
}

.kontakt-os .felt-etiket {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: #F7F6E7;
  margin: 0 0 8px
}

.kontakt-os .felt-etiket .paakraevet {
  color: #04B3FF
}

.kontakt-os .felt-input {
  width: 100%;
  padding: 16px;
  background: #0a0a0a;
  border: 1px solid #04b3ff33;
  border-radius: 4px;
  color: #F7F6E7;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  transition: border-color .5s ease-in-out, box-shadow .5s ease-in-out;
  box-shadow: inset 0 2px 4px #0000004d
}

.kontakt-os .felt-input:focus {
  outline: none;
  border-color: #04B3FF;
  box-shadow: inset 0 2px 4px #0000004d 0 0 0 3px #04b3ff26
}

.kontakt-os .felt-textarea {
  width: 100%;
  padding: 16px;
  background: #0a0a0a;
  border: 1px solid #04b3ff33;
  border-radius: 4px;
  color: #F7F6E7;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  min-height: 160px;
  resize: vertical;
  transition: border-color .5s ease-in-out, box-shadow .5s ease-in-out;
  box-shadow: inset 0 2px 4px #0000004d
}

.kontakt-os .felt-textarea:focus {
  outline: none;
  border-color: #04B3FF;
  box-shadow: inset 0 2px 4px #0000004d 0 0 0 3px #04b3ff26
}

.kontakt-os .emne-valgboks {
  display: none
}

.kontakt-os .emne-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 40px
}

.kontakt-os .emne-mulighed {
  position: relative
}

.kontakt-os .emne-etiket {
  display: block;
  padding: 16px;
  background: #0a0a0a;
  border: 1px solid #04b3ff33;
  border-radius: 4px;
  color: #F7F6E7;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  transition: background-color .5s ease-in-out, border-color .5s ease-in-out, transform .45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden
}

.kontakt-os .emne-etiket::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, #04b3ff26 100%);
  transition: right .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none
}

.kontakt-os .emne-etiket:hover::before {
  right: 0
}

.kontakt-os .emne-valgboks:checked+.emne-etiket {
  background: #04b3ff26;
  border-color: #04B3FF;
  transform: scale(1.02)
}

.kontakt-os .betinget-felt {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .6s ease-in-out, opacity .55s ease-in-out, margin .6s ease-in-out
}

.kontakt-os #emne-samarbejde:checked~.samarbejde-detaljer,
.kontakt-os #emne-support:checked~.support-detaljer {
  max-height: 200px;
  opacity: 1;
  margin-bottom: 40px
}

.kontakt-os .samtykke-boks {
  margin: 0 0 40px;
  display: flex;
  align-items: flex-start;
  gap: 16px
}

.kontakt-os .samtykke-afkryds {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #04B3FF
}

.kontakt-os .samtykke-tekst {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #f7f6e7cc;
  margin: 0
}

.kontakt-os .samtykke-tekst a {
  color: #04B3FF;
  text-decoration: none;
  transition: color .45s ease-in-out
}

.kontakt-os .samtykke-tekst a:hover {
  color: #5A271A
}

.kontakt-os .indsend-knap {
  width: 100%;
  padding: 16px 40px;
  background: #04B3FF;
  border: none;
  border-radius: 4px;
  color: #000;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .02em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background-color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .45s ease-in-out;
  box-shadow: 0 4px 25px 0 #04b3ff17;
  position: relative;
  overflow: hidden
}

.kontakt-os .indsend-knap::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #5A271A;
  transition: right .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none
}

.kontakt-os .indsend-knap:hover::before {
  right: 0
}

.kontakt-os .indsend-knap:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.kontakt-os .indsend-knap span {
  position: relative;
  z-index: 1;
  transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt-os .indsend-knap:hover span {
  color: #F7F6E7
}

.kontakt-os .visuel-zone {
  background: #000;
  padding: 80px 16px;
  position: relative;
  overflow: hidden
}

.kontakt-os .visuel-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center
}

.kontakt-os .visuel-indhold {
  text-align: center
}

.kontakt-os .visuel-overskrift {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 40px;
  color: #F7F6E7;
  position: relative;
  display: inline-block
}

.kontakt-os .visuel-overskrift::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #04B3FF 50%, transparent 100%);
  transition: transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt-os .visuel-overskrift:hover::after {
  transform: translateX(-50%) scaleX(1)
}

.kontakt-os .visuel-tekst {
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: #f7f6e7d9;
  margin: 0 0 40px
}

.kontakt-os .metrik-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.kontakt-os .metrik-kort {
  background: #141414;
  padding: 40px 16px;
  border-radius: 36px;
  border: 1px solid #5a271a26;
  text-align: center;
  transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .55s ease-in-out;
  box-shadow: 0 1px 4px 0 #5a271a12;
  position: relative;
  overflow: hidden
}

.kontakt-os .metrik-kort::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, #04b3ff14 0%, transparent 50%);
  opacity: 0;
  transition: opacity .6s ease-in-out;
  pointer-events: none
}

.kontakt-os .metrik-kort:hover::before {
  opacity: 1
}

.kontakt-os .metrik-kort:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 52px 0 #5a271a1f
}

.kontakt-os .metrik-nummer {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #04B3FF;
  margin: 0 0 8px;
  position: relative
}

.kontakt-os .metrik-beskrivelse {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: #f7f6e7b3;
  margin: 0;
  position: relative
}

.kontakt-os .visuel-billede-wrapper {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.kontakt-os .visuel-billede-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #5A271A 0%, transparent 70%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: .6;
  pointer-events: none;
  z-index: 2
}

.kontakt-os .visuel-billede {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  filter: brightness(0.75);
  transition: filter .6s ease-in-out, transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt-os .visuel-billede-wrapper:hover .visuel-billede {
  filter: brightness(1);
  transform: scale(1.03)
}

.kontakt-os .punkt-skillelinje {
  height: 2px;
  background: transparent;
  margin: 80px auto;
  max-width: 1200px;
  position: relative
}

.kontakt-os .punkt-skillelinje::before,
.kontakt-os .punkt-skillelinje::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-image: radial-gradient(circle, #04b3ff66 1px, transparent 1px);
  background-size: 8px 2px;
  background-repeat: repeat-x
}

.kontakt-os .punkt-skillelinje::after {
  top: 6px;
  background-image: radial-gradient(circle, #5a271a4d 1px, transparent 1px)
}

@media (max-width: 900px) {
  .kontakt-os .intro-zone {
    padding: 40px 16px
  }

  .kontakt-os .intro-container {
    padding-top: 40px
  }

  .kontakt-os .intro-overskrift {
    font-size: 51px
  }

  .kontakt-os .intro-beskrivelse {
    font-size: 27px
  }

  .kontakt-os .formular-sektion {
    padding: 40px 16px
  }

  .kontakt-os .formular-wrapper {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .kontakt-os .visuel-zone {
    padding: 40px 16px
  }

  .kontakt-os .visuel-container {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .kontakt-os .visuel-overskrift {
    font-size: 27px
  }

  .kontakt-os .visuel-billede {
    height: 320px
  }

  .kontakt-os .punkt-skillelinje {
    margin: 40px auto
  }
}

@media (max-width: 600px) {
  .kontakt-os .intro-overskrift {
    font-size: 27px;
    margin-bottom: 16px
  }

  .kontakt-os .intro-beskrivelse {
    font-size: 17px
  }

  .kontakt-os .formular-boks,
  .kontakt-os .formular-info {
    padding: 16px
  }

  .kontakt-os .emne-container {
    grid-template-columns: 1fr
  }

  .kontakt-os .metrik-grid {
    grid-template-columns: 1fr
  }

  .kontakt-os .visuel-billede {
    height: 240px
  }
}

.success-pg {
  background: #000;
  color: #F7F6E7;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  position: relative;
  overflow: hidden
}

.success-pg::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle at 30% 40%, #04b3ff26, transparent 50%), radial-gradient(circle at 70% 60%, #5a271a1f, transparent 50%), radial-gradient(circle at 50% 80%, #f7f6e714, transparent 50%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1
}

.success-pg .success-wrap {
  position: relative;
  z-index: 2;
  max-width: 680px;
  text-align: center
}

.success-pg .icon-container {
  margin: 0 auto 40px;
  width: 120px;
  height: 120px;
  background: linear-gradient(217deg, #04b3ff2e, #5a271a1f);
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 52px 0 #04b3ff1f
}

.success-pg .icon-container svg {
  width: 64px;
  height: 64px
}

.success-pg .msg-title {
  font-size: 51px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: #F7F6E7
}

.success-pg .msg-desc {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #f7f6e7d1;
  margin: 0 0 40px
}

.success-pg .action-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap
}

.success-pg .btn-primary {
  background: linear-gradient(to right, transparent 50%, #04B3FF 50%);
  background-size: 200% 100%;
  background-position: left;
  color: #F7F6E7;
  border: 1px solid #04b3ff66;
  padding: 16px 40px;
  border-radius: 4px;
  font-size: 15px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-position .52s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 25px 0 #04b3ff17
}

.success-pg .btn-primary:hover {
  background-position: right
}

.success-pg .btn-secondary {
  background: transparent;
  color: #f7f6e7bf;
  border: 1px solid #f7f6e740;
  padding: 16px 40px;
  border-radius: 4px;
  font-size: 15px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .48s ease-in-out, color .48s ease-in-out;
  text-decoration: none;
  display: inline-block
}

.success-pg .btn-secondary:hover {
  border-color: #f7f6e780;
  color: #F7F6E7
}

.success-pg .detail-box {
  margin-top: 80px;
  padding: 40px;
  background: #ffffff08;
  border-radius: 4px;
  border: 1px solid #f7f6e71a;
  box-shadow: 0 1px 4px 0 #04b3ff12
}

.success-pg .detail-box .info-label {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: #f7f6e799;
  margin: 0 0 8px;
  text-transform: uppercase
}

.success-pg .detail-box .info-value {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #F7F6E7;
  margin: 0
}

@media (max-width: 600px) {
  .success-pg .msg-title {
    font-size: 27px
  }

  .success-pg .icon-container {
    width: 90px;
    height: 90px;
    margin-bottom: 16px
  }

  .success-pg .icon-container svg {
    width: 48px;
    height: 48px
  }

  .success-pg .action-group {
    flex-direction: column
  }

  .success-pg .btn-primary,
  .success-pg .btn-secondary {
    width: 100%
  }

  .success-pg .detail-box {
    padding: 16px;
    margin-top: 40px
  }
}