.about-intro-section{padding:56px var(--gutter) 72px;background:#f1f5f9}
.about-intro-panel{max-width:var(--container-max);margin:0 auto;border-radius:0 0 36px 36px;overflow:hidden;background:#04223e;box-shadow:0 18px 30px #08223c26;color:#fff}
.about-intro-content{padding:36px 64px 40px;display:grid;grid-template-columns:1fr 320px;gap:70px;align-items:center;background:linear-gradient(100deg,rgba(0,23,43,.96),rgba(3,48,91,.88)),url('assets/img/about-2-1400.webp') center/cover}
.about-intro-badge{display:inline-block;padding:5px 17px;border:1px solid #1c5473;border-radius:20px;font-size:10px;letter-spacing:1px;color:#63b5d5}
.about-intro-tagline{font-size:14px;margin:12px 0 24px;color:#e2eaf3}
.about-intro-eyebrow{font-size:12px;letter-spacing:1px;color:#c4d2e1}
.about-intro-copy h1{font-family:var(--font-sans);font-size:30px;line-height:1.1;letter-spacing:-.7px;color:white;margin:18px 0 24px;font-weight:700}
.about-intro-details{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;font-size:13px;line-height:1.45}.about-intro-details p{margin:0 0 18px}.about-intro-details strong{font-weight:600}.about-intro-details ul{border-left:1px solid #45728b;padding:0 0 0 22px;margin:0;list-style:none;color:#b5c7da;font-size:12px}.about-intro-details li{position:relative;margin-bottom:10px}.about-intro-details li:before{content:'•';position:absolute;left:-13px;color:#49b6d8}
.about-project-preview{text-align:left;padding:16px;border:1px solid #6882a35c;border-radius:28px;background:linear-gradient(145deg,#6288aa66,#45678377);box-shadow:0 12px 25px #001a3044;color:#fff;cursor:pointer;transition:transform .2s,background .2s;min-width:0}.about-project-preview:hover{transform:translateY(-5px);background:#527ca588}.about-project-preview:focus-visible{outline:3px solid #69d5f5;outline-offset:5px}.about-preview-image{position:relative;height:190px;overflow:hidden;border-radius:17px;background:#08243d}.about-preview-image img{width:100%;height:100%;object-fit:cover}.about-preview-image:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#041d38dd)}.about-preview-image>span{position:absolute;left:15px;top:72px;z-index:1;font-size:21px;line-height:1.12}.about-preview-image .about-preview-arrow{top:auto;bottom:12px;display:flex;border:1px solid #ffffff60;border-radius:50%;padding:7px}.about-preview-caption{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:12px;gap:10px;padding:19px 4px 3px}.about-preview-caption span{letter-spacing:3px;color:#bdcfe0}
.about-intro-stats{margin-left:26%;border-radius:28px 0 0 0;background:white;color:#073252;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 42px}.about-stat-number{font-size:38px;font-weight:700;line-height:1}.about-stat-number span{color:#168faf}.about-stat-label{font-size:10px;letter-spacing:.4px;text-transform:uppercase;margin-top:7px}
.about-intro-stats-mobile{display:none}
@media(max-width:1000px){.about-intro-content{padding:32px;gap:32px;grid-template-columns:1fr 270px}.about-intro-details{grid-template-columns:1fr}.about-intro-copy h1{font-size:28px}.about-intro-copy h1 br{display:none}.about-intro-stats{margin-left:15%;padding:26px}.about-stat-number{font-size:32px}}
@media(max-width:640px){.about-intro-section{padding:24px var(--gutter) 48px}.about-intro-panel{border-radius:0 0 24px 24px}.about-intro-content{padding:28px 22px;grid-template-columns:1fr;gap:24px}.about-intro-copy h1{font-size:27px}.about-intro-tagline{font-size:13px}.about-project-preview{max-width:360px;width:100%;justify-self:center}.about-intro-stats{margin-left:0;border-radius:22px 22px 0 0;grid-template-columns:1fr 1fr;gap:24px;padding:26px 22px}.about-stat-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.about-project-preview{transition:none}}
/* Full-width About introduction. */
.about-intro-section{padding-left:0;padding-right:0}
.about-intro-panel{width:100%;max-width:none;border-radius:0;box-shadow:none}
.about-intro-content{padding-left:clamp(24px,5vw,96px);padding-right:clamp(24px,5vw,96px)}
@media(max-width:640px){.about-intro-section{padding-left:0;padding-right:0}.about-intro-panel{border-radius:0}.about-intro-content{padding-left:24px;padding-right:24px}}
/* Remove the empty band below the About introduction at every screen size. */
.about-intro-section{padding-bottom:0}
/* Fill the screen below the shared 72px navigation; grow naturally on small screens. */
.about-intro-section{padding-top:72px;min-height:100svh;display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always}
.about-intro-panel{flex:1;min-height:100svh;display:flex;flex-direction:column}
.about-intro-content{flex:1}
.about-intro-stats{flex-shrink:0}
/* The section already reserves room for the fixed desktop header. Keeping the
   panel at a second full viewport pushed the statistics below the fold. */
@media(min-width:641px){.about-intro-panel{min-height:calc(100svh - 72px)}}
@media(min-width:641px) and (max-height:800px){
  .about-intro-content{padding-top:20px;padding-bottom:20px}
  .about-intro-tagline{margin:8px 0 14px}
  .about-intro-copy h1{margin:12px 0 16px}
  .about-intro-details p{margin-bottom:12px}
  .about-intro-details li{margin-bottom:6px}
  .about-intro-stats{padding-top:20px;padding-bottom:20px}
}

/* Gallery Cards Hover Interactions */
.about-gallery-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  position: relative;
}
.about-gallery-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: clamp(140px, 26vh, 265px);
  position: relative;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1), box-shadow 0.6s cubic-bezier(0.2, 1, 0.2, 1);
}
.about-gallery-card:hover .about-gallery-media {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 40px rgba(0,0,0,0.15);
}
.about-gallery-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.2, 1);
}
.about-gallery-card:hover .about-gallery-media video {
  transform: scale(1.08);
}
.about-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 34, 62, 0.9) 0%, rgba(4, 34, 62, 0.4) 60%, transparent 100%);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  transition: opacity 0.5s ease;
}
.about-gallery-card:hover .about-gallery-overlay {
  opacity: 1;
}
.about-gallery-desc {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  font-family: var(--font-sans);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.about-gallery-desc span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}
.about-gallery-card:hover .about-gallery-desc span {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}