/*
 * Design reminder — Industrial Documentary Upgrade:
 * Preserve the original landing-page rhythm and blue-white visual language.
 * This stylesheet only improves the five explicitly requested visual nodes.
 */

:root {
  --hpmc-industrial-blue: #0f4c81;
  --hpmc-steel: #dbe7ef;
  --hpmc-ink: #12314a;
}

#about img[alt="About Us"] {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border: 1px solid color-mix(in srgb, var(--hpmc-industrial-blue) 18%, white);
  box-shadow: 0 22px 46px rgba(15, 76, 129, 0.16);
}

.hpmc-factory-gallery {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(15, 76, 129, 0.14);
  border-radius: 0.75rem;
  background: #eaf2f7;
  box-shadow: 0 20px 44px rgba(15, 76, 129, 0.13);
}

.hpmc-factory-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(13rem, 1fr));
  gap: 0.34rem;
  min-height: 26rem;
  background: var(--hpmc-steel);
}

.hpmc-factory-gallery__item {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: #dce7ed;
  grid-column: auto;
  grid-row: auto;
}

.hpmc-factory-gallery__item::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(145deg, rgba(9, 42, 71, 0.06), transparent 45%, rgba(9, 42, 71, 0.13));
}

.hpmc-factory-gallery__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hpmc-factory-gallery__item:nth-child(1) img { object-position: center; }
.hpmc-factory-gallery__item:nth-child(2) img { object-position: center 56%; }
.hpmc-factory-gallery__item:nth-child(3) img { object-position: center; }
.hpmc-factory-gallery__item:nth-child(4) img { object-position: 42% center; }
.hpmc-factory-gallery__item:nth-child(5) img { object-position: center; }
.hpmc-factory-gallery__item:nth-child(6) img { object-position: center; }

.hpmc-factory-gallery__item:hover img,
.hpmc-factory-gallery__item:focus-within img { transform: scale(1.035); }

#testimonials img[src*="dicebear"] {
  border: 1px solid rgba(15, 76, 129, 0.22);
  background: #f6fafc;
  padding: 0.25rem;
}

/* Premium product pack composition: visual left on desktop, editorial flow on mobile. */
#products [data-slot="card"].hpmc-product-card {
  display: grid;
  grid-template-columns: minmax(17rem, 0.82fr) minmax(0, 1.18fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-color: rgba(15, 76, 129, 0.24);
  box-shadow: 0 24px 54px rgba(15, 76, 129, 0.14);
}

.hpmc-product-visual {
  position: relative;
  display: grid;
  min-height: 100%;
  margin: 0;
  padding: clamp(1rem, 2.4vw, 2.4rem);
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, rgba(55, 153, 216, 0.28), transparent 45%),
    linear-gradient(145deg, #eaf6fc 0%, #cfe6f2 100%);
}

.hpmc-product-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.56), transparent 45%, rgba(15, 76, 129, 0.08));
}

.hpmc-product-visual img {
  position: relative;
  z-index: 1;
  width: min(100%, 25rem);
  max-height: 33rem;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px rgba(16, 47, 72, 0.23));
}

#products .hpmc-product-card > :nth-child(2) { grid-column: 2; grid-row: 1; }
#products .hpmc-product-card > :nth-child(3) { grid-column: 2; grid-row: 2; }

/* Full image visibility for the four application cards without vertical cropping. */
#applications [data-slot="card"].hpmc-application-card {
  min-width: 0;
  overflow: hidden;
  padding-top: 0;
}

.hpmc-application-media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  background: #f3f8fb;
}

.hpmc-application-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hpmc-application-card:hover .hpmc-application-media img { transform: scale(1.025); }

/* Move the existing fixed return control up exactly 20px. */
button[aria-label="Back to top"] {
  position: relative;
  bottom: 20px;
}

/* Replace the grey header square with a clear cobalt-and-green brand mark. */
header img.hpmc-zhuoyang-logo {
  width: 4.5rem !important;
  height: 4.5rem !important;
  min-width: 4.5rem !important;
  min-height: 4.5rem !important;
  max-width: 4.5rem !important;
  max-height: 4.5rem !important;
  flex: 0 0 auto !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 4px 8px rgba(11, 92, 173, 0.15));
  display: block;
}

/* Ensure header has enough height for the larger logo */
header > div {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

@media (max-width: 767px) {
  #products [data-slot="card"].hpmc-product-card { grid-template-columns: minmax(0, 1fr); }

  .hpmc-product-visual {
    min-height: 19rem;
    padding: 1.25rem 2rem;
  }

  .hpmc-product-visual img { max-height: 20rem; }

  #products .hpmc-product-card > :nth-child(2),
  #products .hpmc-product-card > :nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }

  .hpmc-factory-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 11rem);
    min-height: 0;
    gap: 0.25rem;
  }

  .hpmc-factory-gallery__item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .hpmc-application-media { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hpmc-factory-gallery__item img,
  .hpmc-application-media img { transition: none; }
}

/* Our Products — clean export profile: text left, product pack right; mobile content remains first. */
#products [data-slot="card"].hpmc-product-card {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(22rem, 0.72fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(15, 76, 129, 0.22);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 25px 56px rgba(15, 76, 129, 0.14);
}

.hpmc-product-copy {
  min-width: 0;
  padding: clamp(1.5rem, 3.5vw, 3.35rem);
  background: linear-gradient(120deg, #ffffff 0%, #f4f9fc 100%);
}

.hpmc-product-eyebrow {
  margin-bottom: 0.8rem;
  color: #0878b7;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hpmc-product-heading {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(15, 76, 129, 0.13);
}

.hpmc-product-heading h2 {
  max-width: 38rem;
  margin: 0;
  color: #0e3a5d;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.hpmc-product-heading h2 span { color: #0878b7; }

.hpmc-product-alias {
  margin: 0.55rem 0 0;
  color: #537085;
  font-size: 0.94rem;
}

.hpmc-product-identifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.95rem;
}

.hpmc-product-identifiers span,
.hpmc-product-visual__tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  background: #e7f3fa;
  color: #0f4c81;
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.hpmc-product-intro {
  max-width: 47rem;
  margin: 1.25rem 0 1.35rem;
  color: #34566e;
  font-size: 0.94rem;
  line-height: 1.75;
}

.hpmc-product-section { margin-top: 1.35rem; }

.hpmc-product-section h3 {
  margin: 0 0 0.65rem;
  color: #123c5a;
  font-size: 0.95rem;
  font-weight: 800;
}

.hpmc-property-list,
.hpmc-product-applications ol {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.08rem;
  color: #49687d;
  font-size: 0.86rem;
  line-height: 1.55;
}

.hpmc-property-list li::marker,
.hpmc-product-applications li::marker { color: #0b7ab7; }
.hpmc-product-applications strong { color: #1b4967; }

.hpmc-dosage-note {
  margin: 0.85rem 0 0;
  padding: 0.72rem 0.85rem;
  border-left: 3px solid #17a673;
  background: rgba(23, 166, 115, 0.07);
  color: #35656a;
  font-size: 0.82rem;
  line-height: 1.55;
}

.hpmc-product-specifications {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.hpmc-product-specifications div {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid rgba(15, 76, 129, 0.12);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.72);
}

.hpmc-product-specifications span,
.hpmc-product-specifications small {
  display: block;
  color: #698297;
  font-size: 0.68rem;
  line-height: 1.35;
}

.hpmc-product-specifications strong {
  display: block;
  margin: 0.22rem 0;
  color: #153f5c;
  font-size: 0.78rem;
  line-height: 1.4;
}

.hpmc-secondary-note {
  margin: 1rem 0 0;
  color: #6b8190;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.5;
}

.hpmc-product-visual {
  position: relative;
  display: grid;
  min-height: 100%;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.75rem) clamp(1rem, 2.5vw, 2.25rem) 1.15rem;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 19%, rgba(84, 186, 225, 0.48), transparent 32%),
    linear-gradient(155deg, #063a73 0%, #0d5f96 57%, #13829f 100%);
}

.hpmc-product-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.46;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.23) 0.8px, transparent 0.8px);
  background-size: 8px 8px;
}

.hpmc-product-visual__frame {
  position: relative;
  z-index: 1;
  width: min(100%, 25rem);
  padding: 1.2rem 1rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.25);
  background: linear-gradient(140deg, rgba(255,255,255,0.23), rgba(255,255,255,0.06));
  box-shadow: 0 28px 45px rgba(0, 24, 55, 0.3);
  backdrop-filter: blur(4px);
}

.hpmc-product-visual__tag {
  position: absolute;
  z-index: 2;
  top: 0.95rem;
  right: 0.95rem;
  color: #0c527e;
  background: rgba(255,255,255,0.9);
}

.hpmc-product-visual img {
  width: 100%;
  max-height: 42rem;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 24px 17px rgba(0, 27, 62, 0.38));
}

.hpmc-product-visual figcaption {
  position: relative;
  z-index: 1;
  margin-top: 0.85rem;
  color: rgba(255,255,255,0.84);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  #products [data-slot="card"].hpmc-product-card { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr); }
  .hpmc-product-copy { padding: 1.6rem; }
  .hpmc-product-specifications { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  #products [data-slot="card"].hpmc-product-card { grid-template-columns: minmax(0, 1fr); }
  .hpmc-product-copy { padding: 1.35rem; }
  .hpmc-product-heading h2 { font-size: 1.72rem; }
  .hpmc-product-visual { min-height: 0; padding: 1.35rem 1.35rem 1rem; }
  .hpmc-product-visual__frame { width: min(100%, 20rem); }
  .hpmc-product-visual img { max-height: 28rem; }
  .hpmc-product-specifications { grid-template-columns: minmax(0, 1fr); }
}

/* Compact product profile override: reduce left-side density and let the pack visual breathe. */
#products [data-slot="card"].hpmc-product-card {
  grid-template-columns: minmax(0, 1.03fr) minmax(23rem, 0.97fr);
}

.hpmc-product-copy { padding: clamp(1.55rem, 2.6vw, 2.55rem); }

.hpmc-product-heading { padding-bottom: 0.9rem; }
.hpmc-product-alias { margin-top: 0.45rem; font-size: 0.82rem; }
.hpmc-product-intro { margin: 0.95rem 0 1rem; font-size: 0.88rem; line-height: 1.62; }

.hpmc-product-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.hpmc-product-feature-grid div {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid rgba(15, 76, 129, 0.11);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.74);
}

.hpmc-product-feature-grid strong,
.hpmc-product-feature-grid span { display: block; }
.hpmc-product-feature-grid strong { color: #174a6b; font-size: 0.78rem; }
.hpmc-product-feature-grid span { margin-top: 0.22rem; color: #678095; font-size: 0.71rem; line-height: 1.4; }

.hpmc-product-applications-brief { margin-top: 1rem; }
.hpmc-product-applications-brief h3 { margin: 0 0 0.55rem; color: #123c5a; font-size: 0.88rem; font-weight: 800; }
.hpmc-product-applications-brief > div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hpmc-product-applications-brief span { padding: 0.32rem 0.55rem; border-radius: 999px; background: #edf6fa; color: #28627f; font-size: 0.68rem; font-weight: 700; }
.hpmc-product-applications-brief p { margin: 0.55rem 0 0; color: #4d7385; font-size: 0.73rem; }

.hpmc-product-specifications { margin-top: 1rem; gap: 0.45rem; }
.hpmc-product-specifications div { padding: 0.65rem 0.7rem; }
.hpmc-product-specifications strong { font-size: 0.73rem; }
.hpmc-product-specifications small { display: none; }

@media (max-width: 767px) {
  #products [data-slot="card"].hpmc-product-card { grid-template-columns: minmax(0, 1fr); }
  .hpmc-product-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .hpmc-product-copy { padding: 1.3rem; }
}

/* Our Products — unboxed editorial layout. Lines organize content without turning it into cards. */
#products [data-slot="card"].hpmc-product-card {
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.92fr);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.hpmc-product-copy {
  padding: clamp(1rem, 2.5vw, 2.5rem) clamp(0.25rem, 1.25vw, 1.25rem) clamp(1rem, 2.5vw, 2.5rem) 0;
  background: transparent;
}

.hpmc-product-heading { border-bottom-color: rgba(15, 76, 129, 0.22); }

.hpmc-product-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: 0;
  border-top: 1px solid rgba(15, 76, 129, 0.14);
}

.hpmc-product-feature-grid div {
  padding: 0.66rem 0;
  border: 0;
  border-bottom: 1px solid rgba(15, 76, 129, 0.14);
  border-radius: 0;
  background: transparent;
}

.hpmc-product-feature-grid strong { color: #123f60; font-size: 0.77rem; }
.hpmc-product-feature-grid span { color: #607b8e; font-size: 0.7rem; }

.hpmc-product-applications-brief {
  padding: 0.92rem 0;
  border-bottom: 1px solid rgba(15, 76, 129, 0.14);
}

.hpmc-product-applications-brief > div { gap: 0; }
.hpmc-product-applications-brief span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #2d6a88;
  font-size: 0.72rem;
}

.hpmc-product-applications-brief span:not(:last-child)::after {
  margin: 0 0.43rem;
  color: #9eb6c5;
  content: "•";
}

.hpmc-product-applications-brief p { margin-top: 0.42rem; color: #4b7285; }

.hpmc-product-specifications {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
  margin-top: 0.5rem;
}

.hpmc-product-specifications div {
  padding: 0.62rem 0;
  border: 0;
  border-bottom: 1px solid rgba(15, 76, 129, 0.14);
  border-radius: 0;
  background: transparent;
}

.hpmc-product-specifications span { color: #6c8494; font-size: 0.68rem; }
.hpmc-product-specifications strong { color: #163f5e; font-size: 0.76rem; }

.hpmc-product-visual {
  min-height: 100%;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.8rem) 1.1rem;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255,255,255,0.18) 0%, transparent 38%),
    radial-gradient(circle at 78% 14%, rgba(72,194,224,0.48), transparent 30%),
    linear-gradient(155deg, #052f5d 0%, #0b6397 60%, #13a1a2 100%);
}

.hpmc-product-visual::before { opacity: 0.24; background-size: 10px 10px; }

.hpmc-product-visual__frame {
  width: min(100%, 26rem);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hpmc-product-visual__tag {
  top: -0.6rem;
  right: -0.25rem;
  color: rgba(255,255,255,0.92);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.45);
}

.hpmc-product-visual img {
  width: 88%;
  max-height: 39rem;
  margin: 0 auto;
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 30px 22px rgba(0, 20, 48, 0.48));
}

.hpmc-product-visual figcaption { margin-top: 1.2rem; }

@media (max-width: 767px) {
  #products [data-slot="card"].hpmc-product-card { grid-template-columns: minmax(0, 1fr); }
  .hpmc-product-copy { padding: 0; }
  .hpmc-product-feature-grid,
  .hpmc-product-specifications { grid-template-columns: minmax(0, 1fr); }
  .hpmc-product-visual { margin-top: 1.5rem; min-height: 0; }
  .hpmc-product-visual img { max-height: 28rem; }
}

/* Our Products — balanced product dossier layout, designed for clear PC and mobile scanning. */
#products [data-slot="card"].hpmc-product-card {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  column-gap: clamp(1.75rem, 5vw, 5.5rem);
  align-items: center;
  max-width: 72rem;
  margin-inline: auto;
}

.hpmc-product-copy {
  max-width: 35rem;
  padding: clamp(0.75rem, 2vw, 1.75rem) 0;
}

.hpmc-product-eyebrow {
  margin-bottom: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}

.hpmc-product-heading {
  padding-bottom: 1.05rem;
  border-bottom: 2px solid #d7e5ed;
}

.hpmc-product-heading h2 {
  max-width: 28rem;
  font-size: clamp(2rem, 3.4vw, 3.15rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.hpmc-product-alias { max-width: 24rem; color: #587588; }

.hpmc-product-intro {
  max-width: 31rem;
  margin: 1.15rem 0 1.15rem;
  color: #36596d;
  font-size: 0.92rem;
  line-height: 1.7;
}

.hpmc-product-feature-grid {
  max-width: 31rem;
  column-gap: 1.65rem;
  border-top: 0;
}

.hpmc-product-feature-grid div { padding: 0.78rem 0; }
.hpmc-product-feature-grid strong { font-size: 0.78rem; }
.hpmc-product-feature-grid span { font-size: 0.71rem; }

.hpmc-product-applications-brief { max-width: 31rem; padding: 1rem 0 0.8rem; }
.hpmc-product-applications-brief h3 { color: #174968; font-size: 0.82rem; letter-spacing: 0.01em; }
.hpmc-product-applications-brief span { color: #3d7794; }

.hpmc-product-specifications {
  max-width: 31rem;
  margin-top: 0.7rem;
  column-gap: 1.65rem;
}

.hpmc-product-specifications div { padding: 0.74rem 0; }

.hpmc-product-visual {
  position: relative;
  min-height: 34rem;
  padding: 1rem;
  place-items: center;
  overflow: visible;
  background: transparent;
}

.hpmc-product-visual::before {
  inset: 1.75rem 0.15rem 2.85rem;
  opacity: 1;
  border-radius: 50% 48% 47% 53% / 42% 50% 50% 58%;
  background:
    radial-gradient(circle at 70% 24%, rgba(92, 213, 229, 0.45), transparent 20%),
    radial-gradient(ellipse at 47% 52%, #edf8fb 0%, #cbe5ef 51%, #79b6ce 100%);
  box-shadow: 0 25px 50px rgba(12, 81, 124, 0.18);
}

.hpmc-product-visual::after {
  position: absolute;
  right: 8%;
  bottom: 2.15rem;
  left: 8%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(7, 93, 143, 0.65), transparent);
}

.hpmc-product-visual__frame {
  width: min(100%, 26.5rem);
  transform: translateY(-0.15rem);
}

.hpmc-product-visual__tag {
  top: 0.35rem;
  right: 5%;
  color: #0c5c8d;
  background: rgba(255, 255, 255, 0.68);
  border: 0;
  box-shadow: 0 4px 15px rgba(16, 92, 132, 0.12);
}

.hpmc-product-visual img {
  width: min(86%, 21.5rem);
  max-height: 29rem;
  transform: rotate(-3deg) translateY(-0.4rem);
  filter: drop-shadow(0 30px 19px rgba(12, 57, 83, 0.32));
}

.hpmc-product-visual figcaption {
  position: absolute;
  z-index: 2;
  bottom: 0.65rem;
  color: #2d6786;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}

@media (max-width: 900px) {
  #products [data-slot="card"].hpmc-product-card { column-gap: 2rem; }
  .hpmc-product-heading h2 { font-size: clamp(1.85rem, 4vw, 2.55rem); }
  .hpmc-product-visual { min-height: 29rem; }
}

@media (max-width: 767px) {
  #products [data-slot="card"].hpmc-product-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.6rem;
  }

  .hpmc-product-copy { max-width: none; padding: 0; }
  .hpmc-product-heading h2 { font-size: clamp(2rem, 9vw, 2.55rem); }
  .hpmc-product-feature-grid,
  .hpmc-product-specifications { column-gap: 1rem; }
  .hpmc-product-visual { min-height: 25rem; padding: 0.5rem; }
  .hpmc-product-visual::before { inset: 1.1rem 0 2.45rem; }
  .hpmc-product-visual img { width: min(76%, 17.5rem); max-height: 22rem; }
  .hpmc-product-visual figcaption { bottom: 0.5rem; }
}

/* Our Products — left-column reading comfort pass: more room, calmer cadence, no new boxes. */
@media (min-width: 861px) {
  #products [data-slot="card"].hpmc-product-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 3vw, 3rem);
    max-width: 100%;
  }

  .hpmc-product-copy { padding-block: clamp(1.35rem, 3vw, 2.75rem); }
}

.hpmc-product-heading { padding-bottom: 0.85rem; }
.hpmc-product-heading h2 { line-height: 1.04; }
.hpmc-product-alias { margin-top: 0.45rem; line-height: 1.45; }

.hpmc-product-intro {
  margin: 0.85rem 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.65;
}

.hpmc-product-feature-grid {
  column-gap: clamp(1.2rem, 2.5vw, 2rem);
  row-gap: 0;
}

.hpmc-product-feature-grid div { padding: 0.65rem 0 0.6rem; }
.hpmc-product-feature-grid strong { font-size: 0.78rem; letter-spacing: 0.005em; }
.hpmc-product-feature-grid span { margin-top: 0.2rem; font-size: 0.71rem; line-height: 1.45; }

.hpmc-product-applications-brief { padding: 0.85rem 0 0.7rem; }
.hpmc-product-applications-brief h3 { margin-bottom: 0.5rem; font-size: 0.86rem; }
.hpmc-product-applications-brief p { margin-top: 0.4rem; font-size: 0.74rem; line-height: 1.5; }

.hpmc-product-specifications {
  margin-top: 0.5rem;
  column-gap: clamp(1.2rem, 2.5vw, 2rem);
}

.hpmc-product-specifications div { padding: 0.6rem 0; }
.hpmc-product-specifications span { margin-bottom: 0.12rem; font-size: 0.68rem; }
.hpmc-product-specifications strong { font-size: 0.76rem; line-height: 1.4; }

@media (max-width: 860px) {
  #products [data-slot="card"].hpmc-product-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.25rem;
  }

  .hpmc-product-copy { max-width: 40rem; padding: 0; }
  .hpmc-product-visual { max-width: 38rem; width: 100%; justify-self: center; }
}

@media (max-width: 767px) {
  .hpmc-product-heading { padding-bottom: 1.1rem; }
  .hpmc-product-intro { margin: 1.1rem 0 1.15rem; font-size: 0.9rem; line-height: 1.7; }
  .hpmc-product-feature-grid { row-gap: 0; }
  .hpmc-product-feature-grid div { padding: 0.88rem 0; }
  .hpmc-product-applications-brief { padding: 1.1rem 0 0.9rem; }
 .hpmc-product-specifications div { padding: 0.8rem 0; }
}

/* Export Dispatch & Container Loading — real shipment documentation, no testimonials. */
#testimonials.hpmc-shipping-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.5rem, 4vw, 4rem) 1.25rem;
  background: linear-gradient(135deg, #e8f0f3 0%, #f8faf8 46%, #e9eff0 100%);
}
#testimonials.hpmc-shipping-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.34;
  background-image: linear-gradient(rgba(31, 73, 89, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 73, 89, 0.08) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hpmc-shipping-shell { width: min(100%, 60rem); margin: 0 auto; }
.hpmc-shipping-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.8fr);
  gap: clamp(1rem, 2.5vw, 3rem);
  align-items: end;
  padding-bottom: clamp(1rem, 2vw, 2rem);
}
.hpmc-shipping-eyebrow {
  margin: 0 0 0.7rem;
  color: #277290;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hpmc-shipping-heading h2 {
  max-width: 42rem;
  margin: 0;
  color: #113b56;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.035em;
}
.hpmc-shipping-description {
  max-width: 24rem;
  margin: 0 0 0.25rem;
  color: #567182;
  font-size: 0.82rem;
  line-height: 1.6;
}
.hpmc-shipping-steps {
  display: flex;
  gap: 0;
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
  padding: 0;
  border-top: 1px solid rgba(28, 90, 117, 0.18);
  border-bottom: 1px solid rgba(28, 90, 117, 0.18);
  list-style: none;
}
.hpmc-shipping-steps li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  color: #254c62;
}
.hpmc-shipping-steps li + li { border-left: 1px solid rgba(28, 90, 117, 0.18); }
.hpmc-shipping-steps span {
  color: #2c7a99;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.hpmc-shipping-steps strong { font-size: 0.68rem; font-weight: 750; line-height: 1.35; }
.hpmc-shipping-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
}
.hpmc-shipping-card {
  position: relative;
  overflow: hidden;
  min-height: 0;
  margin: 0;
  background: #193f55;
  box-shadow: 0 20px 38px rgba(16, 55, 74, 0.15);
}
.hpmc-shipping-card--1 { grid-column: 1 / -1; min-height: 18rem; }
.hpmc-shipping-card--1 img { object-fit: contain; object-position: center; background: #193f55; }
.hpmc-shipping-card--2,
.hpmc-shipping-card--3 { min-height: 12rem; }
.hpmc-shipping-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.03);
  transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1), filter 700ms ease;
}
.hpmc-shipping-card--3 img { object-position: center 38%; }
.hpmc-shipping-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(8, 32, 44, 0.86) 100%);
}
.hpmc-shipping-card:hover img { transform: scale(1.045); filter: saturate(1.05) contrast(1.05); }
.hpmc-shipping-card figcaption {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  left: clamp(1rem, 2vw, 1.75rem);
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: #fff;
}
.hpmc-shipping-card figcaption > span {
  color: #9bd9eb;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.hpmc-shipping-card figcaption strong { display: block; font-size: clamp(0.75rem, 1.2vw, 0.88rem); line-height: 1.25; }
.hpmc-shipping-card figcaption p { margin: 0.18rem 0 0; color: rgba(255, 255, 255, 0.78); font-size: 0.62rem; line-height: 1.4; }
.hpmc-shipping-footer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.65rem 0 0;
  color: #628091;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.hpmc-shipping-footer span { width: 2.25rem; height: 1px; background: #5290a7; }
@media (max-width: 720px) {
  #testimonials.hpmc-shipping-section { padding-inline: 1rem; }
  .hpmc-shipping-heading { grid-template-columns: 1fr; gap: 1rem; }
  .hpmc-shipping-description { max-width: 36rem; }
  .hpmc-shipping-steps { display: grid; grid-template-columns: 1fr; }
  .hpmc-shipping-steps li { padding-inline: 0; }
  .hpmc-shipping-steps li + li { border-top: 1px solid rgba(28, 90, 117, 0.18); border-left: 0; }
  .hpmc-shipping-gallery { grid-template-columns: 1fr; grid-template-rows: none; }
  .hpmc-shipping-card--1 { grid-column: auto; min-height: 20rem; }
  .hpmc-shipping-card--2, .hpmc-shipping-card--3 { min-height: 17rem; }
}

/* Global typography system — one readable sans-serif voice across every section. */
:root {
  --hpmc-font-family: "Noto Sans", "Noto Sans Arabic", Arial, sans-serif;
}
html,
body,
button,
input,
textarea,
select,
option {
  font-family: var(--hpmc-font-family) !important;
}
#root,
#root * {
  font-family: var(--hpmc-font-family) !important;
}
#root :is(h1, h2, h3, h4, h5, h6, button, input, textarea, select, option) {
  font-family: var(--hpmc-font-family) !important;
}
.hpmc-shipping-heading h2 {
  font-family: var(--hpmc-font-family) !important;
  font-weight: 800;
  letter-spacing: -0.026em;
}

/* ============================================================
   Certifications Section — carousel with uniform image sizes
   ============================================================ */
.hpmc-cert-section {
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem);
  background: linear-gradient(160deg, #f0f6fb 0%, #e8f2f8 60%, #ddeaf4 100%);
  border-top: 1px solid rgba(15, 76, 129, 0.10);
  border-bottom: 1px solid rgba(15, 76, 129, 0.10);
}

.hpmc-cert-shell {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
}

.hpmc-cert-heading {
  text-align: center;
  max-width: 640px;
}

.hpmc-cert-eyebrow {
  display: inline-block;
  margin: 0 0 0.55rem;
  padding: 0.22rem 0.85rem;
  background: rgba(15, 76, 129, 0.09);
  border: 1px solid rgba(15, 76, 129, 0.18);
  border-radius: 2rem;
  color: #0f4c81;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.hpmc-cert-heading h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: #12314a;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.hpmc-cert-description {
  margin: 0;
  font-size: clamp(0.88rem, 1.5vw, 1.02rem);
  color: #4a6a82;
  line-height: 1.6;
}

/* Carousel outer wrapper — clips the sliding track */
.hpmc-cert-carousel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  overflow: hidden;          /* clips slides outside the viewport */
  background: transparent;
  padding-bottom: 2.8rem;    /* space for dots below the track */
}

/* Track: flex row of all slides, width = 5 × (1/3 of carousel) */
.hpmc-cert-track {
  display: flex;
  flex-direction: row;
  gap: 1rem;                 /* gap between cards */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Each slide: fixed width = 1/3 of carousel minus gap compensation */
.hpmc-cert-slide {
  flex: 0 0 calc((100% - 2rem) / 3);  /* 3 visible, 2 gaps of 1rem */
  min-width: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 24px rgba(15, 76, 129, 0.13), 0 2px 6px rgba(15, 76, 129, 0.08);
  border: 1px solid rgba(15, 76, 129, 0.10);
  aspect-ratio: 3 / 2;
  transition: box-shadow 220ms, transform 220ms;
}

.hpmc-cert-slide:hover {
  box-shadow: 0 12px 36px rgba(15, 76, 129, 0.22);
  transform: translateY(-3px);
}

.hpmc-cert-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #f8f9fa;
  padding: 0.6rem;
  box-sizing: border-box;
}

/* Prev / Next arrow buttons — sit outside the track on the sides */
.hpmc-cert-btn {
  position: absolute;
  top: calc(50% - 1.4rem);   /* vertically centred on the image area */
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #0f4c81;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 76, 129, 0.20);
  transition: background 180ms, box-shadow 180ms, transform 180ms;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hpmc-cert-btn:hover {
  background: #fff;
  box-shadow: 0 4px 18px rgba(15, 76, 129, 0.30);
  transform: translateY(-50%) scale(1.08);
}

.hpmc-cert-btn--prev { left: -1.4rem; }
.hpmc-cert-btn--next { right: -1.4rem; }

/* Dot indicators — below the carousel */
.hpmc-cert-dots {
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.hpmc-cert-dot {
  width: 0.55rem;
  height: 0.55rem;
  border: none;
  border-radius: 50%;
  background: rgba(15, 76, 129, 0.28);
  cursor: pointer;
  padding: 0;
  transition: background 200ms, transform 200ms;
}

.hpmc-cert-dot--active {
  background: #0f4c81;
  transform: scale(1.35);
}

/* Shell needs a bit more horizontal padding to accommodate arrow buttons */
.hpmc-cert-shell {
  max-width: 1100px;
  padding-inline: 1.8rem;
}

/* Mobile: show 1 image at a time, hide side arrows inside */
@media (max-width: 700px) {
  .hpmc-cert-section { padding-inline: 0.75rem; }
  .hpmc-cert-shell { padding-inline: 2rem; }
  .hpmc-cert-slide {
    flex: 0 0 100%;
  }
  .hpmc-cert-btn--prev { left: 0.2rem; }
  .hpmc-cert-btn--next { right: 0.2rem; }
}

/* Tablet: show 2 images */
@media (min-width: 701px) and (max-width: 1024px) {
  .hpmc-cert-slide {
    flex: 0 0 calc((100% - 1rem) / 2);
  }
}