/* ==========================================================================
   ABOUT & 3D CARDS SECTION (IMAGE 2 ARCH MOTION & IMAGE 4 STAGE MATCH)
   ========================================================================== */

#about {
  position: relative !important;
  z-index: 10 !important;
  margin-top: -14vh !important;
  padding-top: 80px !important;
  padding-bottom: 110px !important;
  background: linear-gradient(180deg, #c8f0dd 0%, #dcf5ea 20%, #eef8f5 55%, #e2f5ee 100%) !important;
  overflow: visible !important;
  isolation: isolate;
}

/* 1. Curved Pull-Up Arch (Image 2 Elena Voss Template Motion) */
#about .about-pull-arch,
#about::before {
  content: '' !important;
  position: absolute !important;
  top: -16vh !important;
  left: -5% !important;
  width: 110% !important;
  height: 34vh !important;
  border-radius: 50% 50% 0 0 !important;
  background: linear-gradient(180deg, #b2e8cf 0%, #c8f0dd 60%, #dcf5ea 100%) !important;
  box-shadow: 0 -18px 45px rgba(5, 150, 105, 0.15) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
}

/* 2. Introduction Section (Restored) */
#about .about-stage {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: relative !important;
  z-index: 5 !important;
}

#about .about-eyebrow {
  margin-bottom: 12px !important;
  font-size: clamp(12px, 0.95vw, 15px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: #047857 !important;
  text-transform: uppercase !important;
}

#about .about-studio-badge {
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #065f46 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 22px !important;
}

#about .about-intro {
  margin-bottom: 45px !important;
}

#about .about-intro h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: clamp(48px, 5.2vw, 88px) !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 18px 0 !important;
}

#about .about-intro h2 span {
  color: #059669 !important;
}

#about .about-intro h2 em {
  font-style: italic !important;
  font-weight: 400 !important;
  color: #334155 !important;
}

#about .about-lead {
  max-width: 780px !important;
  font-size: clamp(16px, 1.25vw, 21px) !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin: 0 !important;
}

/* 3. 3D Viewport matching Image 4 Stage */
#about .about-video-viewport {
  position: relative !important;
  width: 100% !important;
  max-width: 1240px !important;
  height: 420px !important;
  margin: 20px auto 65px auto !important;
  perspective: 1200px !important;
  perspective-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
}

/* 4. 3D Cards Structure */
#about .about-text-card {
  position: absolute !important;
  width: clamp(210px, 13.5vw, 226px) !important;
  height: clamp(340px, 22vw, 360px) !important;
  border-radius: 18px !important;
  padding: 18px 16px 16px 16px !important;
  background: linear-gradient(165deg, rgba(3, 40, 36, 0.94) 0%, rgba(1, 24, 22, 0.98) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  box-shadow: inset 0 0 18px rgba(16, 185, 129, 0.1), 0 20px 40px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transform-style: preserve-3d !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
  cursor: pointer !important;
  user-select: none !important;
  will-change: transform !important;
}

#about .about-text-card:hover {
  border-color: rgba(52, 211, 153, 0.85) !important;
  box-shadow: inset 0 0 24px rgba(52, 211, 153, 0.22), 0 0 30px rgba(16, 185, 129, 0.32), 0 25px 50px rgba(0, 0, 0, 0.6) !important;
}

/* Center Featured Card 03 */
#about .about-text-card.is-featured-center {
  border: 1.5px solid rgba(52, 211, 153, 0.85) !important;
  box-shadow: inset 0 0 25px rgba(52, 211, 153, 0.22), 0 0 35px rgba(16, 185, 129, 0.35), 0 24px 48px rgba(0, 0, 0, 0.55) !important;
  background: linear-gradient(165deg, rgba(6, 48, 43, 0.94) 0%, rgba(2, 28, 25, 0.98) 100%) !important;
}

#about .about-text-card.is-featured-center .about-card-pill {
  border-color: rgba(52, 211, 153, 0.6) !important;
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
}

/* Top Icon Row inside Card */
#about .about-text-card .card-top-icon-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

#about .about-text-card .about-card-pill {
  display: block !important;
  padding: 6px 8px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(52, 211, 153, 0.28) !important;
  background: rgba(1, 24, 22, 0.85) !important;
  color: #a7f3d0 !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
}

#about .about-text-card .card-tech-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
  color: #34d399 !important;
  flex-shrink: 0 !important;
}

#about .about-text-card .about-card-title {
  font-size: clamp(15px, 0.95vw, 17px) !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  line-height: 1.22 !important;
  margin: 4px 0 8px 0 !important;
  text-align: left !important;
}

#about .about-text-card .about-card-desc {
  font-size: clamp(10px, 0.62vw, 11px) !important;
  line-height: 1.48 !important;
  color: #a7b9b6 !important;
  text-align: left !important;
  margin: 0 !important;
}

#about .about-text-card .about-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}

#about .about-text-card .about-tag-pill {
  padding: 3px 6px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #8da4a1 !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

/* Bottom Action Row (BUILD ->, EXPLORE ->) */
#about .about-text-card .card-bottom-action {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  margin-top: 12px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #34d399 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  transition: color 0.2s ease !important;
}

#about .about-text-card .card-bottom-action .action-arrow-icon {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#about .about-text-card:hover .card-bottom-action {
  color: #6ee7b7 !important;
}

#about .about-text-card:hover .card-bottom-action .action-arrow-icon {
  transform: translateX(4px) !important;
}

/* Specular Glare */
#about .card-glass-specular {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  mix-blend-mode: overlay !important;
  z-index: 10 !important;
}

/* Hide leftover buttons & stray elements */
#about .about-actions,
#about .about-hand-note {
  display: none !important;
}

/* 5. Facts Folders at Bottom */
#about .about-facts {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 10px !important;
  position: relative !important;
  z-index: 5 !important;
}

#about .about-facts > .about-fact-folder {
  position: relative !important;
  cursor: pointer !important;
  padding: 32px 24px 24px 24px !important;
  background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(219,239,234,.88)) !important;
  border: 1px solid rgba(44, 154, 135, .45) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 #fff, 0 15px 35px rgba(12, 82, 72, .11) !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease !important;
}

#about .about-facts > .about-fact-folder:hover {
  transform: translateY(-5px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 24px 42px rgba(12, 82, 72, .18) !important;
}

@media (max-width: 850px) {
  #about .about-video-viewport {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
  #about .about-text-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 90% !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: 280px !important;
  }
  #about .about-facts {
    grid-template-columns: 1fr !important;
  }
}

/* One continuous curved handoff from the hero into the About section. */
#about {
  padding-top: clamp(100px, 11vh, 150px) !important;
  background: linear-gradient(180deg, #c8f0dd 0%, #c8f0dd 19%, #def4e9 46%, #eef8f5 100%) !important;
}
#about::before {
  background: #c8f0dd !important;
  box-shadow: none !important;
}
#about .about-stage {
  max-width: 1800px !important;
  padding: 0 4vw !important;
}
#about .about-intro {
  margin: 0 auto 38px !important;
  text-align: center !important;
}
#about .about-intro h2 { text-align: center !important; }
#about .about-lead { margin: 0 auto !important; text-align: center !important; }
#about .about-expertise-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  margin: 0 2px 22px;
  color: #588c82;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
#about .about-expertise-label::before {
  content: '';
  width: 52px;
  height: 2px;
  background: #8fddc4;
}

/* Five-card 3D arc: the existing engineering copy stays intact. */
#about .about-video-viewport {
  max-width: none !important;
  height: clamp(500px, 31vw, 600px) !important;
  margin: 0 auto 70px !important;
  overflow: visible !important;
  perspective: 1450px !important;
}
#about .about-text-card {
  width: clamp(205px, 15.8vw, 310px) !important;
  height: clamp(420px, 26.5vw, 510px) !important;
  padding: clamp(20px, 1.7vw, 30px) clamp(17px, 1.35vw, 25px) !important;
  border-radius: 22px !important;
  border-color: rgba(86, 232, 188, .58) !important;
  background: linear-gradient(145deg, #053e35 0%, #012723 53%, #021c1a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(226, 255, 247, .36),
              inset 0 0 26px rgba(87, 237, 190, .10),
              0 28px 48px rgba(4, 52, 39, .25),
              0 0 25px rgba(42, 191, 146, .15) !important;
  opacity: 0;
  filter: blur(5px);
  transition: opacity .7s ease, filter .7s ease,
              box-shadow .3s ease, border-color .3s ease !important;
  transition-delay: calc(var(--card-index, 0) * 65ms) !important;
}
#about .about-video-viewport.cards-visible .about-text-card {
  opacity: 1;
  filter: blur(0);
}
#about .about-text-card::after {
  background: radial-gradient(ellipse at 112% 112%, rgba(9, 166, 121, .55), transparent 52%) !important;
}
#about .about-text-card.is-featured-center {
  background: linear-gradient(145deg, #064b3e 0%, #02352e 58%, #03231f 100%) !important;
  box-shadow: inset 0 1px 0 rgba(226, 255, 247, .42),
              0 0 28px rgba(36, 212, 156, .29),
              0 32px 54px rgba(4, 52, 39, .30) !important;
}
#about .about-card-inner { align-items: stretch !important; }
#about .about-text-card .card-top-icon-row { margin-bottom: 16px !important; }
#about .about-text-card .about-card-pill {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
  font-size: clamp(9px, .7vw, 12px) !important;
  line-height: 1.45 !important;
}
#about .about-text-card .card-tech-icon {
  width: clamp(38px, 2.8vw, 52px) !important;
  height: clamp(38px, 2.8vw, 52px) !important;
  border-radius: 13px !important;
}
#about .about-text-card .card-tech-icon svg {
  width: 55%;
  height: 55%;
}
#about .about-text-card .about-card-title {
  margin: 16px 0 12px !important;
  font-size: clamp(17px, 1.2vw, 24px) !important;
  line-height: 1.18 !important;
}
#about .about-text-card .about-card-desc {
  font-size: clamp(12px, .85vw, 16px) !important;
  line-height: 1.42 !important;
  color: #d4eae4 !important;
}
#about .about-text-card .about-card-tags { gap: 6px !important; }
#about .about-text-card .about-tag-pill {
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: clamp(9px, .62vw, 12px) !important;
}
#about .about-text-card .card-bottom-action {
  justify-content: flex-start !important;
  margin-top: 15px !important;
  font-size: clamp(10px, .7vw, 13px) !important;
}
@media (max-width: 850px) {
  #about .about-video-viewport {
    height: auto !important;
    overflow: visible !important;
    gap: 18px !important;
  }
  #about .about-text-card {
    width: min(90%, 390px) !important;
    height: auto !important;
    min-height: 380px !important;
    opacity: 1;
    filter: none;
  }
  #about .about-expertise-label { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #about .about-text-card { opacity: 1 !important; filter: none !important; transition: none !important; }
}

/* One continuous mint sheet across the hero / About handoff. */
#about {
  margin-top: -14vh !important;
  background: linear-gradient(180deg,
    #c8f0dd 0%, #c8f0dd 24%,
    #e4f5ed 54%, #eff8f5 83%, #eff8f5 100%) !important;
}
#about::before {
  content: '' !important;
  display: block !important;
  top: -16vh !important;
  height: 24vh !important;
  border-radius: 50% 50% 0 0 / 16vh 16vh 0 0 !important;
  clip-path: none !important;
  background: #c8f0dd !important;
  box-shadow: none !important;
  transform: none !important;
}
#about .about-video-viewport {
  perspective: 1100px !important;
  perspective-origin: 50% 42% !important;
  transform-style: preserve-3d !important;
  isolation: isolate;
}
#about .about-scene {
  position: absolute;
  z-index: 0;
  inset: -110px -3vw -90px;
  pointer-events: none;
  overflow: hidden;
}
#about .about-scene-orbit {
  position: absolute;
  top: -190px;
  left: 22%;
  width: 58%;
  height: 360px;
  border: 1px solid rgba(43, 196, 158, .3);
  border-radius: 50%;
  transform: rotate(-14deg);
  -webkit-mask-image: linear-gradient(110deg, transparent 12%, #000 50%, transparent 95%);
  mask-image: linear-gradient(110deg, transparent 12%, #000 50%, transparent 95%);
}
#about .about-scene-orb {
  position: absolute;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #c8fff0 0%, #22b990 19%, #006550 62%, #003f39 100%);
  box-shadow: inset -5px -7px 10px rgba(0, 37, 32, .72), 0 8px 13px rgba(0, 96, 73, .25);
}
#about .about-scene-orb-left { left: 0; bottom: 94px; width: 43px; height: 43px; }
#about .about-scene-orb-top { left: 52%; top: 42px; width: 28px; height: 28px; }
#about .about-scene-orb-right { right: 0; bottom: 70px; width: 27px; height: 27px; }
#about .about-scene-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 168px;
  background: radial-gradient(ellipse 48% 38% at 50% 59%, rgba(26, 180, 139, .25), transparent 82%),
              radial-gradient(ellipse 85% 26% at 50% 70%, rgba(116, 206, 184, .12), transparent 92%);
  transform: perspective(680px) rotateX(47deg);
  transform-origin: center bottom;
  filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent, #000 32%, transparent 100%);
}
#about .about-scene-reflection {
  position: absolute;
  bottom: 12px;
  width: 16.5%;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(ellipse 85% 78% at 50% 0%, rgba(5, 117, 95, .32), rgba(28, 163, 132, .08) 48%, transparent 82%);
  filter: blur(18px);
  opacity: .52;
  transform: perspective(600px) rotateX(43deg);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%);
  mask-image: linear-gradient(180deg, #000, transparent 90%);
}
#about .about-scene-reflection:nth-last-child(5) { left: 4%; }
#about .about-scene-reflection:nth-last-child(4) { left: 24%; }
#about .about-scene-reflection:nth-last-child(3) { left: 42%; width: 19%; opacity: .8; }
#about .about-scene-reflection:nth-last-child(2) { right: 24%; }
#about .about-scene-reflection:nth-last-child(1) { right: 4%; }

/* A quiet sign-off in the open space beneath the expertise cards. */
#about .about-transition-note {
  position: relative;
  z-index: 20;
  width: fit-content;
  max-width: 88%;
  margin: 22px auto 27px;
  color: #116d54;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1.5;
  text-align: center;
}
#about .about-video-viewport { margin-bottom: 0 !important; }

@media (max-width: 850px) {
  #about .about-transition-note {
    width: auto;
    max-width: 92%;
    margin: 22px auto 30px;
  }
}

#about .about-text-card {
  background:
    radial-gradient(ellipse at 78% 2%, rgba(122, 252, 215, .2), transparent 39%),
    linear-gradient(132deg, rgba(22, 131, 105, .26) 0%, transparent 36%),
    linear-gradient(154deg, #07473e 0%, #012923 51%, #001b19 100%) !important;
  border: 1px solid rgba(139, 246, 216, .73) !important;
  box-shadow:
    2px 1px 0 rgba(157, 255, 226, .6),
    5px 3px 0 rgba(13, 127, 105, .6),
    8px 5px 0 rgba(3, 65, 57, .38),
    inset 1px 1px 0 rgba(227, 255, 245, .45),
    inset -12px -25px 37px rgba(0, 9, 12, .5),
    0 21px 32px rgba(5, 73, 59, .28),
    0 0 21px rgba(30, 210, 163, .19) !important;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
#about .about-text-card::before {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: auto !important;
  border-radius: inherit !important;
  background: linear-gradient(145deg, transparent 53%, rgba(11, 207, 153, .04) 67%, rgba(18, 171, 128, .43) 100%) !important;
  box-shadow: none !important;
  clip-path: polygon(62% 100%, 100% 67%, 100% 100%);
  opacity: .85 !important;
  pointer-events: none;
}
#about .about-text-card::after {
  background:
    radial-gradient(ellipse 110% 90% at 104% 112%, rgba(37, 215, 158, .4), transparent 58%),
    linear-gradient(143deg, rgba(235, 255, 250, .09), transparent 27%, transparent 72%, rgba(28, 244, 176, .17)) !important;
  box-shadow: inset 0 0 26px rgba(39, 216, 171, .12);
}
#about .about-text-card.is-featured-center {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(91, 250, 213, .27), transparent 43%),
    linear-gradient(139deg, #09604f 0%, #023b32 42%, #002a26 100%) !important;
  box-shadow:
    2px 1px 0 rgba(156, 255, 228, .76),
    5px 3px 0 rgba(8, 148, 119, .7),
    9px 5px 0 rgba(3, 79, 69, .46),
    inset 1px 1px 0 rgba(242, 255, 251, .53),
    inset -14px -25px 38px rgba(0, 21, 18, .4),
    0 33px 58px rgba(0, 84, 63, .34),
    0 0 39px rgba(23, 225, 170, .43) !important;
}
#about .about-text-card:hover {
  border-color: #bbffeb !important;
  box-shadow:
    3px 1px 0 rgba(184, 255, 233, .87),
    7px 4px 0 rgba(10, 156, 122, .79),
    11px 7px 0 rgba(3, 81, 67, .56),
    inset 0 1px 0 rgba(249, 255, 253, .55),
    0 42px 65px rgba(0, 64, 52, .4),
    0 0 43px rgba(30, 221, 167, .48) !important;
}
#about .about-card-inner { transform: translateZ(29px); }
#about .about-text-card .about-tag-pill {
  background: linear-gradient(145deg, rgba(0, 87, 70, .76), rgba(2, 42, 39, .82)) !important;
  border-color: rgba(91, 230, 187, .48) !important;
  color: #d1f8ea !important;
}
@media (max-width: 850px) {
  #about .about-scene { inset: -55px -2vw -25px; }
  #about .about-scene-floor { display: none; }
  #about .about-scene-reflection { display: none; }
  #about .about-scene-orb { width: 20px; height: 20px; }
  #about .about-text-card { transform-origin: center; }
}
@media (prefers-reduced-motion: reduce) {
  #about::before { will-change: auto; transform: none !important; }
  #about .about-text-card { will-change: auto; }
}