/* ============================================================
   JSB Services Hub - front-end styles
   Visual language follows the existing site:
   deep navy #081845 / #060F2E - white #ffffff - matte gold
   #C9A84C - light grey #F8F9FB. Fonts: Inter (body) + Plus
   Jakarta Sans (headings). All selectors are prefixed .jsb-svc-
   and never touch home page or theme styles. Desktop + mobile,
   no horizontal overflow (grids use minmax(0,1fr), long words
   wrap, tables collapse to stacked cards below 700px).
   ============================================================ */

.jsb-svc {
	--jsb-blue: #081845;
	--jsb-navy-deep: #060F2E;
	--jsb-gold: #C9A84C;
	--jsb-gold-dark: #b5953d;
	--jsb-bg-light: #F8F9FB;
	--jsb-line: #E5E7EB;
	--jsb-text-muted: #4B5563;
	font-family: 'Inter', sans-serif;
	color: var(--jsb-blue);
	line-height: 1.6;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	box-sizing: border-box;
}

.jsb-svc *,
.jsb-svc *::before,
.jsb-svc *::after { box-sizing: border-box; }

/* Hide the theme's duplicate page title on the 9 OEM/ODM service pages only;
   each page renders its own hero H1. Never applied to other pages/posts. */
body.jsb-services-active .ast-article-single .entry-header { display: none !important; }

/* ----------------------------------------------------------------------------
   Astra layout reset - 9 OEM/ODM service pages ONLY.
   Removes the white gap Astra's article/container padding creates between the
   site nav (#masthead) and the service-page hero, and zeroes the horizontal
   padding so the hero can span the full viewport edge to edge. Every rule is
   scoped under body.jsb-services-active, so home page / menus / products /
   Resources / theme files are untouched.
   ------------------------------------------------------------------------- */
body.jsb-services-active .ast-container { padding: 0; }
body.jsb-services-active .ast-article-single { padding: 0; margin: 0; }
body.jsb-services-active .entry-content { margin: 0; }

/* Real-DOM root causes of the non-full-width hero (measured with Chrome on the
   live site @1560px viewport before this fix):
   1. Astra ships #primary { margin: 4em 0 } -> 60px top gap between the sticky
      #masthead bottom (100px) and the hero top (160px).
   2. The Astra CHILD theme forces
      .entry-content > * { max-width:1240px !important; margin:0 auto
      !important; padding:0 20px !important }, which caps the whole .jsb-svc
      wrapper at 1240px, re-centers it and adds 20px gutters, so the hero only
      spanned 1200px instead of the full viewport.
   Both are neutralized here with !important plus a higher-specificity selector
   scoped under body.jsb-services-active, so other pages are untouched. */
body.jsb-services-active .content-area,
body.jsb-services-active #primary { margin-top: 0 !important; }

body.jsb-services-active .entry-content > .jsb-svc,
body.jsb-services-active .jsb-svc {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------------- Hero ----------------
   Full-viewport-width hero with the factory mixer photograph as background
   (plugin-local asset: assets/images/oem-factory-mixer.jpg, 1434x806) and a
   deep-navy translucent overlay so the white/gold text stays readable.
   Desktop keeps roughly the pre-revamp hero height (overview ~570px, detail
   pages ~500px); mobile keeps a reasonable height with focus on the
   equipment/operator area of the photo. */
.jsb-svc-hero {
	position: relative;
	width: 100%;
	background-color: var(--jsb-navy-deep);
	background-image: url('images/oem-factory-mixer.jpg');
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	color: #ffffff;
	padding: 52px 0 56px;
	border-bottom: 3px solid var(--jsb-gold);
	margin-bottom: 56px;
	min-height: 480px;
}
/* Overview hero keeps its pre-revamp height after the duplicate 8-form
   anchors / "Explore 8 Core Dosage Forms" button were removed from it. */
.jsb-svc-overview .jsb-svc-hero { min-height: 560px; }
/* 1.3.0 - per dosage-form hero backgrounds. The image itself is injected as
   an inline background-image (whitelisted plugin-local asset) by the detail
   renderer; these rules only fine-tune where each photo sits inside the
   cover-cropped hero so the machinery stays centered/readable behind the
   left-aligned text. The overview hero keeps the factory mixer default. */
.jsb-svc-hero--softgel { background-position: center 42%; }
.jsb-svc-hero--capsule { background-position: center 40%; }
.jsb-svc-hero--tablet { background-position: center 42%; }
.jsb-svc-hero--effervescent { background-position: center 42%; }
.jsb-svc-hero--powder { background-position: center 45%; }
.jsb-svc-hero--liquid { background-position: center 40%; }
.jsb-svc-hero--drops { background-position: center 32%; }
.jsb-svc-hero--gummy { background-position: center 38%; }
.jsb-svc-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(105deg, rgba(3, 9, 32, 0.93) 0%, rgba(6, 15, 46, 0.84) 38%, rgba(6, 15, 46, 0.58) 75%, rgba(6, 15, 46, 0.66) 100%);
}
.jsb-svc-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}
/* Full-bleed breakout (9 service pages only): .jsb-svc spans the whole
   viewport because the child theme's 1240px/!important cap is neutralized in
   the "Astra layout reset" block above, so the hero and the bottom CTA banner
   run edge to edge while .jsb-svc-wrap keeps every body section 1240-centered.
   No 100vw/margin arithmetic is needed and html/body already carry
   overflow-x:hidden site-wide, so no horizontal scrollbar is introduced and
   document scrollWidth stays equal to clientWidth. */
.jsb-svc-crumbs {
	font-size: 13px;
	margin: 0 0 26px;
	overflow-wrap: break-word;
}
.jsb-svc-crumbs-hero { color: rgba(255, 255, 255, 0.72); }
.jsb-svc-crumbs-hero a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.jsb-svc-crumbs-hero a:hover { color: var(--jsb-gold); text-decoration: underline; }
.jsb-svc-crumb-sep { margin: 0 8px; color: rgba(255, 255, 255, 0.35); }
.jsb-svc-crumbs-hero .jsb-svc-crumb-current { color: var(--jsb-gold); font-weight: 600; }

.jsb-svc-eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--jsb-gold);
	font-weight: 700;
	margin: 0 0 12px;
}
.jsb-svc-hero-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 16px;
	color: #ffffff;
	overflow-wrap: break-word;
}
.jsb-svc-hero-sub {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.82);
	max-width: 820px;
	margin: 0 0 30px;
	overflow-wrap: break-word;
}

.jsb-svc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-bottom: 34px;
}

/* ---------------- Buttons ---------------- */
.jsb-svc-btn {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 14.5px;
	font-family: 'Inter', sans-serif;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	text-align: center;
}
.jsb-svc-btn-gold { background: var(--jsb-gold); color: var(--jsb-navy-deep); }
.jsb-svc-btn-gold:hover { background: var(--jsb-gold-dark); color: #ffffff; }
.jsb-svc-btn-outline {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.45);
}
.jsb-svc-btn-outline:hover { border-color: var(--jsb-gold); color: var(--jsb-gold); }
.jsb-svc-btn-dark { background: var(--jsb-blue); color: #ffffff; }
.jsb-svc-btn-dark:hover { background: var(--jsb-navy-deep); }

/* ---------------- Hero dosage-form anchors ---------------- */
.jsb-svc-hero-anchors {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.jsb-svc-anchor {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
	min-width: 0;
}
.jsb-svc-anchor:hover { border-color: var(--jsb-gold); color: var(--jsb-gold); background: rgba(255, 255, 255, 0.1); }
.jsb-svc-anchor-num {
	color: var(--jsb-gold);
	font-weight: 800;
	font-size: 12px;
}

/* ---------------- Wrap / sections ---------------- */
.jsb-svc-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px 80px;
}
.jsb-svc-sec { margin-bottom: 72px; }
.jsb-svc-sec-eyebrow {
	font-size: 12px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--jsb-gold);
	font-weight: 700;
	margin: 0 0 10px;
}
.jsb-svc-sec-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--jsb-blue);
	margin: 0 0 12px;
	overflow-wrap: break-word;
}
.jsb-svc-sec-sub {
	font-size: 16px;
	color: var(--jsb-text-muted);
	max-width: 780px;
	margin: 0 0 30px;
	overflow-wrap: break-word;
}

/* ---------------- 8 dosage-form grid (overview) ---------------- */
.jsb-svc-form-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.jsb-svc-form-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #ffffff;
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	padding: 24px 22px;
	text-decoration: none;
	color: var(--jsb-blue);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
	min-width: 0;
}
.jsb-svc-form-card:hover {
	border-color: var(--jsb-gold);
	box-shadow: 0 10px 26px rgba(8, 24, 69, 0.08);
	transform: translateY(-2px);
}
.jsb-svc-form-num {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	color: var(--jsb-gold);
}
.jsb-svc-form-name {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 17px;
	font-weight: 800;
	color: var(--jsb-blue);
	overflow-wrap: break-word;
}
.jsb-svc-form-desc {
	font-size: 13.5px;
	color: var(--jsb-text-muted);
	flex: 1 1 auto;
	overflow-wrap: break-word;
}
.jsb-svc-form-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--jsb-gold-dark);
	margin-top: 4px;
}
.jsb-svc-form-card:hover .jsb-svc-form-link { color: var(--jsb-gold-dark); }
.jsb-svc-form-arrow { font-size: 15px; line-height: 1; }

/* ---------------- Capacity & specification matrix ---------------- */
.jsb-svc-matrix {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}
.jsb-svc-matrix-block {
	background: #ffffff;
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	overflow: hidden;
	min-width: 0;
}
.jsb-svc-matrix-head {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--jsb-blue);
	color: #ffffff;
	padding: 14px 18px;
}
.jsb-svc-matrix-num { color: var(--jsb-gold); font-weight: 800; font-size: 13px; }
.jsb-svc-matrix-name {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.3px;
	overflow-wrap: break-word;
}
.jsb-svc-matrix-row {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 14px;
	padding: 12px 18px;
	border-top: 1px solid #F1F3F7;
}
.jsb-svc-matrix-label {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--jsb-gold-dark);
	padding-top: 2px;
}
.jsb-svc-matrix-value {
	font-size: 13.5px;
	color: var(--jsb-blue);
	overflow-wrap: break-word;
	min-width: 0;
}
.jsb-svc-matrix-row.is-moq { background: #FBFAF3; }
.jsb-svc-matrix-row.is-moq .jsb-svc-matrix-value { font-weight: 700; }

/* ---------------- OEM / ODM models ---------------- */
.jsb-svc-model-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.jsb-svc-model-card {
	background: var(--jsb-bg-light);
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	padding: 30px 28px;
	min-width: 0;
}
.jsb-svc-model-tag {
	display: inline-block;
	background: var(--jsb-blue);
	color: var(--jsb-gold);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	padding: 5px 14px;
	border-radius: 4px;
	margin-bottom: 14px;
}
.jsb-svc-model-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 19px;
	font-weight: 800;
	color: var(--jsb-blue);
	margin: 0 0 10px;
	overflow-wrap: break-word;
}
.jsb-svc-model-desc {
	font-size: 14.5px;
	color: var(--jsb-text-muted);
	margin: 0;
	overflow-wrap: break-word;
}

/* ---------------- Value-added services ---------------- */
.jsb-svc-value-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.jsb-svc-value-card {
	background: #ffffff;
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	padding: 26px 22px;
	min-width: 0;
}
.jsb-svc-value-check {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--jsb-bg-light);
	color: var(--jsb-gold-dark);
	margin-bottom: 14px;
}
.jsb-svc-value-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--jsb-blue);
	margin: 0 0 8px;
	overflow-wrap: break-word;
}
.jsb-svc-value-desc {
	font-size: 13.5px;
	color: var(--jsb-text-muted);
	margin: 0;
	overflow-wrap: break-word;
}

/* ---------------- 28-year facility cards ---------------- */
.jsb-svc-facility-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.jsb-svc-facility-card {
	background: var(--jsb-bg-light);
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.jsb-svc-facility-highlight {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--jsb-gold-dark);
	overflow-wrap: break-word;
}
.jsb-svc-facility-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--jsb-blue);
	margin: 0;
	overflow-wrap: break-word;
}
.jsb-svc-facility-desc {
	font-size: 13.5px;
	color: var(--jsb-text-muted);
	margin: 0;
	overflow-wrap: break-word;
}

/* ---------------- Bottom CTA banner ---------------- */
.jsb-svc-bottom {
	background: linear-gradient(135deg, var(--jsb-navy-deep) 0%, var(--jsb-blue) 100%);
	color: #ffffff;
	padding: 64px 24px;
	border-top: 3px solid var(--jsb-gold);
	width: 100%;
}
.jsb-svc-bottom-inner {
	max-width: 1240px;
	margin: 0 auto;
	text-align: center;
}
.jsb-svc-bottom-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.25;
	color: #ffffff;
	margin: 0 auto 14px;
	max-width: 820px;
	overflow-wrap: break-word;
}
.jsb-svc-bottom-sub {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
	max-width: 680px;
	margin: 0 auto 28px;
	overflow-wrap: break-word;
}
.jsb-svc-bottom-fields {
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.8);
	max-width: 720px;
	margin: 0 auto 28px;
	overflow-wrap: break-word;
}
.jsb-svc-bottom-cta { padding: 15px 36px; font-size: 15px; }

/* ---------------- Detail: metrics ---------------- */
.jsb-svc-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}
.jsb-svc-metric {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: break-word;
}

/* ---------------- Detail: spec table ---------------- */
.jsb-svc-spec-card {
	background: #ffffff;
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	overflow: hidden;
}
.jsb-svc-spec-row {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 20px;
	border-top: 1px solid #F1F3F7;
}
.jsb-svc-spec-row:first-child { border-top: none; }
.jsb-svc-spec-label {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--jsb-gold-dark);
	padding-top: 2px;
}
.jsb-svc-spec-value {
	font-size: 14.5px;
	color: var(--jsb-blue);
	overflow-wrap: break-word;
	min-width: 0;
}

/* ---------------- Detail: QC advantage cards ---------------- */
.jsb-svc-qc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.jsb-svc-qc-card {
	background: var(--jsb-bg-light);
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.jsb-svc-qc-check {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ffffff;
	color: var(--jsb-gold-dark);
	margin-bottom: 8px;
}
.jsb-svc-qc-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--jsb-blue);
	margin: 0;
	overflow-wrap: break-word;
}
.jsb-svc-qc-desc {
	font-size: 13.5px;
	color: var(--jsb-text-muted);
	margin: 0;
	overflow-wrap: break-word;
}

/* ---------------- Detail: formulation text cards ---------------- */
.jsb-svc-form-grid-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jsb-svc-form-card-text {
	background: #ffffff;
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.jsb-svc-form-card-text .jsb-svc-form-name { font-size: 16px; }
.jsb-svc-form-fact { border-top: 1px solid #F1F3F7; padding-top: 10px; }
.jsb-svc-form-fact-label {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--jsb-gold-dark);
	margin-bottom: 4px;
}
.jsb-svc-form-fact-value {
	display: block;
	font-size: 14px;
	color: var(--jsb-blue);
	overflow-wrap: break-word;
}
.jsb-svc-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}
.jsb-svc-form-actions .jsb-svc-btn { padding: 11px 20px; font-size: 13.5px; }

/* ---------------- Detail: packaging cards ---------------- */
.jsb-svc-package-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}
.jsb-svc-package-card {
	background: #ffffff;
	border: 1px solid var(--jsb-line);
	border-radius: 8px;
	padding: 26px 22px;
	min-width: 0;
}
.jsb-svc-package-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--jsb-blue);
	margin: 0 0 8px;
	overflow-wrap: break-word;
}
.jsb-svc-package-desc {
	font-size: 13.5px;
	color: var(--jsb-text-muted);
	margin: 0;
	overflow-wrap: break-word;
}

/* ============================================================
   Responsive: 1024 / 700 / 560 breakpoints
   ============================================================ */
@media (max-width: 1024px) {
	.jsb-svc-hero-anchors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jsb-svc-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jsb-svc-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jsb-svc-facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jsb-svc-matrix { grid-template-columns: 1fr; }
	.jsb-svc-qc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.jsb-svc-hero { padding: 40px 0 44px; margin-bottom: 44px; min-height: 480px; background-position: 28% 38%; }
	/* 1.3.0 - per-form mobile framing (same photos, tighter crop focus). */
	.jsb-svc-hero--softgel { background-position: 32% 42%; }
	.jsb-svc-hero--capsule { background-position: 45% 40%; }
	.jsb-svc-hero--tablet { background-position: 40% 42%; }
	.jsb-svc-hero--effervescent { background-position: 40% 42%; }
	.jsb-svc-hero--powder { background-position: 45% 45%; }
	.jsb-svc-hero--liquid { background-position: 45% 40%; }
	.jsb-svc-hero--drops { background-position: 45% 35%; }
	.jsb-svc-hero--gummy { background-position: 45% 38%; }
	.jsb-svc-overview .jsb-svc-hero { min-height: 520px; }
	.jsb-svc-hero-title { font-size: 30px; }
	.jsb-svc-hero-sub { font-size: 15.5px; }
	.jsb-svc-sec-title { font-size: 26px; }
	.jsb-svc-wrap { padding: 0 16px 56px; }
	.jsb-svc-hero-inner { padding: 0 16px; }

	/* Matrix rows collapse from table to stacked cards. */
	.jsb-svc-matrix-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 14px 18px;
	}
	.jsb-svc-spec-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 14px 18px;
	}
	.jsb-svc-model-grid,
	.jsb-svc-form-grid,
	.jsb-svc-form-grid-detail,
	.jsb-svc-package-grid,
	.jsb-svc-qc-grid,
	.jsb-svc-value-grid,
	.jsb-svc-facility-grid,
	.jsb-svc-hero-anchors { grid-template-columns: 1fr; }
	.jsb-svc-bottom-title { font-size: 25px; }
	.jsb-svc-bottom { padding: 52px 16px; }
}