/**
 * JS CONSULTING top page — v2 structural styles.
 * Enqueued only on is_front_page(). Header/nav/footer chrome is intentionally
 * left to Lightning's own header, global-nav / footer-nav / vk-mobile-nav
 * menu locations, and footer widget areas (see functions.php).
 *
 * v2 goals vs v1: web-like rhythm instead of a slide-deck of boxes —
 * generous whitespace, alternating section treatment, editorial (not
 * grid-of-cards) composition for the narrative sections, and readable
 * type sizes throughout (v1's process step copy in particular was too small).
 */

.jsc-section-inner {
	max-width: var(--jsc-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

/* Mobile-only manual line break, same convention already used on Contact
   (.jsc-mobile-br) and Profile (.jsc-pf-mobile-br): hidden by default so it
   has zero effect on PC, shown only inside the 760px mobile query below.
   Scoped to this file (front-top.css, TOP page only) with its own class name
   rather than reusing those pages' classes, since TOP never loads their CSS
   and so would get no display:none/inline rule for a shared name. */
.jsc-top-mobile-br {
	display: none;
}

/* ---------- Section head ---------- */
.jsc-section-head {
	max-width: 660px;
	margin: 0 auto 64px;
	text-align: center;
}
.jsc-section-head.is-left {
	margin: 0 0 56px;
	text-align: left;
}
.jsc-section-head .jsc-eyebrow { justify-content: center; }
.jsc-section-head.is-left .jsc-eyebrow { justify-content: flex-start; }
.jsc-section-head h2 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 34px;
	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;
}
.jsc-section-head.is-left .jsc-section-lead { max-width: 56ch; }
/* CASE STUDY lead only: the shared 56ch cap above wraps this specific
   sentence to 2 lines even at desktop widths. Widening it to fit on one
   line here only (PC breakpoint only) leaves every other .is-left lead
   (e.g. SERVICES) and all mobile widths — where the real viewport width is
   already narrower than 56ch regardless — completely unaffected. */
@media (min-width: 761px) {
	#case .jsc-section-lead {
		max-width: none;
	}
}

/* ---------- Hero ---------- */
.jsc-hero {
	position: relative;
	min-height: 500px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--jsc-navy-deep);
}
.jsc-hero-bg {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.jsc-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.jsc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(19,35,64,.94) 0%, rgba(19,35,64,.82) 32%, rgba(19,35,64,.42) 58%, rgba(19,35,64,.12) 78%);
}
.jsc-hero-content {
	position: relative;
	z-index: 2;
	max-width: 620px;
	padding: 52px 24px;
	margin-left: max(24px, calc((100% - var(--jsc-maxw)) / 2 + 24px));
}
.jsc-hero-content .jsc-eyebrow { color: var(--jsc-gold-light); }
.jsc-hero-content .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-hero-heading {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	font-size: 46px;
	line-height: 1.48;
	letter-spacing: .01em;
	color: var(--jsc-white);
	margin: 0 0 26px;
}
.jsc-hero-lead {
	font-family: var(--jsc-font-body);
	font-size: 16.5px;
	line-height: 1.95;
	color: rgba(255,255,255,.88);
	margin: 0 0 36px;
	max-width: 480px;
}
.jsc-hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.jsc-hero-actions .wp-block-button.jsc-btn-outline .wp-block-button__link {
	color: var(--jsc-white);
	border-color: rgba(255,255,255,.6);
}
.jsc-hero-actions .wp-block-button.jsc-btn-outline .wp-block-button__link:hover {
	background: var(--jsc-white);
	color: var(--jsc-navy);
	border-color: var(--jsc-white);
}

/* ---------- Concern (お悩み) ---------- */
.jsc-concern-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.jsc-concern-card {
	background: var(--jsc-white);
	border-top: 2px solid var(--jsc-gold);
	box-shadow: var(--jsc-shadow);
	border-radius: var(--jsc-radius);
	padding: 34px 30px;
	transition: box-shadow .25s ease, transform .25s ease;
}
.jsc-concern-card:hover {
	box-shadow: var(--jsc-shadow-hover);
	transform: translateY(-2px);
}
.jsc-concern-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--jsc-gray-line);
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-gold);
	margin-bottom: 18px;
}
.jsc-concern-card h3 {
	font-family: var(--jsc-font-body);
	font-size: 17.5px;
	line-height: 1.6;
	margin: 0 0 12px;
	color: var(--jsc-navy);
}
.jsc-concern-card p {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--jsc-text-muted);
	margin: 0;
}

/* ---------- Problem structure (diagram) ---------- */
.jsc-essence {
	background: var(--jsc-navy-deep);
	color: var(--jsc-white);
	padding: 120px 0;
}
.jsc-essence .jsc-eyebrow { color: var(--jsc-gold-light); }
.jsc-essence .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-essence .jsc-section-head h2 { color: var(--jsc-white); }
.jsc-essence .jsc-section-lead { color: rgba(255,255,255,.7); }

.jsc-diagram {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	padding-left: 34px;
}
.jsc-diagram::before {
	/* Depth cue: the line strengthens as it descends, so the eye reads
	   "going deeper" from layer 1 to layer 3 without any extra boxes
	   or arrows. */
	content: "";
	position: absolute;
	left: 7px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: linear-gradient(rgba(212,160,23,.22), rgba(212,160,23,.9));
}
.jsc-diagram-node {
	position: relative;
	padding-bottom: 40px;
}
.jsc-diagram-node::before {
	content: "";
	position: absolute;
	left: -34px;
	top: 6px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--jsc-navy-deep);
	border: 2px solid var(--jsc-gold-light);
}
/* Each layer's marker grows slightly larger and more solid than the last,
   reinforcing that deeper layers carry more weight. */
.jsc-diagram-node:nth-of-type(1)::before {
	width: 12px;
	height: 12px;
	background: var(--jsc-navy-deep);
	border-width: 1.5px;
	opacity: .75;
}
.jsc-diagram-node:nth-of-type(2)::before {
	width: 16px;
	height: 16px;
	left: -36px;
	top: 4px;
	background: rgba(212,160,23,.35);
}
.jsc-diagram-node:nth-of-type(3)::before {
	width: 20px;
	height: 20px;
	left: -38px;
	top: 2px;
	background: var(--jsc-gold-light);
	box-shadow: 0 0 0 5px rgba(212,160,23,.14);
}
.jsc-diagram-node:nth-of-type(2) h3 { font-size: 22px; }
.jsc-diagram-node:nth-of-type(3) h3 { font-size: 23px; }
.jsc-diagram-tag {
	display: inline-block;
	font-family: var(--jsc-font-label);
	font-size: 11.5px;
	letter-spacing: .1em;
	color: rgba(255,255,255,.55);
	margin-bottom: 8px;
}
.jsc-diagram-node h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 21px;
	color: var(--jsc-white);
	margin: 0 0 16px;
}
.jsc-diagram-items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jsc-diagram-items li {
	font-size: 12.5px;
	color: rgba(255,255,255,.82);
	padding: 6px 14px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 20px;
}
.jsc-diagram-question {
	margin: 0 0 36px;
	padding-left: 2px;
	font-family: var(--jsc-font-heading);
	font-style: normal;
	font-size: 15px;
	color: var(--jsc-gold-light);
}
.jsc-diagram-final {
	max-width: 660px;
	margin: 56px auto 0;
	text-align: center;
	padding-top: 48px;
	border-top: 1px solid rgba(255,255,255,.16);
}
.jsc-diagram-final p {
	font-size: 16.5px;
	line-height: 2.05;
	color: rgba(255,255,255,.92);
	margin: 0;
}
.jsc-diagram-final strong { color: var(--jsc-gold-light); }

/* ---------- Support process ---------- */
.jsc-process-lead {
	text-align: center;
	max-width: 560px;
	margin: -24px auto 20px;
}
.jsc-process-lead .headline {
	display: block;
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--jsc-navy);
	margin-bottom: 10px;
}
.jsc-process-lead p {
	font-size: 14.5px;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-process-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	max-width: 1180px;
	margin: 56px auto 0;
	align-items: stretch;
}
.jsc-process-card {
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	padding: 28px 20px;
	display: flex;
	flex-direction: column;
}
.jsc-process-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--jsc-navy);
	color: var(--jsc-navy);
	font-family: var(--jsc-font-label);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 18px;
}
.jsc-process-card h3 {
	font-family: var(--jsc-font-body);
	font-size: 17px;
	font-weight: 700;
	color: var(--jsc-navy);
	margin: 0 0 8px;
}
.jsc-process-subtitle {
	display: block;
	font-size: 13px;
	color: var(--jsc-gold);
	font-weight: 600;
	margin-bottom: 12px;
}
.jsc-process-card p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-process-card.is-final {
	background: var(--jsc-navy);
	border-color: var(--jsc-navy);
}
.jsc-process-card.is-final .jsc-process-num {
	border-color: var(--jsc-gold-light);
	color: var(--jsc-gold-light);
}
.jsc-process-card.is-final h3,
.jsc-process-card.is-final .jsc-process-subtitle { color: var(--jsc-white); }
.jsc-process-card.is-final p { color: rgba(255,255,255,.78); }

/* ---------- Services (3 pillars) ---------- */
.jsc-pillar-track {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: stretch;
	gap: 0 18px;
	max-width: 1180px;
	margin: 0 auto;
}
.jsc-pillar {
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	padding: 36px 30px;
}
.jsc-pillar-track > .jsc-pillar:nth-child(3) { background: var(--jsc-cream); }
.jsc-pillar-track > .jsc-pillar:nth-child(5) { background: var(--jsc-navy-tint); }
.jsc-pillar-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jsc-gold);
	font-size: 20px;
}
.jsc-pillar-num {
	font-family: var(--jsc-font-label);
	font-size: 13px;
	font-weight: 700;
	color: var(--jsc-gold);
	letter-spacing: .08em;
	display: block;
	margin-bottom: 10px;
}
.jsc-pillar h3 {
	font-family: var(--jsc-font-body);
	font-size: 20px;
	font-weight: 700;
	color: var(--jsc-navy);
	margin: 0 0 6px;
}
.jsc-pillar-subtitle {
	display: block;
	font-size: 13.5px;
	color: var(--jsc-text-muted);
	margin-bottom: 22px;
}
.jsc-pillar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jsc-pillar li {
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--jsc-text-body);
	padding: 7px 0 7px 18px;
	position: relative;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-pillar li:first-child { border-top: none; }
.jsc-pillar li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	width: 6px;
	height: 1px;
	background: var(--jsc-gold);
}
/* Entry point into the standalone SERVICE page. Two layers fight the
   spacing here, confirmed in-browser: (1) .jsc-section-inner is a plain
   wrapper (not a rendered Group block), so it never gets the Global
   Styles "is-layout-flow" 24px child spacing the way blocks do; (2)
   Lightning's own parent-theme CSS separately ships
   "body .container .is-layout-flow > * + * { margin-block-start: unset }"
   (specificity 0,2,1), which would still cancel a plain
   ".jsc-service-cta" margin (0,1,0) even if that gap existed. Scoping
   through the section's own existing "#service" id (already used this way
   elsewhere in this file) reaches (1,1,0) and wins outright — without
   !important. A quiet secondary action (.jsc-btn-outline, not the gold
   CONTACT-style CTA), so the margin stays modest rather than matching the
   larger final-statement spacing used elsewhere on this page. */
#service .jsc-service-cta {
	margin-top: 48px;
}

/* ---------- Our approach ---------- */
.jsc-approach-track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}
.jsc-approach-track::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 12%;
	right: 12%;
	height: 1px;
	background: var(--jsc-gray-line);
}
.jsc-approach-item { position: relative; }
.jsc-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-bottom: 22px;
}
.jsc-approach-item h3 {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--jsc-navy);
	margin: 0 0 10px;
}
.jsc-approach-item p {
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--jsc-text-muted);
	margin: 0;
}
.jsc-approach-final {
	text-align: center;
	max-width: 560px;
	margin: 64px auto 0;
	padding-top: 36px;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-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;
}

/* ---------- Case study ---------- */
.jsc-case-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}
.jsc-case-card {
	background: var(--jsc-white);
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	box-shadow: var(--jsc-shadow);
	padding: 36px 32px;
}
.jsc-case-tag {
	display: inline-block;
	font-family: var(--jsc-font-label);
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--jsc-navy);
	background: var(--jsc-navy-tint);
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
}
.jsc-case-card h3 {
	font-family: var(--jsc-font-body);
	font-size: 19px;
	font-weight: 700;
	color: var(--jsc-navy);
	margin: 0 0 22px;
	line-height: 1.6;
}
.jsc-case-block {
	padding: 14px 0;
	border-top: 1px solid var(--jsc-gray-line);
}
.jsc-case-block .label {
	display: block;
	font-family: var(--jsc-font-label);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--jsc-text-muted);
	margin-bottom: 6px;
}
.jsc-case-block p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--jsc-text-body);
	margin: 0;
}
.jsc-case-result p {
	/* Hardcoded (not --jsc-gold) on purpose: this is the one spot that
	   needed a darker gold for WCAG AA contrast (~5.0:1 on white vs the
	   brand gold's ~3.25:1); --jsc-gold itself and every other gold
	   accent on the site are unaffected. */
	color: #8C6A0B;
	font-weight: 700;
	font-size: 15px;
}

/* ---------- Message / profile ---------- */
.jsc-profile {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 56px;
	align-items: start;
	max-width: 1000px;
	margin: 0 0 64px;
}
/* Placeholder state (no photo yet): centered caption in a soft box. */
.jsc-profile-photo.is-placeholder {
	position: relative;
	aspect-ratio: 3 / 4;
	background: linear-gradient(160deg, var(--jsc-navy-tint), var(--jsc-white));
	border: 1px solid var(--jsc-gray-line);
	border-radius: var(--jsc-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jsc-text-muted);
	font-size: 13px;
	text-align: center;
	line-height: 1.8;
	padding: 20px;
}
/* Photo state: a real portrait, framed but not distorted or over-cropped. */
figure.jsc-profile-photo {
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--jsc-radius);
	box-shadow: var(--jsc-shadow);
}
figure.jsc-profile-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}
.jsc-profile-name {
	font-family: var(--jsc-font-heading);
	font-weight: 700;
	font-size: 24px;
	color: var(--jsc-navy);
	margin: 0 0 4px;
}
.jsc-profile-name-en {
	display: block;
	font-family: var(--jsc-font-label);
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--jsc-text-muted);
	margin: 0 0 6px;
}
.jsc-profile-role {
	font-size: 13.5px;
	color: var(--jsc-gold);
	letter-spacing: .04em;
	display: block;
	margin-bottom: 18px;
}
.jsc-profile-quals {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.jsc-profile-quals li {
	font-size: 13.5px;
	color: var(--jsc-text-body);
	padding: 4px 0;
}
.jsc-profile-bio p {
	font-size: 15px;
	line-height: 2;
	color: var(--jsc-text-body);
	margin: 0 0 20px;
}
/* Compact achievement band (replaces the earlier 4-card grid): typography
   and spacing carry it, no card chrome, so it reads as a footnote-like
   credential strip rather than a second set of feature cards. */
.jsc-track-band {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 0 0 48px;
	border-top: 1px solid var(--jsc-gray-line);
	border-bottom: 1px solid var(--jsc-gray-line);
	padding: 26px 0;
}
.jsc-track-item {
	flex: 1 1 0;
	padding: 0 22px;
	border-left: 1px solid var(--jsc-gray-line);
	text-align: center;
}
.jsc-track-item:first-child { border-left: none; }
.jsc-track-item h4 {
	font-family: var(--jsc-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--jsc-navy);
	margin: 0;
}
.jsc-track-item p {
	font-size: 12px;
	line-height: 1.7;
	color: var(--jsc-text-muted);
	margin: 0;
}
/* Typography-led, not a box: a thin gold rule carries the message instead
   of a filled card, so it reads as a personal statement rather than a
   slide. */
.jsc-values {
	max-width: 620px;
	margin: 48px 0 8px;
	padding: 2px 0 2px 28px;
	background: transparent;
	border-left: 2px solid var(--jsc-gold);
}
.jsc-values p {
	font-family: var(--jsc-font-heading);
	font-size: 17px;
	line-height: 2.15;
	color: var(--jsc-navy);
	margin: 0;
}

/* ---------- Column / insights ---------- */
.jsc-column-notice {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding: 56px 24px;
	border-top: 1px solid var(--jsc-gray-line);
	border-bottom: 1px solid var(--jsc-gray-line);
}
.jsc-column-notice p {
	font-size: 14.5px;
	color: var(--jsc-text-muted);
	margin: 0;
	line-height: 1.9;
}

/* ---------- CTA ---------- */
.jsc-cta {
	background: var(--jsc-navy);
	color: var(--jsc-white);
	text-align: center;
	padding: 108px 0;
}
.jsc-cta .jsc-eyebrow { justify-content: center; color: var(--jsc-gold-light); }
.jsc-cta .jsc-eyebrow::before { background: var(--jsc-gold-light); }
.jsc-cta h2 {
	font-family: var(--jsc-font-heading);
	font-weight: 800;
	color: var(--jsc-white);
	font-size: 32px;
	line-height: 1.6;
	margin: 0 0 20px;
}
.jsc-cta p {
	font-size: 15.5px;
	line-height: 1.95;
	color: rgba(255,255,255,.8);
	max-width: 560px;
	margin: 0 auto 36px;
}
.jsc-cta-note {
	margin-top: 22px;
	font-size: 13px;
	color: rgba(255,255,255,.55);
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 980px) {
	.jsc-concern-grid { grid-template-columns: repeat(2, 1fr); }
	.jsc-process-grid { grid-template-columns: repeat(3, 1fr); }
	.jsc-pillar-track { grid-template-columns: 1fr; gap: 18px; }
	.jsc-pillar-arrow { display: none; }
	.jsc-approach-track { gap: 28px; }
	.jsc-case-grid { grid-template-columns: 1fr; }
	.jsc-profile { grid-template-columns: 2fr 3fr; gap: 36px; }
	.jsc-track-band { flex-direction: column; }
	.jsc-track-item { border-left: none; border-top: 1px solid var(--jsc-gray-line); padding: 16px 4px; }
	.jsc-track-item:first-child { border-top: none; }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 760px) {
	.jsc-top-mobile-br { display: inline; }

	.jsc-hero { min-height: 460px; }
	.jsc-hero::after { background: linear-gradient(180deg, rgba(19,35,64,.55) 0%, rgba(19,35,64,.92) 55%, rgba(19,35,64,.96) 100%); }
	.jsc-hero-content { margin-left: 0; padding: 0 20px 48px; max-width: 100%; align-self: flex-end; }
	.jsc-hero-heading { font-size: 30px; }
	.jsc-hero-lead { font-size: 14.5px; }

	.jsc-section-head h2 { font-size: 25px; }
	.jsc-section-head.is-left { text-align: center; }
	.jsc-section-head.is-left .jsc-eyebrow { justify-content: center; }

	.jsc-concern-grid { grid-template-columns: 1fr; }

	.jsc-diagram { padding-left: 28px; }
	.jsc-diagram-node::before { left: -28px; }
	.jsc-diagram-node h3 { font-size: 18px; }

	.jsc-process-grid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
	.jsc-process-card {
		/* Fix: v5 set flex-direction:row here, which put the number,
		   heading, subtitle and paragraph into four separate flex
		   columns and wrapped their text one character per line. The
		   card's children should simply stack top-to-bottom (the base,
		   non-mobile flex-direction:column already does this); only the
		   timeline rail/number position needs mobile-specific styling. */
		border: none;
		border-left: 2px solid var(--jsc-gray-line);
		border-radius: 0;
		padding: 0 0 22px 22px;
		margin-left: 12px;
		position: relative;
	}
	.jsc-process-card.is-final { background: transparent; border-left-color: var(--jsc-gold); }
	.jsc-process-card.is-final h3,
	.jsc-process-card.is-final .jsc-process-subtitle { color: var(--jsc-navy); }
	.jsc-process-card.is-final p { color: var(--jsc-text-muted); }
	.jsc-process-num { margin: 0 0 0 -33px; flex: none; background: var(--jsc-cream); }

	.jsc-pillar { padding: 28px 24px; }

	.jsc-approach-track { grid-template-columns: 1fr; gap: 36px; }
	.jsc-approach-track::before { display: none; }

	.jsc-profile { grid-template-columns: 1fr; }
	figure.jsc-profile-photo { max-width: 260px; margin: 0 auto 8px; }
	.jsc-profile-photo.is-placeholder { max-width: 220px; margin: 0 auto; }

	.jsc-cta h2 { font-size: 24px; }

	/* ---------- v7: further mobile vertical-rhythm pass ----------
	   v6 already cut section padding once; this cuts the same properties
	   again (not the same rules layered — the v6 values are replaced
	   outright) so section-to-section transitions and each section's own
	   internal rhythm read as "next section", not "empty screen, then
	   next section". Section vertical padding is inline style from the
	   editor's spacing controls, hence !important, scoped per-section by
	   id. PROBLEM STRUCTURE (#problem / .jsc-essence) deliberately gets a
	   much smaller cut than the rest, and only on its own outer padding —
	   nothing inside it (timeline, dots, tags, copy, color) changes. */
	/* v8: HERO/CONCERN/SERVICES/CASE STUDY are fixed as-is — v7's values
	   for #concern/#service/#case stay exactly as they were. Only
	   #process, #message, #column, #contact, and PROBLEM STRUCTURE get a
	   further pass this round. */
	#concern, #service, #case, #approach {
		padding-top: 52px !important;
		padding-bottom: 52px !important;
	}
	#process, #message {
		padding-top: 45px !important;
		padding-bottom: 45px !important;
	}
	#column {
		padding-top: 26px !important;
		padding-bottom: 26px !important;
	}
	/* This box's own 56px padding (unrelated to the section padding
	   above) was the main remaining source of empty space under the
	   description while there are no article cards yet. */
	.jsc-column-notice { padding: 26px 20px; }
	/* PROBLEM STRUCTURE: a smaller, ~14% cut on the section's own outer
	   padding only. Its section-head (title -> lead) and diagram get
	   their own modest reductions below — timeline, dots, tags, colors,
	   and overall structure are untouched. */
	.jsc-essence { padding: 62px 0; }
	#problem .jsc-section-head { margin-bottom: 54px; }
	#problem .jsc-section-lead { margin-top: 15px; }
	.jsc-diagram-node { padding-bottom: 34px; }
	.jsc-diagram-question { margin-bottom: 31px; }
	.jsc-diagram-final { margin-top: 48px; padding-top: 40px; }

	/* Section-head rhythm (eyebrow -> rule -> heading -> lead), scoped to
	   these seven sections only so PROBLEM STRUCTURE's own section-head
	   spacing is untouched. CONTACT doesn't use .jsc-section-head (its
	   eyebrow/heading/paragraph sit directly in the section) so it's
	   handled separately below. */
	#concern .jsc-section-head,
	#process .jsc-section-head,
	#service .jsc-section-head,
	#approach .jsc-section-head,
	#case .jsc-section-head,
	#message .jsc-section-head,
	#column .jsc-section-head {
		margin-bottom: 30px;
	}
	#concern .jsc-eyebrow,
	#process .jsc-eyebrow,
	#service .jsc-eyebrow,
	#approach .jsc-eyebrow,
	#case .jsc-eyebrow,
	#message .jsc-eyebrow,
	#column .jsc-eyebrow {
		margin-bottom: 10px;
	}
	#concern .jsc-section-lead,
	#process .jsc-section-lead,
	#service .jsc-section-lead,
	#approach .jsc-section-lead,
	#case .jsc-section-lead,
	#message .jsc-section-lead,
	#column .jsc-section-lead {
		margin-top: 10px;
	}

	/* ---------- CONTACT: shorter + fixed edge-to-edge text, same copy/button ----------
	   CONTACT's content sits directly in the alignfull section (it never
	   got the .jsc-section-inner side padding the other sections use),
	   so on a narrow screen its heading/paragraph ran edge to edge with
	   no side margin, reading as an oddly wide, awkwardly wrapped block.
	   Adding side padding here (mobile only) is a CSS-only fix; the
	   manual line breaks already in the copy are unchanged. */
	#contact.jsc-cta { padding: 54px 24px; }
	#contact .jsc-eyebrow { margin-bottom: 8px; justify-content: center; }
	#contact h2 { margin-bottom: 12px; }
	#contact > p { margin: 0 auto 22px; }
	#contact .jsc-cta-note { margin-top: 13px; }
	/* Button padding is shared with the hero's buttons via .jsc-btn, so
	   scope this reduction to #contact only — the hero button is untouched. */
	#contact .wp-block-button__link { padding: 14px 32px; }

	/* ---------- CONCERN: compact cards, same 6 items/text ---------- */
	.jsc-concern-grid { gap: 11px; }
	.jsc-concern-card { padding: 16px 18px; }
	.jsc-concern-num { margin-bottom: 8px; }
	.jsc-concern-card h3 { margin-bottom: 5px; }

	/* ---------- SUPPORT PROCESS: further step-rhythm pass, same 5 steps/text ---------- */
	.jsc-process-grid { margin-top: 22px; }
	.jsc-process-card { padding-bottom: 15px; }
	.jsc-process-card h3 { margin-bottom: 5px; }
	.jsc-process-subtitle { margin-bottom: 6px; }

	/* ---------- SERVICES: tighter pillar padding, same 3 pillars/items ---------- */
	.jsc-pillar { padding: 17px 16px; }
	.jsc-pillar h3 { margin-bottom: 4px; }
	.jsc-pillar-subtitle { margin-bottom: 13px; }
	.jsc-pillar li { padding: 4px 0 4px 16px; }

	/* ---------- CASE STUDY: tighter card padding, same content, same 5 cards ---------- */
	.jsc-case-grid { gap: 18px; }
	.jsc-case-card { padding: 20px 18px; }
	.jsc-case-tag { margin-bottom: 12px; }
	.jsc-case-card h3 { margin-bottom: 13px; }
	.jsc-case-block { padding: 7px 0; }

	/* ---------- MESSAGE: fix redundant photo->name gap, same photo/copy/quals ----------
	   The grid's own gap (36px, inherited from the tablet rule since
	   mobile never redefined it) was stacking on top of the photo
	   figure's own margin-bottom, doubling the space between the photo
	   and "KIN SHUSEI" once the grid drops to one column. Body copy
	   line-height/margins are left as they were — MESSAGE's own text
	   asked not to be compressed further. */
	.jsc-profile { gap: 18px; margin-bottom: 34px; }
	figure.jsc-profile-photo { margin: 0 auto; }
	.jsc-profile-quals { margin-bottom: 12px; }
	.jsc-track-band { margin-bottom: 20px; }
	.jsc-values { margin-top: 18px; }

	/* ---------- OUR APPROACH: tighter 01->02->03 rhythm, closing line kept prominent ---------- */
	.jsc-approach-track { gap: 26px; }
	.jsc-approach-num { margin-bottom: 16px; }
	.jsc-approach-item h3 { margin-bottom: 8px; }
	.jsc-approach-final { margin-top: 32px; padding-top: 24px; }
}

/* Real-device feedback: "現場と経営に役立つ情報" (COLUMN 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 25px 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) {
	#column .jsc-section-head h2 { white-space: nowrap; }
}

/* Real-device feedback: "理論だけで終わらせず、実践につなげる。" (the third
   line of MESSAGE's .jsc-values statement) was wrapping to a second line on
   phones. Scoped nowrap on just this one line's span (not the whole
   statement, not a font-size cut), and only across the width band it
   measures as fitting at this element's 17px font (unchanged on mobile).
   320px is excluded on purpose and falls back to natural wrapping instead
   of being forced into overflow. */
@media (min-width: 375px) and (max-width: 760px) {
	.jsc-values-line3 { white-space: nowrap; }
}