/**
 * JS CONSULTING service page ("service") — structural styles.
 * Enqueued only on is_page('service') (see functions.php), mirroring how
 * contact-page.css / profile-page.css / privacy-policy-page.css are each
 * scoped to their own page. Independent of those files: no class names are
 * shared with them, so editing this file can never affect Contact, Profile,
 * Privacy Policy, or TOP.
 *
 * Colors/fonts all come from tokens.css custom properties; no new hex values
 * are introduced here (existing --jsc-navy / --jsc-gold etc. only). Visual
 * language (eyebrow, section-head, gold accents, thin dividers, pill tags,
 * timeline dots) is intentionally consistent with TOP/Contact/Profile, but
 * this page carries more information per section than TOP, so density is
 * handled with generous whitespace and typographic hierarchy rather than
 * extra ornament — no new card/box styles beyond what the existing pages
 * already establish.
 */

.jsc-section-inner {
	max-width: var(--jsc-maxw);
	margin: 0 auto;
	padding: 0 24px;
}
/* ISSUES / SERVICE AREAS / OUR APPROACH read as three/five-column layouts,
   so a noticeably wider content area lets each column breathe (short
   headings stay on one line, body copy wraps less densely) without
   touching the shared --jsc-maxw the rest of the site (and this page's own
   HERO / PUBLIC SUPPORT / FIRST STEP / CONTACT, which stay centered and
   narrower) relies on. Scoped by section id, not a shared class, so it can
   never leak.
   1150px is a ceiling, not the achieved width: this page's <main> sits
   inside Lightning's own Bootstrap-style ".container" (max-width 1140px,
   15px side padding = 1110px of actual content room), so in practice these
   sections currently render at ~1110px regardless of this value — verified
   by walking the real ancestor chain in a browser, not assumed. 1150px is
   set intentionally above that so the true limiter stays the site's own
   layout container, not this rule, should that container ever widen. */
#svc-issues .jsc-section-inner,
#svc-areas .jsc-section-inner,
#svc-approach .jsc-section-inner {
	max-width: 1150px;
}
.jsc-section-head {
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
}
.jsc-section-head .jsc-eyebrow { justify-content: center; }
.jsc-section-head h2 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.55;
	color: var(--jsc-navy);
	margin: 0;
}
.jsc-section-lead {
	margin-top: 18px;
	color: var(--jsc-text-muted);
	font-size: 15.5px;
	line-height: 1.9;
}

/* Mobile-only manual line break. Hidden by default so it has zero effect on
   PC; shown only inside the 760px mobile query below. Named for this page
   only (not reusing .jsc-mobile-br / .jsc-pf-mobile-br etc.) since this page
   never loads Contact/Profile/Privacy's CSS and so would get no display rule
   for a shared class name — same convention already used across the site. */
.jsc-svc-mobile-br {
	display: none;
}

/* ================= 01 HERO ================= */
.jsc-svc-hero {
	background: var(--jsc-navy-deep);
	padding: 96px 0 92px;
	text-align: center;
}
.jsc-svc-hero-inner {
	max-width: 720px;
	margin: 0 auto;
}
.jsc-svc-hero .jsc-eyebrow {
	justify-content: center;
	color: var(--jsc-gold-light);
	margin-bottom: 24px;
}
.jsc-svc-hero .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-svc-hero-heading {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.55;
	letter-spacing: .01em;
	color: var(--jsc-white);
	margin: 0 0 26px;
}
.jsc-svc-hero-lead {
	font-family: var(--jsc-font-body);
	font-size: 16px;
	line-height: 1.95;
	color: rgba(255,255,255,.85);
	margin: 0;
}

/* ================= 02 ISSUES ================= */
.jsc-svc-issues-track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--jsc-gold);
}
.jsc-svc-issue-col {
	padding: 32px 30px;
	border-left: 1px solid var(--jsc-gray-line);
}
.jsc-svc-issue-col:first-child { border-left: none; }
.jsc-svc-issue-col h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--jsc-navy);
	margin: 0 0 18px;
}
.jsc-svc-issue-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jsc-svc-issue-col li {
	position: relative;
	padding: 9px 0 9px 18px;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--jsc-text-body);
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-svc-issue-col li:first-child { border-top: none; }
.jsc-svc-issue-col li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--jsc-gold);
}
.jsc-svc-issues-final {
	max-width: 640px;
	margin: 56px auto 0;
	text-align: center;
	padding-top: 40px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-svc-issues-final p {
	font-family: var(--jsc-font-heading);
	font-size: 17px;
	line-height: 1.95;
	color: var(--jsc-navy);
	font-weight: 700;
	margin: 0;
}

/* ================= 03 SERVICE AREAS ================= */
/* v2: the three areas previously read as separate product cards (each with
   its own gold top border and a different tinted background) rather than
   three connected parts of one support system. A single top accent spans
   the whole track (same device as #svc-issues's own border-top) and every
   area now shares one flat white surface, so the divider that still tells
   01/02/03 apart is the arrow and a lighter shared border only. */
.jsc-svc-areas-track {
	display: grid;
	grid-template-columns: 1fr 24px 1fr 24px 1fr;
	align-items: stretch;
	gap: 0 16px;
	border-top: 1px solid var(--jsc-gold);
	padding-top: 36px;
}
.jsc-svc-area {
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	padding: 32px 26px;
	display: flex;
	flex-direction: column;
}
.jsc-svc-area-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jsc-gold);
	font-size: 20px;
}
/* v3 (information-density pass): the five parts of each card — number,
   area name, headline, body, emphasis note, support-theme tags — are now
   spaced in unequal steps on purpose, so the card reads as distinct
   grouped chunks (a small "meta" pair, then headline+body as one block,
   then the emphasis note standing apart, then the tag list behind its own
   divider) rather than one continuous run of small text. Font sizes and
   line-heights are unchanged from before — only these margins moved. */
.jsc-svc-area-num {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-gold);
	letter-spacing: .08em;
	margin: 0 0 8px;
}
.jsc-svc-area-name {
	font-family: var(--jsc-font-body);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jsc-text-muted);
	margin: 0 0 20px;
}
.jsc-svc-area h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 21px;
	color: var(--jsc-navy);
	margin: 0 0 16px;
}
/* Excludes the three named siblings explicitly (rather than :not([class]))
   because WordPress's block renderer adds its own "wp-block-paragraph"
   class to every paragraph block, including this one — so the plain body
   paragraph is not actually classless at render time. .jsc-svc-area-num /
   -name / -note are <p> siblings in the same group with their own class,
   and a bare "> p" selector was also matching them, overriding their own
   font-size/color/margin via cascade order. */
.jsc-svc-area > p:not(.jsc-svc-area-num):not(.jsc-svc-area-name):not(.jsc-svc-area-note) {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--jsc-text-body);
	margin: 0 0 22px;
}
.jsc-svc-area-note {
	margin: 0 0 26px;
	padding: 2px 0 2px 16px;
	border-left: 2px solid var(--jsc-gold);
	font-family: var(--jsc-font-heading);
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--jsc-navy);
}
.jsc-svc-area-tags {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-svc-area-tags-label {
	font-family: var(--jsc-font-label);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--jsc-text-muted);
	margin: 0 0 10px;
}
.jsc-svc-area-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jsc-svc-area-tags-list li {
	font-size: 12px;
	color: var(--jsc-navy);
	background: var(--jsc-white);
	padding: 5px 12px;
	border: 1px solid var(--jsc-gray-line);
	border-radius: 20px;
}
/* Entry point CTA into a SERVICE AREAS card's own detail page — added to
   card 01 (/service/5s-kaizen/) only for now, since it's the only detail
   page that exists yet. Deliberately a generic .jsc-svc-area-cta component
   (not a "5s"-specific class) so the same markup/CSS can be reused as-is
   on cards 02/03 once 人材・組織 / 経営改善 get their own detail pages —
   no CSS changes will be needed then, only the HTML block per card.
   v2 (simplified per feedback — the first version was an oversized
   "explainer card" with its own title/description/more-link; this is a
   plain single-line button instead, sized like a normal CTA button rather
   than a content block). Colors are the literal hex the brief specified
   for this button (not the site's --jsc-navy/--jsc-gold tokens, which are
   a slightly different shade used for subtler text/border accents
   elsewhere) since a CTA button is meant to read as a distinctly brighter,
   more clickable accent than body-level gold/navy usage. */
/* Wrapper for one-or-more .jsc-svc-area-cta buttons on a single card (card
   02 gets its first CTA here; a second is planned — 人材育成・スキルマップ
   構築支援 — once that page exists). The wrapper itself carries the same
   18px gap up to the tags list that card 01's un-wrapped CTA gets from its
   own margin-top, so a single-CTA card looks identical to card 01; a `gap`
   between CTAs handles the spacing once a second <a> is added — nothing
   else here will need to change then. */
.jsc-svc-area-ctas {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}
.jsc-svc-area-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 18px 0 0;
	padding: 13px 20px;
	background: #E6AF00;
	border-radius: var(--jsc-radius);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	color: #203864;
	transition: filter .18s ease;
}
/* Inside the multi-CTA wrapper, the flex `gap` already spaces additional
   buttons apart, so only the first one should carry the 18px gap up to the
   tags list above it. */
.jsc-svc-area-ctas .jsc-svc-area-cta {
	margin: 0;
}
.jsc-svc-area-cta:hover,
.jsc-svc-area-cta:focus-visible {
	filter: brightness(.94);
}
.jsc-svc-area-cta-arrow {
	display: inline-block;
	transition: transform .18s ease;
}
.jsc-svc-area-cta:hover .jsc-svc-area-cta-arrow,
.jsc-svc-area-cta:focus-visible .jsc-svc-area-cta-arrow {
	transform: translateX(3px);
}
/* ================= 04 OUR APPROACH ================= */
.jsc-svc-approach-track {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 32px;
	position: relative;
}
.jsc-svc-approach-track::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 8%;
	right: 8%;
	height: 1px;
	background: var(--jsc-gray-line);
}
.jsc-svc-approach-item { position: relative; }
.jsc-svc-approach-num {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--jsc-white);
	border: 1.5px solid var(--jsc-gold);
	color: var(--jsc-gold);
	font-family: var(--jsc-font-label);
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 22px;
}
.jsc-svc-approach-item h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--jsc-navy);
	margin: 0 0 10px;
}
/* Excludes .jsc-svc-approach-num explicitly: it is also a <p> in the same
   group, and a bare descendant "p" selector was matching it too, overriding
   its own font-size/color (same root cause fixed for SERVICE AREAS /
   PUBLIC SUPPORT / CONTACT — the circled step numbers were rendering in
   the body-text color instead of gold). */
.jsc-svc-approach-item p:not(.jsc-svc-approach-num) {
	font-size: 14px;
	line-height: 1.85;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-svc-approach-final {
	text-align: center;
	max-width: 560px;
	margin: 64px auto 0;
	padding-top: 36px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-svc-approach-final p {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.8;
	color: var(--jsc-navy);
	margin: 0;
}

/* ================= 05 PUBLIC SUPPORT ================= */
/* A convergence diagram, not a 4th card: three plain pill labels for the
   existing SERVICE AREAS (repeated here only as labels, not new content)
   each drop a short stem into one shared horizontal line, which in turn
   drops a single stem into the callout below — visually "public support
   underpins all three areas" rather than sitting beside them as a peer. */
.jsc-svc-support-diagram {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 56px;
	max-width: 620px;
	margin: 0 auto;
	padding-bottom: 40px;
}
.jsc-svc-support-tag {
	position: relative;
	margin: 0;
	font-family: var(--jsc-font-label);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--jsc-navy);
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: 20px;
	padding: 8px 18px;
}
.jsc-svc-support-tag::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: 20px;
	background: var(--jsc-gray-line);
}
.jsc-svc-support-diagram::before {
	content: "";
	position: absolute;
	left: 16.6%;
	right: 16.6%;
	bottom: 20px;
	height: 1px;
	background: var(--jsc-gray-line);
}
.jsc-svc-support-diagram::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 20px;
	background: var(--jsc-gray-line);
}
.jsc-svc-support-body {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}
/* Excludes .jsc-svc-support-note explicitly (rather than :not([class]))
   because WordPress's block renderer adds its own "wp-block-paragraph"
   class to every paragraph block, including this one — so the intro
   paragraph is not actually classless at render time. .jsc-svc-support-note
   is a sibling <p> in the same group with its own class, and a bare "> p"
   selector was also matching it, overriding its own font-size/color/
   line-height via cascade order. */
.jsc-svc-support-body > p:not(.jsc-svc-support-note) {
	font-size: 15px;
	line-height: 1.9;
	color: var(--jsc-text-body);
	margin: 0 0 28px;
}
.jsc-svc-support-note {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.8;
	color: var(--jsc-navy);
	padding-top: 24px;
	border-top: 1px solid var(--jsc-gray-line);
}

/* ================= 06 FIRST STEP ================= */
.jsc-svc-first-step-inner {
	max-width: 720px;
	margin: 0 auto;
}
.jsc-svc-consult-label {
	font-family: var(--jsc-font-label);
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jsc-text-muted);
	margin: 0 0 16px;
}
.jsc-svc-consult-list {
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 14px;
}
.jsc-svc-consult-list li {
	font-size: 14.5px;
	color: var(--jsc-navy);
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: 20px;
	padding: 10px 20px;
}
.jsc-svc-first-step-note {
	margin: 0 0 24px;
	padding: 2px 0 2px 20px;
	border-left: 2px solid var(--jsc-gold);
}
.jsc-svc-first-step-note p {
	font-family: var(--jsc-font-heading);
	font-size: 16px;
	line-height: 1.9;
	color: var(--jsc-navy);
	margin: 0;
}
.jsc-svc-first-step-body {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-svc-first-step-closing {
	max-width: 560px;
	margin: 48px auto 0;
	text-align: center;
	padding-top: 36px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-svc-first-step-closing p {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.8;
	color: var(--jsc-navy);
	margin: 0;
}

/* ================= 07 CONTACT ================= */
/* Not reused from front-top.css's .jsc-cta: that class is only enqueued on
   is_front_page(), so it would produce no styling at all on this page.
   Visual result is intentionally the same treatment as TOP's #contact. */
.jsc-svc-contact {
	background: var(--jsc-navy);
	color: var(--jsc-white);
	text-align: center;
	padding: 92px 0 108px;
}
.jsc-svc-contact .jsc-eyebrow { justify-content: center; color: var(--jsc-gold-light); }
.jsc-svc-contact .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-svc-contact h2 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	color: var(--jsc-white);
	font-size: 30px;
	line-height: 1.6;
	margin: 0 0 20px;
}
/* Excludes .jsc-eyebrow explicitly (rather than :not([class])) because
   WordPress's block renderer adds its own "wp-block-paragraph" class to
   every paragraph block, including this one — so the body paragraph is not
   actually classless at render time. .jsc-eyebrow is a sibling <p> in the
   same section with its own class, and a bare "> p" selector was also
   matching it, overriding its own font-size/margin-bottom via cascade order. */
.jsc-svc-contact > p:not(.jsc-eyebrow) {
	font-size: 15.5px;
	line-height: 1.95;
	color: rgba(255,255,255,.8);
	max-width: 560px;
	margin: 0 auto 36px;
}

/* ---------- Responsive: tablet ---------- */
/* 1199px (not 980px): Lightning's own layout container is Bootstrap-based
   and drops from max-width:1140px to max-width:960px at the same 1200px
   viewport breakpoint Bootstrap itself uses. Between roughly 992px and
   1199px viewport width, the container is already only ~960px, so keeping
   these two grids in their wide desktop form down to 980px left a real
   width tier (992-1199px, e.g. 1024px) where they kept the same column
   counts as 1440px inside a visibly narrower container — verified
   in-browser: SERVICE AREAS cards fell to 288px and OUR APPROACH steps to
   170px. Widening this query to 1199px means both simplify to their
   compact form as soon as the site's own container itself narrows, not
   only once the viewport is "tablet" sized. */
@media (max-width: 1199px) {
	.jsc-svc-areas-track { grid-template-columns: 1fr; gap: 18px; }
	.jsc-svc-area-arrow { display: none; }
	.jsc-svc-approach-track { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
	.jsc-svc-approach-track::before { display: none; }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 760px) {
	.jsc-svc-mobile-br { display: inline; }
	.jsc-section-inner { padding: 0 16px; }
	.jsc-section-head { margin-bottom: 28px; }
	.jsc-section-head h2 { font-size: 24px; }

	/* ---------- HERO ---------- */
	.jsc-svc-hero { padding: 44px 0 40px; }
	.jsc-svc-hero .jsc-eyebrow { margin-bottom: 14px; }
	.jsc-svc-hero-heading { font-size: 26px; line-height: 1.5; margin-bottom: 18px; }
	.jsc-svc-hero-lead { font-size: 14px; line-height: 1.8; }

	/* ---------- ISSUES: stack, dividers become top borders ---------- */
	.jsc-svc-issues-track { grid-template-columns: 1fr; border-top: none; }
	.jsc-svc-issue-col {
		padding: 22px 4px;
		border-left: none;
		border-top: 1px solid var(--jsc-gray-line);
	}
	.jsc-svc-issue-col:first-child { border-top: 1px solid var(--jsc-gold); }
	.jsc-svc-issues-final { margin-top: 36px; padding-top: 28px; }
	.jsc-svc-issues-final p { font-size: 15.5px; }

	/* ---------- SERVICE AREAS ---------- */
	.jsc-svc-area { padding: 26px 22px; }
	.jsc-svc-area h3 { font-size: 19px; }

	/* ---------- OUR APPROACH ---------- */
	.jsc-svc-approach-track { grid-template-columns: 1fr; gap: 0; }
	.jsc-svc-approach-item {
		border-left: 2px solid var(--jsc-gray-line);
		padding: 0 0 26px 22px;
		margin-left: 12px;
	}
	.jsc-svc-approach-item:last-child { padding-bottom: 0; }
	.jsc-svc-approach-num { width: 34px; height: 34px; font-size: 13px; margin: 0 0 0 -29px; background: var(--jsc-white); position: relative; }
	.jsc-svc-approach-item h3 { margin-top: 14px; }
	.jsc-svc-approach-final { margin-top: 36px; padding-top: 28px; font-size: 17px; }

	/* ---------- PUBLIC SUPPORT ---------- */
	.jsc-svc-support-diagram { gap: 20px; padding-bottom: 32px; }
	.jsc-svc-support-tag { font-size: 11.5px; padding: 7px 12px; }
	.jsc-svc-support-diagram::before { bottom: 16px; left: 8%; right: 8%; }
	.jsc-svc-support-tag::after { height: 16px; }
	.jsc-svc-support-diagram::after { height: 16px; }
	.jsc-svc-support-note { font-size: 16.5px; }

	/* ---------- FIRST STEP ---------- */
	.jsc-svc-consult-list { gap: 10px; margin-bottom: 28px; }
	.jsc-svc-consult-list li { font-size: 13.5px; padding: 9px 16px; }
	.jsc-svc-first-step-note p { font-size: 15px; }
	.jsc-svc-first-step-closing { margin-top: 36px; padding-top: 28px; }
	.jsc-svc-first-step-closing p { font-size: 17px; }

	/* ---------- CONTACT ---------- */
	.jsc-svc-contact { padding: 52px 20px; }
	.jsc-svc-contact h2 { font-size: 23px; }
}

/* Real-device feedback: "改善する力を、会社に残す。" (OUR APPROACH heading)
   was wrapping to two lines on phones even though it already renders as one
   line on PC. Scoped nowrap, not a font-size cut and not page-wide: only
   this one heading, and only across the width band it actually measures as
   fitting (375-760px at this section's 24px mobile heading size). Excludes
   320px on purpose — at that width the phrase no longer fits, and forcing
   nowrap there would create horizontal overflow instead of just re-wrapping,
   which the two-line fallback already handles safely. */
@media (min-width: 375px) and (max-width: 760px) {
	#svc-approach .jsc-section-head h2 { white-space: nowrap; }
}

/* Real-device feedback: "会社に必要な取り組みに、制度を活用する" (the second
   line of PUBLIC SUPPORT's closing note, after the always-on <br> following
   "制度ありきではなく、") was wrapping to a third line on phones, leaving a
   lone "る" — the exact one-character orphan the site's line-break rules
   exist to avoid. It measures as fitting from 375px up at this element's
   16.5px mobile font-size; nowrap is scoped to just this second-line span
   (not the whole note) and to that width band only, so 320px still falls
   back to natural wrapping instead of being forced into overflow. */
@media (min-width: 375px) and (max-width: 760px) {
	.jsc-svc-support-note-line2 { white-space: nowrap; }
}