/* ==========================================================================
   HNIN PWINT KYAW (HPK) ENGINEERING & TRADING CO., LTD.
   Design System & Master Stylesheet
   Identity: Industrial + Professional + Modern + Premium
   ========================================================================== */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap');

/* --- Design Tokens / CSS Custom Properties --- */
:root {
  /* Brand Primary & Secondary */
  --hpk-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hpk-navy-dark: #071527;
  --hpk-navy: #0B2240;
  --hpk-navy-light: #133a69;
  --hpk-blue: #0056b3;
  --hpk-cyan: #00A3E0;
  --hpk-cyan-light: #e0f4fc;
  --hpk-cyan-glow: rgba(0, 163, 224, 0.25);
  
  /* Neutral Canvas */
  --hpk-bg-body: #f8fafc;
  --hpk-bg-surface: #ffffff;
  --hpk-bg-muted: #f1f5f9;
  --hpk-bg-dark-surface: #0e2038;
  --hpk-bg-dark-card: #122846;

  /* Typography Colors */
  --hpk-text-title: #0f172a;
  --hpk-text-body: #334155;
  --hpk-text-muted: #64748b;
  --hpk-text-light: #f8fafc;
  --hpk-text-light-muted: #94a3b8;

  /* Borders & Dividers */
  --hpk-border: #e2e8f0;
  --hpk-border-dark: rgba(255, 255, 255, 0.12);
  --hpk-border-cyan: rgba(0, 163, 224, 0.4);

  /* Elevation / Shadows */
  --hpk-shadow-sm: 0 2px 8px rgba(11, 34, 64, 0.04);
  --hpk-shadow-md: 0 8px 24px rgba(11, 34, 64, 0.08);
  --hpk-shadow-lg: 0 16px 36px rgba(11, 34, 64, 0.12);
  --hpk-shadow-dark: 0 16px 40px rgba(0, 0, 0, 0.4);

  /* Radii */
  --hpk-radius-sm: 6px;
  --hpk-radius-md: 10px;
  --hpk-radius-lg: 16px;
  --hpk-radius-xl: 24px;

  /* Transitions */
  --hpk-transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --hpk-transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Base Resets & Global Typography --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}

body {
  font-family: var(--hpk-font-family);
  font-weight: 500;
  color: var(--hpk-text-body);
  background-color: var(--hpk-bg-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: var(--hpk-font-family);
  color: var(--hpk-text-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

a {
  color: var(--hpk-blue);
  text-decoration: none;
  transition: color var(--hpk-transition-fast);
}

a:hover {
  color: var(--hpk-cyan);
}

img {
  max-width: 100%;
  height: auto;
}

/* --- Top Utility Bar --- */
.hpk-topbar {
  background-color: var(--hpk-navy-dark);
  font-size: 0.84rem;
  color: var(--hpk-text-light-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
}

.hpk-topbar a {
  color: var(--hpk-text-light-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hpk-topbar a:hover {
  color: var(--hpk-cyan);
}

.hpk-topbar .separator {
  opacity: 0.3;
  margin: 0 10px;
}

/* --- Main Navigation Header --- */
.hpk-header {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hpk-border);
  transition: all var(--hpk-transition);
  position: sticky;
  top: 0;
  z-index: 1040;
}

.hpk-header.scrolled {
  box-shadow: var(--hpk-shadow-md);
  background-color: rgba(255, 255, 255, 0.98);
  padding: 4px 0;
}

.hpk-brand {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  text-decoration: none;
}

.hpk-brand-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

.hpk-brand:hover .hpk-brand-logo {
  transform: scale(1.09);
  filter: drop-shadow(0 8px 18px rgba(0, 163, 224, .45));
}

.hpk-brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.hpk-brand-name {
  font-family: var(--hpk-font-family);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .3s ease;
}

.hpk-brand-tagline {
  margin-top: 3px;
  font-family: var(--hpk-font-family);
  font-size: .6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  letter-spacing: .14em;
  white-space: nowrap;
  transition: color .3s ease;
}

.nav-link {
  font-family: var(--hpk-font-family);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--hpk-text-body);
  padding: 10px 11px !important;
  position: relative;
  transition: color var(--hpk-transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--hpk-navy) !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  background-color: var(--hpk-cyan);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--hpk-transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* --- Buttons --- */
.btn-hpk-primary {
  background-color: var(--hpk-navy);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 24px;
  border-radius: var(--hpk-radius-md);
  border: 1px solid var(--hpk-navy);
  box-shadow: 0 4px 12px rgba(11, 34, 64, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--hpk-transition-fast);
}

.btn-hpk-primary:hover {
  background-color: var(--hpk-navy-light);
  border-color: var(--hpk-navy-light);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 34, 64, 0.25);
}

.btn:focus-visible,
.filter-btn:focus-visible,
.nav-link:focus-visible,
.hpk-brand:focus-visible {
  outline: 3px solid var(--hpk-cyan);
  outline-offset: 3px;
  box-shadow: none;
}

.btn-hpk-cyan {
  background-color: var(--hpk-cyan);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 24px;
  border-radius: var(--hpk-radius-md);
  border: 1px solid var(--hpk-cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--hpk-transition-fast);
}

.btn-hpk-cyan:hover {
  background-color: #0092c8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--hpk-cyan-glow);
}

.btn-hpk-outline-light {
  background-color: transparent;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 24px;
  border-radius: var(--hpk-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--hpk-transition-fast);
}

.btn-hpk-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-hpk-outline-navy {
  background-color: transparent;
  color: var(--hpk-navy);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 24px;
  border-radius: var(--hpk-radius-md);
  border: 1.5px solid var(--hpk-navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--hpk-transition-fast);
}

.btn-hpk-outline-navy:hover {
  background-color: var(--hpk-navy);
  color: #ffffff;
  transform: translateY(-2px);
}

/* --- Section Styling & Headers --- */
.section-py {
  padding-top: 88px;
  padding-bottom: 88px;
}

@media (max-width: 768px) {
  .section-py {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.section-badge-cyan {
  background-color: var(--hpk-cyan-light);
  color: #0077a4;
  border: 1px solid rgba(0, 163, 224, 0.2);
}

.section-badge-dark {
  background-color: rgba(0, 163, 224, 0.15);
  color: var(--hpk-cyan);
  border: 1px solid rgba(0, 163, 224, 0.35);
}

.section-title {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.12;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.85rem;
  }
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--hpk-text-muted);
  max-width: 720px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* --- Hero Section --- */
.hpk-hero {
  position: relative;
  background-color: var(--hpk-navy-dark);
  color: #ffffff;
  padding: 104px 0 92px;
  overflow: hidden;
}

.hpk-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.22;
  mix-blend-mode: luminosity;
  filter: contrast(1.15) brightness(0.9);
}

.hpk-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(0, 163, 224, 0.15) 0%, transparent 60%),
              linear-gradient(135deg, rgba(7, 21, 39, 0.96) 0%, rgba(11, 34, 64, 0.92) 50%, rgba(7, 21, 39, 0.98) 100%);
}

.hpk-hero-content {
  position: relative;
  z-index: 2;
}

.hpk-hero-title {
  color: #ffffff;
  font-size: clamp(2.35rem, 4.2vw, 3.65rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
  max-width: 13ch;
}

@media (max-width: 991px) {
  .hpk-hero-title {
    font-size: 2.5rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-link {
    font-size: 0.8rem;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  .btn-hpk-primary {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (max-width: 576px) {
  .hpk-hero-title {
    font-size: 2.05rem;
  }
}

.hpk-hero-lead {
  font-size: 1.15rem;
  color: var(--hpk-text-light-muted);
  max-width: 56ch;
  margin-bottom: 34px;
  line-height: 1.75;
}

.hpk-hero-image-box {
  position: relative;
  z-index: 2;
  border-radius: var(--hpk-radius-lg);
  overflow: hidden;
  box-shadow: var(--hpk-shadow-dark);
  border: 1px solid var(--hpk-border-dark);
}

.hpk-hero-image-box img {
  width: 100%;
  height: 410px;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

.hpk-hero-floating-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(11, 34, 64, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--hpk-radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Trust Credentials Bar --- */
.hpk-trust-bar {
  background-color: var(--hpk-navy);
  color: #ffffff;
  border-top: 1px solid var(--hpk-border-dark);
  border-bottom: 1px solid var(--hpk-border-dark);
  padding: 30px 0;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}

.trust-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--hpk-radius-md);
  background-color: rgba(0, 163, 224, 0.15);
  color: var(--hpk-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  border: 1px solid rgba(0, 163, 224, 0.3);
}

.trust-content h4 {
  color: #ffffff;
  font-size: 1.05rem;
  margin: 0;
  font-weight: 700;
}

.trust-content p {
  color: var(--hpk-text-light-muted);
  font-size: 0.82rem;
  margin: 0;
}

/* --- Cards (General, Product, Feature) --- */
.hpk-card {
  background-color: var(--hpk-bg-surface);
  border: 1px solid var(--hpk-border);
  border-radius: var(--hpk-radius-lg);
  padding: 32px 28px;
  height: 100%;
  transition: all var(--hpk-transition);
  position: relative;
}

.hpk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hpk-shadow-lg);
  border-color: #cbd5e1;
}

.feature-icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--hpk-radius-md);
  background-color: var(--hpk-cyan-light);
  color: #0077a4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 22px;
}

/* --- Product Cards --- */
.product-card {
  background-color: var(--hpk-bg-surface);
  border: 1px solid var(--hpk-border);
  border-radius: var(--hpk-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--hpk-transition), box-shadow var(--hpk-transition), border-color var(--hpk-transition);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hpk-shadow-lg);
  border-color: rgba(0, 163, 224, 0.5);
}

.product-image-container {
  height: 232px;
  background: linear-gradient(145deg, #f8fafc, #eef3f8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  border-bottom: 1px solid var(--hpk-border);
}

.product-image-container img {
  max-height: 184px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform var(--hpk-transition-fast);
}

.product-card:hover .product-image-container img {
  transform: scale(1.06);
}

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: var(--hpk-navy);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product-badge-exclusive {
  background-color: #0077a4;
}

.product-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--hpk-text-title);
  line-height: 1.3;
}

.product-model {
  font-size: 0.82rem;
  color: var(--hpk-cyan);
  font-weight: 700;
  font-family: monospace;
  margin-bottom: 12px;
}

.product-specs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 0.85rem;
}

.product-specs-list li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed var(--hpk-border);
  color: var(--hpk-text-muted);
}

.product-specs-list li strong {
  color: var(--hpk-text-body);
}

/* --- Filter Tabs --- */
.hpk-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
  justify-content: center;
}

.filter-btn {
  background: var(--hpk-bg-surface);
  border: 1px solid var(--hpk-border);
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--hpk-text-body);
  cursor: pointer;
  transition: all var(--hpk-transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--hpk-navy);
  color: #ffffff;
  border-color: var(--hpk-navy);
}

/* --- Dark Theme Sections (e.g. Industrial Refrigeration & Ammonia Gas) --- */
.hpk-section-dark {
  background-color: var(--hpk-navy-dark);
  color: #ffffff;
  position: relative;
}

.hpk-section-dark h2,
.hpk-section-dark h3,
.hpk-section-dark h4 {
  color: #ffffff;
}

.hpk-section-dark .section-subtitle {
  color: var(--hpk-text-light-muted);
}

.dark-feature-card {
  background-color: var(--hpk-bg-dark-card);
  border: 1px solid var(--hpk-border-dark);
  border-radius: var(--hpk-radius-lg);
  padding: 30px;
  transition: all var(--hpk-transition);
}

.dark-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--hpk-border-cyan);
}

/* --- Technical Spec Table --- */
.tech-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--hpk-radius-md);
  overflow: hidden;
  border: 1px solid var(--hpk-border);
  background: #ffffff;
}

.tech-table th {
  background: var(--hpk-navy);
  color: #ffffff;
  padding: 14px 18px;
  font-size: 0.88rem;
  font-weight: 600;
}

.tech-table td {
  padding: 12px 18px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--hpk-border);
  color: var(--hpk-text-body);
}

.tech-table tr:last-child td {
  border-bottom: none;
}

.tech-table tr:nth-child(even) td {
  background-color: #f8fafc;
}

/* --- Partners Section --- */
.partner-card {
  background-color: #ffffff;
  border: 1px solid var(--hpk-border);
  border-radius: var(--hpk-radius-lg);
  padding: 30px 24px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--hpk-transition);
}

.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hpk-shadow-md);
  border-color: var(--hpk-cyan);
}

.partner-role-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #0077a4;
  background-color: var(--hpk-cyan-light);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.partner-logo-img {
  height: 70px;
  max-width: 180px;
  object-fit: contain;
  margin-bottom: 16px;
}

/* --- Contact & Quote Form --- */
.contact-info-card {
  background-color: var(--hpk-navy);
  color: #ffffff;
  border-radius: var(--hpk-radius-lg);
  padding: 40px;
  height: 100%;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--hpk-radius-md);
  background: rgba(0, 163, 224, 0.15);
  color: var(--hpk-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  border: 1px solid rgba(0, 163, 224, 0.3);
}

.contact-form-card {
  background-color: #ffffff;
  border: 1px solid var(--hpk-border);
  border-radius: var(--hpk-radius-lg);
  padding: 36px;
  box-shadow: var(--hpk-shadow-sm);
}

.form-control, .form-select {
  padding: 12px 16px;
  border-radius: var(--hpk-radius-md);
  border: 1px solid var(--hpk-border);
  font-size: 0.95rem;
  color: var(--hpk-text-title);
  transition: all var(--hpk-transition-fast);
}

.form-control:focus, .form-select:focus {
  border-color: var(--hpk-cyan);
  box-shadow: 0 0 0 3px var(--hpk-cyan-glow);
  outline: none;
}

.form-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--hpk-text-title);
  margin-bottom: 6px;
}

/* --- Footer --- */
.hpk-footer {
  background-color: var(--hpk-navy-dark);
  color: var(--hpk-text-light-muted);
  border-top: 1px solid var(--hpk-border-dark);
  padding: 72px 0 28px;
  font-size: 0.9rem;
}

.hpk-footer h4 {
  color: #ffffff;
  font-size: 1.05rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--hpk-text-light-muted);
  transition: color var(--hpk-transition-fast);
}

.footer-links a:hover {
  color: var(--hpk-cyan);
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
}

/* --- Media Queries / Mobile Responsiveness --- */
@media (max-width: 991px) {
  .navbar-collapse {
    background: #ffffff;
    border-radius: var(--hpk-radius-md);
    padding: 20px;
    box-shadow: var(--hpk-shadow-lg);
    margin-top: 15px;
    border: 1px solid var(--hpk-border);
  }

  .nav-link {
    padding: 10px 8px !important;
  }

  .hpk-hero {
    padding: 76px 0 68px;
  }

  .hpk-hero-image-box img {
    height: 350px;
  }
}

@media (max-width: 575.98px) {
  .section-py {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hpk-hero {
    padding: 60px 0 52px;
  }

  .hpk-hero-title {
    font-size: clamp(2rem, 9vw, 2.5rem);
    max-width: 15ch;
  }

  .hpk-hero-lead {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .hpk-hero-image-box img {
    height: 285px;
  }

  .hpk-hero-floating-badge {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px;
    gap: 10px;
  }

  .contact-info-card,
  .contact-form-card {
    padding: 26px 22px;
  }

  .product-image-container {
    height: 210px;
  }

  .product-body {
    padding: 20px;
  }

  .hpk-footer {
    padding-top: 56px;
  }
}

/* Industrial refrigeration application markers */
.solution-applications {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
}

.solution-applications span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--hpk-border);
  border-radius: 999px;
  background: #fff;
  color: var(--hpk-navy);
  font-size: 0.88rem;
  font-weight: 600;
}

.solution-applications i {
  color: var(--hpk-cyan);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* HPK Ice & Frost visual system */
:root {
  --hpk-navy-dark: #0f172a;
  --hpk-navy: #0b3052;
  --hpk-navy-light: #16466f;
  --hpk-blue: #0b3052;
  --hpk-cyan: #00a3e0;
  --hpk-cyan-light: #e8f8fd;
  --hpk-cyan-glow: rgba(0,163,224,.18);
  --hpk-bg-body: #fff;
  --hpk-bg-surface: #fff;
  --hpk-bg-muted: #f8fafc;
  --hpk-bg-dark-surface: #f8fafc;
  --hpk-bg-dark-card: #fff;
  --hpk-text-title: #0f172a;
  --hpk-text-body: #475569;
  --hpk-text-muted: #64748b;
  --hpk-text-light: #0f172a;
  --hpk-text-light-muted: #64748b;
  --hpk-border: #e2e8f0;
  --hpk-border-dark: rgba(15,23,42,.1);
  --hpk-border-cyan: rgba(0,163,224,.3);
  --ice-white: #fff;
  --ice-frost: #f8fafc;
  --ice-slate: #0f172a;
  --ice-body: #475569;
  --ice-blue: #0b3052;
  --ice-cyan: #00a3e0;
}
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { padding-top:72px; background:var(--ice-white); color:var(--ice-body); }
.hpk-topbar { display:none!important; }
.hpk-header { position:fixed; inset:0 0 auto; z-index:1040; height:72px; padding:0; background:#0f172a; backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid rgba(226,232,240,.8); box-shadow:0 2px 14px rgba(15,23,42,.035); transition:transform .35s ease,background .25s ease; }
.hpk-header.header-hidden { transform:translateY(-110%); }
.hpk-header .container,.hpk-header nav { height:100%; }
.hpk-header .navbar { padding-top:0!important; padding-bottom:0!important; }
.hpk-brand-logo { height:46px; }
.nav-link { min-height:44px; display:flex; align-items:center; color:#334155; font-size:.88rem; font-weight:500; padding:10px 14px!important; }
.nav-link:hover,.nav-link.active { color:var(--ice-blue)!important; }
.nav-link::after { bottom:5px; height:1px; background:var(--ice-cyan); }
.nav-quote,.btn-hpk-primary.nav-quote { min-height:44px; padding:9px 21px; border-radius:999px; background:#3b82f6; border-color:#3b82f6; box-shadow:0 4px 14px rgba(59,130,246,.24); }
.nav-quote:hover { background:#2563eb; border-color:#2563eb; box-shadow:0 6px 18px rgba(59,130,246,.32); }
.navbar-toggler { display:none; min-width:44px; min-height:44px; color:var(--ice-slate); font-size:1.45rem; }
.hpk-hero { position:relative; overflow:hidden; min-height:calc(100svh - 72px); padding:78px 0 58px; background:radial-gradient(ellipse at 50% 94%,rgba(0,163,224,.08),transparent 44%),linear-gradient(180deg,#fff 0%,#f8fafc 100%); color:var(--ice-body); }
.hero-copy { max-width:960px; }
.hpk-hero-title { max-width:850px; margin:0 auto 22px; color:var(--ice-slate); font-size:clamp(2.7rem,6.5vw,5rem); font-weight:750; line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }
.hpk-hero-lead { max-width:730px; margin:0 auto 30px; color:var(--ice-body); font-size:1.08rem; }
.hpk-hero-image-box { max-width:920px; margin:auto; overflow:hidden; border:1px solid var(--hpk-border); border-radius:26px; box-shadow:0 18px 55px rgba(15,23,42,.09); }
.hpk-hero-image-box img { height:clamp(240px,32vw,390px); }
.hpk-hero-floating-badge { background:rgba(255,255,255,.94); border:1px solid rgba(226,232,240,.9); box-shadow:0 8px 24px rgba(15,23,42,.1); backdrop-filter:blur(12px); }
.hpk-hero-floating-badge strong { color:var(--ice-slate)!important; }
.hpk-hero-floating-badge small { color:#64748b!important; }
.hpk-hero-floating-badge .trust-icon { background:var(--ice-cyan-light)!important; color:var(--ice-cyan)!important; }
.btn-hpk-cyan { min-height:48px; border-radius:999px; background:var(--ice-cyan); border-color:var(--ice-cyan); }
.btn-hpk-cyan:hover { background:#0088bf; border-color:#0088bf; }
.btn-hpk-outline-navy { min-height:48px; border-radius:999px; color:var(--ice-blue); border-color:var(--ice-blue); }
.btn-hpk-outline-navy:hover { background:var(--ice-blue); border-color:var(--ice-blue); }
.hpk-hero::after { content:'⌄'; position:absolute; left:50%; bottom:12px; color:#94a3b8; font-size:1.5rem; transform:translateX(-50%); animation:ice-chevron 1.5s ease-in-out infinite; }
@keyframes ice-chevron { 50% { transform:translate(-50%,6px); } }
.section-py { padding-block:96px; }
.section-title { color:var(--ice-slate); letter-spacing:-.04em; font-size:clamp(2rem,4vw,3rem); }
.section-subtitle { color:var(--ice-body); }
.section-badge-cyan { background:var(--ice-cyan-light); color:var(--ice-blue); border:0; }
.hpk-trust-bar { background:#fff; color:var(--ice-slate); border-top:1px solid var(--hpk-border); border-bottom:1px solid var(--hpk-border); }
.trust-content h4 { color:var(--ice-slate); }
.trust-content p { color:#64748b; }
.trust-icon { color:var(--ice-cyan); background:var(--ice-cyan-light); border:0; }
#products,#capabilities,#why-hpk,#partners,#contact { background-color:var(--ice-frost)!important; }
#products .container>.text-center { margin-bottom:42px!important; }
#productGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(225px,auto); gap:20px; margin:0; }
#productGrid>.product-item-col { width:auto; padding:0; min-width:0; }
#productGrid>[data-category="ammonia"] { grid-column:1 / span 2; grid-row:1 / span 2; }
.product-card { height:100%; overflow:hidden; border:1px solid #e2e8f0; border-radius:24px; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.045); transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s,border-color .42s; will-change:transform; }
.product-card:hover { transform:translateY(-8px); border-color:rgba(0,163,224,.3); box-shadow:0 0 0 1px rgba(0,163,224,.3),0 18px 32px rgba(15,23,42,.09); }
.product-image-container { height:190px; position:relative; overflow:hidden; border:0; border-radius:23px 23px 0 0; background:radial-gradient(circle at 50% 45%,#f8fafc 0%,#fff 72%); padding:24px; }
.product-image-container img { width:auto; max-width:100%; height:100%; max-height:155px; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(15,23,42,.14)); transition:transform .55s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.product-card:hover .product-image-container img { transform:scale(1.08); }
.product-badge { top:14px; left:14px; background:var(--ice-blue); border-radius:999px; font-size:.65rem; }
.product-body { padding:14px 20px 20px; }
.product-model { color:#64748b; margin-bottom:5px; font-size:.72rem; letter-spacing:.04em; }
.product-title { margin-bottom:7px; color:var(--ice-slate); font-size:1.08rem; line-height:1.25; }
.product-body>p { margin-bottom:10px!important; color:#64748b; font-size:.82rem; line-height:1.45; }
.product-specs-list { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; font-size:.72rem; }
.product-specs-list li { width:auto; display:inline-flex; padding:5px 9px; border:1px solid #e7edf2; border-radius:999px; background:#f8fafc; color:#475569; line-height:1.2; }
.product-specs-list li strong { margin-left:4px; color:#0b3052; }
.product-specs-list li:nth-child(n+3) { display:none; }
.btn-inquire-product { min-height:44px; display:inline-flex; align-items:center; justify-content:flex-start; width:auto!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; color:var(--ice-cyan)!important; font-size:.84rem!important; font-weight:650!important; }
.btn-inquire-product i { display:none; }
.btn-inquire-product::after { content:'→'; margin-left:6px; transition:transform .2s; }
.btn-inquire-product:hover { color:var(--ice-blue)!important; transform:none!important; }
.btn-inquire-product:hover::after { transform:translateX(5px); }
#productGrid>[data-category="ammonia"] .product-image-container { height:58%; min-height:340px; }
#productGrid>[data-category="ammonia"] .product-image-container img { max-height:100%; }
#productGrid>[data-category="ammonia"] .product-body { padding:20px 26px 24px; }
#productGrid>[data-category="ammonia"] .product-title { font-size:clamp(1.35rem,2vw,1.8rem); }
#productGrid>[data-category="ammonia"] .product-body>p { max-width:55ch; }
.product-item-col.reveal-item { opacity:0; transform:translateY(26px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1); }
.product-item-col.reveal-item.is-visible { opacity:1; transform:translateY(0); }
.filter-btn { min-height:44px; border-color:#e2e8f0; background:#fff; }
.filter-btn:hover,.filter-btn.active { background:var(--ice-blue); border-color:var(--ice-blue); }
.hpk-section-dark { background:#fff!important; color:var(--ice-body); }
.hpk-section-dark h2,.hpk-section-dark h3,.hpk-section-dark h4 { color:var(--ice-slate); }
.hpk-section-dark .text-white { color:var(--ice-slate)!important; }
.hpk-section-dark .section-badge-dark { background:var(--ice-cyan-light); color:var(--ice-blue); border-color:transparent; }
.hpk-section-dark .section-subtitle { color:var(--ice-body); }
.dark-feature-card { background:#fff; border:1px solid var(--hpk-border); box-shadow:0 4px 12px rgba(15,23,42,.035); }
.dark-feature-card h5 { color:var(--ice-slate)!important; }
.dark-feature-card p { color:#64748b!important; }
.tech-table { border-color:var(--hpk-border); box-shadow:0 4px 14px rgba(15,23,42,.04); }
.tech-table th { background:var(--ice-blue); }
.hpk-section-dark .row.align-items-center>div:first-child { position:sticky; top:108px; align-self:start; }
.hpk-footer { background:#f8fafc; color:#475569; border-top:1px solid var(--hpk-border); }
.hpk-footer h4,.hpk-footer h5,.hpk-footer .text-white { color:var(--ice-slate)!important; }
.hpk-footer .text-light-muted,.hpk-footer .text-white-50 { color:#64748b!important; }
.hpk-footer .footer-links a { color:#475569; }
.hpk-footer .footer-links a:hover { color:var(--ice-cyan); }
.hpk-footer .btn-outline-light { color:var(--ice-blue); border-color:#cbd5e1; }
.hpk-footer .btn-outline-light:hover { color:#fff; background:var(--ice-blue); }
.hpk-footer [style*="rgba(255, 255, 255"] { background:#fff!important; border-color:#e2e8f0!important; }
.hpk-footer .footer-bottom { border-color:#e2e8f0; }
a:not(.btn):not(.navbar-brand) { text-underline-offset:4px; }
@media(max-width:991.98px) {
 .hpk-header .container { max-width:none; padding-inline:20px; }
 .navbar-toggler { display:block; }
 .navbar-collapse { position:fixed; inset:0; z-index:1; display:flex!important; align-items:center; justify-content:center; background:rgba(8,15,28,.98); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
 .hpk-header.menu-open .navbar-collapse { opacity:1; visibility:visible; }
 .hpk-header.menu-open .navbar-toggler { position:relative; z-index:2; }
 .hpk-header.menu-open .hpk-brand { position:relative; z-index:2; opacity:0; pointer-events:none; }
 .hpk-header .navbar-nav { width:min(86vw,540px); align-items:stretch!important; gap:4px; margin:0!important; }
 .hpk-header .nav-link { min-height:54px; padding:9px 0!important; color:var(--ice-slate); font-size:clamp(2rem,8vw,3.25rem); line-height:1.1; font-weight:700; letter-spacing:-.045em; }
 .hpk-header .nav-link::after { display:none; }
 .hpk-header .nav-item { opacity:0; transform:translateY(14px); transition:opacity .35s ease,transform .35s ease; }
 .hpk-header.menu-open .nav-item { opacity:1; transform:translateY(0); }
 .hpk-header.menu-open .nav-item:nth-child(1) { transition-delay:.04s; }.hpk-header.menu-open .nav-item:nth-child(2) { transition-delay:.09s; }.hpk-header.menu-open .nav-item:nth-child(3) { transition-delay:.14s; }.hpk-header.menu-open .nav-item:nth-child(4) { transition-delay:.19s; }.hpk-header.menu-open .nav-item:nth-child(5) { transition-delay:.24s; }
 .hpk-header .nav-item .nav-quote { width:max-content!important; margin-top:12px; }
 #productGrid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(220px,auto); }
 #productGrid>[data-category="ammonia"] .product-image-container { min-height:280px; }
 .hpk-section-dark .row.align-items-center>div:first-child { position:static; }
}
@media(max-width:575.98px) {
 body { padding-top:64px; }.hpk-header { height:64px; }
  .hpk-brand-logo { height:44px; }
  .hpk-hero { min-height:auto; padding:54px 0 52px; }.hpk-hero-title { font-size:clamp(2.5rem,12vw,3.25rem); }.hpk-hero-lead { font-size:.98rem; }
 .hpk-hero-image-box img { height:230px; }.hpk-hero-floating-badge { left:9px; right:9px; bottom:9px; padding:9px; gap:8px; }
 .section-py { padding-block:60px; }
 #productGrid { grid-template-columns:1fr; grid-auto-rows:auto; gap:14px; }
 #productGrid>[data-category="ammonia"] { grid-column:auto; grid-row:auto; }
 #productGrid>[data-category="ammonia"] .product-image-container { height:245px; min-height:0; }
 #productGrid .product-image-container { height:210px; }
 #productGrid .product-body { padding:13px 17px 17px; }
 .contact-info-card,.contact-form-card { padding:24px 19px; }
}

/* Premium responsive refresh */
:root {
  --hpk-navy-dark: #071527;
  --hpk-cyan: #00a3e0;
  --hpk-canvas: #f5f7fa;
  --hpk-ink: #101820;
  --hpk-glass: rgba(255,255,255,.78);
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
.hpk-header {
  position: fixed; inset: 0 0 auto; padding: 0; height: 72px;
  background: var(--hpk-glass); backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35); border-bottom: 1px solid rgba(7,21,39,.07);
  box-shadow: 0 2px 20px rgba(7,21,39,.035); transition: transform .35s ease, background .25s ease;
}
.hpk-header.header-hidden { transform: translateY(-110%); }
.hpk-header .container, .hpk-header nav { height: 100%; }
.hpk-header .navbar { padding-top: 0!important; padding-bottom: 0!important; }
body { padding-top: 72px; background: #fff; color: #344054; }
.hpk-brand-logo { height: 46px; }
.nav-link { font-size: .86rem; font-weight: 500; padding: 12px 14px!important; color: #263342; }
.nav-link::after { bottom: 5px; left: 14px; right: 14px; height: 1px; }
.nav-quote { min-height: 44px; padding: 9px 20px; border-radius: 999px; background: #3b82f6; border-color: #3b82f6; box-shadow: 0 5px 18px rgba(59,130,246,.28); }
.nav-quote:hover { background: #2563eb; border-color: #2563eb; box-shadow: 0 7px 22px rgba(59,130,246,.36); }
.nav-products { position: static; }
.products-chevron { font-size: .65rem; margin-left: 3px; transition: transform .2s; }
.products-mega { position:absolute; z-index:3; top:calc(100% - 1px); left:0; right:0; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; padding:36px max(calc((100vw - 1120px)/2), 5vw) 42px; background:rgba(255,255,255,.97); backdrop-filter:blur(22px); box-shadow:0 24px 40px rgba(7,21,39,.1); border-top:1px solid rgba(7,21,39,.06); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s, transform .2s, visibility .2s; }
.nav-products:hover .products-mega, .nav-products:focus-within .products-mega { opacity:1; visibility:visible; transform:translateY(0); }
.nav-products:hover .products-chevron { transform:rotate(180deg); }
.products-mega a { display:block; width:max-content; max-width:100%; color:#455263; padding:5px 0; font-size:.94rem; }
.products-mega a:hover { color:var(--hpk-cyan); }
.mega-feature { display:flex!important; flex-direction:column; gap:9px; }
.mega-feature>span:first-child,.mega-heading { color:#8a96a5; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.mega-feature strong { color:var(--hpk-navy-dark); font-size:1.55rem; line-height:1.15; letter-spacing:-.04em; }
.mega-link { color:var(--hpk-cyan); font-size:.88rem; }
.mega-group { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.mega-heading { margin:4px 0 8px; }
.navbar-toggler { display:none; width:44px; height:44px; color:var(--hpk-navy); font-size:1.5rem; }
.hpk-hero { min-height:calc(100svh - 72px); padding:76px 0 54px; background:radial-gradient(ellipse at 50% 83%, rgba(0,163,224,.15), transparent 42%),linear-gradient(150deg,#071527,#0b2240 72%,#0a1b30); }
.hero-copy { max-width:900px; }
.hpk-hero-title { max-width:800px; margin:0 auto 20px; font-size:clamp(2.8rem,6.6vw,5.1rem); line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }
.hpk-hero-lead { max-width:700px; margin:0 auto 30px; color:rgba(255,255,255,.73); font-size:1.08rem; }
.hpk-hero-image-box { max-width:920px; margin:auto; border:0; border-radius:24px; box-shadow:0 25px 75px rgba(0,0,0,.28); }
.hpk-hero-image-box img { height:clamp(240px,34vw,390px); }
.hpk-hero-floating-badge { background:rgba(7,21,39,.78); }
.hpk-hero::after { content:'⌄'; position:absolute; bottom:15px; left:50%; color:rgba(255,255,255,.68); font-size:1.5rem; animation:chevron-bob 1.5s ease-in-out infinite; }
@keyframes chevron-bob { 50% { transform:translate(-50%,6px); } }
.hpk-trust-bar { background:#fff; color:var(--hpk-ink); border:0; border-bottom:1px solid #edf0f3; }
.trust-content h4 { color:var(--hpk-ink); }
.trust-content p { color:#788493; }
.trust-icon { border:0; background:#f0f8fb; }
#products { background:#f5f7f9!important; }
#products .section-title { letter-spacing:-.045em; font-size:clamp(2rem,4vw,3rem); }
.hpk-filter-nav { gap:8px; }
.filter-btn { min-height:44px; background:transparent; border-color:transparent; color:#647181; }
.filter-btn:hover,.filter-btn.active { background:#fff; color:var(--hpk-navy-dark); border-color:#e7eaee; box-shadow:0 3px 12px rgba(7,21,39,.06); }
#productGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
#productGrid>.product-item-col { width:auto; padding:0; }
.product-card { border:0; border-radius:24px; background:#fff; box-shadow:0 8px 28px rgba(15,35,55,.045); overflow:hidden; transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s; will-change:transform; }
.product-card:hover { transform:translateY(-7px) scale(1.012); box-shadow:0 20px 42px rgba(15,35,55,.11); }
.product-image-container { height:285px; border:0; background:#fff; padding:28px; overflow:hidden; }
.product-image-container img { max-height:100%; width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.product-card:hover .product-image-container img { transform:scale(1.075); }
.product-body { padding:4px 26px 25px; }
.product-title { font-size:1.22rem; letter-spacing:-.025em; }
.product-model { color:#738193; font-size:.75rem; letter-spacing:.05em; }
.product-specs-list { font-size:.82rem; }
.product-specs-list li { border-bottom:1px solid #f0f2f4; padding:7px 0; }
.btn-inquire-product { min-height:44px; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; color:#008fc7!important; font-size:.9rem!important; font-weight:600!important; justify-content:flex-start; }
.btn-inquire-product::after { content:'→'; margin-left:7px; display:inline-block; transition:transform .2s; }
.btn-inquire-product:hover { color:#006f9c!important; transform:none!important; }
.btn-inquire-product:hover::after { transform:translateX(5px); }
.product-item-col.reveal-item { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1); }
.product-item-col.reveal-item.is-visible { opacity:1; transform:translateY(0); }
body, a, button { -webkit-tap-highlight-color:transparent; }
a:not(.btn):not(.navbar-brand) { text-decoration-thickness:1px; text-underline-offset:4px; }
.hpk-section-dark .row.align-items-center>div:first-child { position:sticky; top:108px; align-self:start; }
@media(max-width:991.98px) {
 .hpk-header .container { max-width:none; padding:0 20px; }
 .navbar-toggler { display:block; }
 .navbar-collapse { position:fixed; inset:0; z-index:1; display:flex!important; align-items:center; justify-content:center; background:rgba(8,15,28,.98); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
 .hpk-header.menu-open .navbar-collapse { opacity:1; visibility:visible; }
 .hpk-header.menu-open { background:#0f172a; }
 .hpk-header.menu-open .navbar-toggler { position:relative; z-index:2; }
 .hpk-header.menu-open .hpk-brand { position:relative; z-index:2; opacity:0; pointer-events:none; }
 .hpk-header .navbar-nav { align-items:stretch!important; gap:4px; width:min(85vw,520px); margin:0!important; }
 .hpk-header .nav-link { font-size:clamp(2rem,8vw,3.25rem); line-height:1.12; font-weight:700; padding:9px 0!important; color:var(--hpk-navy-dark); letter-spacing:-.045em; }
 .hpk-header .nav-link::after,.products-mega { display:none; }
 .hpk-header .nav-item { opacity:0; transform:translateY(14px); transition:opacity .35s ease,transform .35s ease; }
 .hpk-header.menu-open .nav-item { opacity:1; transform:translateY(0); }
 .hpk-header.menu-open .nav-item:nth-child(1) { transition-delay:.04s; } .hpk-header.menu-open .nav-item:nth-child(2) { transition-delay:.09s; } .hpk-header.menu-open .nav-item:nth-child(3) { transition-delay:.14s; } .hpk-header.menu-open .nav-item:nth-child(4) { transition-delay:.19s; } .hpk-header.menu-open .nav-item:nth-child(5) { transition-delay:.24s; }
 .hpk-header .nav-item .nav-quote { width:max-content!important; margin-top:15px; font-size:1rem; padding:10px 22px; }
 #productGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hpk-section-dark .row.align-items-center>div:first-child { position:static; }
}
@media(max-width:575.98px) {
 .hpk-brand-logo { height:44px; }
 .hpk-hero { min-height:auto; padding:62px 0 48px; }
 .hpk-hero-title { font-size:clamp(2.5rem,12vw,3.3rem); }
 .hpk-hero-lead { font-size:.98rem; }
 .hpk-hero-image-box img { height:250px; }
 .hpk-hero-floating-badge { bottom:10px; left:10px; right:10px; padding:9px; }
 #productGrid { grid-template-columns:1fr; gap:18px; }
 .product-image-container { height:265px; }
 .product-body { padding:4px 22px 22px; }
 .hpk-header .nav-item .nav-quote { min-height:48px; }
}

/* Product bento geometry and card motion */
.hpk-hero {
  min-height:calc(100svh - 72px);
  padding:78px 0 58px;
  background:radial-gradient(ellipse at 50% 95%,rgba(0,163,224,.08),transparent 46%),linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  color:#475569;
}
.hpk-hero-title { max-width:850px; margin-inline:auto; color:#0f172a; font-size:clamp(2.7rem,6.5vw,5rem); line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }
.hpk-hero-lead { max-width:730px; margin-inline:auto; color:#475569; }
.hpk-hero::after {
  content:'';
  position:absolute;
  bottom:18px;
  left:calc(50% - 7px);
  width:14px;
  height:14px;
  border-right:2px solid #94a3b8;
  border-bottom:2px solid #94a3b8;
  transform:rotate(45deg);
  animation:ice-chevron 1.5s ease-in-out infinite;
}
.hpk-hero-image-box { border:1px solid #e2e8f0; box-shadow:0 18px 55px rgba(15,23,42,.09); }
.hpk-hero-floating-badge { background:rgba(255,255,255,.94); border-color:rgba(226,232,240,.9); box-shadow:0 8px 24px rgba(15,23,42,.1); }
.hpk-hero-floating-badge strong { color:#0f172a!important; }
.hpk-hero-floating-badge small { color:#64748b!important; }
.hpk-hero .btn-hpk-outline-navy { min-height:48px; border-radius:999px; color:#0b3052; border-color:#0b3052; }
.hpk-header {
  background:#0f172a!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border-bottom:1px solid rgba(0,0,0,.05)!important;
}
#productGrid.hpk-bento-grid {
  display:grid;
  width:100%;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:20px;
  margin:0;
  align-items:stretch;
}
#productGrid.hpk-bento-grid > .product-item-col {
  width:auto;
  min-width:0;
  min-height:380px;
  padding:0;
}
#productGrid.hpk-bento-grid > .product-item-feature {
  grid-column:1 / span 2;
  grid-row:1 / span 2;
  min-height:780px;
}
#productGrid .product-card {
  display:flex;
  flex-direction:column;
  min-height:380px;
  height:100%;
  padding:0;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 4px 6px rgba(0,0,0,.05);
  transition:all .6s cubic-bezier(.16,1,.3,1);
  will-change:transform,box-shadow;
}
#productGrid .product-card:hover {
  transform:translateY(-8px);
  border-color:#00a3e0;
  box-shadow:0 20px 40px rgba(0,0,0,.08),0 0 0 1px rgba(0,163,224,.3);
}
#productGrid .card-image-wrapper {
  height:190px;
  min-height:190px;
  flex:0 0 190px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:23px 23px 0 0;
  background:radial-gradient(circle at center,#f8fafc 0%,#ffffff 70%);
}
#productGrid .card-image-wrapper img {
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  max-width:none;
  padding:16px;
  object-fit:contain;
  filter:drop-shadow(0 15px 15px rgba(0,0,0,.08));
  transform:translateY(0) scale(1);
  transition:all .6s cubic-bezier(.16,1,.3,1);
  will-change:transform,filter;
}
#productGrid .product-card:hover .card-image-wrapper img {
  filter:drop-shadow(0 25px 25px rgba(0,0,0,.12));
  transform:translateY(-8px) scale(1.05);
}
#productGrid .product-body {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:flex-start;
  padding:24px 32px 28px;
}
#productGrid .product-title {
  margin:3px 0 10px;
  color:#0f172a;
  font-size:1.35rem;
  font-weight:700;
  line-height:1.2;
}
#productGrid .product-model { color:#64748b; }
#productGrid .product-body>p { color:#475569; }
#productGrid .product-specs-list { gap:7px; margin:2px 0 12px; }
#productGrid .product-specs-list li {
  width:auto;
  display:inline-flex;
  padding:6px 10px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#f8fafc;
  color:#475569;
}
#productGrid .product-specs-list li:nth-child(n+3) { display:none; }
#productGrid .btn-inquire-product {
  width:auto!important;
  min-height:44px;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#00a3e0!important;
  font-size:.92rem!important;
  font-weight:600!important;
  text-align:left;
  transition:all .6s cubic-bezier(.16,1,.3,1);
}
#productGrid .btn-inquire-product i { display:none; }
#productGrid .btn-inquire-product::after {
  content:'→';
  display:inline-block;
  margin-left:6px;
  transition:all .6s cubic-bezier(.16,1,.3,1);
}
#productGrid .btn-inquire-product:hover { color:#0b3052!important; transform:none!important; }
#productGrid .btn-inquire-product:hover::after { transform:translateX(6px); }

/* Ammonia feature: landscape photo and copy share the tall card */
#productGrid .product-feature-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:'copy image';
  min-height:780px;
}
#productGrid .product-feature-card .card-image-wrapper {
  grid-area:image;
  height:100%;
  min-height:0;
  flex:initial;
  border-radius:0 23px 23px 0;
}
#productGrid .product-feature-card .card-image-wrapper img {
  padding:0;
  object-fit:cover;
  object-position:center 54%;
}
#productGrid .product-feature-card .product-body {
  grid-area:copy;
  align-self:center;
  justify-content:center;
  padding:40px 32px;
}
#productGrid .product-feature-card .product-title { font-size:clamp(1.6rem,2.6vw,2.25rem); }
#productGrid .product-feature-card .product-body>p { font-size:.98rem; line-height:1.65; }
#productGrid .product-feature-card .product-specs-list li:nth-child(n) { display:inline-flex; }
#productGrid .product-feature-card .product-specs-list li:nth-child(n+3) { display:none; }

@media(max-width:1100px) {
  #productGrid.hpk-bento-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #productGrid.hpk-bento-grid > .product-item-feature { grid-column:1 / span 2; }
  #productGrid .product-feature-card { grid-template-columns:1fr 1fr; }
  #productGrid .product-feature-card .product-body { padding:32px 24px; }
}
@media(max-width:767.98px) {
  #productGrid.hpk-bento-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:16px; }
  #productGrid.hpk-bento-grid > .product-item-col { min-height:380px; }
  #productGrid.hpk-bento-grid > .product-item-feature { grid-column:1 / span 2; grid-row:auto; min-height:560px; }
  #productGrid .product-feature-card { grid-template-columns:1fr; grid-template-areas:'image' 'copy'; min-height:560px; }
  #productGrid .product-feature-card .card-image-wrapper { height:250px; min-height:250px; border-radius:23px 23px 0 0; }
  #productGrid .product-feature-card .product-body { align-self:auto; padding:24px 28px 28px; }
}
@media(max-width:575.98px) {
  #productGrid.hpk-bento-grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:14px; }
  #productGrid.hpk-bento-grid > .product-item-col,
  #productGrid.hpk-bento-grid > .product-item-feature { grid-column:auto; grid-row:auto; min-height:380px; }
  #productGrid .product-feature-card { min-height:0; }
  #productGrid .product-feature-card .card-image-wrapper { height:240px; min-height:240px; }
  #productGrid .product-feature-card .product-body { padding:24px; }
  #productGrid .product-body { padding:22px 24px 24px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .hpk-hero::after { animation:none; }
 .product-item-col.reveal-item { opacity:1; transform:none; }
}

/* Consistent product card sizing */
#productGrid.hpk-bento-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:360px;
  align-items:stretch;
  gap:20px;
}
#productGrid.hpk-bento-grid > .product-item-col,
#productGrid.hpk-bento-grid > .product-item-feature {
  width:auto;
  height:360px;
  min-height:360px;
  grid-column:auto;
  grid-row:auto;
}
#productGrid .product-card,
#productGrid .product-feature-card {
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  padding:0;
}
#productGrid .card-image-wrapper,
#productGrid .product-feature-card .card-image-wrapper {
  width:100%;
  height:145px;
  min-height:145px;
  flex:0 0 145px;
  border-radius:23px 23px 0 0;
  background:radial-gradient(circle at center,#f8fafc 0%,#fff 70%);
}
#productGrid .card-image-wrapper img,
#productGrid .product-feature-card .card-image-wrapper img {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  padding:12px;
  object-fit:contain;
  object-position:center;
}
#productGrid .product-card:hover .card-image-wrapper img {
  transform:translateY(-4px) scale(1.04);
}
#productGrid .product-body,
#productGrid .product-feature-card .product-body {
  display:flex;
  flex:1 1 auto;
  min-height:0;
  align-self:stretch;
  justify-content:flex-start;
  padding:13px 18px 14px;
  overflow:hidden;
}
#productGrid .product-title,
#productGrid .product-feature-card .product-title {
  margin:2px 0 6px;
  font-size:1.08rem;
  line-height:1.2;
}
#productGrid .product-body>p {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  margin:0 0 7px!important;
  font-size:.78rem;
  line-height:1.4;
}
#productGrid .product-specs-list { gap:5px; margin:0 0 4px; }
#productGrid .product-specs-list li { padding:4px 8px; font-size:.67rem; }
#productGrid .product-specs-list li:nth-child(n+3) { display:none!important; }
#productGrid .product-body .mt-auto { margin-top:auto!important; }
#productGrid .btn-inquire-product { min-height:40px; font-size:.82rem!important; }
@media(max-width:991.98px) {
  #productGrid.hpk-bento-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:360px; }
}
@media(max-width:575.98px) {
  #productGrid.hpk-bento-grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:350px; gap:14px; }
  #productGrid.hpk-bento-grid > .product-item-col,
  #productGrid.hpk-bento-grid > .product-item-feature { height:350px; min-height:350px; }
}

/* Ice Flow hero */
.hpk-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:0;
  padding:100px 24px 180px;
  color:#fff;
  background:linear-gradient(135deg,#061c33 0%,#0b3052 50%,#00a3e0 100%);
}
.hpk-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background-image:radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1.8px),radial-gradient(circle,rgba(77,208,255,.42) 1px,transparent 2px);
  background-size:46px 46px,79px 79px;
  background-position:0 0,23px 31px;
  animation:hpk-ice-particles 48s linear infinite;
}
.hpk-hero::after { content:none; }
.hpk-hero-content { position:relative; z-index:1; width:min(1200px,100%); margin:0 auto; }
.hpk-hero-grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:60px; }
.hpk-hero .hero-copy { max-width:none; text-align:left; }
.hpk-hero-brand-badge {
  display:inline-flex; align-items:center; gap:16px; margin:0 0 30px; padding:10px 23px 10px 12px;
  color:#061c33; background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.7); border-radius:999px;
  box-shadow:0 14px 36px rgba(0,18,39,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:hpk-badge-float 5s ease-in-out infinite;
}
.hpk-hero-brand-badge img { width:56px; height:56px; object-fit:cover; border-radius:50%; }
.hpk-hero-brand-divider { width:1px; height:38px; background:rgba(6,28,51,.2); }
.hpk-hero-brand-copy { display:grid; gap:2px; text-align:left; line-height:1.2; }
.hpk-hero-brand-copy strong { color:#061c33; font-size:.95rem; font-weight:800; }
.hpk-hero-brand-copy small { color:#008fc4; font-size:.76rem; font-weight:700; }
.hpk-hero .hpk-hero-title { max-width:700px; margin:0 0 22px; color:#fff; font-size:clamp(2.5rem,4.5vw,4rem); font-weight:800; line-height:1.04; letter-spacing:-.04em; text-wrap:balance; }
.hpk-hero-title span { color:#4dd0ff; }
.hpk-hero .hpk-hero-lead { max-width:640px; margin:0 0 30px; color:rgba(255,255,255,.8); font-size:1.15rem; line-height:1.65; }
.hpk-hero .hpk-hero-lead strong { color:#fff; }
.hpk-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.hpk-hero-button { display:inline-flex; min-height:54px; align-items:center; justify-content:center; gap:11px; padding:0 25px; border:1px solid transparent; border-radius:999px; font-weight:750; text-decoration:none; transition:transform .22s ease,background-color .22s ease,color .22s ease,box-shadow .22s ease,border-color .22s ease; }
.hpk-hero-button:hover { transform:translateY(-3px); }
.hpk-hero-button-primary { color:#fff; background:#00a3e0; box-shadow:0 10px 26px rgba(0,163,224,.24); }
.hpk-hero-button-primary:hover { color:#008fc4; background:#fff; box-shadow:0 12px 30px rgba(77,208,255,.3); }
.hpk-hero-button-secondary { color:#fff; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hpk-hero-button-secondary:hover { color:#fff; background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); }
.hpk-hero .hpk-hero-image-box { position:relative; width:100%; max-width:none; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:32px; box-shadow:0 30px 60px rgba(0,0,0,.4); animation:hpk-image-float 8s ease-in-out infinite; }
.hpk-hero .hpk-hero-image-box img { display:block; width:100%; height:clamp(380px,40vw,520px); object-fit:cover; }
.hpk-hero .hpk-hero-floating-badge { position:absolute; right:18px; bottom:18px; left:18px; display:flex; align-items:center; gap:13px; padding:14px 16px; color:#061c33; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.72); border-radius:18px; box-shadow:0 12px 34px rgba(0,16,38,.24); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.hpk-hero .hpk-hero-floating-badge .trust-icon { display:grid; flex:0 0 46px; width:46px; height:46px; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#4dd0ff,#0b3052); }
.hpk-hero .hpk-hero-floating-badge .trust-icon i { font-size:1.25rem; }
.hpk-hero .hpk-hero-floating-badge strong { display:block; margin-bottom:3px; color:#061c33!important; font-size:.95rem; }
.hpk-hero .hpk-hero-floating-badge small { display:block; color:#52677a!important; font-size:.78rem; line-height:1.4; }
@keyframes hpk-ice-particles { to { background-position:460px 330px,-395px 395px; } }
@keyframes hpk-badge-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes hpk-image-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-15px); } }
@media(max-width:990.98px) {
  .hpk-hero { padding:76px 24px 150px; }
  .hpk-hero-grid { grid-template-columns:1fr; gap:44px; }
  .hpk-hero .hero-copy { text-align:center; }
  .hpk-hero .hpk-hero-title,.hpk-hero .hpk-hero-lead { margin-right:auto; margin-left:auto; }
  .hpk-hero-actions { justify-content:center; }
  .hpk-hero .hpk-hero-image-box { width:min(680px,100%); margin:0 auto; }
  .hpk-hero .hpk-hero-image-box img { height:clamp(300px,54vw,440px); }
  .hpk-hero-brand-badge { margin-bottom:26px; }
  .hpk-hero-brand-copy { text-align:left; }
  .hpk-hero-brand-badge,.hpk-hero .hpk-hero-image-box { animation:none; }
}
@media(max-width:575.98px) {
  .hpk-hero { padding:56px 18px 130px; }
  .hpk-hero-grid { gap:34px; }
  .hpk-hero-brand-badge { gap:11px; padding:8px 17px 8px 9px; }
  .hpk-hero-brand-badge img { width:48px; height:48px; }
  .hpk-hero .hpk-hero-title { font-size:clamp(2.5rem,12vw,3.5rem); }
  .hpk-hero .hpk-hero-lead { font-size:1rem; }
  .hpk-hero-actions { flex-direction:column; }
  .hpk-hero-button { width:min(100%,300px); }
  .hpk-hero .hpk-hero-image-box { border-radius:24px; }
  .hpk-hero .hpk-hero-image-box img { height:300px; }
  .hpk-hero .hpk-hero-floating-badge { right:10px; bottom:10px; left:10px; gap:9px; padding:10px; }
  .hpk-hero .hpk-hero-floating-badge small { font-size:.7rem; }
}
@media(prefers-reduced-motion:reduce) {
  .hpk-hero::before,.hpk-hero-brand-badge,.hpk-hero .hpk-hero-image-box { animation:none; }
}

/* About: industrial luxury — same dark canvas, grid and glow language as the hero */
.nx-about {
  position: relative;
  background-color: #0f172a;
  background-image: linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.nx-about-clip { position: relative; overflow: hidden; padding: clamp(84px, 9vw, 128px) 0; }
.nx-about-clip::before,
.nx-about-clip::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; }
.nx-about-clip::before { top: -22%; left: -14%; width: 58%; height: 78%; background: radial-gradient(circle, rgba(59, 130, 246, .18) 0%, transparent 68%); }
.nx-about-clip::after { right: -12%; bottom: -26%; width: 52%; height: 72%; background: radial-gradient(circle, rgba(0, 163, 224, .14) 0%, transparent 68%); }
.nx-about-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 3.4vw, 52px); align-items: start; }
.nx-about-copy { min-width: 0; }
.nx-about-title { margin: 24px 0 0; color: #f8fafc; background-image: linear-gradient(180deg, #f8fafc 32%, #93c5fd 128%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--hpk-font-family); font-size: clamp(1.9rem, 3.5vw, 2.85rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; filter: drop-shadow(0 0 10px rgba(125, 211, 252, .16)); transition: filter .3s ease, transform .3s ease; }
.nx-about-title:hover { filter: drop-shadow(0 0 16px rgba(125, 211, 252, .28)); transform: translateY(-1px); }
.nx-about-lead { margin: 24px 0 0; color: #cbd5e1; font-size: 1.06rem; line-height: 1.75; }
.nx-about-body { margin: 16px 0 0; color: #94a3b8; font-size: 1rem; line-height: 1.78; text-align: justify; }
.nx-about-lead strong,
.nx-about-body strong { color: #e2e8f0; font-weight: 600; }
.nx-about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.nx-about-link { display: inline-flex; align-items: center; gap: 8px; color: #7dd3fc; font-family: var(--hpk-font-family); font-size: .95rem; font-weight: 600; text-decoration: none; }
.nx-about-link span { display: inline-block; transition: transform .25s ease; }
.nx-about-link:hover { color: #bae6fd; }
.nx-about-link:hover span { transform: translateX(5px); }
.nx-about-stack { display: flex; flex-direction: column; gap: 18px; }
.nx-about-card { display: flex; align-items: flex-start; gap: 18px; min-width: 0; padding: 26px; border: 1px solid #e4eaf2; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .05); transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, box-shadow .3s ease; }
.nx-about-card:hover { transform: translateY(-5px); border-color: rgba(59, 130, 246, .45); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 48px rgba(15, 23, 42, .1), 0 0 0 4px rgba(59, 130, 246, .1); }
.nx-about-icon { display: grid; flex: 0 0 54px; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(59, 130, 246, .18); border-radius: 14px; color: #2563eb; background: linear-gradient(180deg, #f0f6ff, #dfeaff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); font-size: 1.35rem; transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
.nx-about-card:hover .nx-about-icon { color: #fff; border-color: #3b82f6; background: linear-gradient(180deg, #60a5fa, #3b82f6); transform: scale(1.06); }
.nx-about-card-body { min-width: 0; }
.nx-about-card h3 { margin: 0 0 8px; color: #0f172a; font-family: var(--hpk-font-family); font-size: 1.02rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.nx-about-card p { margin: 0; color: #556072; font-size: .92rem; line-height: 1.62; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .nx-about-title { -webkit-text-fill-color: #f8fafc; }
}
@media (max-width: 992px) {
  .nx-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .nx-about-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .nx-about-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .nx-about-clip { padding: 68px 0; }
  .nx-about-stack { grid-template-columns: 1fr; }
  .nx-about-card { padding: 22px; }
  .nx-about-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nx-about-actions .nx-btn { width: 100%; }
}

/* Engineer story: full-bleed factory visit feature */
#capabilities.engineer-story { position:relative; isolation:isolate; display:flex; min-height:clamp(600px,68vw,780px); align-items:stretch; overflow:hidden; padding:0; background:#081a2d!important; }
#capabilities .engineer-story-image,.engineer-story-shade { position:absolute; z-index:-1; inset:0; width:100%; height:100%; }
#capabilities .engineer-story-image { object-fit:cover; object-position:center 68%; transform:scale(1.015); }
#capabilities .engineer-story-shade { background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.1) 50%,transparent 100%); }
#capabilities .engineer-story-content { display:flex; width:100%; max-width:none; align-items:center; justify-content:flex-end; margin:0; padding:76px 24px; }
#capabilities .engineer-story-card { position:relative; isolation:isolate; overflow:hidden; width:min(330px,30%); padding:24px; border:1px solid rgba(255,255,255,.2); border-radius:32px; background:rgba(255,255,255,.08); box-shadow:0 8px 32px rgba(0,0,0,.3); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); animation:engineer-card-enter .75s cubic-bezier(.2,.8,.2,1) both,engineer-card-glow 6s ease-in-out .8s infinite; transition:transform .25s ease; }
#capabilities .engineer-story-card:hover { transform:translateY(-4px); }
#capabilities .engineer-story-card::after { content:""; position:absolute; z-index:0; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%); pointer-events:none; }
#capabilities .engineer-story-card>* { position:relative; z-index:1; }
#capabilities .engineer-story-eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:18px; color:#4dd0ff; font-size:.76rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
#capabilities .engineer-story-eyebrow i { font-size:1rem; }
#capabilities .engineer-story-card h2 { margin:0 0 10px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.3); font-size:clamp(1.9rem,2.5vw,2.45rem); font-weight:800; line-height:1.02; letter-spacing:-.055em; }
#capabilities .engineer-story-card>p { margin:0 0 15px; color:rgba(255,255,255,.85); font-size:.86rem; line-height:1.55; }
#capabilities .engineer-service-list { display:grid; gap:6px; margin:0 0 16px; padding:0; list-style:none; }
#capabilities .engineer-service-list li { display:flex; min-height:42px; align-items:center; gap:9px; padding:6px 9px; border:1px solid rgba(255,255,255,.1); border-radius:13px; color:rgba(255,255,255,.94); background:rgba(255,255,255,.05); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:.82rem; font-weight:650; transition:transform .22s ease,border-color .22s ease,background-color .22s ease; }
#capabilities .engineer-service-list li:hover { transform:translateX(4px); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.15); }
#capabilities .engineer-service-list li>i:first-child { display:grid; width:26px; height:26px; flex:0 0 26px; place-items:center; border-radius:9px; color:#4dd0ff; background:rgba(255,255,255,.08); font-size:.85rem; }
#capabilities .engineer-service-list li span { flex:1; }
#capabilities .engineer-service-list li>i:last-child { color:rgba(255,255,255,.68); font-size:.85rem; }
#capabilities .engineer-story-cta { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:9px; padding:0 16px; border-radius:999px; color:#061c33; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.18); font-size:.8rem; font-weight:700; text-decoration:none; transition:transform .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease; }
#capabilities .engineer-story-cta:hover { transform:translateY(-2px); color:#fff; background:#00a3e0; box-shadow:0 12px 26px rgba(0,163,224,.25); }
#capabilities .engineer-story-cta i { transition:transform .2s ease; }
#capabilities .engineer-story-cta:hover i { transform:translateX(4px); }
@keyframes engineer-card-enter { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes engineer-card-glow { 0%,100% { box-shadow:0 8px 32px rgba(0,0,0,.3); } 50% { box-shadow:0 12px 38px rgba(0,0,0,.36); } }
@media(max-width:767.98px) {
  #capabilities.engineer-story { min-height:740px; }
  #capabilities .engineer-story-image { object-position:58% center; }
  #capabilities .engineer-story-shade { background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.1) 50%,transparent 100%); }
  #capabilities .engineer-story-content { align-items:flex-end; padding:34px 18px; }
  #capabilities .engineer-story-card { width:100%; padding:30px 26px; border-radius:32px; }
  #capabilities .engineer-story-card h2 { font-size:clamp(2.25rem,10vw,3rem); }
}
@media(max-width:420px) {
  #capabilities.engineer-story { min-height:770px; }
  #capabilities .engineer-story-card { padding:26px 21px; }
  #capabilities .engineer-story-card>p { font-size:.94rem; }
}
@media(prefers-reduced-motion:reduce) {
  #capabilities .engineer-story-card { animation:none; }
  #capabilities .engineer-service-list li,#capabilities .engineer-story-cta { transition:none; }
}

/* Partners: refined global-to-local ecosystem */
#partners { position:relative; overflow:hidden; padding-block:clamp(82px,9vw,120px); background:radial-gradient(ellipse at 50% 0%,rgba(0,163,224,.075),transparent 48%),#f8fafc!important; }
#partners .container { position:relative; z-index:1; }
#partners .container>.text-center { max-width:760px; margin:0 auto 54px!important; }
#partners .section-badge { padding:8px 14px; border:1px solid rgba(0,163,224,.12); border-radius:999px; background:rgba(0,163,224,.07); color:#087da9; font-size:.7rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
#partners .section-title { margin:18px 0 14px; color:#0b2038; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:800; letter-spacing:-.05em; }
#partners .section-subtitle { max-width:650px; color:#64748b; font-size:1.02rem; line-height:1.7; }
#partners .row { --bs-gutter-x:22px; --bs-gutter-y:22px; }
#partners .partner-card { position:relative; isolation:isolate; overflow:hidden; min-height:300px; height:100%; padding:36px 30px; border:1px solid rgba(203,213,225,.72); border-radius:26px; background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(255,255,255,.9)); box-shadow:0 8px 24px rgba(15,35,56,.045); text-align:center; transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .38s ease,background-color .3s ease; }
#partners .partner-card::before { content:""; position:absolute; z-index:-1; top:0; right:28px; left:28px; height:2px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,transparent,rgba(0,163,224,.58),transparent); opacity:.55; transition:opacity .3s ease,left .3s ease,right .3s ease; }
#partners .partner-card:hover { transform:translateY(-7px); border-color:rgba(0,163,224,.42); background:#fff; box-shadow:0 20px 44px rgba(15,35,56,.1),0 0 0 1px rgba(0,163,224,.06); }
#partners .partner-card:hover::before { right:0; left:0; opacity:1; }
#partners .partner-role-tag { margin-bottom:20px; padding:7px 13px; border:1px solid rgba(0,163,224,.1); border-radius:999px; background:#edf9fd; color:#087da9; font-size:.64rem; font-weight:750; letter-spacing:.09em; }
#partners .partner-card h4 { margin:0 0 9px!important; color:#102a43; font-size:1.16rem!important; font-weight:750; line-height:1.35; letter-spacing:-.025em; }
#partners .partner-card p { max-width:38ch; color:#64748b!important; font-size:.84rem!important; line-height:1.65; }
#partners .partner-card p.text-muted.small.mb-3 { margin-bottom:18px!important; color:#8291a2!important; font-size:.76rem!important; }
@media(max-width:767.98px) {
  #partners { padding-block:72px; }
  #partners .container>.text-center { margin-bottom:36px!important; }
  #partners .partner-card { min-height:0; padding:30px 24px; border-radius:22px; }
}
@media(prefers-reduced-motion:reduce) {
  #partners .partner-card,#partners .partner-card::before { transition:none; }
}
#productGrid .btn-inquire-product { display:inline-flex; width:max-content!important; min-height:38px; align-items:center; justify-content:center; gap:7px; padding:7px 13px!important; border:1px solid #0b3052!important; border-radius:10px; color:#fff!important; background:#0b3052!important; box-shadow:0 3px 10px rgba(11,48,82,.14)!important; font-size:.8rem!important; font-weight:650!important; text-decoration:none; transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
#productGrid .btn-inquire-product>i { display:inline-block!important; margin:0; color:#4dd0ff!important; font-size:.9rem; }
#productGrid .btn-inquire-product::after { display:none!important; content:none!important; }
#productGrid .btn-inquire-product:hover { transform:translateY(-2px)!important; border-color:#00a3e0!important; color:#fff!important; background:#00a3e0!important; box-shadow:0 6px 14px rgba(0,163,224,.22)!important; }
#productGrid .btn-inquire-product:hover>i { color:#fff!important; }
.product-sourcing-callout { display:flex; align-items:center; gap:20px; margin-top:30px; padding:25px 28px; border:1px solid #dce7ef; border-radius:20px; background:linear-gradient(115deg,#fff 0%,#f8fcfe 100%); box-shadow:0 8px 24px rgba(15,35,56,.045); }
.product-sourcing-icon { display:grid; flex:0 0 48px; width:48px; height:48px; place-items:center; border:1px solid rgba(0,163,224,.12); border-radius:14px; color:#00a3e0; background:#eaf8fd; font-size:1.2rem; }
.product-sourcing-copy { flex:1; min-width:0; }
.product-sourcing-copy h3 { margin:0 0 5px; color:#0b3052; font-size:1.08rem; font-weight:750; letter-spacing:-.02em; }
.product-sourcing-copy p { margin:0; color:#64748b; font-size:.88rem; line-height:1.6; }
.product-sourcing-link { display:inline-flex; flex:0 0 auto; min-height:42px; align-items:center; justify-content:center; gap:9px; padding:8px 15px; border:1px solid #0b3052; border-radius:10px; color:#fff; background:#0b3052; box-shadow:0 3px 10px rgba(11,48,82,.12); font-size:.84rem; font-weight:700; text-decoration:none; transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.product-sourcing-link:hover { transform:translateY(-2px); border-color:#00a3e0; color:#fff; background:#00a3e0; box-shadow:0 7px 16px rgba(0,163,224,.2); }
#productGrid>.product-sourcing-callout { min-width:0; min-height:320px; flex-direction:column; align-items:flex-start; justify-content:center; gap:15px; margin:0; padding:26px; border:1px solid #a9e1f2; border-left:4px solid #00a3e0; border-radius:20px; background:linear-gradient(145deg,#e8f7fd 0%,#f4fbfe 100%); box-shadow:0 10px 28px rgba(15,35,56,.07); }
#productGrid>.product-sourcing-callout .product-sourcing-icon { border:0; color:#fff; background:#00a3e0; box-shadow:0 5px 14px rgba(0,163,224,.2); }
#productGrid>.product-sourcing-callout .product-sourcing-copy { flex:none; }
#productGrid>.product-sourcing-callout .product-sourcing-copy h3 { color:#0b3052; font-size:1.1rem; }
#productGrid>.product-sourcing-callout .product-sourcing-copy p { color:#334155; font-size:.88rem; font-weight:500; line-height:1.6; }
#productGrid>.product-sourcing-callout .product-sourcing-link { margin: auto 0 0; }
@media(max-width:767.98px) {
  .product-sourcing-callout { align-items:flex-start; flex-wrap:wrap; gap:14px; padding:21px; }
  .product-sourcing-copy { flex-basis:calc(100% - 64px); }
  .product-sourcing-link { margin-left:62px; }
}
@media(max-width:420px) {
  .product-sourcing-callout { padding:18px; }
  .product-sourcing-icon { width:42px; height:42px; flex-basis:42px; }
  .product-sourcing-copy { flex-basis:calc(100% - 56px); }
  .product-sourcing-link { margin-left:56px; }
}
@media(max-width:575.98px) {
  #productGrid>.product-sourcing-callout { min-height:280px; }
}

/* Solid dark navy navigation — matches the hero */
body { padding-top:0!important; }
.hpk-header { background:#0f172a!important; border-bottom:1px solid rgba(255,255,255,.1)!important; box-shadow:0 8px 28px rgba(2,6,23,.28)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; transition:transform .35s ease,background-color .35s ease,border-color .35s ease,box-shadow .35s ease; }
.hpk-header .nav-link { color:#cbd5e1!important; transition:color .25s ease; }
.hpk-header .nav-link:hover,.hpk-header .nav-link.active { color:#fff!important; }
.hpk-header .navbar-toggler { color:#fff!important; }
.hpk-header.scrolled { padding:0!important; background:#0f172a!important; border-bottom:1px solid rgba(255,255,255,.1)!important; box-shadow:0 8px 28px rgba(2,6,23,.32)!important; }
.hpk-header.scrolled .nav-link { color:#cbd5e1!important; }
.hpk-header.scrolled .nav-link:hover,.hpk-header.scrolled .nav-link.active { color:#fff!important; }
.hpk-header.scrolled .navbar-toggler { color:#fff!important; }
.hpk-header.scrolled .hpk-brand-name,.hpk-header.menu-open .hpk-brand-name { color:#fff!important; }
.hpk-header.scrolled .hpk-brand-tagline,.hpk-header.menu-open .hpk-brand-tagline { color:rgba(255,255,255,.72)!important; }
.hpk-header.menu-open { background:#0f172a!important; }
.hpk-header.menu-open .navbar-toggler { color:#fff!important; }
@media (max-width: 991.98px) { .hpk-brand { gap:10px; } .hpk-brand-logo { height:44px; } .hpk-brand-name { font-size:1rem; } .hpk-brand-tagline { font-size:.56rem; letter-spacing:.1em; } }
@media (max-width: 400px) { .hpk-brand-logo { height:40px; } .hpk-brand-tagline { font-size:.52rem; } }
.hpk-hero { min-height:100svh; padding-top:clamp(118px,13vh,156px); }
@media(max-width:767.98px) {
  .hpk-hero { min-height:100svh; padding-top:108px; }
}

/* ==========================================================================
   INTERIOR PAGE HERO (Ammonia / Dofun / Contact)
   Dark band that the floating glass header sits over, then a white page.
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(116px, 13vh, 152px) 0 clamp(64px, 7vw, 92px);
  color: #fff;
  background: linear-gradient(140deg, #061c33 0%, #0b3052 55%, #0a4570 100%);
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .5) 1px, transparent 1.8px), radial-gradient(circle, rgba(77, 208, 255, .4) 1px, transparent 2px);
  background-size: 52px 52px, 88px 88px;
  background-position: 0 0, 26px 34px;
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -140px;
  bottom: -220px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 163, 224, .3), transparent 62%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
.page-hero-copy { min-width: 0; }
.page-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: .8rem; font-weight: 600; }
.page-breadcrumb a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.page-breadcrumb a:hover { color: #4dd0ff; }
.page-breadcrumb span { color: rgba(255, 255, 255, .4); }
.page-breadcrumb strong { color: #4dd0ff; font-weight: 700; }
.page-hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 15px; border: 1px solid rgba(77, 208, 255, .28); border-radius: 999px; color: #9fe4ff; background: rgba(77, 208, 255, .12); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.page-hero-eyebrow i { font-size: .9rem; }
.page-hero-title { margin: 0 0 18px; color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -.05em; text-wrap: balance; }
.page-hero-title span { color: #4dd0ff; }
.page-hero-lead { max-width: 620px; margin: 0 0 28px; color: rgba(255, 255, 255, .8); font-size: 1.06rem; line-height: 1.7; }
.page-hero-lead strong { color: #fff; }
.page-hero-image { overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; box-shadow: 0 30px 60px rgba(0, 0, 0, .38); }
.page-hero-image img { display: block; width: 100%; height: clamp(300px, 33vw, 450px); object-fit: cover; }
.page-hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-hero-stat { min-width: 132px; padding: 14px 20px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: rgba(255, 255, 255, .07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.page-hero-stat strong { display: block; color: #fff; font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; }
.page-hero-stat span { display: block; color: rgba(255, 255, 255, .68); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.page-hero--center { text-align: center; }
.page-hero--center .page-hero-grid { grid-template-columns: 1fr; }
.page-hero--center .page-hero-copy { max-width: 880px; margin: 0 auto; }
.page-hero--center .page-hero-lead { margin-inline: auto; }
.page-hero--center .page-breadcrumb,
.page-hero--center .page-hero-stats { justify-content: center; }
.page-hero--center .hpk-hero-actions { justify-content: center; }
@media (max-width: 991.98px) {
  .page-hero { padding-top: 112px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero .hpk-hero-actions { justify-content: flex-start; }
  .page-hero-image img { height: clamp(260px, 52vw, 380px); }
}
/* ==========================================================================
   SHARED PAGE COMPONENTS
   ========================================================================== */
/* Stat row */
.hpk-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 36px; }
.hpk-stat { min-width: 0; padding: 26px 24px; border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(15, 35, 56, .045); }
.hpk-stat strong { display: block; margin-bottom: 6px; color: #0b3052; font-size: clamp(1.45rem, 2.3vw, 1.95rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.hpk-stat span { display: block; color: #64748b; font-size: .82rem; line-height: 1.55; }
@media (max-width: 991.98px) { .hpk-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .hpk-stat-row { grid-template-columns: 1fr; gap: 14px; } }

/* Feature list rows */
.hpk-feature-list { display: grid; gap: 14px; }
.hpk-feature-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgba(15, 35, 56, .04); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.hpk-feature-item:hover { transform: translateX(4px); border-color: rgba(0, 163, 224, .45); box-shadow: 0 10px 26px rgba(15, 35, 56, .07); }
.hpk-feature-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #4dd0ff, #0b3052); font-size: 1.15rem; }
.hpk-feature-item h3 { margin: 2px 0 6px; color: #0f172a; font-size: 1.03rem; font-weight: 700; line-height: 1.35; }
.hpk-feature-item p { margin: 0; color: #64748b; font-size: .9rem; line-height: 1.65; }
.hpk-feature-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .hpk-feature-list--split { grid-template-columns: 1fr; } }

/* Dark content band */
.hpk-band-dark { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(72px, 8vw, 104px); background: linear-gradient(140deg, #061c33 0%, #0b3052 58%, #0a3a5e 100%); color: #fff; }
.hpk-band-dark::before { content: ""; position: absolute; z-index: -1; top: -180px; left: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 163, 224, .26), transparent 64%); }
.hpk-band-dark h2, .hpk-band-dark h3 { color: #fff; }
.hpk-band-dark .section-title { color: #fff; }
.hpk-band-dark .section-subtitle { color: rgba(255, 255, 255, .78); }
.hpk-band-dark .section-badge { border: 1px solid rgba(77, 208, 255, .26); color: #9fe4ff; background: rgba(77, 208, 255, .12); }
.hpk-band-dark .hpk-feature-item { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hpk-band-dark .hpk-feature-item:hover { transform: translateY(-4px); border-color: rgba(77, 208, 255, .5); background: rgba(255, 255, 255, .1); }
.hpk-band-dark .hpk-feature-icon { color: #061c33; background: linear-gradient(145deg, #9fe4ff, #4dd0ff); }
.hpk-band-dark .hpk-feature-item h3 { color: #fff; }
.hpk-band-dark .hpk-feature-item p { color: rgba(255, 255, 255, .76); }

/* Closing call-to-action band */
.hpk-cta-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(38px, 4.5vw, 58px); border-radius: 32px; background: linear-gradient(135deg, #0b3052 0%, #00a3e0 100%); box-shadow: 0 24px 60px rgba(11, 48, 82, .2); }
.hpk-cta-band::after { content: ""; position: absolute; z-index: -1; right: -120px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 62%); }
.hpk-cta-band h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.hpk-cta-band p { max-width: 62ch; margin: 0 0 26px; color: rgba(255, 255, 255, .85); font-size: 1rem; line-height: 1.7; }
.hpk-cta-band .hpk-hero-button-secondary { border-color: rgba(255, 255, 255, .55); }
.hpk-cta-band .hpk-hero-button-primary { color: #0b3052; background: #fff; box-shadow: 0 10px 26px rgba(4, 25, 45, .22); }
.hpk-cta-band .hpk-hero-button-primary:hover { color: #fff; background: #061c33; }
.hpk-cta-band .hpk-hero-button-secondary:hover { color: #0b3052; background: #fff; }

/* Company award cards */
.hpk-awards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 22px; }
.hpk-award-card { position: relative; overflow: hidden; min-width: 0; margin: 0; border: 1px solid #e2e8f0; border-radius: 26px; background: #fff; box-shadow: 0 8px 28px rgba(15, 35, 56, .05); transition: transform .38s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .38s ease; }
.hpk-award-card:hover { transform: translateY(-7px); border-color: rgba(0, 163, 224, .4); box-shadow: 0 20px 44px rgba(15, 35, 56, .11); }
.hpk-award-card-featured { display: grid; grid-column: span 2; grid-template-columns: 1fr 1fr; }
.hpk-award-card-secondary { display: flex; flex-direction: column; }
.hpk-award-media { position: relative; overflow: hidden; min-height: 260px; background: radial-gradient(circle at 50% 40%, #f8fafc 0%, #fff 74%); }
.hpk-award-card-secondary .hpk-award-media { flex: 0 0 260px; }
.hpk-award-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.hpk-award-card:hover .hpk-award-media img { transform: scale(1.05); }
.hpk-award-ribbon { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px; color: #0b2038; background: rgba(255, 255, 255, .93); box-shadow: 0 8px 20px rgba(15, 35, 56, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.hpk-award-ribbon i { color: #c98a04; }
.hpk-award-body { display: flex; flex-direction: column; justify-content: center; padding: 34px 34px 36px; }
.hpk-award-tag { margin-bottom: 10px; color: #00a3e0; font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.hpk-award-body h3 { margin: 0 0 12px; color: #0f172a; font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -.035em; }
.hpk-award-body p { margin: 0; color: #64748b; font-size: .92rem; line-height: 1.7; }
.hpk-award-card-secondary figcaption { padding: 20px 22px; border-top: 1px solid #e2e8f0; color: #64748b; font-size: .82rem; line-height: 1.55; }
.hpk-awards-section { background: radial-gradient(ellipse at 50% 0%, rgba(0, 163, 224, .1), transparent 52%), linear-gradient(150deg, #071527, #0b2240 72%, #0a1b30); }
.hpk-awards-section .section-badge { border-color: rgba(125, 211, 252, .24); background: rgba(56, 189, 248, .12); color: #7dd3fc; }
.hpk-awards-section .section-title { color: #f8fafc; }
.hpk-awards-section .section-subtitle { color: #cbd5e1; }
.hpk-awards-section .hpk-award-card { border-color: #e6edf3; background: #fff; box-shadow: 0 12px 34px rgba(2, 6, 23, .22); }
.hpk-awards-section .hpk-award-card:hover { border-color: #38bdf8; box-shadow: 0 22px 48px rgba(2, 6, 23, .32), 0 0 0 3px rgba(0, 163, 224, .12); }
.hpk-awards-section .hpk-award-body h3 { color: #0f2233; }
.hpk-awards-section .hpk-award-body p,
.hpk-awards-section .hpk-award-card-secondary figcaption { color: #5b6b7a; }
@media (max-width: 991.98px) {
  .hpk-awards-grid { grid-template-columns: 1fr; }
  .hpk-award-card-featured { grid-column: auto; grid-template-columns: 1fr; }
  .hpk-award-media { min-height: 220px; }
  .hpk-award-card-secondary .hpk-award-media { flex-basis: 220px; }
  .hpk-award-body { padding: 28px 26px 30px; }
}
@media (max-width: 575.98px) {
  .hpk-award-media { min-height: 180px; }
  .hpk-award-card-secondary .hpk-award-media { flex-basis: 180px; }
}

/* ==========================================================================
   AMMONIA SHOWCASE (top of ammonia.php)
   Full-width plant photo with a glassmorphism product card overlapping it.
   ========================================================================== */
.nh3-showcase { background:#081826; padding:104px 0 132px; }
.nh3-showcase-inner { position:relative; margin:0 clamp(16px, 2.4vw, 28px); animation:nh3-rise .85s cubic-bezier(.16, 1, .3, 1) both; }
.nh3-showcase-media { position:relative; overflow:hidden; height:clamp(360px, 56vh, 640px); border-radius:20px; background:#0e2740; }
.nh3-showcase-media img { display:block; width:100%; height:100%; object-fit:cover; }
.nh3-showcase-scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(8, 24, 38, .5) 0%, rgba(8, 24, 38, 0) 24%, rgba(8, 24, 38, 0) 52%, rgba(8, 24, 38, .82) 100%); }

/* Glass product card */
.nh3-product-card { position:absolute; left:clamp(16px, 3vw, 40px); bottom:0; z-index:2; display:grid; grid-template-columns:92px 1fr; grid-template-rows:auto auto auto; align-content:center; column-gap:20px; width:min(520px, calc(100% - 32px)); padding:22px 26px; border:1px solid rgba(238, 246, 250, .18); border-radius:20px; background:rgba(14, 39, 64, .55); box-shadow:0 26px 60px rgba(4, 14, 24, .45); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); transform:translateY(50%); transition:transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease, background-color .45s ease, border-color .45s ease; }
.nh3-product-card:hover { transform:translateY(calc(50% - 10px)); background:rgba(18, 58, 92, .6); border-color:rgba(238, 246, 250, .3); box-shadow:0 36px 76px rgba(4, 14, 24, .55); }
.nh3-product-thumb { grid-column:1; grid-row:1 / span 3; align-self:center; width:92px; height:92px; padding:8px; border-radius:16px; background:rgba(255, 255, 255, .94); object-fit:contain; }
.nh3-product-name { grid-column:2; grid-row:1; margin:0; color:#eef6fa; font-family:var(--hpk-font-family); font-size:1.45rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.nh3-product-spec { grid-column:2; grid-row:2; margin:6px 0 0; color:#9fb4c4; font-family:var(--hpk-font-family); font-size:.82rem; letter-spacing:.02em; }
.nh3-order-button { grid-column:2; grid-row:3; justify-self:start; display:inline-flex; align-items:center; min-height:42px; margin-top:12px; padding:0 20px; border-radius:999px; color:#081826; background:#5fd4ec; font-family:var(--hpk-font-family); font-size:.82rem; font-weight:700; text-decoration:none; transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.nh3-order-button:hover { color:#081826; background:#7ee0f4; transform:translateY(-2px); box-shadow:0 10px 24px rgba(95, 212, 236, .32); }
.nh3-purity-badge { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:68px; height:68px; border-radius:50%; color:#081826; background:#5fd4ec; font-family:var(--hpk-font-family); font-size:.74rem; font-weight:700; line-height:1.1; white-space:nowrap; box-shadow:0 12px 28px rgba(4, 14, 24, .45), inset 0 0 0 1px rgba(255, 255, 255, .3); }
@keyframes nh3-rise { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 991.98px) { .nh3-showcase { padding:96px 0 120px; } }
@media (max-width: 767.98px) {
  .nh3-showcase { padding:92px 0 56px; }
  .nh3-showcase-media { height:clamp(300px, 44vh, 420px); border-radius:18px; }
  .nh3-product-card { position:static; width:auto; margin:18px 0 0; transform:none; }
  .nh3-product-card:hover { transform:none; }
  .nh3-purity-badge { top:10px; right:10px; width:62px; height:62px; font-size:.68rem; }
}
@media (max-width: 575.98px) {
  .nh3-product-card { grid-template-columns:72px 1fr; padding:18px 18px 20px; column-gap:14px; }
  .nh3-product-thumb { width:72px; height:72px; }
  .nh3-product-name { font-size:1.2rem; }
  .nh3-product-name, .nh3-product-spec { max-width:calc(100% - 70px); }
}

/* Photo gallery (ammonia) */
.nh3-gallery-lead { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; height: clamp(300px, 40vw, 500px); }
.nh3-gallery-frame { position: relative; overflow: hidden; margin: 0; border: 1px solid #e2e8f0; border-radius: 24px; background: #f8fafc; box-shadow: 0 10px 30px rgba(15, 35, 56, .06); }
.nh3-gallery-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.nh3-gallery-frame:hover img { transform: scale(1.05); }
.nh3-gallery-frame figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; color: #fff; background: rgba(7, 21, 39, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .78rem; font-weight: 600; }
.nh3-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.nh3-gallery-grid .nh3-gallery-frame { aspect-ratio: 4 / 3; }
.nh3-gallery-grid .nh3-gallery-frame:nth-child(1) { grid-column: span 2; }
@media (max-width: 991.98px) {
  .nh3-gallery-lead { grid-template-columns: 1fr; height: auto; }
  .nh3-gallery-lead .nh3-gallery-frame { aspect-ratio: 4 / 3; }
  .nh3-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nh3-gallery-grid .nh3-gallery-frame:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 575.98px) { .nh3-gallery-grid { gap: 12px; } .nh3-gallery-frame figcaption { right: 8px; bottom: 8px; left: 8px; padding: 7px 10px; font-size: .7rem; } }

/* Spec table wrapper */
.hpk-table-note { margin: 18px 0 0; color: #64748b; font-size: .84rem; line-height: 1.6; }

/* Dofun catalogue: the sourcing callout closes the final row of the bento grid */
#dofun-valves #productGrid > .product-sourcing-callout { grid-column: span 2; }
@media (max-width: 991.98px) { #dofun-valves #productGrid > .product-sourcing-callout { grid-column: auto; } }

/* Applications strip inside a dark band */
.hpk-applications { margin-top: 48px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hpk-applications h3 { margin: 0 0 18px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.hpk-applications .solution-applications { justify-content: flex-start; }
.hpk-band-dark .solution-applications span { border-color: rgba(255, 255, 255, .18); color: #fff; background: rgba(255, 255, 255, .06); }
.hpk-band-dark .solution-applications i { color: #4dd0ff; }
/* ==========================================================================
   HOMEPAGE HERO — split-grid redesign
   Dark slate canvas, engineering grid, static logo/photo, hover-only motion.
   ========================================================================== */
.nx-hero {
  position: relative;
  overflow: hidden;
  background-color: #0f172a;
  background-image: linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  padding: clamp(132px, 14vh, 168px) 0 clamp(124px, 13vh, 152px);
}
.nx-hero::before {
  content: "";
  position: absolute;
  top: -18%;
  left: -12%;
  width: 62%;
  height: 82%;
  background: radial-gradient(circle, rgba(59, 130, 246, .17) 0%, transparent 68%);
  pointer-events: none;
}
.nx-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 4vw, 60px); align-items: center; }
.nx-hero-copy { min-width: 0; }
.nx-hero-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 15px; border: 1px solid rgba(148, 163, 184, .24); border-radius: 999px; color: #cbd5e1; background: rgba(148, 163, 184, .08); font-family: var(--hpk-font-family); font-size: .78rem; font-weight: 600; }
.nx-hero-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 4px rgba(56, 189, 248, .16), 0 0 12px rgba(56, 189, 248, .65); }
.nx-about-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 15px; border: 1px solid rgba(148, 163, 184, .24); border-radius: 999px; color: #cbd5e1; background: rgba(148, 163, 184, .08); font-family: var(--hpk-font-family); font-size: .78rem; font-weight: 600; }
.nx-about-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 4px rgba(56, 189, 248, .16), 0 0 12px rgba(56, 189, 248, .65); }
.nx-hero-title { max-width: 15ch; margin: 24px 0 0; color: #f8fafc; font-family: var(--hpk-font-family); font-size: clamp(2.15rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.nx-hero-sub { max-width: 54ch; margin: 20px 0 0; color: #94a3b8; font-family: var(--hpk-font-family); font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.7; }
.nx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.nx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 12px; font-family: var(--hpk-font-family); font-size: .95rem; font-weight: 600; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.nx-btn-primary { color: #fff; background: #3b82f6; border: 1px solid #3b82f6; }
.nx-btn-primary:hover { color: #fff; background: #2563eb; border-color: #2563eb; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(59, 130, 246, .4); }
.nx-btn-secondary { color: #f8fafc; background: transparent; border: 1px solid rgba(255, 255, 255, .38); }
.nx-btn-secondary:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .62); }
.nx-hero-trust { display: flex; align-items: flex-start; gap: 10px; max-width: 56ch; margin: 38px 0 0; padding-top: 24px; border-top: 1px solid rgba(148, 163, 184, .16); color: #94a3b8; font-size: .85rem; line-height: 1.6; }
.nx-hero-trust i { flex: 0 0 auto; margin-top: 2px; color: #22c55e; font-size: .95rem; }
.nx-hero-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(148, 163, 184, .18); border-radius: 16px; background: #0b1220; box-shadow: 0 30px 70px rgba(2, 6, 23, .55); }
.nx-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.nx-hero-media:hover img { transform: scale(1.03); }
@media (max-width: 992px) {
  .nx-hero { padding: 118px 0 128px; }
  .nx-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .nx-hero-title { max-width: 20ch; }
  .nx-hero-media { aspect-ratio: 16 / 10; }
}
@media (max-width: 575.98px) {
  .nx-hero { padding: 104px 0 116px; }
  .nx-hero-title { font-size: clamp(1.95rem, 8.4vw, 2.4rem); }
  .nx-hero-actions { gap: 12px; }
  .nx-btn { flex: 1 1 auto; min-height: 50px; padding: 0 20px; }
  .nx-hero-media { aspect-ratio: 4 / 3; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hpk-brand-logo { transition: none; }
  .nx-btn, .nx-hero-media img, .nx-about-card, .nx-about-icon, .nx-about-title { transition: none; }
  .nx-about-link span { transition: none; }
  .nh3-showcase-inner { animation:none; }
  .nh3-product-card, .nh3-order-button { transition:none; }
  .nh3-gallery-frame img, .hpk-award-card, .hpk-award-media img, .hpk-feature-item { transition: none; }
}

/* ---------------------------------------------- */
/* Why Industry Leaders Choose HPK - Bento Grid   */
/* ---------------------------------------------- */
.wlc {
  position: relative;
  padding-block: 96px;
  background-color: #f8fafc;
  overflow: hidden;
}

.wlc::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 23, 42, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.wlc > .container { position: relative; z-index: 1; }

/* header */
.wlc-head { max-width: 780px; margin-bottom: 52px; }
.wlc-badge { margin-bottom: 18px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.wlc-badge-line { display: block; flex: 0 0 auto; width: 28px; height: 2px; border-radius: 2px; background: #3b82f6; }
.wlc-title { position: relative; margin-bottom: 16px; padding-left: 22px; color: #0b2240; font-family: var(--hpk-font-family); font-size: clamp(2.25rem, 4vw, 3.35rem); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.wlc-intro { max-width: 68ch; margin: 0; color: #536276; font-size: 1.02rem; line-height: 1.8; }

/* numbered list */
.wlc-row { align-items: stretch; }
.wlc-col-media { display: flex; align-self: stretch; }
@media (min-width: 992px) { .wlc-col-text { flex: 0 0 55%; max-width: 55%; } .wlc-col-media { flex: 0 0 45%; max-width: 45%; } }
.wlc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e2e8f0; }
.wlc-item { display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid #e2e8f0; }
.wlc-num { flex: 0 0 auto; color: #3276c9; transition: text-shadow .25s ease; font-family: var(--hpk-font-family); font-size: 2.25rem; font-weight: 600; line-height: .95; letter-spacing: -.04em; }
.wlc-item-body { min-width: 0; }
.wlc-item-title { margin: 0 0 7px; color: #17243a; font-family: var(--hpk-font-family); font-size: 1.08rem; font-weight: 650; line-height: 1.4; letter-spacing: -.015em; }
.wlc-item-text { margin: 0; color: #66758a; font-size: .94rem; line-height: 1.75; transition: color .25s ease; }
.wlc-item:hover .wlc-num { text-shadow: 0 0 16px rgba(59, 130, 246, .6), 0 0 32px rgba(59, 130, 246, .3); }
.wlc-item:hover .wlc-item-text { color: #0f172a; }

/* image + frosted data bar */
.wlc-figure { position: relative; width: 100%; height: 100%; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, .12); }
.wlc-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.035); animation: wlc-image-drift 18s ease-in-out infinite alternate; }
@keyframes wlc-image-drift {
  from { transform: scale(1.035) translateY(0); }
  to { transform: scale(1.09) translateY(-1%); }
}
.wlc-title::before { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 60px; border-radius: 2px; background: #3b82f6; transform: translateY(-50%); }

@media (max-width: 991.98px) {
  .wlc { padding-block: 72px; }
  .wlc-head { margin-bottom: 36px; }
  .wlc-row { --bs-gutter-y: 2.5rem; }
  .wlc-figure { height: 380px; }
}

@media (max-width: 575.98px) {
  .wlc { padding-block: 56px; }
  .wlc-item { gap: 14px; padding: 18px 0; }
  .wlc-num { font-size: 1.9rem; }
  .wlc-figure { height: 320px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .wlc-item { transition: none; }
  .wlc-img { animation: none; transform: none; }
}

/* ---------------------------------------------- */
/* Ammonia page - Data-First 2026                */
/* ---------------------------------------------- */
.am-head {
  position: relative;
  overflow: hidden;
  padding-block: 56px 44px;
  background-color: #0f172a;
  background-image: linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  text-align: center;
}
.am-head::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 50%;
  width: 70%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, .18) 0%, transparent 66%);
  transform: translateX(-50%);
  pointer-events: none;
}
.am-head > .container { position: relative; z-index: 1; }
.am-head-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 6px 15px;
  border: 1px solid rgba(59, 130, 246, .32);
  border-radius: 999px;
  color: #93c5fd;
  background: rgba(59, 130, 246, .12);
  font-family: var(--hpk-font-family);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.am-head-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .18);
}
.am-title {
  margin: 0;
  color: #f8fafc;
  font-family: var(--hpk-font-family);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.am-sub {
  max-width: 68ch;
  margin: 14px auto 0;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1.7;
}

/* body grid */
.am-body { padding-block: clamp(56px, 6vw, 84px); background-color: #0f172a; color: #f8fafc; }
.am-row { align-items: flex-start; }
@media (min-width: 992px) {
  .am-col-spec  { flex: 0 0 45%; max-width: 45%; }
  .am-col-media { flex: 0 0 55%; max-width: 55%; }
}

/* specification table */
.am-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}
.am-table thead th {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #93c5fd;
  background: rgba(59, 130, 246, .1);
  font-family: var(--hpk-font-family);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
}
.am-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: .95rem;
  line-height: 1.55;
  vertical-align: top;
}
.am-table tbody tr:last-child td { border-bottom: 0; }
.am-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .028); }
.am-table tbody tr { transition: background .2s ease; }
.am-table tbody tr:hover { background: rgba(59, 130, 246, .1); }
.am-table td:first-child { width: 42%; color: #94a3b8; font-weight: 500; }
.am-table td:last-child {
  color: #f8fafc;
  font-weight: 700;
  font-family: var(--hpk-font-family);
}

/* gallery */

/* frosted glass caption */

/* call to action */
.am-cta-section { padding-block: clamp(48px, 5vw, 72px); background-color: #0f172a; }
.am-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: clamp(26px, 3.5vw, 42px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(2, 6, 23, .35);
}
.am-cta-body { flex: 1 1 420px; min-width: 0; }
.am-cta-title {
  margin: 0 0 10px;
  color: #f8fafc;
  font-family: var(--hpk-font-family);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.am-cta-text {
  max-width: 66ch;
  margin: 0;
  color: #94a3b8;
  font-size: .98rem;
  line-height: 1.7;
}
.am-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 14px 26px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 52%, #2563eb 100%);
  box-shadow: 0 12px 28px rgba(59, 130, 246, .32);
  font-family: var(--hpk-font-family);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.am-cta-btn:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(59, 130, 246, .42);
}

@media (max-width: 991.98px) {
  .am-row { --bs-gutter-y: 2.5rem; }
}
@media (max-width: 575.98px) {
  .am-head { padding-block: 44px 36px; }
  .am-title { font-size: clamp(1.6rem, 7vw, 2rem); }
  .am-table thead th,
  .am-table tbody td { padding-left: 14px; padding-right: 14px; }
  .am-table td:first-child { width: 46%; font-size: .88rem; }
  .am-table tbody td { font-size: .88rem; }
  .am-cta { gap: 22px; }
  .am-cta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .am-cta-btn, .am-table tbody tr { transition: none; }
  .am-cta-btn:hover { transform: none; }
}

/* ------------------------------------- */
/* Ammonia interactive product gallery   */
/* ------------------------------------- */
.am-gallery { display: flex; flex-direction: column; gap: 14px; }

.am-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: #0b1220;
  box-shadow: 0 24px 60px rgba(2, 6, 23, .4);
}
.am-stage-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.am-stage.is-swapping .am-stage-img { opacity: 0; transform: scale(1.02); }

.am-purity {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 6px 20px rgba(2, 6, 23, .32);
  font-family: var(--hpk-font-family);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 1px 6px rgba(2, 6, 23, .45);
  pointer-events: none;
}

.am-gallery-cap {
  margin: 0;
  min-height: 1.5em;
  color: #94a3b8;
  font-size: .88rem;
  line-height: 1.5;
}

.am-thumbs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.am-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #0b1220;
  opacity: .5;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.am-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.am-thumb:hover { opacity: .9; transform: translateY(-3px); }
.am-thumb.is-active {
  opacity: 1;
  border: 2px solid #3b82f6;
  box-shadow: 0 0 20px rgba(59, 130, 246, .5);
}
.am-thumb:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .am-thumbs { gap: 10px; }
  .am-thumb { width: 78px; height: 78px; }
  .am-stage { border-radius: 16px; }
  .am-purity { top: 10px; right: 10px; padding: 6px 12px; font-size: .72rem; }
  .am-gallery-cap { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .am-stage-img, .am-thumb { transition: none; }
  .am-thumb:hover, .am-stage.is-swapping .am-stage-img { transform: none; }
}

/* Refined navy and white shared navigation */
.hpk-header {
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid rgba(15, 34, 59, .08) !important;
  box-shadow: 0 8px 28px rgba(7, 21, 39, .08) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  transition: transform .38s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, box-shadow .3s ease;
}
.hpk-header.scrolled { background: rgba(255, 255, 255, .98) !important; box-shadow: 0 10px 30px rgba(7, 21, 39, .1) !important; }
.hpk-header .hpk-brand-name { color: #0a192f !important; transition: color .25s ease; }
.hpk-header .hpk-brand-tagline { color: #64748b !important; transition: color .25s ease; }
.hpk-header .nav-link,
.hpk-header.scrolled .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px !important;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #334155 !important;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.hpk-header .nav-link:hover,
.hpk-header .nav-link.active,
.hpk-header.scrolled .nav-link:hover,
.hpk-header.scrolled .nav-link.active { color: #0a192f !important; }
.hpk-header .nav-link:hover { background: #f1f5f9; border-color: #e2e8f0; transform: translateY(-1px); }
.hpk-header .nav-link.active,
.hpk-header.scrolled .nav-link.active { color: #fff !important; background: #0a192f; border-color: #0a192f; box-shadow: 0 5px 14px rgba(10, 25, 47, .16); }
.hpk-header .nav-link.active:hover { background: #13345d; border-color: #13345d; }
.hpk-header .nav-link::after { display: none; }
.hpk-header .navbar-toggler,
.hpk-header.scrolled .navbar-toggler { color: #0a192f !important; transition: color .2s ease, transform .2s ease; }
.hpk-header .navbar-toggler:hover { transform: scale(1.06); }
.hpk-header.menu-open,
.hpk-header.menu-open.scrolled { background: #fff !important; }
.hpk-header.menu-open .hpk-brand { opacity: 1 !important; pointer-events: auto !important; }
.hpk-header.menu-open .hpk-brand-name { color: #0a192f !important; }
.hpk-header.menu-open .hpk-brand-tagline { color: #64748b !important; }
.hpk-header.menu-open .navbar-toggler { color: #0a192f !important; }
@media (max-width: 991.98px) {
  .hpk-header .navbar-collapse { background: rgba(255, 255, 255, .985) !important; }
  .hpk-header .nav-link,
  .hpk-header.scrolled .nav-link {
    width: 100%;
    min-height: 54px;
    justify-content: flex-start;
    padding: 12px 18px !important;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #0a192f !important;
    font-size: 1.05rem;
    letter-spacing: 0;
    box-shadow: 0 5px 16px rgba(10, 25, 47, .045);
  }
  .hpk-header .nav-link:hover { background: #f8fafc; border-color: #cbd5e1; transform: translateY(-1px); }
  .hpk-header .nav-link.active,
  .hpk-header.scrolled .nav-link.active { background: #0a192f; border-color: #0a192f; color: #fff !important; }
  .hpk-header .nav-link.active:hover { color: #fff !important; }
  .hpk-header .nav-link::after { display: none; }
  .hpk-header.menu-open .nav-item { transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .hpk-header, .hpk-header *, .hpk-header *::before, .hpk-header *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Home trust credentials: navy canvas with white application-style cards */
.hpk-trust-bar {
  padding: clamp(36px, 5vw, 56px) 0;
  border: 0 !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 163, 224, .1), transparent 52%), linear-gradient(150deg, #071527, #0b2240 72%, #0a1b30) !important;
}
.hpk-trust-bar .trust-item {
  height: 100%;
  min-height: 170px;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px 18px;
  border: 1px solid #e6edf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(2, 6, 23, .12);
  text-align: center;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.hpk-trust-bar .trust-item:hover {
  transform: translateY(-4px);
  border-color: #00a3e0;
  box-shadow: 0 16px 32px rgba(2, 6, 23, .2), 0 0 0 3px rgba(0, 163, 224, .1);
}
.hpk-trust-bar .trust-icon {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: #eaf6fc;
  color: #00a3e0;
}
.hpk-trust-bar .trust-content h4 { color: #0f2233; font-size: 1rem; }
.hpk-trust-bar .trust-content p { margin-top: 6px; color: #5b6b7a; line-height: 1.55; }
@media (max-width: 575.98px) {
  .hpk-trust-bar .row > * { flex: 0 0 50%; width: 50%; }
  .hpk-trust-bar .trust-item { min-height: 160px; padding: 20px 12px; }
  .hpk-trust-bar .trust-content h4 { font-size: .92rem; }
  .hpk-trust-bar .trust-content p { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hpk-trust-bar .trust-item { transition: none; }
  .hpk-trust-bar .trust-item:hover { transform: none; }
}

/* Home partners: navy ecosystem section with clean white partner cards */
#partners.hpk-partners-section {
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 163, 224, .1), transparent 52%), linear-gradient(150deg, #071527, #0b2240 72%, #0a1b30) !important;
}
#partners.hpk-partners-section .section-badge { border-color: rgba(125, 211, 252, .24); background: rgba(56, 189, 248, .12); color: #7dd3fc; }
#partners.hpk-partners-section .section-title { color: #f8fafc; }
#partners.hpk-partners-section .section-subtitle { color: #cbd5e1; }
#partners.hpk-partners-section .partner-card {
  border-color: #e6edf3;
  background: #fff;
  box-shadow: 0 12px 34px rgba(2, 6, 23, .22);
}
#partners.hpk-partners-section .partner-card:hover { border-color: #38bdf8; background: #fff; box-shadow: 0 22px 48px rgba(2, 6, 23, .32), 0 0 0 3px rgba(0, 163, 224, .12); }
#partners.hpk-partners-section .partner-card::before { background: linear-gradient(90deg, transparent, rgba(0, 163, 224, .7), transparent); }
#partners.hpk-partners-section .partner-role-tag { border-color: #d8eef8; background: #eaf6fc; color: #087da9; }
#partners.hpk-partners-section .partner-card h4 { color: #0f2233; }
#partners.hpk-partners-section .partner-card p { color: #5b6b7a !important; }
#partners.hpk-partners-section .partner-card p.text-muted.small.mb-3 { color: #8291a2 !important; }

/* Home competitive edge: navy canvas with white capability cards */
#why-hpk.wlc {
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 163, 224, .1), transparent 52%), linear-gradient(150deg, #071527, #0b2240 72%, #0a1b30) !important;
}
#why-hpk.wlc::before {
  background-image: linear-gradient(rgba(226, 232, 240, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(226, 232, 240, .035) 1px, transparent 1px);
}
#why-hpk .wlc-badge { border-color: rgba(125, 211, 252, .24); background: rgba(56, 189, 248, .12); color: #7dd3fc; }
#why-hpk .wlc-badge-line { background: #38bdf8; }
#why-hpk .wlc-title { color: #f8fafc; }
#why-hpk .wlc-title::before { background: #38bdf8; }
#why-hpk .wlc-intro { color: #cbd5e1; }
#why-hpk .wlc-list { display: grid; gap: 14px; border: 0; }
#why-hpk .wlc-item {
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid #e6edf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(2, 6, 23, .18);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
#why-hpk .wlc-item:hover { transform: translateY(-3px); border-color: #38bdf8; box-shadow: 0 18px 36px rgba(2, 6, 23, .27), 0 0 0 3px rgba(0, 163, 224, .1); }
#why-hpk .wlc-num { color: #008fc7; }
#why-hpk .wlc-item-title { color: #0f2233; }
#why-hpk .wlc-item-text,
#why-hpk .wlc-item:hover .wlc-item-text { color: #5b6b7a; }
#why-hpk .wlc-figure { border: 1px solid rgba(226, 232, 240, .2); box-shadow: 0 24px 60px rgba(2, 6, 23, .35); }
@media (max-width: 575.98px) {
  #why-hpk .wlc-item { align-items: flex-start; padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #why-hpk .wlc-item { transition: none; }
  #why-hpk .wlc-item:hover { transform: none; }
}

/* Dofun manufacturer story: navy and white detail section */
#dofun-story.dofun-story-section {
  padding-top: clamp(112px, 12vw, 144px);
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 163, 224, .1), transparent 52%), linear-gradient(150deg, #071527, #0b2240 72%, #0a1b30);
}
#dofun-story .dofun-breadcrumb { margin-bottom: 28px; }
#dofun-story .dofun-breadcrumb a { color: #cbd5e1; }
#dofun-story .dofun-breadcrumb a:hover { color: #38bdf8; }
#dofun-story .dofun-breadcrumb span { color: #64748b; }
#dofun-story .dofun-breadcrumb strong { color: #7dd3fc; }
#dofun-story .section-badge { border-color: rgba(125, 211, 252, .24); background: rgba(56, 189, 248, .12); color: #7dd3fc; }
#dofun-story #dofun-story-title { margin: 18px 0; color: #f8fafc; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
#dofun-story .text-body { color: #cbd5e1 !important; line-height: 1.75; }
#dofun-story .text-body strong { color: #fff; }
#dofun-story .btn-hpk-primary { border-color: #fff; background: #fff; color: #0a192f; box-shadow: 0 8px 22px rgba(2, 6, 23, .22); }
#dofun-story .btn-hpk-primary:hover { border-color: #38bdf8; background: #38bdf8; color: #071527; }
#dofun-story .hpk-feature-item { border-color: #e6edf3; background: #fff; box-shadow: 0 10px 28px rgba(2, 6, 23, .2); }
#dofun-story .hpk-feature-item:hover { border-color: #38bdf8; box-shadow: 0 16px 34px rgba(2, 6, 23, .3), 0 0 0 3px rgba(0, 163, 224, .1); }
#dofun-story .hpk-feature-item h3 { color: #0f2233; }
#dofun-story .hpk-feature-item p { color: #5b6b7a; }

/* Contact page: animated white information and order cards on navy */
#contact.contact-page-section {
  padding-top: clamp(76px, 7vw, 96px);
  padding-bottom: 64px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 163, 224, .1), transparent 52%), linear-gradient(150deg, #071527, #0b2240 72%, #0a1b30) !important;
}

#contact.contact-page-section .container { max-width: 1080px; }
#contact.contact-page-section .row { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
#contact .contact-info-card,
#contact .contact-form-card {
  position: relative;
  height: auto;
  overflow: hidden;
  border: 1px solid rgba(226, 239, 255, .16);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .045));
  box-shadow: 0 22px 54px rgba(1, 10, 25, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  animation: contact-card-enter .72s cubic-bezier(.2, .7, .2, 1) both;
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease, background .32s ease;
}
#contact .contact-info-card { padding: 23px 22px; animation-delay: .06s; }
#contact .contact-form-card { width: 100%; max-width: 540px; margin-inline: auto; padding: 20px 22px; animation-delay: .16s; }
#contact .contact-info-card:hover,
#contact .contact-form-card:hover { transform: translateY(-4px); border-color: rgba(125, 211, 252, .5); background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06)); box-shadow: 0 28px 62px rgba(1, 10, 25, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
#contact .contact-info-card { border-color: #e2e8f0; background: #fff; box-shadow: 0 18px 42px rgba(2, 6, 23, .22); }
#contact .contact-info-card:hover { border-color: #38bdf8; background: #fff; box-shadow: 0 24px 48px rgba(2, 6, 23, .28), 0 0 0 3px rgba(0, 163, 224, .1); }
#contact .contact-info-card .section-badge { border-color: #d8eef8; background: #eaf6fc; color: #087da9; }
#contact .contact-info-title { color: #0f2233; }
#contact .contact-info-lead { color: #52677f; }
#contact .contact-info-item { border-bottom-color: #e2e8f0; color: #52677f; }
#contact .contact-info-icon { border-color: #d8eef8; background: #eaf6fc; color: #087da9; }
#contact .contact-info-item strong { color: #0f2233; }
#contact .contact-info-item span,
#contact .contact-info-item a { color: #52677f; }
#contact .contact-info-item a:hover { color: #0056b3; }
#contact .contact-info-card .section-badge { border: 1px solid rgba(125, 211, 252, .28); background: rgba(56, 189, 248, .12); color: #9fe4ff; }
#contact .contact-info-title { margin: 0 0 10px; color: #f8fafc; font-size: clamp(1.22rem, 1.65vw, 1.45rem); font-weight: 800; line-height: 1.24; letter-spacing: -.035em; }
#contact .contact-info-lead { margin: 0 0 12px; color: #b9c7d8; font-size: .85rem; line-height: 1.58; }
#contact .contact-info-item { gap: 11px; margin: 0; padding: 10px 0; border-bottom: 1px solid rgba(226, 239, 255, .12); color: #b9c7d8; font-size: .85rem; line-height: 1.5; }
#contact .contact-info-item.mb-0 { border-bottom: 0; padding-bottom: 0; }
#contact .contact-info-icon { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid rgba(125, 211, 252, .18); border-radius: 11px; background: rgba(56, 189, 248, .12); color: #7dd3fc; font-size: .92rem; }
#contact .contact-info-item strong { margin-bottom: 3px; color: #f8fafc; font-weight: 700; }
#contact .contact-info-item span,
#contact .contact-info-item a { color: #cbd9e9; overflow-wrap: anywhere; }
#contact .contact-info-item a:hover { color: #7dd3fc; }
#contact .contact-form-card h3 { margin-bottom: 4px !important; color: #f8fafc; font-size: 1.22rem; font-weight: 800; letter-spacing: -.035em; }
#contact .contact-form-card > p { margin-bottom: 11px !important; color: #b9c7d8 !important; font-size: .8rem; line-height: 1.5; }
#contact .contact-form-card .form-label { margin-bottom: 3px; color: #e2eaf4; font-size: .78rem; font-weight: 600; }
#contact .contact-form-card .row { --bs-gutter-y: .5rem; --bs-gutter-x: .7rem; }
#contact .contact-form-card .form-control,
#contact .contact-form-card .form-select { min-height: 36px; padding: 6px 10px; border-color: rgba(226, 239, 255, .18); background-color: rgba(255, 255, 255, .07); color: #f8fafc; font-size: .8rem; }
#contact .contact-form-card .form-control { min-height: 36px; padding: 6px 10px; border-color: rgba(226, 239, 255, .18); background-color: rgba(255, 255, 255, .07); color: #f8fafc; font-size: .8rem; }
#contact .contact-form-card .form-control::placeholder { color: #9fb0c4; opacity: 1; }
#contact .contact-form-card .form-select option { color: #0f2233; background: #fff; }
#contact .contact-form-card .form-control:focus,
#contact .contact-form-card .form-select:focus { border-color: #38bdf8; background-color: rgba(255, 255, 255, .1); color: #fff; box-shadow: 0 0 0 4px rgba(56, 189, 248, .14); }
#contact .contact-form-card textarea.form-control { height: 68px; min-height: 68px; }
#contact .contact-form-card .btn-hpk-primary { min-height: 38px; padding-block: 7px !important; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 86, 179, .18); transition: transform .25s ease, box-shadow .25s ease; }
#contact .contact-form-card .btn-hpk-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 86, 179, .27); }
@keyframes contact-card-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 575.98px) {
  #contact.contact-page-section { padding-top: 72px; padding-bottom: 48px; }
  #contact .contact-info-card,
  #contact .contact-form-card { max-width: 100%; padding: 20px 16px; border-radius: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #contact .contact-info-card,
  #contact .contact-form-card { animation: none; transition: none; }
  #contact .contact-info-card:hover,
  #contact .contact-form-card:hover,
  #contact .contact-form-card .btn-hpk-primary:hover { transform: none; }
}

#dofun-valves.dofun-products-section {
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 163, 224, .1), transparent 52%), linear-gradient(150deg, #071527, #0b2240 72%, #0a1b30);
}
#dofun-valves .dofun-products-title { margin: 0; color: #f8fafc; font-size: clamp(2.15rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.045em; }
#dofun-valves #productGrid .product-card { border: 1px solid #e6edf3; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(2, 6, 23, .22); }
#dofun-valves #productGrid .product-card:hover { border-color: #38bdf8; box-shadow: 0 22px 44px rgba(2, 6, 23, .32), 0 0 0 3px rgba(0, 163, 224, .1); }
#dofun-valves #productGrid .product-title { color: #0f2233; }
#dofun-valves #productGrid .product-model { color: #008fc7; }
#dofun-valves #productGrid .product-body > p { color: #5b6b7a; }
#dofun-valves #productGrid .product-specs-list li { border-color: #e6edf3; color: #5b6b7a; }
#dofun-valves #productGrid .product-specs-list li strong { color: #0f2233; }
#dofun-specs.dofun-specs-section {
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 163, 224, .1), transparent 52%), linear-gradient(150deg, #071527, #0b2240 72%, #0a1b30);
}
#dofun-specs .section-badge { border-color: rgba(125, 211, 252, .24); background: rgba(56, 189, 248, .12); color: #7dd3fc; }
#dofun-specs .section-title { color: #f8fafc; }
#dofun-specs .section-subtitle { color: #cbd5e1; }
#dofun-specs .table-responsive { overflow-x: auto; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
#dofun-specs .tech-table { min-width: 760px; margin: 0; border: 0; border-radius: 12px; }
#dofun-specs .tech-table th { background: #f8fafc !important; color: #64748b !important; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#dofun-specs .tech-table td { border-bottom: 1px solid #e2e8f0; background: #fff; color: #334155; }
#dofun-specs .tech-table tbody tr:hover td { background: #f0f7ff; }
#dofun-specs .tech-table td:first-child { color: #0f172a; font-weight: 700; }
#dofun-specs .tech-table tr:last-child td { border-bottom: 0; }

/* Maintain readable navy text on the white Contact information card */
#contact .contact-info-card .section-badge { border-color: #d8eef8; background: #eaf6fc; color: #087da9; }
#contact .contact-info-card .contact-info-title { color: #0f2233; }
#contact .contact-info-card .contact-info-lead { color: #52677f; }
#contact .contact-info-card .contact-info-item { color: #52677f; border-bottom-color: #e2e8f0; }
#contact .contact-info-card .contact-info-icon { border-color: #d8eef8; background: #eaf6fc; color: #087da9; }
#contact .contact-info-card .contact-info-item strong { color: #0f2233; }
#contact .contact-info-card .contact-info-item span,
#contact .contact-info-card .contact-info-item a { color: #52677f; }
#contact .contact-info-card .contact-info-item a:hover { color: #0056b3; }
/* Clearer dividers and higher-contrast text on the white contact card */
#contact .contact-info-card { border-color: #cbd5e1; box-shadow: 0 18px 42px rgba(2, 6, 23, .2); }
#contact .contact-info-card:hover { border-color: #94a3b8; }
#contact .contact-info-card .contact-info-title { color: #0f172a; }
#contact .contact-info-card .contact-info-lead { color: #334155; font-size: .9rem; }
#contact .contact-info-card .contact-info-item { border-bottom-color: #cbd5e1; color: #334155; }
#contact .contact-info-card .contact-info-item strong { color: #0f172a; font-size: .9rem; }
#contact .contact-info-card .contact-info-item span.small,
#contact .contact-info-card .contact-info-item a.small { color: #475569; font-size: .84rem; line-height: 1.55; }
.hpk-header.scrolled .hpk-brand-name { color: #0a192f !important; }
.hpk-header.scrolled .hpk-brand-tagline { color: #64748b !important; }
.navbar .navbar-nav > .nav-item > a.nav-link { position: relative; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: color .2s ease; }
.navbar .navbar-nav > .nav-item > a.nav-link::after { display: block; right: 12px; bottom: 4px; left: 12px; height: 2px; border: 0; background: #00a3e0; transform: scaleX(0); transform-origin: left center; transition: transform .28s cubic-bezier(.2,.75,.25,1); }
.navbar .navbar-nav > .nav-item > a.nav-link:hover { background: transparent; color: #0056b3 !important; }
.navbar .navbar-nav > .nav-item > a.nav-link.active { background: transparent; color: #0a192f !important; box-shadow: none; }
.navbar .navbar-nav > .nav-item > a.nav-link:hover::after,
.navbar .navbar-nav > .nav-item > a.nav-link.active::after { transform: scaleX(1); }
.hpk-language-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2px; min-width: 146px; margin-left: 12px; padding: 3px; border: 1px solid #d9e2ec; border-radius: 6px; background: #edf2f7; white-space: nowrap; }
.hpk-language-switch::before { position: absolute; z-index: -1; inset: 3px auto 3px 3px; width: calc(50% - 2px); border-radius: 4px; background: #0a192f; box-shadow: 0 2px 6px rgba(10, 25, 47, .2); content: ""; transition: transform .24s cubic-bezier(.2,.75,.25,1); }
.hpk-language-switch:has([data-site-language="en"][aria-pressed="true"])::before { transform: translateX(100%); }
.navbar .hpk-language-switch .hpk-language-button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 9px; border: 0; border-radius: 4px; background: transparent; color: #475569; font: inherit; font-size: .78rem; font-weight: 650; line-height: 1.2; cursor: pointer; transition: color .2s ease, transform .2s ease; }
.navbar .hpk-language-switch .hpk-language-button:hover { color: #0056b3; }
.navbar .hpk-language-switch .hpk-language-button[aria-pressed="true"] { color: #fff; }
.navbar .hpk-language-switch .hpk-language-button:active { transform: scale(.97); }
.navbar .hpk-language-switch .hpk-language-button:focus-visible { outline: 3px solid rgba(0, 86, 179, .3); outline-offset: 1px; }
html[data-language="my"] body { font-family: "Noto Sans Myanmar", var(--hpk-font-family), "Myanmar Text", sans-serif; }
@media (max-width: 991.98px) {
  .navbar .navbar-nav > .nav-item > a.nav-link::after { right: auto; bottom: 2px; left: 0; width: 54px; }
  .navbar .navbar-nav > .nav-item > a.nav-link.active { color: #0056b3 !important; }
  .hpk-language-switch { margin: 12px auto 4px; }
}
#partners.hpk-partners-section .partner-card p { color: #334155 !important; font-size: .9rem !important; line-height: 1.7; text-align: left; }
#partners.hpk-partners-section .partner-card p.text-muted.small.mb-3 { color: #475569 !important; font-size: .82rem !important; line-height: 1.55; text-align: center; }
@media (max-width: 575.98px) {
  #dofun-story.dofun-story-section { padding-top: 96px; }
  #dofun-story .dofun-breadcrumb { margin-bottom: 20px; }
}

/* Home page responsive layout and Myanmar line-height corrections */
#home .nx-hero-title { font-size: clamp(1.55rem, 2.5vw, 2rem); }
#home .wlc-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
#home #awards .section-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
#home #partners .section-title { font-size: clamp(1.65rem, 2.6vw, 2.15rem); }
#home #partners .partner-card { min-height: 250px; padding: 24px 22px; }
#home #partners .partner-role-tag { margin-bottom: 14px; padding: 5px 10px; }
#home #partners .partner-card h4 { margin-bottom: 7px !important; font-size: 1.02rem !important; }
#home #partners .partner-card p { font-size: .82rem !important; line-height: 1.7; }
#home #partners .partner-card p.small.text-muted.mb-0 { text-align: start; }
#home #partners .partner-card p.text-muted.small.mb-3 { margin-bottom: 12px !important; font-size: .76rem !important; line-height: 1.5; }

@media (min-width: 992px) and (max-width: 1199.98px) {
  #home .nx-hero { padding: 112px 0 104px; }
  #home .nx-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  #home .nx-hero-title { font-size: clamp(1.55rem, 2.5vw, 2rem); }
}

@media (max-width: 991.98px) {
  #home { width: 100%; max-width: 100%; overflow-x: clip; }
  .hpk-header .navbar-collapse { inset: 72px 0 0; z-index: 1; align-items: flex-start; justify-content: flex-start; overflow-y: auto; padding: 30px 22px 40px; }
  .hpk-header.menu-open .navbar-collapse { pointer-events: auto; }
  .hpk-header:not(.menu-open) .navbar-collapse { pointer-events: none; }
  .hpk-header .navbar-nav { width: min(100%, 520px); margin: 0 auto !important; }
  .hpk-header .hpk-language-switch { justify-self: start; margin: 14px 0 4px; }
  #home .nx-hero { padding: 92px 0 78px; }
  #home .nx-hero-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row; gap: 30px; width: 100%; min-width: 0; }
  #home .nx-hero-inner > *, #home .nx-hero-copy, #home .nx-hero-media { width: 100%; min-width: 0; max-width: 100%; }
  #home .nx-hero-title { max-width: 22ch; }
  #home .nx-hero-media { aspect-ratio: 16 / 10; }
  #home .nx-hero-media img { display: block; width: 100%; max-width: 100%; height: 100%; }
}

@media (max-width: 575.98px) {
  #home .nx-hero { overflow-x: clip; padding: 68px 0 70px; }
  #home .nx-hero > .container { width: 100%; max-width: 100%; padding-right: calc(18px + env(safe-area-inset-right)); padding-left: calc(18px + env(safe-area-inset-left)); }
  #home .nx-hero-inner { gap: 24px; }
  #home .nx-hero-badge { max-width: 100%; align-items: flex-start; padding: 8px 12px; line-height: 1.65; }
  #home .nx-hero-title { max-width: none; margin-top: 18px; font-size: clamp(1.25rem, 4.8vw, 1.4rem); line-height: 1.48; letter-spacing: 0; text-wrap: pretty; }
  #home .wlc-title,
  #home #awards .section-title { font-size: clamp(1.25rem, 4.4vw, 1.4rem); }
  #home #partners .section-title { font-size: clamp(1.35rem, 5vw, 1.65rem); }
  #home #partners { padding-block: 48px; }
  #home #partners .container > .text-center { margin-bottom: 24px !important; }
  #home #partners .row { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }
  #home #partners .partner-card { min-height: 0; padding: 4px 6px; }
  #home #partners .partner-role-tag { margin-bottom: 4px; padding: 3px 7px; }
  #home #partners .partner-card h4 { margin-bottom: 2px !important; }
  #home #partners .partner-card p { font-size: .78rem !important; line-height: 1.5; text-align: start; }
  #home #partners .partner-card p.text-muted.small.mb-3 { margin-bottom: 2px !important; }
  #home .nx-hero-sub { margin-top: 14px; font-size: .96rem; line-height: 1.9; }
  #home .nx-hero-actions { gap: 10px; margin-top: 22px; }
  #home .nx-btn { min-width: 0; min-height: 46px; padding: 8px 14px; font-size: .88rem; line-height: 1.55; }
  #home .nx-hero-trust { gap: 8px; margin-top: 24px; padding-top: 16px; font-size: .78rem; line-height: 1.8; }
  #home .nx-hero-media { aspect-ratio: 4 / 3; border-radius: 12px; }
}

html[data-language="my"] #home .nx-hero-title,
html[data-language="my"] #home .nx-about-title,
html[data-language="my"] #home .wlc-title,
html[data-language="my"] #home .section-title { line-height: 1.45; letter-spacing: 0; }
html[data-language="my"] #home .nx-about-lead,
html[data-language="my"] #home .nx-about-body,
html[data-language="my"] #home .wlc-intro,
html[data-language="my"] #home .wlc-item-text,
html[data-language="my"] #home .partner-card p { line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  #home .nx-hero-media img { transition: none; }
}

/* Mobile navigation: compact dropdown below the header, matching the reference layout. */
@media (max-width: 991.98px) {
  .hpk-header,
  .hpk-header.menu-open { overflow: visible; }
  .hpk-header .navbar { position: static !important; }
  .hpk-header .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 20 !important;
    display: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 84px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 18px 16px !important;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px;
    background: #fff !important;
    box-shadow: 0 14px 26px rgba(10, 25, 47, .14);
    visibility: visible;
    pointer-events: none;
  }
  .hpk-header.menu-open .navbar-collapse {
    display: block !important;
    pointer-events: auto;
    animation: hpk-dropdown-enter .18s ease-out both;
  }
  @keyframes hpk-dropdown-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
  .hpk-header .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: min(100%, 520px) !important;
    margin: 0 auto !important;
  }
  .hpk-header.menu-open .navbar-nav > .nav-item {
    opacity: 1 !important;
    transform: none !important;
  }
  .hpk-header.menu-open .navbar-nav > .nav-item > a.nav-link {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0a192f !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }
  .hpk-header.menu-open .navbar-nav > .nav-item:not(:last-child) > a.nav-link { border-bottom: 1px solid #edf1f5 !important; }
  .hpk-header.menu-open .navbar-nav > .nav-item > a.nav-link::after {
    right: auto;
    bottom: 3px;
    left: 4px;
    width: 0;
    height: 2px;
    background: #00a3e0;
    transition: width .25s ease;
  }
  .hpk-header.menu-open .navbar-nav > .nav-item > a.nav-link:hover::after,
  .hpk-header.menu-open .navbar-nav > .nav-item > a.nav-link.active::after { width: 48px; transform: none; }
  .hpk-header.menu-open .navbar-toggler { position: relative; z-index: 21 !important; color: #0a192f !important; }
  .hpk-header .hpk-language-switch { justify-self: start; margin: 12px 0 0 !important; }
}

@media (max-width: 575.98px) {
  .hpk-header .navbar-collapse { padding-right: 16px !important; padding-left: 16px !important; }
  .hpk-header .navbar-collapse { max-height: calc(100dvh - 76px); }
  .hpk-header.menu-open .navbar-collapse { padding: 8px 16px 14px !important; }
}