/* Base Styles */
html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

body {
  font-family: "Playfair Display", serif;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.gradient-overlay {
  position: relative; /* anchor for absolute positioning */
}

footer {
  border-top: 1px solid;
  border-image-source: linear-gradient(
    90.25deg,
    #a1cdd9 16.16%,
    #241635 71.67%
  );
  border-image-slice: 1;
}

.gradient-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 600px; /* adjust size */
  height: 1400px; /* adjust size */
  background: linear-gradient(
    74deg,
    rgba(214, 255, 253, 1),
    rgba(97, 0, 216, 0.1)
  );
  opacity: 0.66;
  filter: blur(310px); /* layer blur */
  transform: rotate(-74.62deg);
  pointer-events: none; /* makes it non-interactive */
  z-index: 1; /* sits above content */
}

/* Scroll-based backdrop blur */
.header-blur {
  backdrop-filter: blur(122px);
  transition: backdrop-filter 0.6s ease;
}

/* Header with transparent background initially */
.header-transparent {
  background: transparent !important;
}

:root {
  --transition-curve: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-medium: 0.45s;
  --transition-fast: 0.25s;
}

/* AI Gradient Text Utility */
.ai-gradient-text {
  background: linear-gradient(90deg, #907e9d 0%, #6145ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Headline 3 Gradient Utility */
.headline-3 {
  background: linear-gradient(90.25deg, #241635 16.16%, #6e668b 71.67%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bogart-family {
  font-family: "bogart", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.hero-300 {
  font-family: "new-hero", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.hero-400 {
  font-family: "new-hero", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.hero-600 {
  font-family: "new-hero", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.dark_card {
  background:
    linear-gradient(90deg, #393939, #4c4c4c),
    conic-gradient(
      from -90deg at 100.06% 100%,
      #393939 0deg,
      #4c4c4c 90.33deg,
      #393939 360deg
    );
}

.dark_card h3 {
  background: linear-gradient(90.25deg, #f8f1ff 16.16%, #eee9ff 71.67%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-card-shadow {
  box-shadow: 0px 4px 31.8px var(--feature-shadow-color, rgba(15, 23, 42, 0.12));
}

.feature-card-shadow.card-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

/* Video Container */
.video-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.shadow-inner-lg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset -20px -7px 39px rgba(180, 160, 255, 0.08),
    inset 17px 27px 50px rgba(116, 22, 223, 0.03),
    inset 0 86px 129px rgba(0, 0, 0, 0.12);
}

/* Play Button */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-btn:hover {
  background: white;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Tick Icon CSS */
.tick-icon {
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.tick-icon::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Video Hero Styles */
.video-hero {
  width: 100%;
  height: 200px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  aspect-ratio: 16/9;
  background-color: #111827;
  border-radius: 0.75rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .video-hero {
    height: 300px;
  }
}

@media (min-width: 1024px) {
  .video-hero {
    height: 450px;
  }
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navigation Link */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #6100d8;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active::after {
  width: 100%;
}

.interactive-card {
  transition:
    transform var(--transition-medium) var(--transition-curve),
    box-shadow var(--transition-medium) ease,
    background-color var(--transition-medium) ease;
}

.interactive-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 45px -20px rgba(20, 9, 46, 0.35);
}

.image-tilt {
  transition: transform 0.6s var(--transition-curve);
}

.image-tilt:hover {
  transform: translateY(-6px) rotateX(1deg) rotateY(-2deg);
}

.scroll-animate {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.6s var(--transition-curve),
    transform 0.6s var(--transition-curve);
}

.scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate[data-delay="100"] {
  transition-delay: 0.1s;
}

.scroll-animate[data-delay="200"] {
  transition-delay: 0.2s;
}

.scroll-animate[data-delay="300"] {
  transition-delay: 0.3s;
}

.scroll-animate[data-delay="400"] {
  transition-delay: 0.4s;
}

.scroll-animate[data-delay="500"] {
  transition-delay: 0.5s;
}

.scroll-animate[data-delay="600"] {
  transition-delay: 0.6s;
}

.scroll-animate[data-delay="700"] {
  transition-delay: 0.7s;
}

.scroll-animate[data-delay="800"] {
  transition-delay: 0.8s;
}

.scroll-animate[data-delay="900"] {
  transition-delay: 0.9s;
}

.scroll-animate[data-delay="1000"] {
  transition-delay: 1.0s;
}

.scroll-animate[data-delay="1100"] {
  transition-delay: 1.1s;
}

/* Scroll cascade: driven by scroll position (no transition, reverses on scroll up) */
.scroll-cascade-item {
  opacity: 0;
  transform: translateY(36px);
}

.link-soft {
  position: relative;
  transition: color var(--transition-fast) ease;
}

.link-soft::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px 0;
  height: 2px;
  background: currentColor;
  opacity: 0.15;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast) var(--transition-curve);
}

.link-soft:hover {
  color: #241635;
}

.link-soft:hover::after {
  transform: scaleX(1);
  opacity: 0.35;
}

/* Smooth scroll - Lenis provides friction scroll when loaded; fallback for no-JS */
html:not(.lenis) {
  scroll-behavior: smooth;
}

[x-cloak] {
  display: none !important;
}

.register-flow-shell {
  max-width: 56rem;
}

.register-form-card {
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.25rem;
  background: rgba(252, 252, 252, 0.96);
  box-shadow: 0 24px 70px -48px rgba(36, 22, 53, 0.55);
  padding: 2rem;
}

.register-section-title {
  color: #241635;
  font-size: 1.75rem;
  line-height: 1.15;
}

.register-pathway {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.register-pathway::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 25%;
  right: 25%;
  height: 2px;
  background: #e5e7eb;
}

.register-pathway-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  border: 0;
  background: transparent;
  color: #6b7280;
  text-align: center;
  cursor: pointer;
}

.register-pathway-count {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: inherit;
  font-size: 0.9rem;
  transition:
    border-color var(--transition-fast) var(--transition-curve),
    background-color var(--transition-fast) var(--transition-curve),
    color var(--transition-fast) var(--transition-curve),
    box-shadow var(--transition-fast) ease;
}

.register-pathway-label {
  font-size: 0.85rem;
}

.register-pathway-step.is-active {
  color: #241635;
}

.register-pathway-step.is-active .register-pathway-count,
.register-pathway-step.is-complete .register-pathway-count {
  border-color: #241635;
  background: #241635;
  box-shadow: 0 12px 26px -18px rgba(36, 22, 53, 0.75);
  color: #ffffff;
}

.register-step {
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  transition:
    border-color var(--transition-fast) var(--transition-curve),
    background-color var(--transition-fast) var(--transition-curve),
    color var(--transition-fast) var(--transition-curve);
}

.register-step.is-active {
  border-color: #a1cdd9;
  background: rgba(161, 205, 217, 0.16);
  color: #241635;
}

.register-step-count {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 22, 53, 0.08);
  color: inherit;
  font-size: 0.75rem;
}

.register-choice {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #ffffff;
  color: #3a3a3a;
  transition:
    border-color var(--transition-fast) var(--transition-curve),
    background-color var(--transition-fast) var(--transition-curve),
    box-shadow var(--transition-fast) ease,
    transform var(--transition-fast) var(--transition-curve);
}

.register-choice:hover {
  border-color: #c7dde4;
  box-shadow: 0 16px 34px -30px rgba(36, 22, 53, 0.55);
}

.register-choice.is-selected {
  border-color: #a1cdd9;
  background: rgba(161, 205, 217, 0.14);
  box-shadow: 0 14px 30px -24px rgba(36, 22, 53, 0.55);
  color: #241635;
}

.register-choice-primary.is-selected {
  border-color: #241635;
  background: rgba(36, 22, 53, 0.06);
}

.register-choice-secondary {
  border-style: dashed;
  background: #f8fafc;
}

.register-choice-secondary.is-selected {
  border-style: solid;
  border-color: #a1cdd9;
  background: rgba(161, 205, 217, 0.12);
}

.register-upload-panel {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #ffffff;
}

.register-input-error {
  color: #b45309;
  font-size: 0.78rem;
  margin-top: 0.45rem;
}

.register-success-message {
  border: 1px solid rgba(161, 205, 217, 0.55);
  border-radius: 1rem;
  background: rgba(161, 205, 217, 0.12);
  color: #241635;
  font-size: 0.85rem;
  padding: 0.9rem 1rem;
}

.register-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.register-action-row-split {
  justify-content: space-between;
}

.register-action-primary,
.register-action-secondary {
  border-radius: 9999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.35rem;
  font-size: 0.9rem;
  transition:
    background-color var(--transition-fast) var(--transition-curve),
    border-color var(--transition-fast) var(--transition-curve),
    color var(--transition-fast) var(--transition-curve),
    box-shadow var(--transition-fast) ease;
}

.register-action-primary {
  background: #241635;
  color: #ffffff;
  box-shadow: 0 18px 32px -24px rgba(36, 22, 53, 0.8);
}

.register-action-primary:hover {
  background: #3b2554;
}

.register-action-secondary {
  border-color: #d9d6ff;
  background: #ffffff;
  color: #3a3a3a;
}

.register-action-secondary:hover {
  border-color: #241635;
  color: #241635;
}

.register-provider-menu {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 24px 50px -30px rgba(36, 22, 53, 0.5);
}

@media (max-width: 640px) {
  .register-form-card {
    border-radius: 1rem;
    padding: 1.25rem;
  }

  .register-pathway {
    gap: 0.75rem;
  }

  .register-pathway::before {
    left: 28%;
    right: 28%;
  }

  .register-pathway-label {
    font-size: 0.78rem;
  }

  .register-action-row,
  .register-action-row-split {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .register-action-primary,
  .register-action-secondary {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-animate,
  .scroll-cascade-item,
  .interactive-card,
  .image-tilt {
    transition: none !important;
    transform: none !important;
  }

  .scroll-cascade-item {
    opacity: 1 !important;
  }
}

/* Testimonial Brighton Jewellers page styles */
    .testimonial-page {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 16% 9%, rgba(214, 255, 253, 0.8), transparent 24rem),
        radial-gradient(circle at 78% 18%, rgba(97, 0, 216, 0.12), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #f8f4ff 46%, #ffffff 78%);
    }

    .testimonial-page::before,
    .testimonial-page::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 0;
      filter: blur(80px);
      opacity: 0.5;
    }

    .testimonial-page::before {
      width: 48rem;
      height: 34rem;
      left: -16rem;
      top: 24rem;
      background: linear-gradient(90deg, rgba(97, 0, 216, 0.22), rgba(214, 255, 253, 0.65));
      -webkit-mask-image: radial-gradient(ellipse at left, black 20%, transparent 74%);
      mask-image: radial-gradient(ellipse at left, black 20%, transparent 74%);
    }

    .testimonial-page::after {
      width: 52rem;
      height: 40rem;
      right: -18rem;
      top: 12rem;
      background: linear-gradient(270deg, rgba(97, 0, 216, 0.16), rgba(214, 255, 253, 0.7));
      -webkit-mask-image: radial-gradient(ellipse at right, black 28%, transparent 76%);
      mask-image: radial-gradient(ellipse at right, black 28%, transparent 76%);
    }

    .testimonial-card {
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.92);
      border-radius: 15px;
      box-shadow: 0 4px 15.9px rgba(0, 76, 216, 0.15);
    }

    .testimonial-card-soft {
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(229, 231, 235, 0.78);
      border-radius: 15px;
      box-shadow: 0 18px 45px -30px rgba(0, 43, 216, 0.28);
    }

    .testimonial-dark-card {
      color: #ffffff;
      border-radius: 15px;
      background:
        conic-gradient(from 90deg at 100% 100%, #393939 0%, #4c4c4c 25%, #393939 100%),
        #393939;
    }

    .testimonial-result-card {
      min-height: 155px;
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
    }

    .testimonial-result-card-title,
    .testimonial-light-gradient-text {
      color: transparent;
      background: linear-gradient(91.85deg, #f8f1ff 16.16%, #eee9ff 71.67%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    .testimonial-result-card-title {
      font-size: 1.5rem;
      line-height: 1.15;
    }

    .testimonial-diamond {
      position: absolute;
      right: 1.75rem;
      top: 1.75rem;
      width: 1rem;
      height: 1rem;
      border-radius: 2px;
      transform: rotate(45deg);
      background: linear-gradient(90deg, #f8f1ff 16.16%, #eee9ff 71.67%);
    }

    .testimonial-service-strip {
      padding: 1.75rem;
    }

    .testimonial-service-item {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      min-width: 0;
      white-space: nowrap;
    }

    .testimonial-story-card {
      padding: 1.8rem;
    }

    .testimonial-challenge-card {
      padding: 1.5rem;
    }

    .testimonial-metric-card {
      min-height: 144px;
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .testimonial-quote-card {
      padding: clamp(2rem, 3.4vw, 3.8rem);
      overflow: hidden;
    }

    .testimonial-quote-text {
      display: block;
      max-width: 100%;
      overflow-wrap: break-word;
    }

    .testimonial-quote-author {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      margin-top: 1.75rem;
    }

    .testimonial-gradient-title {
      color: transparent;
      background: linear-gradient(93.69deg, #241635 16.16%, #6e5390 71.67%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    .testimonial-hero-title {
      font-size: clamp(2.35rem, 4.45vw, 4rem);
    }

    .testimonial-actions {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }

    .testimonial-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18.5rem;
      min-height: 4.45rem;
    }

    .testimonial-customer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 296px;
      align-items: start;
      gap: 3rem;
    }

    .testimonial-customer-summary {
      display: flex;
      align-items: flex-start;
      gap: 2.5rem;
    }

    .testimonial-customer-tags {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 2.5rem;
      margin-top: 1.75rem;
    }

    .testimonial-services-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(max-content, 1fr));
      align-items: center;
      gap: 1rem 1.25rem;
    }

    .testimonial-main-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.35rem;
      align-items: stretch;
      margin-top: 1.65rem;
    }

    .testimonial-metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.25rem;
      margin-top: 1.65rem;
    }

    .testimonial-help-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 3rem;
    }

    .testimonial-cta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4rem;
      text-align: right;
    }

    .testimonial-link {
      color: #594f72;
      text-decoration: underline;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }

    .testimonial-service-icon {
      width: 1.35rem;
      height: 1.35rem;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .testimonial-logo-card {
      background: #020116;
      border-radius: 8px;
      height: 96px;
      width: 171px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .testimonial-logo-card img {
      width: 100%;
      height: 80%;
      object-fit: contain;
    }

    .testimonial-shop-image {
      min-height: 100%;
      aspect-ratio: 1 / 1.52;
    }

    .testimonial-shop-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 15px;
    }

    @media (max-width: 1180px) {
      .testimonial-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 1023px) {
      .testimonial-customer-grid,
      .testimonial-main-grid,
      .testimonial-help-grid {
        grid-template-columns: 1fr;
      }

      .testimonial-customer-grid {
        gap: 2rem;
      }

      .testimonial-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .testimonial-cta {
        align-items: flex-start;
        text-align: left;
        gap: 2rem;
        flex-direction: column;
      }
    }

    @media (max-width: 767px) {
      .testimonial-page::before {
        width: 26rem;
        height: 32rem;
        left: -15rem;
        top: 28rem;
      }

      .testimonial-page::after {
        width: 28rem;
        height: 32rem;
        right: -17rem;
        top: 4rem;
      }

      .testimonial-logo-card {
        height: 78px;
        width: 140px;
      }

      .testimonial-shop-image {
        aspect-ratio: 4 / 5;
      }

      .testimonial-result-card {
        min-height: 9.5rem;
      }

      .testimonial-customer-summary {
        flex-direction: column;
        gap: 1.5rem;
      }

      .testimonial-customer-tags {
        gap: 1.25rem;
        margin-top: 1.25rem;
      }

      .testimonial-services-grid,
      .testimonial-metrics-grid {
        grid-template-columns: 1fr;
      }

      .testimonial-service-strip,
      .testimonial-story-card,
      .testimonial-challenge-card,
      .testimonial-metric-card {
        padding: 1.25rem;
      }

      .testimonial-quote-card {
        padding: 1.6rem;
      }

      .testimonial-quote-author {
        gap: 1rem;
      }
    }

    @media (max-width: 639px) {
      .testimonial-actions {
        flex-direction: column;
      }

      .testimonial-actions a {
        width: 100%;
        min-width: 0;
      }
    }

    .knowledge-page {
      position: relative;
      overflow: hidden;
      background: #ffffff;
    }

    .knowledge-page::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 760px;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(97, 0, 216, 0.16), rgba(214, 255, 253, 0.72));
      filter: blur(80px);
      -webkit-mask-image: radial-gradient(ellipse at top, black 18%, transparent 72%);
      mask-image: radial-gradient(ellipse at top, black 18%, transparent 72%);
    }

    .knowledge-main {
      position: relative;
      z-index: 1;
    }

    .knowledge-container {
      width: 100%;
      max-width: 80rem;
      margin-inline: auto;
      padding-inline: 1rem;
    }

    .knowledge-hero {
      padding-block: 8rem 6rem;
    }

    .knowledge-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      align-items: center;
      gap: clamp(2.5rem, 5vw, 4.5rem);
    }

    .knowledge-hero-media {
      position: relative;
      min-height: clamp(22rem, 31vw, 28rem);
    }

    .knowledge-hero-shot {
      position: absolute;
      border-radius: 0.75rem;
      box-shadow: 0 4px 31.8px rgba(0, 76, 216, 0.15);
    }

    .knowledge-hero-shot:nth-child(1) {
      left: 0;
      top: 4.5rem;
      width: 44%;
      transform: rotate(-2deg);
    }

    .knowledge-hero-shot:nth-child(2) {
      right: 0;
      top: 2rem;
      width: 48%;
      transform: rotate(2deg);
    }

    .knowledge-hero-shot:nth-child(3) {
      left: 18%;
      bottom: 1.5rem;
      width: 56%;
    }

    .knowledge-hero-copy {
      max-width: 46rem;
    }

    .knowledge-title {
      font-size: clamp(2.5rem, 4vw, 3.25rem);
      line-height: 1.08;
      color: transparent;
      background: linear-gradient(92.7deg, #241635 16.16%, #6e5390 71.67%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    .knowledge-copy {
      max-width: 44rem;
      margin-top: 2rem;
      color: #3a3a3a;
      font-size: 1.25rem;
      line-height: 1.435;
    }

    .knowledge-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem;
      margin-top: 2rem;
    }

    .knowledge-button {
      display: inline-flex;
      min-height: 4.45rem;
      min-width: 18.5rem;
      align-items: center;
      justify-content: center;
      border: 1px solid #241635;
      border-radius: 9999px;
      padding: 0.75rem 3rem;
      color: #3d384c;
      font-size: 1.375rem;
      font-weight: 600;
      transition: color 0.25s ease, background-color 0.25s ease;
    }

    .knowledge-button:hover {
      background: #111827;
      color: #ffffff;
    }

    .knowledge-grid-section {
      padding-bottom: 6rem;
    }

    .knowledge-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(3.5rem, 5vw, 5rem) clamp(2.5rem, 5vw, 4rem);
    }

    .knowledge-video-frame {
      aspect-ratio: 638 / 339;
      overflow: hidden;
      border-radius: 0.9375rem;
      background: #ffffff;
      box-shadow: 0 4px 31.8px rgba(0, 76, 216, 0.15);
    }

    .knowledge-video-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .knowledge-card-copy {
      max-width: 32rem;
      margin-top: 1.5rem;
    }

    .knowledge-card-copy h2 {
      font-size: clamp(1.75rem, 2.4vw, 2.25rem);
      line-height: 1.1;
    }

    .knowledge-card-copy p {
      margin-top: 1rem;
      color: #3a3a3a;
      font-size: 1.25rem;
      line-height: 1.435;
    }

    .knowledge-cta {
      padding-block: 4rem 6rem;
    }

    .knowledge-cta-inner {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 3.5rem;
      text-align: right;
    }

    .knowledge-cta-copy {
      max-width: 52rem;
    }

    .knowledge-cta-title {
      font-size: clamp(2rem, 4vw, 3.5rem);
      line-height: 1.08;
      color: transparent;
      background: linear-gradient(92.7deg, #241635 16.16%, #a1cdd9 71.67%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    .knowledge-cta-copy p {
      margin-top: 1.25rem;
      color: #3a3a3a;
      font-size: 1.125rem;
      line-height: 1.435;
    }

    .knowledge-cta-logo {
      height: 6rem;
      width: auto;
      flex: 0 0 auto;
    }

    @media (min-width: 640px) {
      .knowledge-container {
        padding-inline: 1.5rem;
      }
    }

    @media (min-width: 1024px) {
      .knowledge-container {
        padding-inline: 2rem;
      }
    }

    @media (max-width: 1023px) {
      .knowledge-hero {
        padding-block: 6rem 4rem;
      }

      .knowledge-hero-grid {
        grid-template-columns: 1fr;
      }

      .knowledge-hero-copy {
        max-width: none;
      }

      .knowledge-grid {
        gap: 3.5rem;
      }

      .knowledge-cta-inner {
        align-items: flex-start;
        text-align: left;
        flex-direction: column;
        gap: 2rem;
      }
    }

    @media (max-width: 767px) {
      .knowledge-hero {
        padding-block: 5.5rem 3.5rem;
      }

      .knowledge-hero-media {
        display: none;
      }

      .knowledge-copy,
      .knowledge-card-copy p {
        font-size: 1rem;
      }

      .knowledge-grid {
        grid-template-columns: 1fr;
      }

      .knowledge-actions {
        flex-direction: column;
      }

      .knowledge-button {
        width: 100%;
        min-width: 0;
        min-height: 3.4rem;
        font-size: 1.125rem;
      }
    }