/* Power H2O — About page styles */

/* ===== Hero ===== */
.about-hero {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 150px 0 80px;
  background:
    linear-gradient(100deg, rgba(12,8,32,0.86) 0%, rgba(12,8,32,0.55) 34%, rgba(20,14,52,0.3) 56%, rgba(12,8,32,0.4) 100%),
    linear-gradient(180deg, rgba(20,14,52,0.1) 30%, rgba(12,8,32,0.62) 100%),
    url("uploads/about-hero.png") center 22% / cover no-repeat,
    linear-gradient(165deg, #241858 0%, #1a1240 56%, #0f0a26 100%);
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.about-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.about-hero .eyebrow-on-dark { color: var(--aqua); }
.about-hero h1 {
  color: #fff;
  font-size: clamp(46px, 8vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-top: 18px;
  max-width: 14ch;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.about-hero-sub {
  color: rgba(255,255,255,0.9);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  max-width: 56ch;
  margin-top: 24px;
}

/* ===== About body ===== */
.about-body { padding: 110px 0; }
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;
}
.about-copy .eyebrow { margin-bottom: 14px; }
.about-copy h2 {
  font-size: clamp(32px, 3.6vw, 46px);
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.about-copy p {
  font-size: 17px;
  line-height: 1.68;
  color: rgba(20,20,31,0.72);
}
.about-copy p + p { margin-top: 20px; }
.about-copy strong { color: var(--charcoal); font-weight: 600; }

.about-creds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 38px;
}
.about-cred {
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.about-cred .ic {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--lavender) 0%, var(--aqua) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.about-cred h3 {
  font-size: 15.5px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.about-cred p { font-size: 13.5px; line-height: 1.5; color: rgba(20,20,31,0.6); }

/* Portrait */
.about-portrait {
  position: relative;
}
.about-portrait image-slot {
  width: 100%;
  height: 560px;
  box-shadow: var(--shadow-lg);
}
.about-portrait .portrait-badge {
  position: absolute;
  left: -18px;
  bottom: 34px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.about-portrait .portrait-badge .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  background: linear-gradient(135deg, var(--purple-600) 0%, var(--aqua-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-portrait .portrait-badge .lbl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--charcoal);
  max-width: 14ch;
}

/* ===== CTA band ===== */
.about-cta {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse at top right, rgba(126,207,192,0.20) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 84%, rgba(139,123,184,0.24) 0%, transparent 52%),
    linear-gradient(135deg, var(--purple-700) 0%, var(--purple-900) 100%);
}
.about-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.022) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.about-cta-inner {
  position: relative;
  z-index: 2;
  padding: 80px 24px;
  max-width: 1000px;
}
.about-cta h2 {
  color: #fff;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.about-cta .btn { margin-top: 40px; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-portrait image-slot { height: 440px; }
  .about-creds { grid-template-columns: 1fr; }
  .about-body { padding: 76px 0; }
}
@media (max-width: 600px) {
  .about-portrait .portrait-badge { left: 12px; bottom: 12px; }
}