/** Shopify CDN: Minification failed

Line 10:8 Expected URL token but found "url("

**/
/* ==========================================================
   HYDRO HOME - ABOUT PAGE (Shopify-Optimized)
   ========================================================== */

@import url('{{ 'bootstrap.min.css' | asset_url }}');

:root {
  --accent: #2fbf71;
  --radius: 1.25rem;
}

/* Reset theme interference */
#about-custom,
#about-custom * {
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #212529;
}

/* Restore normal Bootstrap layout rhythm */
#about-custom section {
  margin-bottom: 4rem;
}

#about-custom .container-xxl {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

#about-custom .row {
  margin-left: -0.75rem !important;
  margin-right: -0.75rem !important;
}

#about-custom [class*="col-"] {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

#about-custom img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   HERO SECTION
   ========================================= */
#about-custom .about-hero {
  background-color: #034752;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#about-custom .hero-title {
  color: white;
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  font-weight: 700;
  line-height: 1.25;
}

#about-custom .white {
  color: #fff !important;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */
#about-custom h1,
#about-custom .display-4 {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
}

#about-custom h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #034752;
}

#about-custom h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
}

#about-custom h5 {
  font-size: 1.1rem;
  color: #0f3e46;
}

#about-custom p {
  margin-bottom: 1rem;
  color: #555;
  font-size: 1.05rem;
}

/* =========================================
   SUBNAV
   ========================================= */
#about-custom .subnavpadding {
  padding-top: 100px;
}

#about-custom .about-subnav {
  background-color: #034752;
  padding-top: 20px;
  padding-bottom: 20px;
}

#about-custom .nav-select {
  color: #557850;
  text-decoration: none;
  font-weight: 500;
}

#about-custom .nav-select:hover {
  color: #003611;
}

/* =========================================
   MISSION & VISION
   ========================================= */
#about-custom .mission-section .mission-box {
  border: 3px solid #3ee24b;
  background-color: #fff;
}

#about-custom .mission-title {
  font-weight: 800;
  color: #034752;
  text-transform: uppercase;
  padding-bottom: 15px;
}

#about-custom .mission-section .section-kicker {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem);
  line-height: 1.25;
  color: #3ee24b;
}

#about-custom .vision-list {
  list-style: none;
  padding-left: 0;
}

#about-custom .vision-list li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 1.75rem;
  line-height: 1.6;
}

#about-custom .vision-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3ee24b;
  font-size: 1.4rem;
}

#about-custom .vision-media {
  aspect-ratio: 4 / 5;
  width: 100%;
}

@media (min-width: 1200px) {
  #about-custom .vision-media {
    min-height: 560px;
  }
}

@media (max-width: 991.98px) {
  #about-custom .vision-media {
    aspect-ratio: 16 / 9;
  }
}

/* =========================================
   VALUE CARDS (CORE VALUES)
   ========================================= */
#about-custom .stat {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

#about-custom .stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

#about-custom .stat-num {
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  color: #0f3e46;
}

#about-custom .stat-label {
  font-size: 1rem;
  color: #6c757d;
}

#about-custom .value-desc {
  display: none;
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.75rem;
  text-align: left;
}

#about-custom .value-card.active .value-desc {
  display: block;
}

#about-custom .value-card.active {
  border-color: #0f3e46;
  background: #f8f9fa;
}

/* =========================================
   POP-OUT FRAME
   ========================================= */
#about-custom .pop-frame {
  position: relative;
  border: 2px solid #111;
  border-radius: var(--radius);
  padding: clamp(10px, 1.2vw, 18px);
  overflow: visible;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

#about-custom .pop-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) * 0.9);
  transform: translate(6%, -6%);
}

@media (max-width: 992px) {
  #about-custom .pop-img {
    transform: translate(3%, -3%);
  }
}

@media (max-width: 576px) {
  #about-custom .pop-img {
    transform: translate(0, 0);
  }
}

/* =========================================
   TEAM & CTA
   ========================================= */
#about-custom .team-img {
  height: 240px;
  object-fit: cover;
}

#about-custom .cta {
  background: linear-gradient(180deg, #fff, #f8f9fa);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* =========================================
   RESTORE LOCAL SCALE & SPACING
   ========================================= */

/* Force base font size back to normal 16px baseline */
#about-custom {
  font-size: 1rem !important; /* 16px */
  line-height: 1.6 !important;
}

/* Boost heading sizes to match local environment */
#about-custom h1,
#about-custom .display-4 {
  font-size: clamp(2.75rem, 1.8rem + 2.8vw, 3.75rem) !important;
  line-height: 1.25 !important;
}

#about-custom h2,
#about-custom .section-title {
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.5rem) !important;
}

#about-custom h3 {
  font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem) !important;
}

/* Ensure paragraph readability */
#about-custom p {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

/* Fix subnav spacing */
#about-custom .about-subnav .nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem !important;
  padding: 1rem 0 !important;
}

#about-custom .about-subnav .nav-item {
  padding: 0 0.75rem;
}

#about-custom .about-subnav a.nav-select {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 0.5rem 0.25rem;
  transition: color 0.2s ease;
}

#about-custom .about-subnav a.nav-select:hover {
  color: #003611;
}

/* Add breathing room above/below subnav */
#about-custom .subnavpadding {
  padding-top: 4rem !important;
  padding-bottom: 2rem !important;
}