/*
Theme Name: BusinessPress Corporate
Theme URI: https://businesspress.jp/theme/
Description: BusinessPress をベースにした、コーポレートサイト向けの洗練された子テーマです。深いインクネイビーとゴールドのアクセント、上質な余白設計、エディトリアルなタイポグラフィで「高額制作会社」のような質感を実現します。ヘッダー CTA ボタン・スクロールアニメーション・リッチなフッターなどを追加。
Author: Corporate Redesign
Template: businesspress
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: businesspress-corporate
*/

/* ============================================================
   BusinessPress Corporate — Child Theme
   Design language:
   - Ink navy (#10182b) primary, warm gold (#b8945f) accent
   - Editorial serif display + clean sans body
   - Generous whitespace, hairline rules, restrained motion
   ============================================================ */

/* ----- Design Tokens ----- */
:root {
	--c-ink:        #10182b;
	--c-ink-soft:   #1c2940;
	--c-navy:       #223354;
	--c-gold:       #b8945f;
	--c-gold-deep:  #9c7a44;
	--c-paper:      #ffffff;
	--c-mist:       #f6f6f3;
	--c-mist-2:     #eceae3;
	--c-line:       #e3e1d8;
	--c-text:       #2b3242;
	--c-text-soft:  #5f6675;
	--c-text-mute:  #939aa6;

	--ff-display: "Cormorant Garamond", "Noto Serif JP", serif;
	--ff-body:    "Jost", "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

	--shadow-sm: 0 2px 12px rgba(16, 24, 43, .06);
	--shadow-md: 0 14px 40px rgba(16, 24, 43, .10);
	--shadow-lg: 0 30px 70px rgba(16, 24, 43, .16);

	--ease: cubic-bezier(.22, .61, .36, 1);
	--maxw: 1240px;
}

/* ----- Global ----- */
html { font-size: 100%; }

body,
body:lang(ja) {
	font-family: var(--ff-body);
	color: var(--c-text);
	background: var(--c-paper);
	line-height: 1.85;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
}

.site { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-body);
	color: var(--c-ink);
	letter-spacing: .04em;
	line-height: 1.5;
	font-weight: 600;
}

a {
	color: var(--c-navy);
	text-decoration: none;
	transition: color .35s var(--ease), opacity .35s var(--ease);
}
a:hover { color: var(--c-gold-deep); }

::selection { background: var(--c-gold); color: #fff; }

/* Tasteful scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-mist); }
::-webkit-scrollbar-thumb { background: var(--c-navy); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-ink); }

/* ----- Layout width upgrade ----- */
.main-header-content,
.top-bar-content,
.site-bottom-content,
.home-header-content {
	max-width: var(--maxw);
}

.site-content { padding-top: 0; }

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
	background: var(--c-ink);
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 13px;
	letter-spacing: .06em;
}
.top-bar-content {
	padding: 0 28px;
	min-height: 42px;
}
.top-bar a,
.top-bar li { color: rgba(255,255,255,.72); }
.top-bar a:hover { color: var(--c-gold); }
.top-bar-main-phone { font-weight: 600; color: #fff !important; }
.top-bar-main-phone::before,
.top-bar-main-contact a::before,
.top-bar-main-access a::before {
	font-family: "FontAwesome";
	margin-right: 7px;
	color: var(--c-gold);
}
.top-bar-main-phone::before  { content: "\f095"; }
.top-bar-main-contact a::before { content: "\f0e0"; }
.top-bar-main-access a::before  { content: "\f041"; }

/* ============================================================
   MAIN HEADER
   The parent theme clones .main-header into a fixed .main-header-clone
   for its sticky behaviour. We must NOT make .main-header position:sticky
   ourselves — that double-stacks and overlaps the hero. We simply style
   both the original header and the clone.
   ============================================================ */
.main-header {
	background: #fff;
	border-bottom: 1px solid var(--c-line);
	box-shadow: none;
	/* Parent adds 15–35px vertical padding — remove it so header height
	   is controlled solely by .main-header-content. */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.main-header-content {
	padding: 0 24px;
	min-height: 64px;
	align-items: center;
}

/* Cloned sticky header — keep it slim and consistent */
.main-header-clone {
	background: #fff;
	border-bottom: 1px solid var(--c-line);
	box-shadow: 0 4px 20px rgba(16,24,43,.08);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.main-header-clone .main-header-content { min-height: 58px; }
.main-header-clone .site-title { font-size: 21px; }

/* Branding */
.site-branding { display: flex; align-items: center; padding-right: 10px; }
.site-title {
	font-family: var(--ff-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.2;
	margin: 0;
}
.site-title a { color: var(--c-ink); }
.site-title a:hover { color: var(--c-gold-deep); }
.site-description {
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	margin-top: 2px;
}

/* ============================================================
   MAIN NAVIGATION
   ============================================================ */
.main-navigation { margin-left: auto; }
.main-navigation ul { display: flex; align-items: center; }
.main-navigation li { margin: 0; }
.main-navigation a {
	display: block;
	padding: 27px 17px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--c-ink);
	position: relative;
}
.main-navigation > div > ul > li > a::after {
	content: "";
	position: absolute;
	left: 17px; right: 17px;
	bottom: 21px;
	height: 1.5px;
	background: var(--c-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--ease);
}
.main-navigation > div > ul > li:hover > a::after,
.main-navigation > div > ul > li.current-menu-item > a::after { transform: scaleX(1); }
.main-navigation > div > ul > li.current-menu-item > a { color: var(--c-gold-deep); }

/* Sub-menu */
.main-navigation ul ul {
	display: block;
	background: var(--c-ink);
	box-shadow: var(--shadow-md);
	border-top: 2px solid var(--c-gold);
	padding: 8px 0;
	min-width: 220px;
}
.main-navigation ul ul a {
	padding: 12px 24px;
	color: rgba(255,255,255,.8);
	font-size: 13px;
}
.main-navigation ul ul a:hover {
	color: #fff;
	background: var(--c-ink-soft);
}
.main-navigation ul ul li:hover > a::after { display: none; }

/* ============================================================
   HEADER CTA BUTTONS  (added feature)
   ============================================================ */
.header-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 22px;
}
.header-cta .btn-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	border-radius: 2px;
	transition: all .35s var(--ease);
	white-space: nowrap;
}
.header-cta .btn-cta i { font-size: 13px; }

/* Primary — solid ink */
.header-cta .btn-cta--primary {
	background: var(--c-ink);
	color: #fff;
	border: 1px solid var(--c-ink);
}
.header-cta .btn-cta--primary:hover {
	background: var(--c-gold-deep);
	border-color: var(--c-gold-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(184,148,95,.35);
}
/* Outline */
.header-cta .btn-cta--ghost {
	background: transparent;
	color: var(--c-ink);
	border: 1px solid var(--c-line);
}
.header-cta .btn-cta--ghost:hover {
	border-color: var(--c-ink);
	color: var(--c-ink);
	transform: translateY(-2px);
}

/* ============================================================
   HAMBURGER (mobile)  — crisp architectural square
   ============================================================ */
.drawer-hamburger {
	/* Square tile, ~48px tap-target, sharp 2px corners */
	width: 24px !important;
	min-width: 24px !important;
	box-sizing: content-box;
	padding: 12px !important;
	background: var(--c-ink);
	border: 1px solid var(--c-ink);
	border-radius: 2px;
	transition: background .35s var(--ease), border-color .35s var(--ease);
}
.drawer-hamburger:hover,
.drawer-hamburger:focus {
	background: var(--c-ink-soft);
	border-color: var(--c-gold);
}

/* Closed state — two confident bars + a shorter accent bar.
   Equal-weight top/bottom, a deliberate short middle line. */
.drawer-hamburger-icon,
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after {
	background: #fff !important;
	height: 2px;
	border-radius: 0;
	transition: transform .4s var(--ease), background .3s var(--ease),
	            top .3s var(--ease), width .3s var(--ease);
}
.drawer-hamburger-icon { width: 100%; }
.drawer-hamburger-icon::before { width: 100%; top: -7px !important; }
.drawer-hamburger-icon::after  { width: 64%;  top: 7px !important; }
.drawer-hamburger:hover .drawer-hamburger-icon::after { width: 100%; }

/* OPEN state — tile goes gold, bars form a clean, full white X */
.drawer-opened .drawer-hamburger {
	background: var(--c-gold-deep);
	border-color: var(--c-gold-deep);
}
.drawer-opened .drawer-hamburger:hover {
	background: var(--c-gold);
	border-color: var(--c-gold);
}
.drawer-opened .drawer-hamburger-icon { background: transparent !important; }
.drawer-opened .drawer-hamburger-icon::before,
.drawer-opened .drawer-hamburger-icon::after {
	background: #fff !important;
	width: 100% !important;
	top: 0 !important;
}

/* --- Drawer panel --- */
.drawer-navigation { background: var(--c-ink); }
.drawer-navigation-content { padding: 80px 32px 48px !important; }
.drawer-navigation a { color: rgba(255,255,255,.9); }
.drawer-navigation .main-navigation { margin: 0; }
.drawer-navigation .main-navigation ul { display: block; }
.drawer-navigation .main-navigation li { margin: 0; }
.drawer-navigation .main-navigation a {
	display: block;
	padding: 17px 6px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .06em;
	border-bottom: 1px solid rgba(255,255,255,.08);
	transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer-navigation .main-navigation a:hover {
	color: var(--c-gold);
	padding-left: 12px;
}
.drawer-navigation .main-navigation > div > ul > li > a::after { display: none; }
.drawer-navigation .main-navigation ul ul a {
	padding-left: 20px;
	font-size: 14px;
	color: rgba(255,255,255,.62);
}
/* Fallback page menu inherits the same styling */
.drawer-fallback-menu,
.drawer-fallback-menu ul { list-style: none; margin: 0; padding: 0; }
.drawer-fallback-menu li { margin: 0; }
.drawer-fallback-menu a {
	display: block;
	padding: 17px 6px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .06em;
	color: rgba(255,255,255,.9);
	border-bottom: 1px solid rgba(255,255,255,.08);
	transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer-fallback-menu a:hover { color: var(--c-gold); padding-left: 12px; }

/* Social links inside drawer */
.drawer-navigation .header-social-link,
.drawer-navigation .social-link-menu {
	margin-top: 20px;
}


/* ============================================================
   HOME HERO
   ============================================================ */
.home-header { position: relative; }
.home-header-overlay {
	background: linear-gradient(180deg, rgba(16,24,43,.42) 0%, rgba(16,24,43,.72) 100%);
}
/* Content padding is intentionally moderate so the hero hugs its
   text on mobile (no dead space). Width matches site container. */
.home-header-content {
	padding: 5rem 28px;
	text-align: left;
}
.home-header-title {
	font-family: var(--ff-display);
	font-size: clamp(2.2rem, 6vw, 4.4rem);
	font-weight: 600;
	line-height: 1.32;
	color: #fff;
	letter-spacing: .02em;
	margin: 0 0 1.2rem;
	max-width: 16em;
	text-shadow: none;
	opacity: 0;
	animation: heroIn 1s var(--ease) .15s forwards;
}
.home-header-text {
	font-size: 1rem;
	color: rgba(255,255,255,.82);
	max-width: 34em;
	line-height: 1.95;
	margin: 0 0 2.2rem;
	text-shadow: none;
	opacity: 0;
	animation: heroIn 1s var(--ease) .3s forwards;
}
.home-header-button {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 100%;
	opacity: 0;
	animation: heroIn 1s var(--ease) .45s forwards;
}
@keyframes heroIn {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Hero buttons — `a.` prefix to beat the parent theme's specificity */
a.home-header-button-main,
a.home-header-button-sub {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 17px 36px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	border-radius: 2px;
	transition: all .4s var(--ease);
}
a.home-header-button-main {
	background: var(--c-gold);
	color: #fff;
	border: 1px solid var(--c-gold);
}
a.home-header-button-main::after {
	content: "\f061";
	font-family: "FontAwesome";
	font-size: 12px;
	font-weight: normal;
	transition: transform .4s var(--ease);
}
a.home-header-button-main:hover {
	background: #fff;
	color: var(--c-ink);
	border-color: #fff;
}
a.home-header-button-main:hover::after { transform: translateX(5px); }
a.home-header-button-sub {
	background: rgba(255,255,255,.04);
	color: #fff;
	border: 1px solid rgba(255,255,255,.5);
}
a.home-header-button-sub:hover {
	background: rgba(255,255,255,.14);
	border-color: #fff;
	color: #fff;
}

/* Scroll hint — only on taller viewports to avoid clutter on mobile */
@media (min-height: 640px) and (min-width: 783px) {
	.home-header::after {
		content: "";
		position: absolute;
		left: 50%; bottom: 26px;
		width: 1px; height: 52px;
		background: linear-gradient(180deg, transparent, var(--c-gold));
		animation: scrollHint 2.2s var(--ease) infinite;
	}
}
@keyframes scrollHint {
	0%, 100% { opacity: 0; transform: translateY(-10px); }
	50%      { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PAGE JUMBOTRON
   ============================================================ */
.jumbotron { position: relative; }
.jumbotron-overlay {
	background: linear-gradient(135deg, rgba(16,24,43,.92), rgba(34,51,84,.82));
}
.jumbotron-content { padding: 6rem 28px; text-align: center; }
.subheader {
	font-size: 12px;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--c-gold);
	margin-bottom: 1rem;
}
.jumbotron-title {
	font-family: var(--ff-display);
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 600;
	color: #fff;
	letter-spacing: .04em;
}

/* ============================================================
   CONTENT / ENTRIES
   ============================================================ */
.site-main { padding: 4.5rem 0; }

.entry-title {
	font-family: var(--ff-display);
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.4;
}
.entry-title a { color: var(--c-ink); }
.entry-title a:hover { color: var(--c-gold-deep); }

/* Standalone content (single posts, pages) — NO frame.
   The bordered "card" look is reserved for multi-column blog listings. */
article.hentry {
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* Blog listing cards (2 / 3-column) keep the elevated treatment */
.column-2 article,
.column-3 article {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 3px;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.column-2 article:hover,
.column-3 article:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

.entry-thumbnail img { transition: transform .7s var(--ease); }
article:hover .entry-thumbnail img { transform: scale(1.06); }
.entry-thumbnail { overflow: hidden; }

/* Section heading helper */
.widget-title,
.comments-title,
.comment-reply-title {
	font-family: var(--ff-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--c-ink);
}

/* ============================================================
   BUTTONS / FORMS  (sitewide)
   ============================================================ */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
	background: var(--c-ink);
	color: #fff;
	border: 1px solid var(--c-ink);
	border-radius: 2px;
	letter-spacing: .08em;
	font-weight: 600;
	padding: 14px 30px;
	transition: all .35s var(--ease);
}
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--c-gold-deep);
	border-color: var(--c-gold-deep);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(184,148,95,.3);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
	border: 1px solid var(--c-line);
	border-radius: 2px;
	background: var(--c-mist);
	padding: 13px 16px;
	transition: border-color .3s var(--ease), background .3s var(--ease);
}
input:focus,
textarea:focus {
	border-color: var(--c-gold);
	background: #fff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(184,148,95,.12);
}

/* Pagination */
.pagination .page-numbers {
	border: 1px solid var(--c-line);
	border-radius: 2px;
	color: var(--c-text);
	transition: all .3s var(--ease);
}
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: #fff;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--c-ink);
	color: rgba(255,255,255,.66);
}
.site-footer .widget-title {
	color: #fff;
	font-family: var(--ff-body);
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding-bottom: 14px;
	margin-bottom: 18px;
	position: relative;
}
.site-footer .widget-title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 32px; height: 2px;
	background: var(--c-gold);
}
.site-footer a { color: rgba(255,255,255,.66); }
.site-footer a:hover { color: var(--c-gold); }
.site-footer .widget { font-size: 14px; }

.footer-widgets {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 5rem 28px 3.5rem;
}

/* Footer CTA strip (added) */
.corp-footer-cta {
	background: linear-gradient(135deg, var(--c-navy), var(--c-ink-soft));
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.corp-footer-cta-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 4rem 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.corp-footer-cta-text {
	flex: 1 1 320px;
	min-width: 0;
}
.corp-footer-cta-text .label {
	display: block;
	font-size: 12px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--c-gold);
}
.corp-footer-cta-text h3 {
	font-family: var(--ff-display);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.4;
	color: #fff;
	margin: .5rem 0 0;
	font-weight: 600;
}
/* Button: never stretches, content always centred */
.corp-footer-cta a.btn-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: auto;
	max-width: 100%;
	background: var(--c-gold);
	color: #fff;
	padding: 18px 38px;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
	transition: background .4s var(--ease), color .4s var(--ease),
	            transform .4s var(--ease), box-shadow .4s var(--ease);
}
.corp-footer-cta a.btn-cta i { font-size: 14px; }
.corp-footer-cta a.btn-cta:hover {
	background: #fff;
	color: var(--c-ink);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}


/* Site bottom */
.site-bottom {
	background: #0b1120;
	border-top: 1px solid rgba(255,255,255,.06);
}
.site-bottom-content {
	padding: 1.8rem 28px;
	font-size: 12px;
	letter-spacing: .08em;
	color: rgba(255,255,255,.5);
}
.footer-navigation a { font-size: 12px; letter-spacing: .1em; }

/* Back to top */
.back-to-top {
	background: var(--c-gold) !important;
	border-radius: 2px;
	box-shadow: var(--shadow-md);
	transition: background .3s var(--ease), transform .3s var(--ease);
}
.back-to-top:hover {
	background: var(--c-ink) !important;
	transform: translateY(-4px);
}

/* ============================================================
   SCROLL REVEAL  (added via JS)
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
	will-change: opacity, transform;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.header-cta { display: none; }
	/* Hide ONLY the in-header navigation on mobile — NOT the drawer's
	   navigation, which also carries the .main-navigation class. */
	.main-header-content .main-navigation { display: none; }
}
@media (max-width: 782px) {
	.main-header-content { min-height: 56px; padding: 0 16px; }
	.main-header-clone .main-header-content { min-height: 52px; }
	.site-title { font-size: 20px; }
	.main-header-clone .site-title { font-size: 18px; }

	/* Hero — tighter, no dead space */
	.home-header-content { padding: 3.6rem 20px; }
	.home-header-title { margin-bottom: 1rem; }
	.home-header-text { margin-bottom: 1.8rem; }
	.home-header-button { gap: 12px; }
	a.home-header-button-main,
	a.home-header-button-sub {
		flex: 1 1 auto;
		justify-content: center;
		padding: 16px 22px;
	}

	/* Footer CTA — centred stack, button stays auto width */
	.corp-footer-cta-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.6rem;
		padding: 3.2rem 20px;
	}
	.corp-footer-cta-text { flex: 0 0 auto; }
	.corp-footer-cta a.btn-cta { padding: 17px 32px; }

	.footer-widgets { padding: 3.5rem 20px 2.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.reveal { opacity: 1; transform: none; }
}

/* ============================================================
   SERVICE PAGE TEMPLATE  (page-service.php)
   ============================================================ */
.bpcorp-service .site-main { padding: 0; }
.bpcorp-service article.hentry {
	background: transparent;
	border: 0;
	border-radius: 0;
}
.bpcorp-section-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 28px;
}

/* Section heading */
.bpcorp-section-head { text-align: center; margin-bottom: 3.4rem; }
.bpcorp-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--c-gold);
	margin-bottom: .9rem;
}
.bpcorp-section-title {
	font-family: var(--ff-display);
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	font-weight: 600;
	color: var(--c-ink);
	letter-spacing: .05em;
	margin: 0;
	position: relative;
	padding-bottom: 1.1rem;
}
.bpcorp-section-title::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 0;
	width: 46px; height: 2px;
	transform: translateX(-50%);
	background: var(--c-gold);
}

/* Intro */
.bpcorp-service-intro { padding: 4.5rem 0 1rem; }
.bpcorp-service-intro-inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 28px;
	font-size: 1.04rem;
	line-height: 2.05;
	color: var(--c-text-soft);
	text-align: center;
}

/* Service cards */
.bpcorp-service-cards { padding: 4.5rem 0; background: var(--c-mist); }
.bpcorp-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.bpcorp-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 3px;
	padding: 3rem 2.2rem;
	position: relative;
	overflow: hidden;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.bpcorp-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--c-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease);
}
.bpcorp-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}
.bpcorp-card:hover::before { transform: scaleX(1); }
.bpcorp-card-num {
	display: block;
	font-family: var(--ff-display);
	font-size: 2.6rem;
	font-weight: 600;
	color: var(--c-mist-2);
	line-height: 1;
	margin-bottom: 1rem;
}
.bpcorp-card-title {
	font-family: var(--ff-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--c-ink);
	letter-spacing: .04em;
	margin: 0 0 .9rem;
}
.bpcorp-card-text {
	font-size: .94rem;
	line-height: 1.95;
	color: var(--c-text-soft);
	margin: 0;
}

/* Process flow */
.bpcorp-service-flow { padding: 5rem 0; }
.bpcorp-flow-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 820px;
	margin-inline: auto;
	counter-reset: none;
}
.bpcorp-flow-item {
	display: flex;
	gap: 1.8rem;
	padding: 1.8rem 0;
	border-bottom: 1px solid var(--c-line);
	align-items: flex-start;
}
.bpcorp-flow-item:last-child { border-bottom: 0; }
.bpcorp-flow-num {
	flex: 0 0 auto;
	width: 56px; height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: #fff;
	background: var(--c-ink);
	border-radius: 50%;
}
.bpcorp-flow-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--c-ink);
	margin: .2rem 0 .4rem;
	letter-spacing: .04em;
}
.bpcorp-flow-text {
	font-size: .95rem;
	color: var(--c-text-soft);
	line-height: 1.9;
	margin: 0;
}

/* In-page CTA */
.bpcorp-service-cta {
	background: linear-gradient(135deg, var(--c-ink), var(--c-navy));
	padding: 5rem 0;
	text-align: center;
}
.bpcorp-service-cta-title {
	font-family: var(--ff-display);
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	font-weight: 600;
	color: #fff;
	letter-spacing: .05em;
	margin: 0 0 1rem;
}
.bpcorp-service-cta-text {
	color: rgba(255,255,255,.74);
	font-size: 1rem;
	line-height: 1.95;
	margin: 0 auto 2.4rem;
	max-width: 32em;
}
.bpcorp-service-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--c-gold);
	color: #fff;
	padding: 18px 44px;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1;
	white-space: nowrap;
	transition: background .4s var(--ease), color .4s var(--ease),
	            transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bpcorp-service-cta-btn i { font-size: 14px; transition: transform .4s var(--ease); }
.bpcorp-service-cta-btn:hover {
	background: #fff;
	color: var(--c-ink);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
.bpcorp-service-cta-btn:hover i { transform: translateX(5px); }

/* Service page responsive */
@media (max-width: 920px) {
	.bpcorp-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.bpcorp-card-grid { grid-template-columns: 1fr; }
	.bpcorp-section-inner { padding: 0 20px; }
	.bpcorp-service-cards,
	.bpcorp-service-flow,
	.bpcorp-service-cta { padding: 3.6rem 0; }
	.bpcorp-flow-item { gap: 1.1rem; }
	.bpcorp-flow-num { width: 46px; height: 46px; font-size: 1.1rem; }
	.bpcorp-service-cta-btn { padding: 17px 32px; }
}