/**
 * JS CONSULTING about page ("about") — structural styles.
 * Enqueued only on is_page('about') (see functions.php), mirroring how
 * contact-page.css / profile-page.css / privacy-policy-page.css / service-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, Service, or TOP.
 *
 * Colors/fonts all come from tokens.css custom properties; no new hex values
 * are introduced here. This page is a "read the philosophy" page rather than
 * an information-dense one (unlike Service), so density is kept low on
 * purpose: generous whitespace, few boxed/card elements, and diagrams built
 * from plain text + thin connecting lines rather than bordered card grids.
 *
 * Every top-level block sits directly inside .jsc-section-inner (a plain,
 * hand-written wrapper div — not itself a rendered Group block), which never
 * receives WordPress's automatic "is-layout-flow" child spacing the way real
 * Group blocks do (confirmed in-browser while building the TOP SERVICE CTA
 * spacing earlier). Rather than fight that per element, every visual gap
 * between top-level blocks here comes from an explicit margin-bottom on the
 * earlier block (never margin-top on the later one) — the same convention
 * already used throughout front-top.css / service-page.css / profile-page.css.
 */

.jsc-section-inner {
	max-width: var(--jsc-maxw);
	margin: 0 auto;
	padding: 0 24px;
}
.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;
}

/* 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 / .jsc-svc-mobile-br)
   since this page never loads those pages' CSS and so would get no display
   rule for a shared class name — same convention already used site-wide. */
.jsc-ab-mobile-br {
	display: none;
}

/* Shared "closing statement" treatment used at the end of BELIEF,
   PERSPECTIVE, MISSION and STYLE — a short bold line set off by a thin top
   rule, reused instead of inventing four different emphasis styles. */
.jsc-ab-belief-closing,
.jsc-ab-perspective-closing,
.jsc-ab-mission-closing,
.jsc-ab-style-closing {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding-top: 40px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-ab-belief-closing p,
.jsc-ab-perspective-closing p,
.jsc-ab-style-closing p {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.9;
	color: var(--jsc-navy);
	margin: 0;
}
/* OUR MISSION's closing ("現場から、会社を強くする。") is the single
   strongest line on the page per spec — sized up from the shared style
   above rather than introducing a second shared class for one instance. */
.jsc-ab-mission-closing p {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 25px;
	line-height: 1.8;
	color: var(--jsc-navy);
	margin: 0;
}

/* Shared small pill-tag look, reused for BELIEF's five keywords and
   PROMISE's four entry points (deliberately not reusing SERVICE's own
   .jsc-svc-area-tags-list class — this page never loads service-page.css). */
.jsc-ab-belief-tags,
.jsc-ab-promise-entries {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.jsc-ab-belief-tags li,
.jsc-ab-promise-entries li {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-navy);
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: 20px;
	padding: 8px 18px;
}
/* Shared "tags converge into one result" motif for BELIEF and PROMISE — a
   small downward arrow rendered as generated content so no extra markup is
   needed, then a single bold result line. */
.jsc-ab-belief-result,
.jsc-ab-promise-result {
	position: relative;
	padding-top: 34px;
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--jsc-navy);
	margin: 0;
}
.jsc-ab-belief-result::before,
.jsc-ab-promise-result::before {
	content: "↓";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	color: var(--jsc-gold);
	font-size: 20px;
	line-height: 1;
}

/* ================= 00 HERO ================= */
.jsc-ab-hero {
	background: var(--jsc-white);
	padding: 100px 0 104px;
}
/* Every other section on this page renders its .jsc-section-inner as the
   direct parent of a real nested Group block, which WordPress tags with
   "is-layout-flow wp-block-group-is-layout-flow" at render time — and
   Lightning's own theme CSS ("div[class*='wp-block-'] { max-width:
   calc(...) }", confirmed in-browser) then caps THOSE at ~1110px, matching
   #main's own content width. HERO's .jsc-section-inner instead wraps a
   plain .jsc-ab-hero-grid div before reaching any real block, so it never
   picks up those classes and would otherwise sit at the base 1180px token
   ceiling — visibly wider than every section below it. Pinned to the same
   1110px explicitly here (ID-scoped to safely win specificity) so HERO
   matches the rest of the page instead of relying on that render quirk. */
#ab-hero .jsc-section-inner {
	max-width: 1110px;
}
.jsc-ab-hero-grid {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 64px;
	align-items: center;
}
.jsc-ab-hero-copy .jsc-eyebrow { margin-bottom: 20px; }
.jsc-ab-hero-heading {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 38px;
	line-height: 1.55;
	color: var(--jsc-navy);
	margin: 0 0 28px;
}
.jsc-ab-hero-lead {
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--jsc-text-body);
	margin: 0 0 18px;
}
.jsc-ab-hero-lead:last-child { margin-bottom: 0; }

/* Purely decorative, aria-hidden graphic: three abstract bars narrowing
   toward the top (経営 narrowest → 現場 widest), connected by a single thin
   vertical line. Represents "the problem surfaces widest at the field level
   and narrows into a management view" without any photo, icon, or 3D
   treatment — colors are navy / navy-tint / gold only, per spec. Not a
   duplicate of the OUR PERSPECTIVE diagram below: that one is a horizontal
   three-column diagram with keyword tags; this is a vertical, textless-
   feeling silhouette used only as HERO background interest. */
.jsc-ab-hero-graphic {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 0;
}
.jsc-ab-hero-tier {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--jsc-radius);
	padding: 16px 0;
}
.jsc-ab-hero-tier-label {
	font-family: var(--jsc-font-label);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .1em;
}
.jsc-ab-hero-tier-management {
	width: 150px;
	background: var(--jsc-navy-deep);
}
.jsc-ab-hero-tier-management .jsc-ab-hero-tier-label { color: var(--jsc-white); }
.jsc-ab-hero-tier-org {
	width: 195px;
	background: var(--jsc-navy-tint);
	border: 1px solid var(--jsc-gray-line);
}
.jsc-ab-hero-tier-org .jsc-ab-hero-tier-label { color: var(--jsc-navy); }
.jsc-ab-hero-tier-field {
	width: 240px;
	background: var(--jsc-white);
	border: 1.5px solid var(--jsc-gold);
}
.jsc-ab-hero-tier-field .jsc-ab-hero-tier-label { color: var(--jsc-navy); }
.jsc-ab-hero-link {
	width: 1px;
	height: 26px;
	background: var(--jsc-gray-line);
}

/* ================= 01 OUR BELIEF ================= */
.jsc-ab-belief-body {
	max-width: 680px;
	margin: 0 auto 56px;
}
.jsc-ab-belief-body p {
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--jsc-text-body);
	margin: 0 0 22px;
}
.jsc-ab-belief-body p:last-child { margin-bottom: 0; }
.jsc-ab-belief-diagram {
	max-width: 680px;
	margin: 0 auto 56px;
	text-align: center;
}

/* ================= 02 OUR PERSPECTIVE ================= */
.jsc-ab-perspective-body {
	max-width: 680px;
	margin: 0 auto 64px;
}
.jsc-ab-perspective-body p {
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--jsc-text-body);
	margin: 0 0 22px;
}
.jsc-ab-perspective-body p:last-child { margin-bottom: 0; }

/* The page's central visual: three plain (borderless, cardless) columns —
   現場 / 人・組織 / 経営 — joined by bidirectional arrows, so it reads as one
   connected system rather than three separate offerings (deliberately not
   the bordered-card look SERVICE AREAS uses on the Service page, and not the
   same three items either: these are the lens JS CONSULTING views a company
   through, not a menu of support areas). */
.jsc-ab-diagram {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: start;
	gap: 0 20px;
	max-width: 1000px;
	margin: 0 auto 56px;
	padding-top: 36px;
	border-top: 1px solid var(--jsc-gold);
}
.jsc-ab-diagram-col { text-align: center; }
.jsc-ab-diagram-name {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--jsc-navy);
	margin: 0 0 16px;
}
.jsc-ab-diagram-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jsc-ab-diagram-tags li {
	font-size: 12.5px;
	color: var(--jsc-text-muted);
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: 16px;
	padding: 6px 14px;
}
/* v2: a bare "⇄" glyph alone read as a one-way arrow at a glance (per
   review feedback) rather than a connection between two columns. Short
   gold line segments now extend from the glyph toward each neighboring
   column, so the whole unit reads as "column ——⇄—— column" instead of a
   small isolated character — still not a bold/heavy arrow, just a
   slightly stronger version of the same thin-line visual language used
   throughout this page. Positioned via align-self/margin-top (not
   height:100%) so it lines up with the column name row specifically,
   the clearest place for a "these connect" cue. Rotating this whole box
   90° (see the 1199px query below) rotates the two line segments to
   vertical along with the glyph, so the same markup and rule also serves
   the stacked layout without any separate treatment. */
.jsc-ab-diagram-arrow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	margin-top: 8px;
	min-width: 32px;
	height: 24px;
	color: var(--jsc-gold);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.jsc-ab-diagram-arrow::before,
.jsc-ab-diagram-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 2px;
	background: var(--jsc-gold);
	transform: translateY(-50%);
}
.jsc-ab-diagram-arrow::before { left: -14px; }
.jsc-ab-diagram-arrow::after { right: -14px; }

/* ================= 03 OUR MISSION ================= */
.jsc-ab-mission-body {
	max-width: 680px;
	margin: 0 auto 56px;
}
.jsc-ab-mission-body p {
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--jsc-text-body);
	margin: 0 0 22px;
}
.jsc-ab-mission-body p:last-child { margin-bottom: 0; }

/* A short vertical chain (5 steps), read top-to-bottom like a simple flow —
   not a full flowchart/slide diagram, per spec ("Webページとして上品に
   簡略化"). */
.jsc-ab-mission-flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 420px;
	margin: 0 auto 56px;
}
.jsc-ab-mission-step {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: var(--jsc-navy);
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	padding: 14px 24px;
	margin: 0;
}
.jsc-ab-mission-step.is-tags {
	font-family: var(--jsc-font-label);
	font-weight: 600;
	font-size: 13px;
	color: var(--jsc-text-muted);
	background: none;
	border: none;
	padding: 0;
}
.jsc-ab-mission-step.is-final {
	background: var(--jsc-navy);
	border-color: var(--jsc-navy);
	color: var(--jsc-white);
	font-size: 17px;
}
.jsc-ab-mission-arrow {
	color: var(--jsc-gold);
	font-size: 17px;
	line-height: 1;
	margin: 0;
}

/* v2: PC left this five-step chain running the full vertical height of the
   section, unused by the ~1110px content width available. From 900px up,
   the same nine elements (unchanged markup, unchanged mobile behaviour
   below this width) are repositioned into a grid: "5S・生産性・教育・仕組み"
   and its arrow stay a small vertical lead-in above 改善 only (column 1),
   then 改善→人が育つ→組織が変わる→会社が強くなる run left-to-right as one
   horizontal chain. Targeted by nth-child (source order is fixed — tags,
   arrow, step, arrow, step, arrow, step, arrow, final-step) rather than
   adding new classes, so the vertical mobile/tablet version below needs no
   markup of its own either. The three "chain" arrows swap their rendered
   glyph from ↓ to → via ::after (the real "↓" text is hidden via
   font-size:0 rather than removed, so nothing here depends on JS or a
   duplicated DOM). */
@media (min-width: 900px) {
	.jsc-ab-mission-flow {
		display: grid;
		grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
		grid-template-areas:
			"tags   .      .    .      .      .      .     "
			"arrow1 .      .    .      .      .      .     "
			"improve arrow2 grow arrow3 orgchg arrow4 strong";
		align-items: center;
		column-gap: 10px;
		row-gap: 10px;
		max-width: 1000px;
	}
	.jsc-ab-mission-flow > :nth-child(1) { grid-area: tags; text-align: center; }
	.jsc-ab-mission-flow > :nth-child(2) { grid-area: arrow1; justify-self: center; }
	.jsc-ab-mission-flow > :nth-child(3) { grid-area: improve; }
	.jsc-ab-mission-flow > :nth-child(4) { grid-area: arrow2; }
	.jsc-ab-mission-flow > :nth-child(5) { grid-area: grow; }
	.jsc-ab-mission-flow > :nth-child(6) { grid-area: arrow3; }
	.jsc-ab-mission-flow > :nth-child(7) { grid-area: orgchg; }
	.jsc-ab-mission-flow > :nth-child(8) { grid-area: arrow4; }
	.jsc-ab-mission-flow > :nth-child(9) { grid-area: strong; }
	.jsc-ab-mission-flow > :nth-child(4),
	.jsc-ab-mission-flow > :nth-child(6),
	.jsc-ab-mission-flow > :nth-child(8) {
		font-size: 0;
		text-align: center;
	}
	.jsc-ab-mission-flow > :nth-child(4)::after,
	.jsc-ab-mission-flow > :nth-child(6)::after,
	.jsc-ab-mission-flow > :nth-child(8)::after {
		content: "→";
		font-size: 18px;
		color: var(--jsc-gold);
	}
}

/* ================= 04 OUR STYLE ================= */
.jsc-ab-style-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 64px;
	align-items: start;
	max-width: 1000px;
	margin: 0 auto 56px;
}
.jsc-ab-style-body p {
	font-size: 15px;
	line-height: 1.95;
	color: var(--jsc-text-body);
	margin: 0 0 20px;
}
.jsc-ab-style-body p:last-child { margin-bottom: 0; }
.jsc-ab-style-chain {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.jsc-ab-style-node {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-navy);
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: 20px;
	padding: 11px 18px;
	margin: 0;
}
.jsc-ab-style-node.is-shared {
	background: var(--jsc-gold);
	border-color: var(--jsc-gold);
	color: var(--jsc-navy-deep);
	font-weight: 800;
}
.jsc-ab-style-node.is-final {
	background: var(--jsc-navy);
	border-color: var(--jsc-navy);
	color: var(--jsc-white);
}
.jsc-ab-style-arrow {
	color: var(--jsc-gold);
	font-size: 15px;
	line-height: 1;
	margin: 0;
}

/* ================= 05 OUR STRENGTH ================= */
/* Reuses the existing representative photo asset (wp-image-37) already used
   on TOP and PROFILE — no new image is introduced. */
.jsc-ab-strength-grid {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
}
.jsc-ab-strength-photo {
	margin: 0;
	border-radius: var(--jsc-radius);
	overflow: hidden;
	box-shadow: var(--jsc-shadow);
}
.jsc-ab-strength-photo img {
	display: block;
	width: 100%;
	height: auto;
}
.jsc-ab-strength-body p {
	font-size: 15px;
	line-height: 1.95;
	color: var(--jsc-text-body);
	margin: 0 0 20px;
}
.jsc-ab-strength-body p:last-child { margin-bottom: 0; }
.jsc-ab-strength-body p a {
	color: var(--jsc-navy);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--jsc-gold);
	padding-bottom: 2px;
}
.jsc-ab-strength-body p a:hover { color: var(--jsc-gold); }

/* ================= 06 OUR PROMISE ================= */
.jsc-ab-promise-body {
	max-width: 680px;
	margin: 0 auto 56px;
}
.jsc-ab-promise-body p {
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--jsc-text-body);
	margin: 0 0 22px;
}
.jsc-ab-promise-body p:last-child { margin-bottom: 0; }
.jsc-ab-promise-diagram {
	max-width: 680px;
	margin: 0 auto 48px;
	text-align: center;
}
/* The page's final, most important line ("入口は小さくても、見るのは会社
   全体。") — deliberately the single largest piece of text on the page. */
.jsc-ab-promise-closing {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 27px;
	line-height: 1.8;
	color: var(--jsc-navy);
}
#ab-promise .wp-block-buttons { margin: 0; }

/* ================= 07 CONTACT ================= */
/* Not reused from front-top.css's .jsc-cta or service-page.css's
   .jsc-svc-contact (neither is enqueued on this page) — same navy CONTACT
   treatment as TOP/Service, built fresh under this page's own class so this
   file stays fully independent. No jsc-section-inner wrapper here (same
   choice SERVICE's own CONTACT makes), so these children are the actual
   direct children of the rendered Group block. */
.jsc-ab-contact {
	background: var(--jsc-navy);
	color: var(--jsc-white);
	text-align: center;
	padding: 92px 0 108px;
}
.jsc-ab-contact .jsc-eyebrow { justify-content: center; color: var(--jsc-gold-light); }
.jsc-ab-contact .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-ab-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 (same fix already applied on Service's
   own CONTACT section). */
.jsc-ab-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 (1024 / 820) ---------- */
/* 1199px, not 980px: Lightning's own Bootstrap-based layout container drops
   from max-width:1140px to max-width:960px at the same 1200px viewport
   breakpoint Bootstrap itself uses, so anything still using a wide desktop
   column count between 992-1199px viewport width would sit inside a
   visibly narrower container than its own layout assumes (verified on the
   Service page build). Widening this query to 1199px keeps that mismatch
   from recurring here. */
@media (max-width: 1199px) {
	.jsc-ab-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.jsc-ab-hero-graphic { order: -1; }
	.jsc-ab-diagram { grid-template-columns: 1fr; gap: 28px; max-width: 420px; }
	.jsc-ab-diagram-arrow { align-self: center; margin-top: 0; transform: rotate(90deg); }
	.jsc-ab-style-grid { grid-template-columns: 1fr; gap: 40px; }
	.jsc-ab-style-chain { max-width: 420px; margin: 0 auto; }
	.jsc-ab-strength-grid { grid-template-columns: 1fr; gap: 32px; }
	.jsc-ab-strength-photo { max-width: 320px; margin: 0 auto; }
}

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

	/* ---------- HERO ---------- */
	/* Text leads on phones (spec: "スマホでは文章を主役にし"), so the
	   tablet breakpoint's order:-1 (graphic first) is reset back to
	   natural source order — copy, then a smaller graphic below it. */
	.jsc-ab-hero { padding: 48px 0 44px; }
	.jsc-ab-hero-grid { gap: 28px; }
	.jsc-ab-hero-heading { font-size: 26px; line-height: 1.5; margin-bottom: 18px; }
	.jsc-ab-hero-lead { font-size: 14px; line-height: 1.85; }
	.jsc-ab-hero-graphic { order: 0; transform: scale(.7); margin: -18px 0; }
	/* Real-device feedback: on phones the H1 should read as two lines —
	   "現場から入り、組織を変え、" / "経営を強くする。" — not three. The PC
	   break after "入り、" (a plain, unconditional <br>) stays for desktop;
	   this class exists only to hide that one break on mobile, leaving the
	   existing mobile-only break after "変え、" (.jsc-ab-mobile-br, unchanged)
	   as the sole line split. */
	.jsc-ab-hero-pc-br { display: none; }

	/* ---------- Shared closings ---------- */
	.jsc-ab-belief-closing p,
	.jsc-ab-perspective-closing p,
	.jsc-ab-style-closing p { font-size: 17px; }
	.jsc-ab-mission-closing p { font-size: 20px; }

	/* ---------- BELIEF / PROMISE tags ---------- */
	.jsc-ab-belief-tags li,
	.jsc-ab-promise-entries li { font-size: 12px; padding: 7px 14px; }

	/* ---------- PERSPECTIVE diagram ---------- */
	.jsc-ab-diagram { margin-bottom: 36px; padding-top: 28px; }
	.jsc-ab-diagram-name { font-size: 17px; }

	/* ---------- MISSION flow ---------- */
	.jsc-ab-mission-step { font-size: 15px; padding: 12px 20px; }
	.jsc-ab-mission-step.is-final { font-size: 16px; }

	/* ---------- STYLE chain ---------- */
	.jsc-ab-style-node { font-size: 12.5px; padding: 10px 16px; }

	/* ---------- STRENGTH ---------- */
	.jsc-ab-strength-photo { max-width: 220px; }

	/* ---------- PROMISE closing ---------- */
	.jsc-ab-promise-closing { font-size: 21px; }

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