* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #f3f4f6;
  color: #0f2f5f;
  font-family: "Inter", sans-serif;
  font-synthesis: none;
  line-height: 1.7;
}

body,
p,
span {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  line-height: 1.05;
  color: inherit;
}

h1 {
  font-size: 72px;
  font-weight: 900;
}

h2 {
  font-size: 32px;
  font-weight: 800;
}

h3 {
  font-size: 18px;
  font-weight: 700;
}

h4 {
  font-size: 15px;
  font-weight: 700;
}

p {
  margin: 0;
  max-width: 640px;
  line-height: 1.7;
}

.body-large {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

.body-standard {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}

.caption-label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.site-header {
  background: #06295a;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.nav-container {
  width: 100%;
  min-height: 68px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.08;
}

.brand-main {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #ffffff;
}

.brand-sub {
  margin-top: 2px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #d7a53f;
}

.top-nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 40px;
}

.top-nav li {
  position: relative;
}

.top-nav a {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgb(255 255 255 / 70%);
}

.top-nav a:hover {
  color: rgb(255 255 255 / 92%);
}

.top-nav a.nav-active {
  color: #ffffff;
  position: relative;
}

.top-nav a.nav-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: #d6a340;
}

.nav-submenu {
  margin: 0;
  padding: 8px;
  list-style: none;
  min-width: 190px;
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  background: #082e62;
  border: 1px solid rgb(214 163 64 / 32%);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgb(5 20 44 / 35%);
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;
  z-index: 100;
}

.nav-submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav-submenu li + li {
  margin-top: 2px;
}

.nav-submenu a {
  width: 100%;
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: rgb(255 255 255 / 82%);
  white-space: nowrap;
}

.nav-submenu a:hover {
  background: rgb(214 163 64 / 18%);
  color: #ffffff;
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.nav-dropdown.is-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.catalog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 0;
  border-radius: 4px;
  padding: 13px 24px;
  background: #d7a53f;
  color: #0f2f5f;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.hero {
  min-height: auto;
  width: 100%;
  /* Locked hero ratio: every replacement image must keep 1983:793 */
  aspect-ratio: 1983 / 793;
  position: relative;
  background-color: #07295a;
  background-image: url("assets/hero-image-moi-page.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0 30px;
  color: #ffffff;
}

.hero-tagline {
  margin: 52px 0 0 30px;
  color: #d7a53f;
  max-width: 420px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.5px;
  font-style: italic;
}

.hero-cta {
  margin-top: 16px;
  margin-left: 30px;
  width: fit-content;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-placeholder {
  min-height: 120px;
}

.section-light {
  background: #f3f4f6;
}

.section-navy {
  background: #072b5c;
}

.section-shell {
  width: 100%;
  padding: 30px 30px 22px;
}

.client-header h2 {
  color: #1b3a6b;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.08;
}

.client-subtitle {
  margin-top: 10px;
  max-width: none;
  color: #d6a340;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.7;
  text-transform: none;
}

.client-grid {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.client-card {
  border: 1px solid #e2e4e8;
  border-top: 3px solid #d6a340;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.client-media {
  height: 196px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #f3f4f6;
}

.client-media-1 {
  background-image: url("assets/client-showcase-1-green-detail.jpg");
}

.client-media-2 {
  background-image: url("assets/client-showcase-2-blue-detail-2.jpg");
}

.client-media-3 {
  background-image: url("assets/client-showcase-3-blue-detail.jpg");
}

.client-media-4 {
  background-image: url("assets/client-showcase-4-all-products-display.jpg");
}

.client-media-5 {
  background-image: url("assets/client-showcase-5-blue-side.jpg");
}

.client-card p {
  margin: 0;
  padding: 10px 8px 12px;
  max-width: none;
  text-align: center;
  color: #5b6e8a;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}

.why-shell {
  padding-top: 24px;
  padding-bottom: 24px;
}

.why-section {
  background: #03214c;
}

body[data-nav-active=""] .section-shell > header:not(.contact-header) {
  margin-bottom: 14px;
  padding-bottom: 12px;
  position: relative;
}

body[data-nav-active=""] .section-shell > header:not(.contact-header)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: #d6a340;
}

.why-header h2 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.08;
}

.why-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.why-card {
  --icon-col: 128px;
  --why-gap: 12px;
  --card-pad-x: 16px;
  min-height: 176px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 6px;
  padding: 16px 16px 14px;
  display: grid;
  grid-template-columns: var(--icon-col) 1fr;
  gap: var(--why-gap);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc((var(--card-pad-x) + var(--icon-col) + var(--why-gap)) * 1.5);
  height: 2px;
  background: #d8a541;
}

.why-icon {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
}

.why-icon svg {
  width: 116px;
  height: 116px;
  fill: none;
  stroke: #d8a541;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-copy {
  align-self: center;
}

.why-copy h3 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.why-copy p {
  margin-top: 8px;
  max-width: none;
  color: rgb(255 255 255 / 72%);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
}

.category-shell {
  padding-top: 24px;
  padding-bottom: 22px;
}

.category-header h2 {
  color: #1b3a6b;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(30px, 3.1vw, 48px);
  font-weight: 800;
  line-height: 1.06;
}

.category-grid {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.category-card {
  border: 1px solid #e2e4e8;
  border-top: 3px solid #d6a340;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.category-media {
  height: 118px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #f3f4f6;
}

.category-media-gadget {
  background-image: url("assets/category-gadgets.png");
}

.category-media-stationery {
  background-image: url("assets/category-stationery.png");
}

.category-media-tumbler {
  background-image: url("assets/category-tumbler.png");
}

.category-media-umbrella {
  background-image: url("assets/category-umbrella.png");
}

.category-content {
  position: relative;
  padding: 10px 14px 12px;
  padding-bottom: 40px;
}

.category-content h3 {
  color: #1b3a6b;
  font-family: "Montserrat", sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
}

.category-content p {
  margin-top: 8px;
  max-width: none;
  color: #6a7691;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42;
}

.category-tags {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
}

.category-tags li {
  position: relative;
  padding-left: 13px;
  color: #6b7893;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.category-tags li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d6a340;
}

.category-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: #d6a340;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.category-link::after {
  content: "→";
  font-size: 16px;
  line-height: 1;
}

.featured-products {
  padding: 20px 0 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #03214c;
}

.featured-shell {
  display: grid;
  gap: 18px;
}

.featured-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.featured-kicker {
  margin: 0;
  color: #d6a340;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.featured-header h2 {
  margin: 6px 0 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 800;
  line-height: 1.05;
}

.featured-link {
  color: #d6a340;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.featured-link::after {
  content: "→";
  font-size: 20px;
}

.featured-track {
  display: flex;
  gap: 10px;
  min-height: 520px;
  width: 100%;
  overflow: hidden;
}

.featured-card {
  position: relative;
  flex: 0.94 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 167, 89, 0.92);
  border-radius: 20px;
  background: #f8f9fc;
  display: grid;
  grid-template-rows: minmax(250px, 1fr) auto;
  transition:
    flex 700ms cubic-bezier(0.22, 1, 0.36, 1),
    grid-template-rows 700ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 460ms ease;
}

.featured-track .featured-card.is-expanded {
  flex: 2.66 1 0;
  box-shadow: 0 0 28px rgba(213, 167, 67, 0.35);
}

.featured-track .featured-card:not(.is-expanded) {
  flex: 0.79 1 0;
  box-shadow: none;
}

.featured-badge {
  position: absolute;
  top: 22px;
  left: 18px;
  z-index: 2;
  border-radius: 9px;
  padding: 6px 10px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.featured-badge-star {
  background: #0d2f63;
  color: #d6a340;
}

.featured-badge-star::before {
  content: "★ ";
  font-size: 11px;
}

.featured-badge-new {
  background: #fff;
  color: #0d2f63;
}

.featured-badge-new::before {
  content: "● ";
  font-size: 8px;
  vertical-align: middle;
}

.featured-media {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-media-1 {
  background-image: url("assets/catalog-card-7-uar01-white-top.jpg");
}

.featured-media-2 {
  background-image: url("assets/catalog-card-2-uml302-green-open.jpg");
}

.featured-media-3 {
  background-image: url("assets/catalog-card-3-pnmt01-blue-right-side.jpg");
}

.featured-media-4 {
  background-image: url("assets/catalog-card-6-tws02-black-front.jpg");
}

.featured-content {
  background: #fff;
  border-top: 1px solid #e5e8ef;
  padding: 16px 16px 18px;
  display: grid;
  align-content: start;
  gap: 7px;
}

.featured-category {
  justify-self: start;
  padding: 4px 9px;
  border-radius: 8px;
  background: #0d2f63;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.featured-content h3 {
  margin: 0;
  color: #0d2f63;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.featured-code {
  margin: 0;
  color: #5f6e86;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.featured-desc {
  margin: 0;
  color: #38485e;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.featured-tags {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.featured-tags li {
  border: 1px solid #d7a53f;
  border-radius: 8px;
  min-height: 30px;
  padding: 6px 10px;
  color: #b47600;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.featured-detail-link {
  justify-self: start;
  margin-top: 4px;
  border: 1px solid #d7a53f;
  border-radius: 10px;
  padding: 11px 20px;
  color: #0d2f63;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.featured-detail-link::after {
  content: "→";
  font-size: 17px;
}

.featured-track .featured-card:not(.is-expanded) .featured-content .featured-code,
.featured-track .featured-card:not(.is-expanded) .featured-content .featured-desc,
.featured-track .featured-card:not(.is-expanded) .featured-content .featured-tags,
.featured-track .featured-card:not(.is-expanded) .featured-content .featured-detail-link {
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
}

.featured-track .featured-card:not(.is-expanded) {
  grid-template-rows: minmax(0, 1fr) 146px;
}

.featured-track .featured-card:not(.is-expanded) .featured-content {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
  padding: 10px 14px 12px;
}

.featured-track .featured-card:not(.is-expanded) .featured-content .featured-category,
.featured-track .featured-card:not(.is-expanded) .featured-content h3 {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.featured-track .featured-card:not(.is-expanded) .featured-content h3 {
  margin: 0;
  width: 100%;
  text-align: left;
  visibility: visible;
  opacity: 1;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.24;
  word-break: normal;
  display: block;
}

.featured-track .featured-card:not(.is-expanded) .featured-media {
  transform: translateZ(0) scale(1);
}

.featured-content > * {
  transition: opacity 260ms ease, transform 260ms ease;
}

.workflow-shell {
  padding-top: 6px;
  padding-bottom: 24px;
}

.workflow-header h2 {
  color: #1b3a6b;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(30px, 3.1vw, 48px);
  font-weight: 800;
  line-height: 1.06;
}

.workflow-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  position: relative;
}

.workflow-list::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 86px;
  height: 3px;
  background: #d6a340;
}

.workflow-step {
  position: relative;
  text-align: center;
  padding: 0 6px;
}

.workflow-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.workflow-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.workflow-number {
  width: 50px;
  height: 50px;
  margin: 8px auto 12px;
  border-radius: 50%;
  background: #072b5c;
  border: 3px solid #d6a340;
  color: #d6a340;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 44px;
}

.workflow-step h3 {
  color: #1b3a6b;
  font-family: "Montserrat", sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  min-height: 62px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.workflow-step p {
  margin: 6px auto 0;
  max-width: 150px;
  color: #5c6f8b;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.42;
}

.quality .quality-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
}

.quality {
  background: #03214c;
}

.quality-copy {
  padding: 28px 30px 22px;
}

.quality-copy h2 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(30px, 2.7vw, 42px);
  font-weight: 800;
  line-height: 1.05;
}

.quality-points {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quality-point {
  text-align: center;
}

.quality-icon {
  width: 86px;
  height: 86px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.quality-icon img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  display: block;
}

.quality-point p {
  margin-top: 8px;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
  color: rgb(255 255 255 / 78%);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.quality-media {
  background-image: url("assets/kualitas-image.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #082c5d;
}

.contact-section {
  border-top: 3px solid #d6a340;
  border-bottom: 3px solid #d6a340;
}

.contact-shell {
  padding-top: 18px;
  padding-bottom: 18px;
  text-align: center;
}

.contact-header h2 {
  color: #1b3a6b;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 800;
  line-height: 1.1;
}

.contact-subtitle {
  margin: 8px auto 0;
  max-width: 760px;
  color: #5d6f8a;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

.contact-actions {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.contact-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 24px;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}

.contact-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid #7a89a1;
  border-radius: 4px;
  padding: 13px 24px;
  color: #1b3a6b;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: #ffffff;
}

.contact-btn-secondary .wa-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
}

.contact-btn-secondary .wa-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.site-footer {
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.footer-shell {
  padding: 18px 30px 10px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.35fr;
  gap: 22px;
}

.footer-brand-link {
  width: fit-content;
}

.footer-tagline {
  margin-top: 14px;
  color: #d6a340;
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-style: italic !important;
  font-synthesis: style;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.footer-social {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
}

.footer-social a {
  width: 30px;
  height: 30px;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
}

.footer-social a svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.94;
}

.footer-col h3 {
  margin: 0;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.footer-col ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.footer-col li {
  margin-top: 5px;
  color: rgb(255 255 255 / 74%);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.footer-col a {
  color: inherit;
  text-decoration: none;
}

.footer-contact li:first-child {
  margin-top: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.footer-contact-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  flex: 0 0 16px;
}

.footer-contact-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #d6a340;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-bottom {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 16%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.footer-bottom p {
  color: rgb(255 255 255 / 68%);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  max-width: none;
}

.footer-bottom nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-bottom nav a {
  color: rgb(255 255 255 / 72%);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  text-decoration: none;
}

.footer-bottom nav a + a {
  border-left: 1px solid rgb(255 255 255 / 32%);
  padding-left: 10px;
}

.catalog-page {
  background: #f3f4f6;
}

.catalog-hero {
  background-color: #06295a;
  background-image: linear-gradient(90deg, rgb(1 28 68 / 62%), rgb(4 40 92 / 18%)),
    url("assets/product-catalog-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.catalog-hero-shell {
  min-height: 342px;
  padding: 56px 42px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.catalog-hero-copy h1 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(46px, 5.2vw, 72px);
  font-weight: 800;
  line-height: 1.05;
}

.catalog-hero-copy p {
  margin-top: 12px;
  color: #d6a340;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 500;
  max-width: none;
}

.catalog-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #d6a340;
  border-radius: 8px;
  padding: 14px 24px;
  color: #d6a340;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.catalog-download-btn:hover {
  background: #d7a53f;
  color: #0f2f5f;
  border-color: #d7a53f;
}

.catalog-download-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
}

.catalog-download-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-controls {
  border-top: 1px solid #d8dbe1;
  border-bottom: 1px solid #d8dbe1;
  background: #f3f4f6;
}

.catalog-controls-shell {
  padding: 16px 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.catalog-filter {
  border: 1px solid #8d98aa;
  border-radius: 6px;
  padding: 10px 18px;
  background: #ffffff;
  color: #1a3461;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.catalog-filter.active {
  border-color: #072b5c;
  background: #072b5c;
  color: #ffffff;
}

.catalog-filter-toggle {
  border: 1px solid #072b5c;
  border-radius: 8px;
  background: #072b5c;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  min-height: 44px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.catalog-filter-toggle[aria-expanded="true"] span {
  transform: rotate(180deg);
}

.catalog-filter-toggle span {
  transition: transform 220ms ease;
}

.catalog-filter-pane {
  border-top: 1px solid #d8dbe1;
  padding: 16px 42px 18px;
  display: none;
  gap: 14px;
}

.catalog-filter-pane.is-open {
  display: grid;
}

.catalog-filter-layer {
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  padding: 12px 14px;
  background: #ffffff;
}

.catalog-subcat-groups,
.catalog-label-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.catalog-label-groups[hidden] {
  display: none;
}

.catalog-label-placeholder {
  margin: 0;
  color: #76829a;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.catalog-label-placeholder[hidden] {
  display: none;
}

.catalog-subcat-group,
.catalog-label-group {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.catalog-subcat-title,
.catalog-label-title {
  color: #b47600;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.catalog-chip-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.catalog-chip {
  border: 1px solid #d3d8e1;
  border-radius: 8px;
  background: #f8f9fc;
  color: #1f375f;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  min-height: 34px;
  padding: 8px 12px;
  cursor: pointer;
}

.catalog-chip.active {
  border-color: #072b5c;
  background: #072b5c;
  color: #ffffff;
}

.catalog-label-layer.is-disabled {
  opacity: 1;
}

.catalog-label-layer.is-disabled .catalog-chip {
  cursor: not-allowed;
}

.catalog-filter-actions {
  display: flex;
  justify-content: flex-end;
}

.catalog-filter-reset {
  border: 0;
  background: transparent;
  color: #cb8b19;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 0;
  cursor: pointer;
}

.catalog-active-filters {
  padding: 0 30px 12px;
}

.catalog-active-filters-shell {
  border: 1px solid #ebd9b5;
  border-radius: 10px;
  background: #fff9ef;
  min-height: 52px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-active-label {
  color: #986200;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.catalog-active-chip-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog-active-chip {
  border: 1px solid #d4a64c;
  border-radius: 8px;
  background: #ffffff;
  color: #9a6400;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
}

.catalog-active-chip::after {
  content: " ×";
}

.catalog-active-reset {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #c68410;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.catalog-search {
  min-width: 260px;
  max-width: 380px;
  width: 100%;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
}

.catalog-search input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #243d67;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.catalog-search-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  color: #6d7890;
}

.catalog-search-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-products-shell {
  padding: 24px 30px 16px;
}

.catalog-feedback {
  margin: 0 0 12px;
  color: #5e6f87;
  font-family: "Inter", sans-serif;
  font-size: 15px;
}

.catalog-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.catalog-card {
  border: 1px solid #dfe2e7;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
}

.catalog-card-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: #f7f8fb;
}

.card-media-1 {
  background-image: url("assets/catalog-card-1-uml302-green-top.jpg");
}

.card-media-2 {
  background-image: url("assets/catalog-card-2-uml302-green-open.jpg");
}

.card-media-3 {
  background-image: url("assets/catalog-card-3-pnmt01-blue-right-side.jpg");
}

.card-media-4 {
  background-image: url("assets/catalog-card-4-dgc02-black-front.jpg");
}

.card-media-5 {
  background-image: url("assets/catalog-card-5-tws02-white-back.jpg");
}

.card-media-6 {
  background-image: url("assets/catalog-card-6-tws02-black-front.jpg");
}

.card-media-7 {
  background-image: url("assets/catalog-card-7-uar01-white-top.jpg");
}

.card-media-8 {
  background-image: url("assets/catalog-card-8-p100pl29-hitam-front.jpg");
}

.catalog-card h2 {
  margin-top: 14px;
  color: #172f59;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
}

.catalog-card .sku {
  margin-top: 8px;
  color: #7b8598;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.badge-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.badge-list li {
  border: 1px solid #b5bfce;
  border-radius: 4px;
  padding: 4px 10px;
  color: #243d67;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.catalog-card-btn {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  border: 1px solid #d6a340;
  border-radius: 6px;
  color: #b9882d;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.catalog-pagination {
  margin: 20px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.catalog-pagination a,
.catalog-page-btn {
  width: 44px;
  height: 44px;
  border: 1px solid #bac3d1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #243d67;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  background: #ffffff;
  cursor: pointer;
}

.catalog-pagination .active {
  border-color: #d6a340;
  background: #d6a340;
  color: #ffffff;
}

.catalog-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.catalog-page-ellipsis {
  color: #5e6f87;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.catalog-cta {
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
}

.catalog-cta-shell {
  padding: 24px 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.catalog-cta-copy {
  display: flex;
  align-items: center;
  gap: 14px;
}

.catalog-cta-icon {
  width: 68px;
  height: 68px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.catalog-cta-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #d6a340;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-cta-copy h2 {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
}

.catalog-cta-copy p {
  margin-top: 6px;
  color: rgb(255 255 255 / 76%);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  max-width: none;
}

.catalog-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 6px;
  padding: 12px 22px;
  background: #d6a340;
  color: #0f2f5f;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.detail-shell {
  padding: 20px 30px 22px;
}

.detail-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #67738b;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

.detail-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.detail-top {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.detail-main-image {
  border: 1px solid #dfe2e7;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.detail-main-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.detail-thumbs-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 26px repeat(4, minmax(0, 1fr)) 26px;
  gap: 8px;
  align-items: center;
}

.thumb-nav {
  border: 0;
  background: transparent;
  color: #1f3965;
  font-size: 22px;
  cursor: pointer;
}

.detail-thumb {
  border: 1px solid #dfe2e7;
  border-radius: 6px;
  background: #ffffff;
  padding: 6px;
  cursor: pointer;
}

.detail-thumb.active {
  border-color: #1f3965;
  box-shadow: inset 0 0 0 1px #1f3965;
}

.detail-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.detail-info h1 {
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(30px, 3.3vw, 48px);
  font-weight: 800;
  line-height: 1.12;
}

.detail-code {
  margin-top: 8px;
  color: #b9882d;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.detail-description {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid #d6a340;
  color: #4d5e7a;
  max-width: none;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.8;
}

.detail-usecases,
.detail-tech-badges {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-color-pills {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-color-pill {
  border: 1px solid #8d98aa;
  border-radius: 6px;
  padding: 8px 14px;
  background: #ffffff;
  color: #1f3965;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-color-pill.active {
  border-color: #d6a340;
  color: #b9882d;
  background: #fff8ea;
}

.detail-color-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--swatch, #cccccc);
  border: 1px solid rgba(15, 47, 95, 0.25);
  display: inline-block;
  flex: 0 0 12px;
}

.detail-usecases li {
  border: 1px solid #8d98aa;
  border-radius: 6px;
  padding: 9px 14px;
  color: #1f3965;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.detail-tech-badges li {
  border: 1px solid #d6a340;
  border-radius: 6px;
  padding: 8px 14px;
  color: #b9882d;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.detail-whatsapp-btn {
  margin-top: 14px;
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  background: #d6a340;
  color: #0f2f5f;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.detail-whatsapp-btn .wa-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

.detail-whatsapp-btn .wa-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #0f2f5f;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-guarantee {
  margin-top: 12px;
  color: #495b78;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.detail-techniques {
  margin-top: 20px;
}

.detail-techniques h2,
.detail-spec h2,
.detail-related h2 {
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.12;
}

.detail-techniques h2,
.detail-spec h2 {
  position: relative;
  width: fit-content;
  padding-bottom: 12px;
}

.detail-techniques h2::after,
.detail-spec h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: #d6a340;
}

.detail-tech-grid {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.detail-tech-card {
  border: 1px solid #dfe2e7;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 10px 12px;
}

.detail-tech-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.detail-tech-card h3 {
  margin-top: 8px;
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.detail-tech-card p {
  margin-top: 4px;
  max-width: none;
  color: #5c6f8b;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.detail-spec {
  margin-top: 18px;
}

.detail-spec table {
  margin-top: 16px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dfe2e7;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.detail-spec th,
.detail-spec td {
  padding: 10px 16px;
  border-bottom: 1px solid #edf0f5;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  text-align: left;
}

.detail-spec tr:last-child th,
.detail-spec tr:last-child td {
  border-bottom: 0;
}

.detail-spec th {
  width: 42%;
  color: #1b355f;
  font-weight: 700;
  background: #f7f8fa;
}

.detail-spec td {
  color: #4f607b;
}

.detail-related {
  margin-top: 18px;
}

.detail-related-grid {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.detail-sticky-cta {
  margin-top: 14px;
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
}

.detail-sticky-shell {
  padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.detail-sticky-shell p {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 700;
  max-width: none;
}

.detail-sticky-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border-radius: 6px;
  padding: 10px 18px;
  background: #d6a340;
  color: #0f2f5f;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.detail-sticky-btn .wa-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.detail-sticky-btn .wa-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #0f2f5f;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1200px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-tech-grid,
  .detail-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .top-nav {
    display: none;
  }

  .nav-container {
    min-height: 60px;
    padding: 0 16px;
  }

  .hero {
    min-height: auto;
    background-position: center center;
  }

  .hero-content {
    padding: 0 16px;
  }

  .hero-tagline,
  .hero-cta {
    margin-left: 16px;
  }

  .section-shell {
    padding: 24px 16px 18px;
  }

  .client-header h2 {
    font-size: clamp(32px, 4.4vw, 36px);
  }

  .client-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card {
    min-height: 124px;
  }

  .category-grid {
    gap: 10px;
  }

  .category-media {
    height: 104px;
  }

  .category-content h3 {
    font-size: 28px;
  }

  .category-content p {
    font-size: 13px;
  }

  .category-tags li {
    font-size: 12px;
  }

  .category-link {
    font-size: 13px;
  }

  .category-link::after {
    font-size: 14px;
  }

  .featured-products {
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .featured-header h2 {
    font-size: clamp(28px, 5.2vw, 36px);
  }

  .featured-link {
    font-size: 18px;
  }

  .featured-track {
    min-height: 440px;
  }

  .featured-badge {
    font-size: 13px;
  }

  .featured-content h3 {
    font-size: 15px;
  }

  .workflow-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 16px;
  }

  .workflow-list::before {
    display: none;
  }

  .workflow-step h3 {
    font-size: 22px;
    min-height: 52px;
  }

  .quality .quality-shell {
    grid-template-columns: 1fr;
  }

  .quality-copy {
    padding: 24px 16px 18px;
  }

  .quality-copy h2 {
    font-size: clamp(28px, 5.6vw, 36px);
  }

  .quality-points {
    gap: 10px;
  }

  .quality-media {
    min-height: 260px;
    background-position: center;
  }

  .contact-shell {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .contact-header h2 {
    font-size: clamp(24px, 4.8vw, 34px);
  }

  .contact-subtitle {
    font-size: 14px;
  }

  .footer-shell {
    padding: 18px 16px 10px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
  }

  .footer-tagline {
    font-size: 24px;
  }

  .catalog-hero-shell {
    min-height: 280px;
    padding: 34px 16px 28px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .catalog-download-btn {
    font-size: 14px;
  }

  .catalog-filter {
    font-size: 13px;
  }

  .catalog-search input {
    font-size: 13px;
  }

  .catalog-controls-shell {
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-filter-pane {
    padding: 14px 16px 16px;
  }

  .catalog-subcat-group,
  .catalog-label-group {
    align-items: flex-start;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .catalog-subcat-groups,
  .catalog-label-groups {
    grid-template-columns: 1fr;
  }

  .catalog-active-filters {
    padding: 0 16px 10px;
  }

  .catalog-active-reset {
    margin-left: 0;
  }

  .catalog-search {
    max-width: none;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .catalog-card h2 {
    font-size: 16px;
  }

  .catalog-card .sku,
  .badge-list li,
  .catalog-card-btn {
    font-size: 12px;
  }

  .catalog-pagination a,
  .catalog-page-btn {
    font-size: 14px;
  }

  .catalog-cta-copy p {
    font-size: 14px;
  }

  .catalog-cta-btn {
    font-size: 14px;
  }

  .catalog-cta-copy h2 {
    font-size: 22px;
  }

  .catalog-cta-shell {
    padding: 20px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .catalog-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .detail-shell {
    padding: 16px;
  }

  .detail-top {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .detail-info h1 {
    font-size: clamp(28px, 7vw, 36px);
  }

  .detail-code {
    font-size: 20px;
  }

  .detail-techniques h2,
  .detail-spec h2,
  .detail-related h2 {
    font-size: clamp(22px, 5.8vw, 28px);
  }

  .detail-sticky-shell {
    padding: 10px 16px;
    flex-direction: column;
    align-items: stretch;
  }

  .detail-sticky-shell p {
    font-size: 22px;
  }

  .detail-sticky-btn {
    width: 100%;
  }

}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    background-position: center center;
  }

  .hero-tagline {
    margin-left: 14px;
    max-width: 300px;
    font-size: 13px;
    font-style: italic;
  }

  .hero-cta {
    margin-left: 14px;
  }

  .client-header h2 {
    font-size: clamp(30px, 8vw, 34px);
  }

  .client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .client-media {
    height: 170px;
  }

  .why-shell {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .why-header h2 {
    font-size: clamp(24px, 7.2vw, 30px);
  }

  .why-card {
    --icon-col: 104px;
    --card-pad-x: 12px;
    padding: 12px 12px 12px;
  }

  .why-icon {
    width: 104px;
    height: 104px;
  }

  .why-icon svg {
    width: 92px;
    height: 92px;
    stroke-width: 2.2;
  }

  .why-copy h3 {
    font-size: 16px;
  }

  .why-copy p {
    font-size: 14px;
  }

  .category-shell {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .category-header h2 {
    font-size: clamp(34px, 9vw, 40px);
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .category-media {
    height: 104px;
  }

  .category-content {
    padding: 10px 12px 12px;
    padding-bottom: 36px;
  }

  .category-content h3 {
    font-size: 27px;
  }

  .category-link {
    right: 12px;
    bottom: 12px;
    font-size: 13px;
  }

  .featured-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .featured-kicker {
    font-size: 14px;
  }

  .featured-header h2 {
    font-size: 32px;
  }

  .featured-link {
    font-size: 16px;
  }

  .featured-track {
    flex-direction: column;
    min-height: 0;
  }

  .featured-card,
  .featured-track .featured-card.is-expanded,
  .featured-track .featured-card:not(.is-expanded) {
    flex: 1 1 auto;
    flex-grow: 1;
    box-shadow: none;
  }

  .featured-card {
    grid-template-rows: 230px auto;
  }

  .featured-track .featured-card:not(.is-expanded) {
    grid-template-rows: 230px auto;
  }

  .featured-badge {
    top: 14px;
    left: 14px;
    font-size: 12px;
    padding: 5px 9px;
  }

  .featured-content {
    min-height: 0;
    padding: 14px 14px 16px;
  }

  .featured-track .featured-card:not(.is-expanded) .featured-content {
    display: grid;
    align-content: start;
    padding: 14px 14px 16px;
  }

  .featured-track .featured-card:not(.is-expanded) .featured-content > :not(h3),
  .featured-track .featured-card:not(.is-expanded) .featured-content .featured-tags,
  .featured-track .featured-card:not(.is-expanded) .featured-content .featured-detail-link {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .workflow-shell {
    padding-top: 4px;
    padding-bottom: 18px;
  }

  .workflow-header h2 {
    font-size: clamp(34px, 9vw, 40px);
  }

  .workflow-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .workflow-step {
    border: 1px solid #e2e4e8;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px 12px 12px;
  }

  .workflow-icon {
    width: 50px;
    height: 50px;
  }

  .workflow-icon img {
    width: 46px;
    height: 46px;
  }

  .workflow-number {
    margin-top: 4px;
    width: 44px;
    height: 44px;
    font-size: 20px;
    line-height: 38px;
  }

  .workflow-step h3 {
    font-size: 22px;
    min-height: 0;
  }

  .workflow-step p {
    max-width: 100%;
  }

  .quality-copy {
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .quality-copy h2 {
    font-size: clamp(28px, 8vw, 34px);
  }

  .quality-points {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .quality-point {
    display: block;
    text-align: center;
  }

  .quality-point p {
    margin-top: 8px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .quality-media {
    min-height: 220px;
    background-position: center;
  }

  .contact-header h2 {
    font-size: clamp(24px, 7.2vw, 30px);
  }

  .contact-subtitle {
    font-size: 13px;
  }

  .contact-actions {
    flex-direction: column;
    gap: 8px;
  }

  .contact-btn-primary,
  .contact-btn-secondary {
    width: 100%;
    max-width: 280px;
    font-size: 14px;
  }

  .catalog-btn {
    font-size: 14px;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-tagline {
    font-size: 20px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-products-shell {
    padding: 18px 16px 12px;
  }

  .catalog-pagination a,
  .catalog-page-btn {
    width: 38px;
    height: 38px;
  }

  .detail-thumbs-row {
    grid-template-columns: 22px repeat(4, minmax(0, 1fr)) 22px;
    gap: 6px;
  }

  .detail-tech-grid,
  .detail-related-grid {
    grid-template-columns: 1fr;
  }

  .detail-spec th,
  .detail-spec td {
    padding: 8px 10px;
    font-size: 13px;
  }

}

/* Logo details page */
.logo-page main {
  background: #f4f5f7;
}

.logo-hero {
  background-color: #06295a;
  background-image: linear-gradient(90deg, rgb(1 28 68 / 62%), rgb(4 40 92 / 18%)),
    url("assets/product-catalog-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.logo-hero-shell {
  width: 100%;
  min-height: 430px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

.logo-hero-copy {
  padding: 44px 38px 44px max(38px, calc((100vw - 1320px) / 2 + 38px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-hero-copy h1 {
  display: grid;
  gap: 4px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(48px, 4.8vw, 82px);
  font-weight: 800;
  line-height: 0.96;
}

.logo-hero-copy h1 .gold {
  color: #d6a340;
}

.logo-hero-copy p {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid #d6a340;
  color: #e2eaf7;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  max-width: none;
}

.logo-hero-btn {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-height: 52px;
  border-radius: 8px;
  border: 1px solid #d6a340;
  padding: 12px 24px;
  background: #d6a340;
  color: #0e305f;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.logo-hero-btn .wa-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo-hero-btn .wa-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #0e305f;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-hero-media {
  background-image: url("assets/logo-details-hero-image.png");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
}

.logo-breadcrumb-wrap {
  background: #ffffff;
  border-bottom: 1px solid #e6e9f0;
}

.logo-breadcrumb {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #75829a;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

.logo-breadcrumb a {
  color: #6f7c94;
  text-decoration: none;
}

.logo-benefits {
  background: #ffffff;
}

.logo-benefits-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 38px 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.logo-benefits-shell article {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 10px;
}

.logo-benefits-shell article + article {
  border-left: 1px solid #e2e5ec;
  padding-left: 18px;
}

.benefit-icon {
  width: 56px;
  height: 56px;
  border: 2px solid #d6a340;
  border-radius: 999px;
  color: #c18e30;
  font-size: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
}

.benefit-icon-image {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 56px;
}

.logo-benefits-shell p {
  color: #18345f;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  max-width: none;
}

.logo-tech,
.logo-result,
.logo-flow,
.logo-faq {
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 38px;
}

.logo-tech h2,
.logo-machines h2,
.logo-result h2,
.logo-flow h2,
.logo-faq h2,
.logo-cta h2 {
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(38px, 3.4vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.logo-tech h2 {
  font-size: clamp(30px, 2.7vw, 42px);
}

.logo-tech-grid {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.logo-tech-card {
  background: #ffffff;
  border: 1px solid #dfe3eb;
  border-top: 3px solid #d6a340;
  border-radius: 10px;
  overflow: hidden;
}

.logo-tech-media {
  height: 210px;
  background-color: #e9edf4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.media-uv {
  background-image: url("assets/logo-tech-1-uv-printing.png");
}

.media-laser {
  background-image: url("assets/logo-tech-2-laser-engraving.png");
}

.media-hotstamp {
  background-image: url("assets/logo-tech-3-hot-stamping.png");
}

.media-sablon {
  background-image: url("assets/logo-tech-4-sablon.png");
}

.media-dtf {
  background-image: url("assets/logo-tech-5-dtf-uv.png");
}

.media-print {
  background-image: url("assets/logo-tech-6-print.png");
}

.logo-tech-card h3 {
  padding: 12px 16px 0;
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 700;
}

.logo-tech-card p {
  padding: 0 16px;
  margin-top: 4px;
  color: #5a6d89;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.45;
  max-width: none;
}

.logo-tech-card p:last-child {
  padding-bottom: 14px;
}

.logo-tech-card .emphasis {
  color: #b7882f;
  font-weight: 600;
}

.logo-machines {
  margin-top: 10px;
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
}

.logo-machines-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 38px 38px;
}

.logo-machines h2 {
  color: #ffffff;
}

.logo-machines-shell > p {
  color: #c5d3ea;
  font-family: "Inter", sans-serif;
  text-align: center;
  margin-top: 4px;
  font-size: 18px;
  max-width: none;
}

.logo-machines-grid {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.logo-machines-grid li {
  border: 1px solid #35517c;
  border-top: 3px solid #d6a340;
  border-radius: 8px;
  padding: 10px 12px 14px;
  background: linear-gradient(180deg, #163967 0%, #0f2f5e 100%);
}

.machine-media {
  height: 180px;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.05);
}

.machine-1 {
  background-image: url("assets/logo-machine-1-uv-printer.png");
}

.machine-2 {
  background-image: url("assets/logo-machine-2-laser-machine.png");
}

.machine-3 {
  background-image: url("assets/logo-machine-3-hot-stamp-machine.png");
}

.logo-machines-grid h3 {
  margin-top: 10px;
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 29px;
  font-weight: 700;
}

.logo-machines-grid .machine-code {
  margin-top: 2px;
  color: #d6a340;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.logo-machines-grid li > p {
  margin-top: 4px;
  color: #d6dfef;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  max-width: none;
}

.logo-result {
  padding-top: 34px;
  padding-bottom: 34px;
}

.logo-result-grid {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.logo-result-grid li {
  border-top: 3px solid #d6a340;
  border-radius: 8px;
  overflow: hidden;
}

.result-media {
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  height: 176px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.result-1 {
  background-image: url("assets/logo-result-1-powerbank.png");
}

.result-2 {
  background-image: url("assets/logo-result-2-tumbler.png");
}

.result-3 {
  background-image: url("assets/logo-result-3-notebook.png");
}

.result-4 {
  background-image: url("assets/logo-result-4-umbrella.png");
}

.logo-flow {
  padding-top: 34px;
  padding-bottom: 34px;
}

.logo-flow-list {
  margin: 24px 0 0;
  padding: 16px 12px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  position: relative;
}

.logo-flow-list::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: calc(16px + 48px + 10px + 27px);
  height: 2px;
  background: #d6a340;
  z-index: 0;
}

.logo-flow-list li {
  position: relative;
  text-align: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-flow-list img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.logo-flow-list .step-no {
  margin: 10px auto 10px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #0f2f5f;
  border: 3px solid #d6a340;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 23px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.logo-flow-list h3 {
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 700;
  min-height: 66px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.logo-flow-list p {
  margin-top: 6px;
  color: #5c6f8b;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  max-width: none;
}

.logo-faq {
  padding-top: 34px;
  padding-bottom: 38px;
}

.logo-faq-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-card {
  background: #ffffff;
  border: 1px solid #dfe4ec;
  border-top: 3px solid #d6a340;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
}

.faq-trigger {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.faq-indicator {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #0f2f5f;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  margin-top: 2px;
}

.faq-title {
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
}

.faq-content {
  display: none;
  margin-top: 8px;
  padding-left: 38px;
}

.faq-card.open .faq-content {
  display: block;
}

.faq-content p {
  color: #5d708d;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  max-width: none;
}

.logo-cta {
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
}

.logo-cta-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 30px 38px 32px;
  text-align: center;
}

.logo-cta h2 {
  color: #ffffff;
}

.logo-cta p {
  margin-top: 12px;
  color: #d7a443;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 600;
  max-width: none;
}

.logo-cta .logo-hero-btn {
  margin: 18px auto 0;
}

@media (max-width: 1200px) {
  .logo-hero-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .logo-hero-media {
    min-height: 280px;
    background-position: center;
  }

  .logo-benefits-shell,
  .logo-tech-grid,
  .logo-machines-grid,
  .logo-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-flow-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .logo-flow-list::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .logo-hero-copy,
  .logo-breadcrumb,
  .logo-benefits-shell,
  .logo-tech,
  .logo-machines-shell,
  .logo-result,
  .logo-flow,
  .logo-faq,
  .logo-cta-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .logo-benefits-shell,
  .logo-tech-grid,
  .logo-machines-grid,
  .logo-result-grid,
  .logo-faq-grid,
  .logo-flow-list {
    grid-template-columns: 1fr;
  }

  .logo-benefits-shell article + article {
    border-left: 0;
    border-top: 1px solid #e2e5ec;
    padding-left: 0;
    padding-top: 12px;
  }

  .logo-hero-copy h1 {
    font-size: clamp(40px, 12vw, 64px);
  }

  .logo-tech,
  .logo-result,
  .logo-flow,
  .logo-faq {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .logo-machines-shell {
    padding-top: 30px;
    padding-bottom: 34px;
  }

  .logo-tech-grid,
  .logo-machines-grid,
  .logo-result-grid,
  .logo-flow-list,
  .logo-faq-grid {
    margin-top: 20px;
  }

  .logo-cta-shell {
    padding-top: 28px;
    padding-bottom: 30px;
  }

  .logo-cta p {
    margin-top: 10px;
  }

  .logo-cta .logo-hero-btn {
    margin-top: 16px;
  }

  .logo-tech h2,
  .logo-machines h2,
  .logo-result h2,
  .logo-flow h2,
  .logo-faq h2,
  .logo-cta h2 {
    font-size: clamp(34px, 10vw, 50px);
  }

  .logo-tech h2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .logo-hero-btn {
    width: 100%;
  }
}

/* About us page */
.about-page main {
  background: #f4f5f7;
}

.about-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}

.about-hero {
  background-color: #06295a;
  background-image: linear-gradient(90deg, rgb(1 28 68 / 62%), rgb(4 40 92 / 18%)),
    url("assets/product-catalog-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.about-hero .about-shell {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.about-hero-shell {
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
}

.about-hero-copy {
  padding: 42px 12px 34px max(22px, calc((100vw - 1320px) / 2 + 22px));
}

.about-hero-copy h1 {
  color: #ffffff;
  display: grid;
  gap: 3px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(56px, 5.1vw, 96px);
  font-weight: 800;
  line-height: 0.96;
}

.about-hero-copy h1 .gold {
  color: #d6a340;
}

.about-hero-copy p {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid #d6a340;
  color: #dde6f6;
  max-width: 640px;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.about-hero-media {
  background-image: url("assets/about-hero-image.png");
  background-repeat: no-repeat;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
}

.about-name {
  background: #ffffff;
  border-bottom: 1px solid #e3e7ef;
}

.about-name .about-shell {
  padding-top: 18px;
  padding-bottom: 22px;
}

.about-name-eyebrow {
  color: #c69232;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 600;
  width: fit-content;
  margin: 0 auto;
}

.about-name h2 {
  margin-top: 6px;
  color: #173560;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(38px, 3.5vw, 56px);
  font-weight: 800;
  line-height: 1.02;
}

.about-name-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-name-grid article {
  text-align: center;
  padding: 4px 20px;
}

.about-name-grid article + article {
  border-left: 1px solid #d8a748;
}

.about-name-grid h3 {
  color: #ca972f;
  font-family: "Montserrat", sans-serif;
  font-size: 42px;
  font-weight: 700;
}

.about-name-grid .en {
  margin-top: 2px;
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
}

.about-name-grid p {
  margin-top: 4px;
  color: #52657f;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.45;
  max-width: none;
}

.about-why {
  background: #ffffff;
}

.about-why-shell {
  padding-top: 24px;
  padding-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 26px;
  align-items: stretch;
}

.about-why-copy h2 {
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.06;
}

.about-why-copy p {
  margin-top: 12px;
  color: #4f617c;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  max-width: none;
}

.about-why-media {
  background-image: url("assets/about-mengapa-image.png");
  background-repeat: no-repeat;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  min-height: 318px;
}

.about-stats {
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
  background: #03214c;
}

.about-stats .about-shell {
  padding-top: 44px;
  padding-bottom: 48px;
}

.about-stats h2 {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 38px;
  font-weight: 700;
}

.about-stats-grid {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-stats-grid li {
  text-align: center;
  padding: 8px 12px;
}

.about-stats-grid li + li {
  border-left: 1px solid #6f84a9;
}

.about-stats-grid strong {
  color: #d8a643;
  font-family: "Montserrat", sans-serif;
  font-size: 42px;
  font-weight: 600;
  display: block;
  line-height: 1.04;
}

.about-stats-grid span {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.about-values .about-shell {
  padding-top: 44px;
  padding-bottom: 46px;
}

.about-values h2,
.about-facilities h2,
.about-quality h2,
.about-cta h2 {
  color: #173560;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(40px, 3.2vw, 54px);
  font-weight: 800;
  line-height: 1.04;
}

.about-why-copy h2,
.about-stats h2,
.about-values h2,
.about-quality h2 {
  position: relative;
  width: fit-content;
  padding-bottom: 12px;
}

.about-why-copy h2::after,
.about-stats h2::after,
.about-values h2::after,
.about-quality h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: #d6a340;
}

.about-stats h2,
.about-values h2 {
  margin-left: auto;
  margin-right: auto;
}

.about-values-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-values-grid article {
  background: #ffffff;
  border: 1px solid #dfe4ec;
  border-left: 3px solid #d6a340;
  border-radius: 8px;
  padding: 14px 16px;
}

.about-values-grid h3 {
  color: #173560;
  font-family: "Montserrat", sans-serif;
  font-size: 27px;
  font-weight: 700;
}

.about-value-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-value-head img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 38px;
}

.about-values-grid p {
  margin-top: 8px;
  color: #566a85;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  max-width: none;
}

.about-facilities {
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
  background: #03214c;
}

.about-facilities .about-shell {
  padding-top: 42px;
  padding-bottom: 46px;
}

.about-facilities h2 {
  color: #ffffff;
}

.about-facilities h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: #d6a340;
}

.about-facilities-grid {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.about-facilities-grid li {
  border: 1px solid #31507d;
  border-radius: 8px;
  background: #103365;
  padding: 6px 8px 12px;
}

.about-facility-media {
  height: 168px;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.facility-1 {
  background-image: url("assets/about-fasilitas-1.png");
}

.facility-2 {
  background-image: url("assets/about-fasilitas-2.png");
}

.facility-3 {
  background-image: url("assets/about-fasilitas-3.png");
}

.about-facilities-grid h3 {
  margin-top: 8px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 700;
}

.about-values h2 {
  font-size: clamp(34px, 2.8vw, 44px);
}

.about-facilities h2 {
  font-size: clamp(34px, 2.8vw, 44px);
}

.about-facilities-grid p {
  margin-top: 4px;
  color: #d4deee;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  max-width: none;
}

.about-quality {
  background: #ffffff;
}

.about-quality-shell {
  padding-top: 42px;
  padding-bottom: 46px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.about-quality-copy h2 {
  text-align: left;
}

.about-why-copy p {
  margin-top: 18px;
}

.about-stats-grid {
  margin-top: 38px;
}

.about-quality-copy ul {
  margin-top: 34px;
}

.about-quality-copy ul {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.about-quality-copy li {
  color: #4f617b;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  padding-left: 38px;
  position: relative;
}

.about-quality-copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #d6a340;
  border-radius: 999px;
  color: #d6a340;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
}

.about-quality-media {
  background-image: url("assets/about-komitmen-image.png");
  background-repeat: no-repeat;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  min-height: 236px;
}

.about-cta {
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
  background: #03214c;
}

.about-cta-shell {
  padding-top: 38px;
  padding-bottom: 38px;
  text-align: center;
}

.about-cta h2 {
  color: #ffffff;
}

.about-cta p {
  margin-top: 14px;
  color: #d8a541;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  max-width: none;
}

.about-quality h2 {
  font-size: clamp(36px, 3vw, 46px);
}

.about-cta h2 {
  font-size: clamp(34px, 2.8vw, 44px);
}

.about-cta-btn {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 6px;
  padding: 9px 24px;
  background: #d6a340;
  color: #0f2f5f;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.about-cta-btn .wa-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.about-cta-btn .wa-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #0f2f5f;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1200px) {
  .about-hero-shell,
  .about-why-shell,
  .about-quality-shell {
    grid-template-columns: 1fr;
  }

  .about-stats-grid,
  .about-facilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-name-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about-name-grid article + article {
    border-left: 0;
    border-top: 1px solid #d8a748;
    padding-top: 12px;
  }

  .about-hero-media {
    min-height: 330px;
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .about-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .about-stats .about-shell {
    padding-top: 32px;
    padding-bottom: 34px;
  }

  .about-values .about-shell,
  .about-facilities .about-shell {
    padding-top: 32px;
    padding-bottom: 34px;
  }

  .about-quality-shell {
    padding-top: 32px;
    padding-bottom: 34px;
  }

  .about-cta-shell {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .about-stats-grid,
  .about-values-grid,
  .about-facilities-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-copy h1 {
    font-size: clamp(44px, 12vw, 72px);
  }

  .about-name-eyebrow {
    font-size: 22px;
  }

  .about-name h2,
  .about-values h2,
  .about-facilities h2,
  .about-quality h2,
  .about-cta h2 {
    font-size: clamp(30px, 8vw, 42px);
  }

  .about-name-grid h3 {
    font-size: 30px;
  }

  .about-name-grid .en {
    font-size: 24px;
  }

  .about-why-copy h2,
  .about-stats h2 {
    font-size: 30px;
  }

  .about-stats-grid strong {
    font-size: 34px;
  }

  .about-stats-grid span {
    font-size: 19px;
  }

  .about-stats-grid {
    margin-top: 24px;
  }

  .about-values-grid,
  .about-facilities-grid {
    margin-top: 22px;
  }

  .about-quality-copy ul {
    margin-top: 20px;
  }

  .about-facilities-grid h3,
  .about-values-grid h3 {
    font-size: 21px;
  }

  .about-cta p {
    margin-top: 10px;
    font-size: 18px;
  }

  .about-cta-btn {
    margin-top: 16px;
  }
}

/* Contact page */
.contact-page main {
  background: #f3f4f6;
}

.contact-hero-page {
  background-color: #06295a;
  background-image: linear-gradient(90deg, rgb(1 28 68 / 62%), rgb(4 40 92 / 18%)),
    url("assets/product-catalog-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.contact-hero-page-shell {
  max-width: 1320px;
  margin: 0 auto;
  min-height: 306px;
  padding: 42px 38px 38px;
  display: grid;
  place-items: center;
  text-align: center;
}

.contact-hero-page h1 {
  color: #ffffff;
  font-size: clamp(58px, 5vw, 84px);
  font-weight: 800;
  line-height: 1.04;
}

.contact-hero-page p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid #d6a340;
  color: #e4ebf7;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.55;
}

.contact-main-page {
  padding: 22px 0;
}

.contact-main-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 38px;
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 16px;
}

.contact-form-card,
.contact-side-card {
  background: #ffffff;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
}

.contact-form-card {
  padding: 20px 20px 18px;
  border-top: 5px solid #0f2f5f;
}

.contact-form-card h2 {
  color: #173560;
  font-size: 38px;
  font-weight: 700;
}

.contact-form-card form {
  margin-top: 10px;
}

.contact-form-card label {
  display: block;
  margin-top: 8px;
  color: #243d66;
  font-size: 15px;
  font-weight: 500;
}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
  width: 100%;
  margin-top: 4px;
  border: 1px solid #cad2df;
  border-radius: 6px;
  padding: 11px 12px;
  color: #21395f;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.2;
}

.contact-form-card input,
.contact-form-card select {
  min-height: 46px;
}

.contact-form-card select {
  height: 46px;
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2367768f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: right 12px center;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
  color: #7a8598;
}

.contact-form-card select:invalid {
  color: #7a8598;
}

.contact-form-card textarea {
  resize: vertical;
  min-height: 132px;
}

.contact-send-btn {
  margin-top: 12px;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  background: #d6a340;
  color: #0e2f5c;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.contact-send-btn:disabled,
.contact-side-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-otp-verify-btn {
  margin-top: 0;
  width: auto;
  min-width: 170px;
  min-height: 44px;
  border-radius: 6px;
  font-size: 16px;
}

.contact-otp-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.contact-otp-modal.hidden {
  display: none;
}

.contact-otp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 19, 42, 0.55);
}

.contact-otp-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  background: #ffffff;
  border: 1px solid #dfe3eb;
  border-top: 5px solid #d6a340;
  border-radius: 10px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 40px rgba(8, 25, 54, 0.2);
}

.contact-otp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.contact-otp-modal-header h2 {
  color: #173560;
  font-size: 28px;
  font-weight: 700;
}

.contact-otp-close {
  border: 0;
  background: transparent;
  color: #56627a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.contact-otp-modal-copy {
  margin-top: 8px;
  color: #2b436a;
  font-size: 15px;
  line-height: 1.45;
}

.contact-otp-label {
  display: block;
  margin-top: 12px;
  color: #243d66;
  font-size: 15px;
  font-weight: 500;
}

.contact-otp-label input {
  width: 100%;
  margin-top: 6px;
  border: 1px solid #cad2df;
  border-radius: 6px;
  padding: 11px 12px;
  min-height: 46px;
  color: #21395f;
  background: #ffffff;
  font-size: 14px;
}

.contact-otp-modal-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.contact-otp-modal-actions .contact-side-btn {
  margin-top: 0;
  width: auto;
  min-width: 170px;
}

#contact-form-feedback,
#contact-otp-feedback {
  margin-top: 10px;
  min-height: 20px;
}

.contact-side-cards {
  display: grid;
  gap: 12px;
}

.contact-side-card {
  padding: 14px 14px 16px;
  border-left: 4px solid #d6a340;
}

.side-icon {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: #0f2f5f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.side-icon.whatsapp {
  background: transparent;
}

.side-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-icon.whatsapp img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
}

.contact-side-card h3 {
  margin-top: 8px;
  color: #173560;
  font-size: 30px;
  font-weight: 700;
}

.contact-side-card .side-note {
  margin-top: 2px;
  color: #c38f33;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  max-width: none;
}

.contact-side-card .side-value {
  margin-top: 8px;
  color: #273e66;
  font-size: 16px;
  font-weight: 500;
  max-width: none;
}

.contact-wa-btn,
.contact-side-btn {
  margin-top: 10px;
  min-height: 44px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
}

.contact-wa-btn {
  background: #25d366;
  color: #ffffff;
}

.contact-side-btn {
  border: 1px solid #6e7f99;
  color: #19375f;
  background: #ffffff;
}

.contact-response-strip {
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
}

.contact-response-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 38px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-response-shell article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px;
}

.contact-response-shell article + article {
  border-left: 1px solid rgb(255 255 255 / 30%);
}

.response-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d6a340;
}

.response-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-response-shell h3 {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.contact-response-shell p {
  color: #d6deec;
  font-size: 14px;
  max-width: none;
}

.contact-location {
  padding: 20px 0 16px;
}

.contact-location-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 38px;
  background: #ffffff;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
}

.contact-location-shell h2 {
  padding: 16px 20px 0;
  color: #173560;
  font-size: 36px;
  font-weight: 700;
}

.contact-map {
  margin: 12px 20px 0;
  height: 248px;
  border: 1px solid #d7dce5;
  border-radius: 10px;
  background: #eef2f8;
  overflow: hidden;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-address {
  padding: 12px 20px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.address-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: #0f2f5f;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
}

.address-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-address strong {
  color: #173560;
  font-size: 28px;
}

.contact-address p {
  margin-top: 2px;
  color: #4f617c;
  max-width: none;
  font-size: 16px;
  line-height: 1.5;
}

.contact-guarantees {
  padding: 0 0 18px;
}

.contact-guarantees-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 38px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-guarantees article {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}

.contact-guarantees article + article {
  border-left: 1px solid #d2d9e5;
}

.guarantee-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d6a340;
  flex: 0 0 64px;
}

.guarantee-icon svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-guarantees p {
  color: #173560;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  max-width: none;
}

.contact-floating-wa {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 3px solid #ffffff;
  background: #1aaa51;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
  z-index: 50;
}

.contact-floating-wa svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-page a:focus-visible,
.contact-page button:focus-visible,
.contact-page input:focus-visible,
.contact-page select:focus-visible,
.contact-page textarea:focus-visible {
  outline: 2px solid #d6a340;
  outline-offset: 2px;
}

@media (max-width: 1200px) {
  .contact-main-shell {
    grid-template-columns: 1fr;
  }

  .contact-side-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (max-width: 900px) {
  .contact-hero-page-shell,
  .contact-main-shell,
  .contact-response-shell,
  .contact-location-shell,
  .contact-guarantees-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-hero-page-shell {
    min-height: 240px;
    padding-top: 34px;
    padding-bottom: 30px;
  }

  .contact-hero-page h1 {
    font-size: clamp(42px, 10vw, 56px);
  }

  .contact-hero-page p {
    font-size: 16px;
  }

  .contact-form-card h2,
  .contact-side-card h3,
  .contact-location-shell h2 {
    font-size: 30px;
  }

  .contact-side-card h3 {
    font-size: 26px;
  }

  .contact-main-page {
    padding-top: 16px;
  }

  .contact-side-cards {
    grid-template-columns: 1fr;
  }

  .contact-response-shell {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-response-shell article + article,
  .contact-guarantees article + article {
    border-left: 0;
  }

  .contact-response-shell article + article {
    border-top: 1px solid rgb(255 255 255 / 28%);
    padding-top: 10px;
  }

  .contact-map {
    margin-left: 0;
    margin-right: 0;
    height: 210px;
  }

  .contact-address {
    padding-left: 0;
    padding-right: 0;
  }

  .contact-address strong {
    font-size: 24px;
  }

  .contact-guarantees-shell {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .contact-guarantees article {
    min-height: 66px;
    padding-left: 0;
    padding-right: 0;
  }

  .contact-guarantees article + article {
    border-top: 1px solid #d2d9e5;
  }
}

@media (max-width: 640px) {
  .contact-form-card {
    padding: 14px 12px 12px;
  }

  .contact-form-card h2,
  .contact-side-card h3,
  .contact-location-shell h2 {
    font-size: 26px;
  }

  .contact-side-card h3 {
    font-size: 22px;
  }

  .contact-form-card label,
  .contact-side-card .side-note,
  .contact-side-card .side-value,
  .contact-address p {
    font-size: 14px;
  }

  .contact-send-btn,
  .contact-wa-btn,
  .contact-side-btn {
    font-size: 16px;
  }

  .contact-response-shell h3 {
    font-size: 14px;
  }

  .contact-response-shell p,
  .contact-guarantees p {
    font-size: 13px;
  }

  .contact-floating-wa {
    width: 56px;
    height: 56px;
    right: 12px;
    bottom: 12px;
  }

  .contact-floating-wa svg {
    width: 30px;
    height: 30px;
  }
}

/* Global font system: Plus Jakarta Sans + DM Sans */
body,
p,
li,
a,
button,
input,
textarea,
select,
label,
span {
  font-family: "DM Sans", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* Legal page */
.legal-page {
  background: #ffffff;
}

.legal-hero {
  background-image: url("assets/product-catalog-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.legal-hero-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 30px 38px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.legal-kicker {
  margin: 0;
  color: #d7a53f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.legal-hero-copy h1 {
  margin-top: 8px;
  color: #ffffff;
  font-size: clamp(38px, 4.1vw, 56px);
  font-weight: 800;
  line-height: 1.06;
}

.legal-updated {
  margin-top: 12px;
  color: rgb(255 255 255 / 86%);
  font-size: 15px;
  font-weight: 500;
}

.legal-anchor-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
}

.legal-anchor-nav a {
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid #d7a53f;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.legal-doc-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 38px 30px 36px;
}

.legal-doc-header {
  text-align: center;
}

.legal-doc-header p {
  margin: 0;
  color: #c48518;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

.legal-doc-header h2 {
  margin-top: 12px;
  color: #11346a;
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.08;
}

.legal-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: legal-item;
}

.legal-list li {
  counter-increment: legal-item;
  position: relative;
  padding-left: 20px;
  margin-top: 18px;
}

.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 3px;
  height: calc(100% - 8px);
  background: #d9a33e;
  border-radius: 2px;
}

.legal-list h3 {
  margin: 0;
  color: #0f3166;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

.legal-list h3::before {
  content: counter(legal-item) ". ";
}

.legal-list p {
  margin-top: 8px;
  max-width: none;
  color: #4f5f7c;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.63;
}

.legal-contact-card {
  margin-top: 12px;
  border: 1px solid #e0e5ed;
  border-left: 5px solid #0f3166;
  border-radius: 10px;
  background: #ffffff;
  max-width: 470px;
  padding: 16px 18px;
}

.legal-contact-card h4 {
  margin: 0;
  color: #0f3166;
  font-size: 24px;
  font-weight: 700;
}

.legal-contact-card ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.legal-contact-card li {
  margin: 0;
  padding: 0;
  color: #4f5f7c;
  font-size: 16px;
  line-height: 1.55;
}

.legal-contact-card li::before {
  content: none;
}

.legal-divider {
  background-image:
    radial-gradient(120% 120% at 82% 8%, rgba(24, 80, 165, 0.25) 0%, rgba(7, 43, 92, 0) 58%),
    radial-gradient(120% 130% at -5% 112%, rgba(24, 80, 165, 0.22) 0%, rgba(7, 43, 92, 0) 62%);
}

.legal-divider-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 30px;
  text-align: center;
}

.legal-divider-shell p {
  margin: 0;
  color: #d7a53f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.legal-divider-shell h2 {
  margin-top: 8px;
  color: #ffffff;
  font-size: clamp(38px, 3.3vw, 52px);
  font-weight: 800;
}

@media (max-width: 900px) {
  .legal-hero-shell {
    padding: 24px 16px 30px;
    flex-direction: column;
  }

  .legal-anchor-nav {
    padding-top: 8px;
  }

  .legal-anchor-nav a {
    font-size: 14px;
    min-height: 40px;
    padding: 9px 12px;
  }

  .legal-updated {
    font-size: 14px;
  }

  .legal-doc-shell {
    padding: 28px 16px 26px;
  }

  .legal-doc-header p {
    font-size: 12px;
    letter-spacing: 2.2px;
  }

  .legal-list li {
    padding-left: 14px;
    margin-top: 14px;
  }

  .legal-list h3 {
    font-size: 22px;
  }

  .legal-list p {
    font-size: 14px;
    line-height: 1.6;
  }

  .legal-contact-card h4 {
    font-size: 18px;
  }

  .legal-contact-card li {
    font-size: 14px;
  }

  .legal-divider-shell {
    padding: 16px;
  }

  .legal-divider-shell p {
    font-size: 12px;
    letter-spacing: 2.2px;
  }
}

/* Custom Design page */
.custom-page main {
  background: #f4f5f7;
}

.custom-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

.custom-hero {
  background-color: #06295a;
  background-image: linear-gradient(90deg, rgb(1 28 68 / 62%), rgb(4 40 92 / 18%)),
    url("assets/product-catalog-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.custom-hero-shell {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  min-height: 360px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
}

.custom-hero-copy {
  padding: 36px 30px 32px max(30px, calc((100vw - 1320px) / 2 + 30px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.custom-kicker {
  margin: 0;
  color: #d6a340;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.custom-hero-copy h1 {
  margin-top: 8px;
  color: #ffffff;
  font-size: clamp(48px, 5vw, 74px);
  font-weight: 800;
  line-height: 1;
}

.custom-hero-copy p {
  margin-top: 14px;
  max-width: 560px;
  color: #dce7f8;
  font-size: 17px;
  line-height: 1.6;
}

.custom-hero-copy .custom-kicker {
  color: #d6a340;
}

.custom-hero-btn {
  margin-top: 16px;
  min-height: 46px;
  border-radius: 6px;
  padding: 11px 20px;
  background: #d7a53f;
  color: #0f2f5f;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.custom-hero-btn .wa-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-hero-btn .wa-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #0f2f5f;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-hero-media {
  min-height: 100%;
  background-image: url("assets/custom-design-hero.png");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right center;
}

.custom-highlights {
  background: #ffffff;
  border-top: 1px solid #dfe5ef;
  border-bottom: 1px solid #dfe5ef;
}

.custom-highlights-shell {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.custom-highlights article {
  padding: 18px 16px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.custom-highlight-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.custom-highlights article > div {
  display: grid;
  align-content: end;
}

.custom-highlights article + article {
  border-left: 1px solid #dde2eb;
}

.custom-highlights h3 {
  color: #163462;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.custom-highlights p {
  margin-top: 6px;
  color: #5a6c88;
  font-size: 15px;
  line-height: 1.55;
}

.custom-help {
  padding-top: 30px;
}

.custom-help h2,
.custom-requirements h2,
.custom-flow h2,
.custom-results h2,
.custom-faq h2,
.custom-cta h2 {
  color: #173560;
  font-size: clamp(32px, 2.3vw, 40px);
  font-weight: 800;
}

.custom-help h2,
.custom-requirements h2,
.custom-flow h2,
.custom-results h2,
.custom-faq h2 {
  position: relative;
  width: fit-content;
  padding-bottom: 10px;
}

.custom-help h2::after,
.custom-requirements h2::after,
.custom-flow h2::after,
.custom-results h2::after,
.custom-faq h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: #d6a340;
}

.custom-help-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 1127px;
  margin-left: auto;
  margin-right: auto;
}

.custom-help-grid article {
  border: 1px solid #dce2ec;
  border-top: 3px solid #d6a340;
  border-radius: 10px;
  background: #ffffff;
  padding: 18px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.custom-help-grid h3 {
  color: #173560;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.custom-help-icon {
  width: 66px;
  height: 66px;
  object-fit: contain;
  flex: 0 0 66px;
  align-self: center;
  justify-self: center;
}

.custom-help-copy {
  display: grid;
  align-content: center;
}

.custom-help-grid p {
  margin-top: 8px;
  margin-left: 0;
  color: #5a6d89;
  font-size: 16px;
  line-height: 1.6;
}

.custom-requirements {
  margin-top: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
  background: #03214c;
}

.custom-requirements h2 {
  color: #ffffff;
}

.custom-req-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.custom-req-card {
  position: relative;
  border: 1px solid #d6a340;
  border-radius: 10px;
  padding: 18px;
  display: grid;
  grid-template-areas:
    "title title"
    "icon copy";
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.custom-req-grid h3 {
  grid-area: title;
  color: #e8f0ff;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  text-align: left;
}

.custom-req-icon {
  grid-area: icon;
  width: 180px;
  height: 180px;
  object-fit: contain;
  flex: 0 0 180px;
  align-self: center;
  justify-self: center;
}

.custom-req-copy {
  grid-area: copy;
  display: grid;
  align-content: center;
}

.custom-req-format {
  margin-top: 8px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
}

.custom-req-grid ul {
  margin: 12px 0 0;
  padding: 0;
  color: #d5e0f3;
  display: grid;
  gap: 6px;
  list-style: none;
}

.custom-req-grid li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.45;
}

.custom-req-card li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0.06em;
  color: #d6a340;
  font-size: 13px;
  line-height: 1;
}

.custom-req-card.is-best li::before {
  content: "✓";
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #40b95e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  top: 0.22em;
}

.custom-req-badge {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 2px solid #d6a340;
  border-radius: 8px;
  padding: 6px 12px;
  color: #d6a340;
  background: rgba(214, 163, 64, 0.15);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.custom-flow,
.custom-results,
.custom-faq {
  padding-top: 26px;
}

.custom-flow-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}

.custom-flow-list::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 91px;
  height: 2px;
  background: #d6a340;
  z-index: 0;
}

.custom-flow-list li {
  padding: 6px 10px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.custom-flow-icon {
  width: 55px;
  height: 55px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

.custom-flow-no {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #0f2f5f;
  border: 2px solid #d6a340;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-flow-list h3 {
  margin-top: 8px;
  color: #173560;
  font-size: 21px;
}

.custom-flow-list p {
  margin-top: 4px;
  color: #5b6f8b;
  font-size: 14px;
  line-height: 1.45;
}

.custom-results-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.custom-results-grid article {
  border: 1px solid #dfe4ec;
  border-top: 3px solid #d6a340;
  border-radius: 10px;
  background: #ffffff;
  min-height: 238px;
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  overflow: hidden;
  position: relative;
}

.result-before {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 10px 8px;
}

.result-arrow {
  color: #d6a340;
  font-size: 46px;
  font-weight: 700;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
}

.result-after {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 10px 8px;
}

.result-label {
  margin: 0;
  color: #5a6d89;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.result-after .result-label {
  color: #d6a340;
}

.custom-results-grid article::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e1e6ef;
  transform: translateX(-50%);
}

.result-logo {
  width: 100%;
  max-width: 150px;
  max-height: 94px;
  object-fit: contain;
  align-self: center;
  justify-self: center;
}

.result-product {
  width: 100%;
  max-width: 132px;
  max-height: 150px;
  object-fit: contain;
  align-self: center;
  justify-self: center;
}

.custom-faq-list {
  margin-top: 20px;
  display: grid;
  gap: 8px;
  max-width: 1196px;
  margin-left: auto;
  margin-right: auto;
}

.custom-faq-item {
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  background: #ffffff;
}

.custom-faq-item.open {
  border-left: 3px solid #d6a340;
}

.custom-faq-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #173560;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.custom-faq-content {
  display: none;
  padding: 0 14px 14px;
}

.custom-faq-item.open .custom-faq-content {
  display: block;
}

.custom-faq-content p {
  color: #5b6f8b;
  font-size: 15px;
  line-height: 1.5;
  max-width: none;
}

.custom-cta {
  margin-top: 24px;
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
  background: #03214c;
}

.custom-cta-shell {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

.custom-cta h2 {
  color: #ffffff;
  font-size: clamp(42px, 3.4vw, 56px);
}

.custom-cta p {
  margin-top: 10px;
  color: #d6a340;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.custom-cta-subtitle {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  white-space: nowrap;
}

.custom-cta-email {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  .custom-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .custom-hero-shell,
  .custom-highlights-shell,
  .custom-help-grid,
  .custom-req-grid,
  .custom-flow-list,
  .custom-results-grid {
    grid-template-columns: 1fr;
  }

  .custom-highlights article + article {
    border-left: 0;
    border-top: 1px solid #dde2eb;
  }

  .custom-hero-media {
    min-height: 220px;
  }

  .custom-results-grid article {
    grid-template-columns: 1fr 30px 1fr;
    min-height: 220px;
  }

  .result-arrow {
    font-size: 28px;
  }

  .result-label {
    font-size: 13px;
  }

  .custom-cta-subtitle {
    white-space: normal;
  }
}

/* Kualitas page */
.quality-page main {
  background: #f4f5f7;
}

.quality-page .quality-shell {
  max-width: 1320px;
  width: auto;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

.quality-hero {
  background-color: #06295a;
  background-image: linear-gradient(90deg, rgb(1 28 68 / 62%), rgb(4 40 92 / 18%)),
    url("assets/product-catalog-hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.quality-hero .quality-shell {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.quality-hero-shell {
  width: 100%;
  min-height: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
}

.quality-kicker {
  margin: 0;
  color: #d6a340;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.quality-hero-copy {
  padding: 36px 30px 32px max(30px, calc((100vw - 1320px) / 2 + 30px));
  display: grid;
  align-content: center;
}

.quality-hero-copy h1 {
  margin-top: 8px;
  color: #ffffff;
  font-size: clamp(46px, 4.8vw, 72px);
  line-height: 1;
}

.quality-hero-copy h1 span {
  display: block;
  white-space: nowrap;
}

.quality-hero-copy h1 .gold {
  color: #d6a340;
}

.quality-hero-copy p {
  margin-top: 14px;
  max-width: 620px;
  color: #dce7f8;
  font-size: 17px;
  line-height: 1.6;
}

.quality-wa-btn {
  margin-top: 16px;
  min-height: 46px;
  border-radius: 6px;
  padding: 11px 20px;
  background: #d7a53f;
  color: #0f2f5f;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.quality-wa-btn .wa-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quality-wa-btn .wa-icon svg {
  width: 18px;
  height: 18px;
  fill: #0f2f5f;
}

/* Pengemasan & Pengiriman page */
.ship-page main {
  background: #f5f7fb;
}

.ship-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

.ship-hero {
  background: #06295a url("assets/product-catalog-hero-bg.png") center / cover no-repeat;
}

.ship-hero .ship-shell {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.ship-hero-shell {
  width: 100%;
  min-height: 430px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 0;
  align-items: stretch;
}

.ship-hero-copy {
  padding: 36px 30px 32px max(30px, calc((100vw - 1320px) / 2 + 30px));
  display: grid;
  align-content: center;
}

.ship-kicker {
  margin: 0;
  color: #d6a340;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 700;
}

.ship-hero-copy h1 {
  margin-top: 10px;
  color: #ffffff;
  font-size: clamp(42px, 4.5vw, 66px);
  line-height: 1.03;
}

.ship-hero-copy h1 span {
  display: block;
}

.ship-hero-copy h1 .gold {
  color: #d6a340;
}

.ship-hero-copy p {
  margin-top: 14px;
  max-width: 520px;
  color: #d7e4f7;
  font-size: 16px;
  line-height: 1.55;
}

.ship-hero-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
}

.ship-hero-actions a {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #d6a340;
  border-radius: 8px;
  color: #f0f5ff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ship-hero-actions a:hover {
  background: #d6a340;
  color: #0f2f5f;
}

.ship-hero-media {
  background: url("assets/kirim-hero-image.png") right top / cover no-repeat;
  border-left: 1px solid rgb(214 163 64 / 25%);
}

.ship-metrics {
  background: #ffffff;
  border-top: 1px solid #dde4ef;
  border-bottom: 1px solid #dde4ef;
}

.ship-metric-grid {
  margin: 0;
  padding: 20px 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ship-metric-grid li {
  padding: 0 16px;
  text-align: center;
  display: grid;
  justify-items: center;
  align-content: start;
}

.ship-metric-grid li + li {
  border-left: 1px solid #dfb66b;
}

.ship-metric-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

.ship-metric-grid strong {
  margin-top: 8px;
  display: block;
  color: #173560;
  font-size: 25px;
  line-height: 1.2;
  min-height: 60px;
  align-self: start;
}

.ship-metric-grid p {
  margin-top: 6px;
  color: #5d6f89;
  font-size: 14px;
  line-height: 1.4;
  align-self: start;
  margin-bottom: 0;
}

.ship-packaging {
  padding-top: 26px;
  padding-bottom: 24px;
}

.ship-packaging h2,
.ship-delivery h2 {
  margin-top: 6px;
  color: #173560;
  font-size: clamp(34px, 2.9vw, 44px);
  line-height: 1.05;
}

.ship-section-line {
  margin-top: 10px;
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: #d6a340;
}

.ship-subtitle {
  margin-top: 16px;
  color: #647792;
  font-size: 16px;
}

.ship-packaging-cards {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ship-packaging-cards article {
  border: 1px solid #dfe6ef;
  border-top: 3px solid #d6a340;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: start;
}

.ship-packaging-card-icon {
  width: 55px;
  height: 55px;
  object-fit: contain;
  display: block;
  margin-top: 2px;
}

.ship-packaging-card-copy {
  align-self: start;
}

.ship-packaging-cards h3 {
  color: #173560;
  font-size: 24px;
  min-height: 58px;
  display: flex;
  align-items: flex-start;
}

.ship-packaging-cards p {
  margin-top: 8px;
  color: #5b6e8a;
  font-size: 14px;
  line-height: 1.5;
  align-self: start;
  margin-bottom: 0;
}

.ship-packaging-media {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.ship-packaging-main,
.ship-packaging-side-top,
.ship-packaging-side-bottom {
  border-radius: 10px;
  border: 1px solid #dce4ef;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

.ship-packaging-main {
  min-height: 315px;
  grid-column: 1;
  grid-row: 1 / span 2;
  background: url("assets/aman-image-1.png") center / cover no-repeat;
}

.ship-packaging-side-top {
  min-height: 0;
  height: auto;
  grid-column: 2;
  grid-row: 1;
  background: url("assets/aman-image-2.png") center / cover no-repeat;
}

.ship-packaging-side-bottom {
  min-height: 0;
  height: auto;
  grid-column: 2;
  grid-row: 2;
  background-image: url("assets/aman-image-3.png");
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

.ship-packaging-media span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #d6a340;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.ship-divider {
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
}

.ship-divider h2 {
  padding: 12px 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #ffffff;
  font-size: clamp(30px, 2.5vw, 38px);
}

.ship-divider h2::before,
.ship-divider h2::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #d6a340;
}

.ship-divider h2 span {
  display: inline-block;
  line-height: 1;
}

.ship-delivery {
  padding-top: 24px;
  padding-bottom: 30px;
}

.ship-delivery-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.ship-delivery-left > p {
  margin-top: 16px;
  max-width: 560px;
  color: #5d6f89;
  font-size: 16px;
  line-height: 1.55;
}

.ship-delivery-line {
  margin-top: 10px;
}

.ship-courier-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.ship-courier-list li {
  min-height: 64px;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  place-items: center;
  padding: 8px;
}

.ship-courier-list li img {
  width: 100%;
  max-height: 56px;
  object-fit: contain;
  display: block;
}

.ship-delivery-right h3 {
  color: #173560;
  font-size: 31px;
}

.ship-delivery-right article {
  margin-top: 10px;
  border: 1px solid #dce4ef;
  border-left: 4px solid #d6a340;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
}

.ship-service-icon {
  width: 55px;
  height: 55px;
  object-fit: contain;
  display: block;
  align-self: center;
}

.ship-delivery-right h4 {
  color: #173560;
  font-size: 22px;
}

.ship-delivery-right ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #5a6e8a;
  font-size: 14px;
  line-height: 1.45;
}

.ship-estimate {
  padding-top: 22px;
  padding-bottom: 24px;
  border-top: 1px solid #d6a340;
  background: #03214c;
}

.ship-estimate-shell {
  position: relative;
}

.ship-estimate h2 {
  color: #ffffff;
  font-size: clamp(34px, 2.9vw, 42px);
  line-height: 1.05;
}

.ship-estimate-line {
  margin-top: 10px;
}

.ship-estimate-steps {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 1;
  width: 70%;
  min-width: 780px;
  margin-left: 130px;
}

.ship-estimate-steps::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 72px;
  height: 2px;
  background: #d6a340;
  z-index: 0;
}

.ship-estimate-steps li {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 8px;
}

.ship-estimate-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

.ship-estimate-no {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid #d6a340;
  background: #072b5c;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ship-estimate-steps h3 {
  margin-top: 8px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  min-height: 52px;
}

.ship-estimate-steps p {
  margin-top: 6px;
  color: #d2dcf0;
  font-size: 14px;
  line-height: 1.42;
}

.ship-estimate-note {
  margin-top: 18px;
  max-width: 70%;
  min-width: 780px;
  margin-left: 24px;
  border: 1px solid #d4dceb;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
}

.ship-estimate-note-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid #d6a340;
  color: #d6a340;
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ship-estimate-note p {
  margin: 0;
  color: #334a6f;
  font-size: 16px;
  line-height: 1.45;
}

.ship-estimate-decor {
  position: absolute;
  right: -12px;
  bottom: -22px;
  width: 240px;
  height: 240px;
  background: url("assets/estimasi-image-1.png") center / contain no-repeat;
  opacity: 0.7;
}

.ship-dropship {
  background: #ffffff;
  padding-top: 26px;
  padding-bottom: 26px;
}

.ship-dropship-shell {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 20px;
  align-items: center;
}

.ship-dropship-left h2 {
  margin-top: 6px;
  color: #173560;
  font-size: clamp(38px, 3.1vw, 52px);
  line-height: 1.05;
}

.ship-dropship-left h2 .gold {
  color: #d6a340;
  display: block;
}

.ship-dropship-left > p {
  margin-top: 12px;
  color: #445b7d;
  font-size: 16px;
  line-height: 1.55;
  max-width: 650px;
}

.ship-dropship-left ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ship-dropship-left li {
  color: #173560;
  font-size: 18px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
}

.ship-dropship-left li::before {
  content: "✓";
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid #d6a340;
  color: #d6a340;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.ship-dropship-kicker {
  color: #d6a340;
}

.ship-dropship-btn {
  margin-top: 16px;
  min-height: 50px;
  width: fit-content;
  padding: 10px 18px;
  border-radius: 8px;
  background: #d6a340;
  border: 1px solid #c79636;
  color: #0f2f5f;
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ship-dropship-btn .wa-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.ship-dropship-btn .wa-icon svg {
  width: 18px;
  height: 18px;
  fill: #0f2f5f;
}

.ship-dropship-right {
  border: 1px solid #e0e7f0;
  border-radius: 12px;
  background: #ffffff;
  min-height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  padding: 20px 24px;
  position: relative;
}

.ship-dropship-node {
  text-align: center;
}

.ship-dropship-node-icon {
  width: 146px;
  height: 146px;
  border-radius: 999px;
  background: #072b5c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ship-dropship-node-icon img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
}

.ship-dropship-node p {
  margin-top: 12px;
  color: #173560;
  font-size: 19px;
  line-height: 1.4;
}

.ship-dropship-arrow {
  flex: 1;
  height: 146px;
  position: relative;
  margin: 0 18px;
  display: grid;
  place-items: center;
}

.ship-dropship-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  transform: translateY(-50%);
  border-top: 6px solid #d6a340;
}

.ship-dropship-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 34%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 16px solid #d6a340;
}

.ship-dropship-arrow span {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: #d6a340;
  font-size: 18px;
  font-weight: 700;
  background: #ffffff;
  padding: 0 10px;
  line-height: 1.1;
}

.ship-dropship-arrow .ship-dropship-arrow-bottom {
  top: auto;
  bottom: 50px;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}

.ship-question-cta {
  border-top: 2px solid #d6a340;
  border-bottom: 2px solid #d6a340;
  background: #03214c url("assets/product-catalog-hero-bg.png") center / cover no-repeat;
}

.ship-question-shell {
  min-height: 150px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
}

.ship-question-copy {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ship-question-icon {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 3px solid #d6a340;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ship-question-icon svg {
  width: 42px;
  height: 42px;
  fill: #d6a340;
}

.ship-question-copy h2 {
  color: #ffffff;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.05;
  text-align: center;
}

.ship-question-copy p {
  margin-top: 6px;
  color: #d6a340;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.ship-question-btn {
  margin-top: 10px;
  min-height: 54px;
  border-radius: 10px;
  border: 2px solid rgb(255 255 255 / 55%);
  background: #072b5c;
  color: #ffffff;
  text-decoration: none;
  width: fit-content;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
}

.ship-question-btn .wa-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.ship-question-btn .wa-icon svg {
  width: 20px;
  height: 20px;
  fill: #d6a340;
}

@media (max-width: 900px) {
  .ship-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ship-hero-shell,
  .ship-packaging-cards,
  .ship-packaging-media,
  .ship-delivery-shell,
  .ship-metric-grid,
  .ship-dropship-shell,
  .ship-estimate-steps,
  .ship-question-shell {
    grid-template-columns: 1fr;
  }

  .ship-metric-grid li + li {
    border-left: 0;
    border-top: 1px solid #dfb66b;
    margin-top: 10px;
    padding-top: 12px;
  }

  .ship-hero-media {
    min-height: 220px;
    border-left: 0;
    border-top: 1px solid rgb(214 163 64 / 25%);
  }

  .ship-hero-actions {
    flex-direction: column;
  }

  .ship-courier-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ship-packaging-cards article {
    grid-template-columns: 50px 1fr;
    gap: 10px;
  }

  .ship-packaging-card-icon {
    width: 48px;
    height: 48px;
  }

  .ship-delivery-right article {
    grid-template-columns: 46px 1fr;
    gap: 8px;
  }

  .ship-service-icon {
    width: 46px;
    height: 46px;
  }

  .ship-estimate-steps,
  .ship-estimate-note {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
  }

  .ship-estimate-steps::before,
  .ship-estimate-decor {
    display: none;
  }

  .ship-estimate-steps li {
    border: 1px solid rgb(214 163 64 / 35%);
    border-radius: 10px;
    padding: 10px;
    background: rgb(7 43 92 / 48%);
  }

  .ship-estimate-steps h3 {
    min-height: 0;
  }

  .ship-dropship-right {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }

  .ship-dropship-arrow {
    min-width: 0;
  }

  .ship-question-shell {
    text-align: center;
    justify-items: center;
  }

  .ship-question-btn {
    margin-left: auto;
    margin-right: auto;
  }
}

.quality-hero-media {
  background-image: url("assets/kualitas-hero-photo-v4.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

/* Portfolio page */
.portfolio-page main { background: #f5f7fb; }
.portfolio-shell { max-width: 1320px; margin: 0 auto; padding: 0 30px; }
.portfolio-kicker { margin: 0; color: #d6a340; letter-spacing: 2px; font-size: 14px; font-weight: 700; }
.portfolio-hero { background: #06295a url("assets/product-catalog-hero-bg.png") center/cover no-repeat; }
.portfolio-hero .portfolio-shell { max-width: none; padding-right: 0; }
.portfolio-hero-shell { min-height: 430px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 18px; align-items: stretch; }
.portfolio-hero-copy { display: grid; align-content: center; }
.portfolio-hero-copy h1 { margin-top: 10px; color: #fff; font-size: clamp(44px,4.5vw,66px); line-height: 1.03; }
.portfolio-hero-copy h1 .gold { color: #d6a340; display: block; }
.portfolio-hero-copy p { margin-top: 14px; color: #d7e4f7; font-size: 16px; line-height: 1.55; max-width: 520px; }
.portfolio-hero-actions { margin-top: 20px; display: flex; gap: 12px; }
.portfolio-hero-actions a { min-height: 44px; padding: 10px 18px; border: 1px solid #d6a340; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 700; }
.portfolio-hero-actions a:hover { background:#d6a340; color:#0f2f5f; }
.portfolio-hero-media { background: url("assets/portfolio-hero-image.png") left top / cover no-repeat; border-left: 1px solid rgb(214 163 64 / 25%); }

.portfolio-stats { background:#fff; border-top:1px solid #dde4ef; border-bottom:1px solid #dde4ef; }
.portfolio-stats-grid { margin:0; padding:22px 0; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.portfolio-stats-grid li { text-align:center; }
.portfolio-stats-grid li + li { border-left:1px solid #dfb66b; }
.portfolio-stats-grid strong { display:block; color:#d6a340; font-size: clamp(38px,3.3vw,52px); line-height:1; }
.portfolio-stats-grid span { color:#173560; font-size:24px; font-weight:700; }

.portfolio-grid-wrap { padding: 24px 0 28px; }
.portfolio-category + .portfolio-category { margin-top: 18px; }
.portfolio-category > p { margin:0 0 10px; color:#d6a340; letter-spacing:2px; font-size:14px; font-weight:700; }
.portfolio-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px; }
.portfolio-card { border:1px solid #dce4ef; border-top:3px solid #d6a340; border-radius:10px; background:#fff; overflow:hidden; }
.portfolio-card img { width:100%; height:240px; object-fit:cover; display:block; }
.portfolio-card h3 { padding:12px; color:#173560; font-size:26px; line-height:1.2; }

.portfolio-card .portfolio-card-body {
  padding: 12px 16px 14px;
}

.portfolio-card-industry {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f6;
  color: #5f6f89;
  font-size: 14px;
  font-weight: 600;
}

.portfolio-card h3 {
  padding: 10px 0 0;
  font-size: 18px;
  line-height: 1.25;
}

.portfolio-card-customer {
  margin-top: 4px;
  color: #d6a340;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.portfolio-card-logo-type {
  margin-top: 8px;
  color: #445b7d;
  font-size: 15px;
  line-height: 1.4;
}

.portfolio-card-link {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f1;
  color: #173560;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portfolio-card-link span {
  color: #d6a340;
  font-size: 21px;
  line-height: 1;
}

.portfolio-cta { margin-top: 20px; border-top:1px solid #d6a340; border-bottom:1px solid #d6a340; background:#03214c; }
.portfolio-cta .portfolio-shell { text-align:center; padding-top:24px; padding-bottom:24px; }
.portfolio-cta h2 { color:#fff; font-size: clamp(40px,3.2vw,56px); }
.portfolio-cta p { margin:8px auto 0; color:#d6a340; font-size:17px; max-width:none; }
.portfolio-cta-actions { margin-top:14px; display:flex; justify-content:center; gap:12px; }
.portfolio-cta-actions a { min-height:48px; border-radius:8px; padding:10px 18px; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; }
.portfolio-cta-actions a:first-child { background:#d6a340; color:#0f2f5f; border:1px solid #d6a340; }
.portfolio-cta-actions a:last-child { background:#072b5c; color:#fff; border:1px solid #d6a340; }
.portfolio-cta-actions .wa-icon { width: 18px; height: 18px; display: inline-flex; margin-right: 8px; }
.portfolio-cta-actions .wa-icon svg { width: 18px; height: 18px; fill: #d6a340; }

@media (max-width: 900px) {
  .portfolio-shell { padding: 0 16px; }
  .portfolio-hero-shell,
  .portfolio-grid,
  .portfolio-stats-grid { grid-template-columns: 1fr; }
  .portfolio-hero-media { min-height: 220px; border-left: 0; border-top: 1px solid rgb(214 163 64 / 25%); }
  .portfolio-stats-grid li + li { border-left: 0; border-top: 1px solid #dfb66b; margin-top: 10px; padding-top: 12px; }
  .portfolio-hero-actions,
  .portfolio-cta-actions { flex-direction: column; }
  .portfolio-card img { height: 190px; }
  .portfolio-cta .portfolio-shell { padding-top: 20px; padding-bottom: 20px; }
}

.quality-stats {
  background: #ffffff;
  border-top: 1px solid #dfe4ec;
  border-bottom: 1px solid #dfe4ec;
}

.quality-stats-grid {
  margin: 0;
  padding: 28px 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quality-stats-grid li {
  text-align: center;
  padding: 4px 12px;
}

.quality-stats-grid li + li {
  border-left: 1px solid #d8a748;
}

.quality-stats-grid strong {
  color: #d6a340;
  font-size: clamp(44px, 4vw, 62px);
  font-weight: 700;
  line-height: 1;
  display: block;
}

.quality-stats-grid span {
  color: #173560;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  display: inline-block;
  max-width: 180px;
}

.quality-process {
  padding-top: 26px;
}

.quality-process h2,
.quality-material h2,
.quality-garansi h2,
.quality-proof h2 {
  color: #173560;
  font-size: clamp(34px, 2.8vw, 46px);
  font-weight: 800;
  position: relative;
  width: fit-content;
  padding-bottom: 10px;
}

.quality-process h2::after,
.quality-material h2::after,
.quality-garansi h2::after,
.quality-proof h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: #d6a340;
}

.quality-process > .quality-shell > p {
  margin-top: 10px;
  color: #5a6d89;
  font-size: 17px;
}

.quality-flow-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}

.quality-flow-list::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 91px;
  height: 2px;
  background: #d6a340;
  z-index: 0;
}

.quality-flow-list li {
  padding: 6px 10px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.quality-flow-icon {
  width: 55px;
  height: 55px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

.quality-flow-no {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #0f2f5f;
  border: 2px solid #d6a340;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quality-flow-list h3 {
  margin-top: 8px;
  color: #173560;
  font-size: 21px;
}

.quality-flow-list p {
  margin-top: 4px;
  color: #5b6f8b;
  font-size: 14px;
  line-height: 1.45;
}

.quality-material {
  margin-top: 26px;
  padding-top: 24px;
  padding-bottom: 24px;
  background: #03214c;
}

.quality-material h2 {
  color: #ffffff;
}

.quality-material-shell {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 18px;
  align-items: start;
}

.quality-material-copy {
  grid-column: 1;
}

.quality-material-card {
  grid-column: 2;
}

.quality-material-copy p,
.quality-material-intro {
  margin-top: 10px;
  color: #d4e0f3;
  font-size: 16px;
  line-height: 1.6;
  max-width: 560px;
}

.quality-material-points {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quality-material-points li {
  border: 1px solid #d6a340;
  border-radius: 8px;
  padding: 18px 14px;
  min-height: 250px;
  background: #03214c;
  text-align: center;
}

.quality-material-points img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.quality-material-points h3 {
  margin-top: 10px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  min-height: 54px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.quality-material-points p {
  margin-top: 14px;
  color: #d3dff1;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.quality-material-card {
  border: 1px solid #d6a340;
  border-radius: 10px;
  background: #03214c;
  padding: 12px;
  display: grid;
  align-content: start;
  position: relative;
  justify-self: end;
  align-self: start;
  width: min(100%, 540px);
}

.quality-material-cert-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #dde3ee;
}

.quality-material-card span {
  margin-top: 12px;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  background: #d6a340;
  color: #0f2f5f;
  font-size: 14px;
  font-weight: 700;
  justify-self: end;
}

.quality-garansi {
  padding-top: 26px;
}

.quality-garansi-shell {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 16px;
}

.quality-garansi-copy p {
  margin-top: 10px;
  color: #5b6f8b;
  font-size: 16px;
  line-height: 1.6;
  max-width: 760px;
}

.quality-garansi-copy ol {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 760px;
}

.quality-garansi-copy li {
  text-align: center;
  color: #173560;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  grid-template-rows: 66px auto;
  gap: 12px;
}

.quality-garansi-flow li img {
  width: 66px;
  height: 66px;
  object-fit: contain;
}

.quality-garansi-flow li span {
  display: block;
  max-width: 180px;
  line-height: 1.35;
  align-self: start;
}

.quality-garansi-note {
  margin-top: 18px;
  max-width: 760px;
  border: 2px solid #e1bd78;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
}

.quality-garansi-note-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quality-garansi-note-icon svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #d6a340;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quality-garansi-note p {
  margin: 0;
  color: #173560;
  font-size: 17px;
  line-height: 1.45;
}

.quality-garansi-flow li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 14px;
  right: -22px;
  color: #d6a340;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.quality-garansi-badge {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
}

.quality-garansi-badge img {
  width: min(100%, 286px);
  height: auto;
  display: block;
}

.quality-garansi-badge span {
  width: auto;
  min-width: 286px;
  border-top: 2px solid #d6a340;
  padding-top: 10px;
  color: #173560;
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  justify-self: center;
}

.quality-proof {
  padding-top: 26px;
}

.quality-proof > .quality-shell > p {
  margin-top: 10px;
  color: #5a6d89;
}

.quality-proof-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quality-proof-grid article {
  border: 1px solid #dfe4ec;
  border-top: 3px solid #d6a340;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
}

.quality-proof-grid h3 {
  color: #173560;
  font-size: 20px;
  text-align: center;
  min-height: 52px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.quality-proof-box {
  margin-top: 10px;
  min-height: 130px;
  border: 1px dashed #c9d3e3;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #a0acc0;
}

.quality-cta {
  margin-top: 24px;
  border-top: 1px solid #d6a340;
  border-bottom: 1px solid #d6a340;
  background: #03214c;
}

.quality-cta-shell {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

.quality-cta h2 {
  color: #ffffff;
  font-size: clamp(42px, 3.4vw, 56px);
  line-height: 1.05;
}

.quality-cta h2 .gold {
  color: #d6a340;
}

.quality-cta p {
  margin-top: 10px;
  color: #d6a340;
  font-size: 18px;
  font-weight: 600;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.quality-cta-btn {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .quality-page .quality-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .quality-hero-shell,
  .quality-material-shell,
  .quality-garansi-shell,
  .quality-stats-grid,
  .quality-flow-list,
  .quality-proof-grid,
  .quality-material-copy ul,
  .quality-garansi-copy ol {
    grid-template-columns: 1fr;
  }

  .quality-stats-grid li + li {
    border-left: 0;
    border-top: 1px solid #d8a748;
    padding-top: 12px;
  }

  .quality-flow-list::before {
    display: none;
  }

  .quality-garansi-flow li:not(:last-child)::after {
    display: none;
  }

  .quality-garansi-note {
    grid-template-columns: 40px 1fr;
    padding: 12px 14px;
    gap: 10px;
  }

  .quality-garansi-note-icon {
    width: 40px;
    height: 40px;
  }

  .quality-garansi-note-icon svg {
    width: 36px;
    height: 36px;
  }

  .quality-garansi-note p {
    font-size: 15px;
  }
}