/* Production page — B2B/B2G manufacturer landing, aligned with the portal design system. */
.production-page {
  --prod-blue: #2b3787;
  --prod-deep: #0e224b;
  --prod-text: #17224b;
  --prod-muted: #667087;
  --prod-orange: #ef7d00;
  --prod-line: #e1e6ef;
  --prod-soft: #f6f8fc;
  color: var(--prod-text);
  background: #fff;
}
.production-page *, .production-page *::before, .production-page *::after { box-sizing: border-box; }
.production-page h2, .production-page h3, .production-page p { margin-top: 0; }
.production-page a { text-decoration: none; }
.production-section { padding: 82px 0; }
.production-kicker {
  margin: 0 0 13px;
  color: var(--prod-orange);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.production-kicker-light { color: rgba(255,255,255,.74); }
.production-page h2 {
  margin: 0;
  color: var(--prod-text);
  font-size: clamp(40px, 3.5vw, 54px);
  line-height: 1.03;
  font-weight: 760;
  letter-spacing: -.036em;
}
.production-page h2 span { color: var(--prod-blue); }
.production-lead { color: #566077; font-size: 17px; line-height: 1.62; }
.production-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--prod-blue);
  font-size: 14px;
  font-weight: 850;
}
.production-text-link span { font-size: 18px; }
.production-text-link:hover { color: #1d2b72; }
.production-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .62fr);
  align-items: end;
  gap: 62px;
  margin-bottom: 34px;
}
.production-heading > p { max-width: 520px; margin: 0; color: var(--prod-muted); font-size: 15px; line-height: 1.62; }

/* Value proposition */
.production-value { background: #fff; }
.production-value-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 68px;
  align-items: center;
}
.production-value-media {
  overflow: hidden;
  border-radius: 18px;
  background: #eef2f7;
}
.production-gallery {
  position: relative;
  min-width: 0;
  box-shadow: 0 18px 48px rgba(26,44,92,.1);
}
.production-gallery-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 390px;
  background: #e8edf4;
  outline: none;
}
.production-gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.production-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
.production-gallery-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
.production-gallery::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(180deg, rgba(11,25,55,0), rgba(11,25,55,.46));
  pointer-events: none;
  z-index: 1;
}
.production-gallery-ui {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  color: #fff;
}
.production-gallery-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 52px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.production-gallery-counter strong { font-size: 15px; font-weight: 850; }
.production-gallery-counter span { color: rgba(255,255,255,.66); }
.production-gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.production-gallery-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  cursor: pointer;
  transition: width .18s ease, background .18s ease;
}
.production-gallery-dot.is-active { width: 24px; background: #fff; }
.production-gallery-nav { display: flex; gap: 7px; }
.production-gallery-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(15,31,67,.28);
  color: #fff;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.production-gallery-button:hover { background: rgba(15,31,67,.62); border-color: rgba(255,255,255,.78); transform: translateY(-1px); }
.production-gallery-button:focus-visible, .production-gallery-dot:focus-visible { outline: 3px solid rgba(239,125,0,.45); outline-offset: 2px; }
.production-gallery-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.production-value-copy { max-width: 650px; }
.production-value-copy > p:not(.production-kicker) { margin: 18px 0 0; color: var(--prod-muted); font-size: 15px; line-height: 1.68; }
.production-value-copy .production-lead { color: #4e5970; font-size: 17px; }
.production-value-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; }

/* Advantages */
.production-advantages { background: var(--prod-soft); }
.production-advantage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.production-advantage-card {
  position: relative;
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--prod-line);
  border-radius: 10px;
  background: #fff;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.production-advantage-card:hover { transform: translateY(-3px); border-color: #c7d2e5; box-shadow: 0 15px 34px rgba(26,44,92,.08); }
.production-advantage-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  pointer-events: none;
}
.production-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: #eef1fb;
  color: var(--prod-blue);
  font-size: 11px;
  font-weight: 850;
}
.production-advantage-card h3 { margin: 74px 0 12px; color: var(--prod-text); font-size: 21px; line-height: 1.2; }
.production-advantage-card p { margin: 0; color: var(--prod-muted); font-size: 13px; line-height: 1.58; }

/* Process */
.production-process {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(64, 98, 177, .16), transparent 31%),
    linear-gradient(180deg, #102652 0%, var(--prod-deep) 100%);
}
.production-process::before,
.production-process::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: .16;
}
.production-process::before {
  left: -130px;
  bottom: -170px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(121,155,224,.38);
  border-radius: 50%;
  box-shadow: inset 0 0 0 44px rgba(121,155,224,.025), inset 0 0 0 86px rgba(121,155,224,.02);
}
.production-process::after {
  right: -80px;
  bottom: -40px;
  width: 540px;
  height: 280px;
  background:
    linear-gradient(130deg, transparent 0 52%, rgba(122,156,228,.26) 52.2% 52.5%, transparent 52.7%),
    linear-gradient(145deg, transparent 0 60%, rgba(122,156,228,.2) 60.2% 60.5%, transparent 60.7%),
    linear-gradient(160deg, transparent 0 68%, rgba(122,156,228,.16) 68.2% 68.5%, transparent 68.7%);
}
.production-heading-light h2 { color: #fff; }
.production-heading-light h2 span { color: #fff; }
.production-heading-light > p { color: rgba(255,255,255,.68); }
.production-process .shell { position: relative; z-index: 1; }
.production-process-timeline {
  position: relative;
  display: grid;
  gap: 30px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 0 10px;
}
.production-process-timeline::before {
  content: "";
  position: absolute;
  top: 76px;
  bottom: 76px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(129,164,235,.15), rgba(129,164,235,.78) 12%, rgba(129,164,235,.78) 88%, rgba(129,164,235,.15));
}
.production-process-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
  align-items: center;
  min-height: 150px;
}
.production-process-step--left .production-process-card { grid-column: 1; }
.production-process-step--right .production-process-card { grid-column: 3; }
.production-process-node {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 4px solid #ecf2ff;
  border-radius: 50%;
  background: #789aea;
  box-shadow: 0 0 0 4px rgba(111,151,236,.14), 0 0 20px rgba(108,150,240,.32);
}
.production-process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -24px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid rgba(132,165,231,.72);
  border-bottom: 2px solid rgba(132,165,231,.72);
}
.production-process-card {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 142px;
  padding: 22px 24px;
  border: 1px solid rgba(132,164,228,.42);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.production-process-step--right .production-process-card {
  grid-template-columns: minmax(0, 1fr) 92px;
}
.production-process-card::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(125,160,232,.8), rgba(125,160,232,.18));
}
.production-process-step--left .production-process-card::before {
  right: -42px;
}
.production-process-step--right .production-process-card::before {
  left: -42px;
  transform: rotate(180deg);
}
.production-process-card:hover {
  transform: translateY(-3px);
  border-color: rgba(153,183,243,.7);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
}
.production-process-card__copy { min-width: 0; }
.production-process-step--left .production-process-card__copy {
  padding-left: 22px;
  border-left: 1px solid rgba(165,187,235,.2);
}
.production-process-step--right .production-process-card__copy {
  padding-right: 22px;
  border-right: 1px solid rgba(165,187,235,.2);
}
.production-process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  margin-bottom: 10px;
  padding: 0 10px;
  border: 1px solid rgba(144,164,214,.36);
  border-radius: 8px;
  background: rgba(144,164,214,.1);
  color: #b8c8ef;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}
.production-process-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}
.production-process-icon {
  display: block;
  object-fit: contain;
  object-position: center;
}
.production-process-step--left .production-process-icon-slot,
.production-process-step--right .production-process-icon-slot {
  padding: 0;
  border: 0;
  background: transparent;
}
.production-process-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 19px;
  line-height: 1.22;
}
.production-process-card p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.55;
}

/* Audiences */
.production-audiences { background: #fff; }
.production-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.production-audience-card {
  min-height: 410px;
  padding: 34px 36px;
  border: 1px solid var(--prod-line);
  border-radius: 10px;
  background: #fff;
}
.production-audience-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 10px 30px;
  border-radius: 999px;
  background: #eef1fb;
  color: var(--prod-blue);
  font-size: 30px;
  font-weight: 850;
  letter-spacing: .08em;
}
.production-audience-card h3 { margin: 30px 0 12px; color: var(--prod-text); font-size: 28px; line-height: 1.12; }
.production-audience-card > p { max-width: 600px; margin: 0; color: var(--prod-muted); font-size: 14px; line-height: 1.62; }
.production-audience-card ul { display: grid; gap: 11px; margin: 28px 0 30px; padding: 0; list-style: none; }
.production-audience-card li { position: relative; padding-left: 28px; color: #4e5970; font-size: 13px; line-height: 1.5; }
.production-audience-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--prod-blue); font-weight: 900; }

/* Documents */
.production-documents { background: var(--prod-soft); }
.production-documents-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  min-height: 590px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--prod-blue);
  color: #fff;
}
.production-documents-copy { padding: 54px; }
.production-documents-copy h2 { max-width: 720px; color: #fff; }
.production-documents-copy h2 span { color: #fff; }
.production-documents-copy > p:not(.production-kicker) { max-width: 680px; margin: 18px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.62; }
.production-document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 34px; }
.production-document-card {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: #fff;
  transition: background .18s ease, border-color .18s ease;
}
.production-document-card:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.1); color: #fff; }
.production-document-card small { color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.production-document-card strong { margin-top: 26px; color: #fff; font-size: 17px; line-height: 1.2; }
.production-document-card span { margin-top: 9px; color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.5; }
.production-document-card b { margin-top: auto; padding-top: 20px; font-size: 11px; }
.production-documents-media { position: relative; min-height: 590px; overflow: hidden; background: #dce5f3; }
.production-documents-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 23%;
  background: linear-gradient(90deg, var(--prod-blue) 0%, rgba(43,55,135,.82) 36%, rgba(43,55,135,0) 100%);
}
.production-documents-media img { width: 100%; height: 100%; min-height: 590px; object-fit: cover; }

/* Service */
.production-service {
  padding: 72px 0;
  background: var(--prod-soft);
}
.production-service-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
  min-height: 650px;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}
.production-service-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 48px 46px 42px;
}
.production-service-copy h2 {
  max-width: 560px;
  font-size: clamp(38px, 3vw, 52px);
  line-height: 1.04;
}
.production-service-copy h2 span { display: block; }
.production-service-copy > .production-lead {
  max-width: 570px;
  margin: 18px 0 0;
  color: #6e778e;
  font-size: 15px;
  line-height: 1.62;
}
.production-service-points {
  display: grid;
  grid-template-columns: 1fr;
  margin: 42px 0 34px;
  border-top: 1px solid #e7ebf2;
}
.production-service-points > a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 12px 6px 12px 4px;
  border-bottom: 1px solid #e7ebf2;
  color: inherit;
  transition: background .18s ease, padding .18s ease;
}
.production-service-points > a:hover {
  padding-left: 10px;
  background: #fafbfe;
}
.production-service-points b {
  color: #8793ad;
  font-size: 13px;
  font-weight: 800;
}
.production-service-points > a > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.production-service-points strong {
  color: #1b2136;
  font-size: 16px;
  line-height: 1.2;
}
.production-service-points small {
  margin-top: 3px;
  color: #9aa4bb;
  font-size: 12px;
  line-height: 1.32;
}
.production-service-points i {
  color: #b5bfd2;
  font-size: 20px;
  font-style: normal;
}
.production-service-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: fit-content;
  min-width: 270px;
  min-height: 58px;
  margin-top: auto;
  padding: 8px 12px 8px 24px;
  border-radius: 12px;
  background: #34439b;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease;
}
.production-service-button:hover {
  transform: translateY(-1px);
  background: #29388f;
  color: #fff;
}
.production-service-button span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--prod-orange);
  color: #fff;
  font-size: 16px;
}
.production-service-media {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border-left: 1px dashed #c8ced9;
  background: #edf0f5;
}
.production-service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13,22,52,.02), rgba(13,22,52,.07));
}
.production-service-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 650px;
  object-fit: cover;
  object-position: center;
}
.production-service-media-label {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 15px;
  border-radius: 9px;
  background: #151a31;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .015em;
}

/* Final CTA */
.production-final { padding: 10px 0 82px; background: #fff; }
.production-final-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  min-height: 220px;
  padding: 44px 52px;
  border-radius: 10px;
  background: var(--prod-deep);
  color: #fff;
}
.production-final-panel h2 { max-width: 800px; color: #fff; font-size: clamp(34px, 3.2vw, 48px); }
.production-final-panel > div:first-child > p:not(.production-kicker) { max-width: 780px; margin: 14px 0 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.58; }
.production-final-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.production-final-actions .b2b-button { white-space: nowrap; }

@media (max-width: 1180px) {
  .production-value-grid { gap: 42px; }
  .production-advantage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-process-timeline { max-width: 960px; }
  .production-process-step { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
  .production-documents-panel { grid-template-columns: 1fr; }
  .production-documents-media { min-height: 360px; }
  .production-documents-media::before { width: 100%; height: 24%; inset: 0 0 auto; background: linear-gradient(180deg, var(--prod-blue) 0%, rgba(43,55,135,0) 100%); }
}

@media (max-width: 900px) {
  .production-section { padding: 64px 0; }
  .production-heading { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .production-value-grid { grid-template-columns: 1fr; }
  .production-service-panel { grid-template-columns: 1fr; }
  .production-service-copy { padding: 44px 38px 40px; }
  .production-service-media { min-height: 420px; border-left: 0; border-top: 1px dashed #c8ced9; }
  .production-gallery-viewport { min-height: 390px; }
  .production-service-media img { min-height: 420px; }
  .production-audience-grid { grid-template-columns: 1fr; }
  .production-document-grid { grid-template-columns: 1fr; }
  .production-document-card { min-height: 180px; }
  .production-final-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .production-section { padding: 54px 0; }
  .production-page h2 { font-size: clamp(32px, 9vw, 42px); }
  .production-gallery-viewport { min-height: 300px; }
  .production-service-panel { border-radius: 18px; }
  .production-service-copy { padding: 34px 24px 30px; }
  .production-service-copy h2 { font-size: clamp(32px, 9vw, 42px); }
  .production-service-points { margin-top: 30px; }
  .production-service-points > a { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; min-height: 68px; }
  .production-service-button { width: 100%; min-width: 0; }
  .production-service-media, .production-service-media img { min-height: 320px; }
  .production-advantage-grid { grid-template-columns: 1fr; }
  .production-gallery-ui { left: 12px; right: 12px; bottom: 12px; gap: 10px; }
  .production-gallery-dots { gap: 5px; }
  .production-gallery-dot { width: 6px; height: 6px; }
  .production-gallery-dot.is-active { width: 18px; }
  .production-gallery-button { width: 34px; height: 34px; }
  .production-advantage-card { min-height: 250px; padding: 24px; }
  .production-advantage-card h3 { margin-top: 50px; }
  .production-process-timeline { gap: 18px; padding-left: 30px; }
  .production-process-timeline::before { left: 9px; top: 58px; bottom: 58px; }
  .production-process-step { display: block; min-height: 0; }
  .production-process-step--left .production-process-card, .production-process-step--right .production-process-card { grid-column: auto; }
  .production-process-node { left: 9px; }
  .production-process-step:not(:last-child)::after { left: 9px; bottom: -16px; }
  .production-process-card, .production-process-step--right .production-process-card { grid-template-columns: 64px minmax(0, 1fr); min-height: 0; padding: 20px; }
  .production-process-step--right .production-process-icon-slot { order: -1; }
  .production-process-step--left .production-process-card__copy, .production-process-step--right .production-process-card__copy { padding-left: 0; padding-right: 0; border-left: 0; border-right: 0; }
  .production-process-card::before, .production-process-step--right .production-process-card::before { left: -22px; right: auto; width: 22px; transform: none; }
  .production-process-icon-slot { width: 56px; height: 56px; }
  .production-process-card h3 { font-size: 18px; }
  .production-audience-card { min-height: 0; padding: 28px 24px; }
  .production-documents-copy { padding: 34px 24px; }
  .production-documents-media { min-height: 280px; }
  .production-final { padding-bottom: 54px; }
  .production-final-panel { min-height: 0; padding: 34px 24px; }
  .production-final-actions { width: 100%; flex-direction: column; }
  .production-final-actions .b2b-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .production-page *, .production-page *::before, .production-page *::after { transition: none !important; }
  .production-gallery-track { transition: none !important; }
}