/* ============================================================================
   Bain Capital Japan — Japanese typography + JP-only components
   Loaded last, after style.css / custom.css / app.css / responsive.css.
   Nothing in the inherited stylesheets is edited; everything here overrides.

   Type:  Shippori Mincho  -> serif  (was Martina Plantijn)
          Noto Sans JP     -> sans   (was Inter)
   ========================================================================== */

:root {
	/* The two inherited variables drive every font-family in the theme.
	   The brand faces lead the stack: Martina Plantijn and Inter carry no CJK
	   glyphs, so Latin and figures render in the brand fonts and everything
	   Japanese falls through to Shippori Mincho / Noto Sans JP per character. */
	--primaryFont: 'Martina Plantijn', 'Shippori Mincho', 'Noto Serif JP', serif;
	--secondayFont: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
	--secondaryFont: 'Inter', 'Noto Sans JP', system-ui, sans-serif;

	/* brand palette, for JP-only components */
	--jpIndigo: #1c2156;
	--jpAzure: #1080ff;
	--jpRed: #ff4b3f;
	--jpSlate6: #1b2c46;
	--jpSlate5: #224064;
	--jpSlate4: #315d90;
	--jpSlate3: #5d8bbf;
	--jpSlate2: #abcae9;
	--jpSlate1: #ebf1f9;
	--jpWarmWhite: #fefcf6;
}

/* ---------------------------------------------------------------- 1. Japanese text setting */
html:lang(ja) body,
body {
	font-family: var(--secondayFont);
	/* proportional metrics for kana/punctuation — stops the gappy look */
	font-feature-settings: "palt" 1;
	letter-spacing: 0.02em;
}

/* Japanese has no inter-word spaces, so lines need more air than Latin copy */
p,
li,
dd,
address,
.content-text p,
.sitemap-page-description p,
.accordion-body .content-text p,
.strategy-card .content-text p {
	line-height: 1.9;
	letter-spacing: 0.03em;
}

/* …but not in navigation, menus and other single-line list furniture, where
   the inherited layout sizes itself off the line box. The nav row keeps the
   export's 1.2 ratio exactly — at `normal` the <ul> sat 3px taller than its
   items and pushed the rule below the wordmark's baseline. */
.navbar-nav li,
.navbar-nav li a {
	line-height: 1.2;
	letter-spacing: normal;
}

.menu-widget-menu li,
.copyright-menu li,
.footermenu li,
.dropdown-menu li,
.dropdown-menu li a,
.switch-view li,
.breadcrumb li,
.cate-date-wrap li,
.people-breadcrumb-single li {
	line-height: normal;
	letter-spacing: normal;
}

/* Headlines: mincho, tighter leading, no letter-spacing (kanji are already square) */
h1, h2, h3, h4, h5, h6,
.banner-title,
.section-title,
.sitemap-page-title,
.theme-title,
.strategy-title,
.accordion-title,
.small-banner-title,
.intro-section-txt {
	font-family: var(--primaryFont);
	letter-spacing: 0.01em;
	line-height: 1.5;
}

.banner-title {
	line-height: 1.35;
	font-weight: 500;
}

/* The inherited setting is 50px/1.2 at full column width. Japanese wants a
   little more leading than Latin at that size, but not the 1.9 used for body
   copy — and no measure limit, so it fills the column as the original does.

   Weight is the export's own 300. Only the Latin can honour it: Martina
   Plantijn has a Light cut, Shippori Mincho's lightest is 400 (Google serves
   400–800 for that family and rejects a 300 request outright), so every
   Japanese character renders at 400 whatever this says. Deliberate — the
   Latin numerals and initialisms set a shade lighter than the kanji around
   them, which is the inherited design. */
.intro-section-txt,
.intro-section-wrap .intro-section-txt,
.intro-section-wrap .intro-section-txt p {
	line-height: 1.4;
	letter-spacing: 0.01em;
	font-weight: 300;
	max-width: none;
}

/* Line-breaking: never split a run of kana/kanji mid-phrase where avoidable */
.banner-title,
.section-title,
.sitemap-page-title,
.theme-title,
.strategy-title,
.accordion-title,
.small-banner-title,
.news-title,
.count-title,
.office-name {
	word-break: normal;
	/* `anywhere` breaks even when the word could simply move to the next line,
	   which chopped Latin words and katakana mid-run. `break-word` only breaks
	   when the alternative is overflow. `strict` applies full kinsoku: 、。
	   small kana and ー never start a line, opening brackets never end one. */
	overflow-wrap: break-word;
	line-break: strict;
}

/* Shippori Mincho ships no italic. The brand's red-3 emphasis becomes
   weight + colour instead of a synthesised (ugly) oblique. */
em, i, .text-italic, .highlight-text,
.team-quotes-author em {
	font-style: normal;
}

.highlight-text {
	/* color: var(--jpRed); */
	font-weight: inherit;
}

.text-italic {
	font-weight: 500;
}

/* Brow / eyebrow labels — uppercase does nothing in Japanese, so use
   tracking + weight to keep the same hierarchy signal. */
.page-title.h6,
.psorting-label,
.widget-title,
.tag-text,
.news-data,
.date-text {
	font-family: var(--secondayFont);
	text-transform: none;
	letter-spacing: 0.12em;
	font-weight: 500;
}

/* Small Latin numerals in brow-style furniture sit in the sans. */
.year-text,
.process-no,
.process-step {
	font-family: var(--secondayFont);
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
}

/* The big statistics are display type, not data labels: the export sets them
   in --primaryFont and they stay there. Pinned on the inner spans too — the
   count-up ones carry `.anim`, which outranks a bare `.count-no` rule, so
   leaving it to inheritance set the animated figures in a different face from
   the static one. Digits resolve to Martina Plantijn, the 年 / 件 unit to
   Shippori Mincho. */
.count-no,
.count-no .anim,
.count-no sub,
.count-no sup {
	font-family: var(--primaryFont);
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
}

.count-title {
	line-height: 1.7;
}

/* ---- 20 years in Japan (homepage banner) ---------------------------------
   A rule across the container with the numeral hanging from it, the copy and
   the Explore pill to its right — from Adam's mock, 16 Aug 2026. It sits in
   the banner's bottom-anchored container, under the headline, over the
   video. The mock's teal became azure per the same instruction.

   The numeral is Martina Plantijn Italic. Only the 300 italic face is
   embedded (fonts-embedded.css), so 300 is declared rather than left to
   font matching — any other weight would synthesise an oblique. */
/* The hero's clipped video, fixed at the drawing's own size. The clip shape
   (the 150vh flag SVG) reaches 139vh down the page, but the export sizes the
   video and its poster at max(100vh, 1080px) — the shape's last ~30vh showed
   only its black-gradient backing, a dark band that scrolled into view under
   the hero on any screen (the untouched SS export has the same flaw). 320vh
   × 180vh is 16:9 exactly, so Vimeo's letterboxing fills the whole box, and
   its bottom (50vh + 90vh) clears the shape's 139vh everywhere. The poster
   is background-size: cover and just follows. Pointer events off: the
   enlarged box reaches into the second screen, and a background video must
   never eat a click meant for the intro copy. */
@media (min-width: 1025px) {
	.banner-section iframe,
	.banner-bg-inner .bg-image {
		min-width: 320vh;
		min-height: 180vh;
	}

	.banner-section iframe {
		pointer-events: none;
	}
}

/* On tall viewports (≥1000/1080px, two media rules) the export opens 60px
   under the caption — right where the band now sits, so the title floated
   away from the rule on big monitors while looking tight on smaller ones.
   With the band there, its own margin-top is the whole gap. */
.banner-section .container:has(.jp-anniv-row) .banner-caption {
	margin-bottom: 0;
}

.jp-anniv-row {
	position: relative;
	z-index: 1;                     /* same layer as .banner-caption */
	color: #fff;
	/* The accent tracks the ground the same way the copy colour does:
	   celestial over the dark video, azure wherever the export swaps in the
	   warm-white ground (portrait ≤1024) — celestial there is too pale. */
	--jpAnnivAccent: #63b4ff;       /* celestial */
}

.jp-anniv {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	margin-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.85);
	padding-top: 16px;
	/* the rule runs the width of the band's own content, not the container */
	width: fit-content;
	/* the band itself is the link */
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.jp-anniv:hover,
.jp-anniv:focus-visible {
	color: inherit;
}

/* Sized to the mock's own proportions (numeral ≈ 3.4× the heading), but in
   vh-aware clamps: the banner is one viewport tall with the whole caption
   cluster bottom-anchored, so on a short window a fixed 210px numeral would
   push the eyebrow into the fixed header. */
.jp-anniv-num {
	font-family: var(--primaryFont);
	font-style: italic;
	font-weight: 300;
	/* sized so the glyph stands exactly as tall as the two text rows
	   beside it (title line + subline ≈ 63px at full size; digits' cap
	   height ≈ 0.7em → 90px) */
	font-size: clamp(64px, 9.4vh, 90px);
	line-height: 0.78;              /* hangs from the rule, no dead leading */
	letter-spacing: -0.02em;
	color: var(--jpAnnivAccent);
	flex: 0 0 auto;
}

.jp-anniv-title {
	font-family: var(--secondayFont);
	font-size: clamp(19px, 2.6vh, 22px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: inherit;
	margin: 0 0 4px;
}

.jp-anniv-sub {
	font-family: var(--secondayFont);
	font-size: clamp(15px, 2.2vh, 18px);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: inherit;
	margin: 0;
	word-break: keep-all;
	overflow-wrap: break-word;
	line-break: strict;
}

/* The export turns the whole caption indigo on portrait screens ≤1024px —
   there the video yields to the warm-white ground and white copy would
   disappear. Same pair of rules, same breakpoints, so the band always
   matches the headline above it. The azure numeral and pill hold on both
   grounds. */
@media (max-width: 1024px) {
	.jp-anniv-row {
		color: var(--primaryColor, #1b215a);
		--jpAnnivAccent: var(--jpAzure, #1080ff);
	}
	.jp-anniv { border-top-color: rgba(28, 33, 86, 0.45); }
}

@media (orientation: landscape) and (max-width: 1024px) {
	.jp-anniv-row {
		color: #fff;
		--jpAnnivAccent: #63b4ff;
	}
	.jp-anniv { border-top-color: rgba(255, 255, 255, 0.85); }
}

/* The circled chevron closing the subline — the whole band links, this is
   the cue. The export's own .link-arrow circle (19px, 2px ring, chevron
   centred), in the band's accent, nudging right on hover like its buttons. */
.jp-anniv-sub .arrow-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	margin-left: 10px;
	border: 2px solid var(--jpAnnivAccent);
	border-radius: 50%;
	color: var(--jpAnnivAccent);
	/* centred on the CJK line: measured against the glyph box, not guessed */
	vertical-align: 1.5px;
	transition: transform .25s ease;
}

.jp-anniv-sub .arrow-round svg {
	width: 6px;
	height: 10px;
	margin-left: 1px;              /* optical centre — the glyph leans left */
}

.jp-anniv-sub .arrow-round path {
	fill: currentColor;
}

.jp-anniv:hover .jp-anniv-sub .arrow-round,
.jp-anniv:focus-visible .jp-anniv-sub .arrow-round {
	transform: translateX(4px);
}

@media (max-width: 1199px) {
	.jp-anniv { gap: 24px; }
	.jp-anniv-num { font-size: clamp(58px, 8.2vh, 76px); }
	.jp-anniv-title { font-size: 19px; }
	.jp-anniv-sub { font-size: 15px; }
}

@media (max-width: 767px) {
	.jp-anniv {
		gap: 16px;
		margin-top: 10px;
		padding-top: 12px;
	}
	.jp-anniv-num { font-size: clamp(48px, 7vh, 60px); }
	.jp-anniv-title { font-size: 16px; margin-bottom: 3px; }
	.jp-anniv-sub { font-size: 13px; margin-bottom: 0; }
	.jp-anniv-sub .arrow-round { width: 18px; height: 18px; vertical-align: 1px; }
	.jp-anniv-sub .arrow-round svg { width: 5px; height: 9px; }
}

/* ---- Automatic phrase breaking (word-break: auto-phrase) ----------------
   Chromium segments Japanese into 文節 itself and breaks only at phrase
   boundaries — the job the hand-placed <wbr> marks in content.py do. Japan,
   July 2026: about 72% of traffic gets it (Chrome 56, Edge 14, Brave, Samsung),
   about 26% does not (Safari 23, Firefox 3).

   Two things this must not do, hence the shape of the rule:

   1. It must not REPLACE the fallback. `auto-phrase` is a value of
      word-break, so declaring it plainly would overwrite the `keep-all` /
      `normal` above — and in Safari and Firefox the invalid value is simply
      dropped, leaving those headings breaking anywhere. A quarter of the
      audience would be worse off than before. Inside @supports, the base
      rules stand everywhere and this only adds on top.

   2. It must not overrule the marks we already placed. Where a heading
      carries <wbr>, those break points were chosen deliberately (日本企業の /
      持続的な / 価値創造への / コミットメント) and are better than any
      guess. `:not(:has(wbr))` leaves those alone and applies the automatic
      segmentation only where nothing has been marked — which is exactly the
      case a CMS will produce, since editors will not be typing <wbr>.

   So today this changes almost nothing; its value is that CMS-authored
   headings will break correctly on arrival, with no editor doing anything. */
@supports (word-break: auto-phrase) {
	.banner-title:not(:has(wbr)),
	.section-title:not(:has(wbr)),
	.sitemap-page-title:not(:has(wbr)),
	.theme-title:not(:has(wbr)),
	.strategy-title:not(:has(wbr)),
	.accordion-title:not(:has(wbr)),
	.small-banner-title:not(:has(wbr)),
	.news-title:not(:has(wbr)),
	.count-title:not(:has(wbr)),
	.office-name:not(:has(wbr)),
	.jp-anniv-sub:not(:has(wbr)),
	.jp-style-name:not(:has(wbr)),
	.jp-roles-title:not(:has(wbr)),
	.jp-job .news-title a:not(:has(wbr)),
	.team-desc h4 small:not(:has(wbr)) {
		word-break: auto-phrase;
	}
}

/* ---------------------------------------------------------------- 2. Portfolio wordmarks */
/* The grid's outer right edge carries no vertical line: the export gives the
   literal last cell a border-right, which reads as a stray outer rule once
   the first/last-in-row corners are squared (jp-grid.js marks those). */
.portfolio-row .portfolio-col:last-child a {
	border-right: 0;
}

/* A cell with no cell beneath it squares its bottom corners (jp-grid.js marks
   them). Each cell draws only a left and bottom border with rounded corners,
   and a connection point is the four curves meeting at an internal crossing —
   so a cell with nothing below contributes half a node and the other half
   never arrives. Unfiltered the grid is 40 cells in rows of five and never
   goes partial, which is why this only showed once the filters were used
   (Adam, 22 Aug): the short final row left half-stars hanging above the gap.
   Squared, the rule simply runs straight through, and the grid's own bottom
   edge is a clean line in every state. */
.portfolio-row .portfolio-col.no-cell-below .col-inner a {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}


/* No JP portfolio logo files exist yet; cards use a set wordmark instead of
   a broken <img>. Swap .logo-text for an <img> once logos are supplied. */
.portfolio-col .logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	min-height: 96px;
}

/* Real logos: the export sizes .logo-wrap img at width:80%, which blows small
   marks up to the cell width — cap by height instead so every logo reads at a
   consistent optical size. */
/* .portfolio-col .logo-wrap img {
	width: auto;
	max-width: 78%;
	max-height: 52px;
} */

/* Impact Holdings shipped colour-only: whiten the grid copy; the colour file
   still swaps in on hover via the export's .dark-logo rule. */
.portfolio-col .logo-wrap img.jp-logo-whiten {
	filter: brightness(0) invert(1);
}

/* .portfolio-col .logo-text {
	font-family: var(--primaryFont);
	font-size: 20px;
	line-height: 1.25;
	font-weight: 500;
	color: var(--jpIndigo);
	letter-spacing: 0.01em;
}

.text-light .portfolio-col .logo-text {
	color: var(--jpWarmWhite);
} */

/* the hover turns the cell white — the text wordmark flips to indigo, the
   same swap the real logos make from white to colour */
/* .text-light .portfolio-col a:hover .logo-text {
	color: var(--jpIndigo);
} */

.portfolio-col .year-text {
	letter-spacing: 0.06em;
	font-size: 13px;
}

/* ---------------------------------------------------------------- 3. Mission block (about) */
.mission-section .mission-quote {
	font-family: var(--primaryFont);
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1.65;
	color: var(--jpIndigo);
	margin-bottom: 40px;
}

.mission-section .mission-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--jpSlate2);
}

/* 20px, not the 18 this shipped with: these rows are running copy and every
   other paragraph on the page is 20px, so at 18 the mission read as a
   caption (Adam, 22 Aug). Leading is left to the global 1.9 for the same
   reason — it was pinned at 1.7 here alone. */
.mission-section .mission-list li {
	padding: 22px 0;
	border-bottom: 1px solid var(--jpSlate2);
	font-size: 20px;
	color: var(--jpIndigo);
}

/* About-page headings break only at the <wbr> 文節 boundaries written into
   the titles in content.py — same pattern as the hero headline. The global
   overflow-wrap: break-word stays as the emergency escape. Scoped to this
   page via the body class because other pages' long titles (e.g. the fraud
   alert) carry no <wbr>s yet. */
.page-about .section-title {
	word-break: keep-all;
}

/* ------------------------------------------------------- 3b. About: live-page modules */
/* 投資スタイル — the five styles as plain running items; the BCSS theme-grid
   art is gone at Adam's request. */
.jp-styles-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--jpSlate2);
}

.jp-styles-list li {
	padding: 30px 0;
	border-bottom: 1px solid var(--jpSlate2);
}

/* Name above its paragraph at full column width, both at the page's running
   size — the 24px display name in a 330px side column was a third heading
   rank the five items never needed, and it forced the body down to 16px to
   fit beside it. Bold sans is the page's label voice (the same treatment the
   process capsules use), so weight carries the distinction, not size. */
.jp-style-name {
	font-family: var(--secondayFont);
	font-size: 20px;
	font-weight: 600;
	color: var(--jpIndigo);
	margin: 0 0 10px;
	letter-spacing: 0.02em;
	/* break at the ・, never inside カーブアウト */
	word-break: keep-all;
	line-break: strict;
}

.jp-styles-list li p {
	margin: 0;
	font-size: 20px;
}

/* 日本ファンド — the heading is 日本ファンドのご紹介 now, the claim that used
   to trail it having become the standfirst below (see content.py). At six
   characters it no longer needs the shrink this rule used to carry, so it
   takes the page's own 45px display size like every other section title. */


/* 投資プロセス — the approach diagram from
   baincapitaltechopportunities.com/approach, on the page's own ground:
   capsule bubbles (fully round ends), joined by lines that dock into the
   bubbles with the Bain triangle connection points. Graphic elements in
   slate 3 (allowed for graphics on light grounds), names in indigo. */
.jp-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.jp-process-col {
	position: relative;
}

.jp-process-pill {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: 8px 26px;
	border: 2px solid var(--jpSlate3);
	border-radius: 32px;
	background: transparent;
}

/* The connection — one SVG per gap, drawn as a single smooth neck between
   the two capsules (replacing the old line + two mirrored fillet caps,
   22 Aug: the caps were shorter, met the line in visible steps, and sat 2px
   off — see the offset note below — so they read as blobs eating into the
   pills). Geometry, in the 50×44 canvas: the capsule end circles are r32 at
   (-22,22) and (72,22), so the canvas reaches 10px into each pill and the
   closing arcs trace the capsules' own outer edges exactly — the fill never
   enters the border, verified by pixel probe. The flares leave each circle
   tangentially at 30° up its side (±16px of the 64px capsule, taller than
   the old fillets' ±11) and land horizontally on a 2px waist at the gap's
   centre, as cubic curves — a circular fillet tangent to both circle and
   waist cannot reach that high inside a 30px gap. The flares sit at 90% of
   their first cut (tangent 26.7° up the side, ±14.4px, handles ×0.9) so a
   3px flat runs between them at the gap's centre — at full size they met
   point-to-point and no line showed (Adam, 22 Aug). The two thin arcs underneath
   restroke the outer 1.2px of each capsule border across the docking span
   (r30.8–32, inside the 2px band, clear of the interior) so the fill and
   the CSS border weld with no antialiasing seam.

   right is -42px, not -40: offsets of an absolutely positioned box resolve
   against the containing block's PADDING box, and the pill has a 2px
   border — measured from -40 the whole drawing sits 2px left and the arcs
   cut through the border into the pill. */
.jp-process-col:not(:last-child) .jp-process-pill::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -42px;
	width: 50px;
	height: 44px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 44'><g fill='none' stroke='%235d8bbf' stroke-width='1.2'><path d='M5.79 7.383A31.4 31.4 0 0 1 5.79 36.617'/><path d='M44.21 7.383A31.4 31.4 0 0 0 44.21 36.617'/></g><path fill='%235d8bbf' d='M6.577 7.6C10.222 14.834 15.85 21 23.5 21L26.5 21C34.15 21 39.778 14.834 43.423 7.6A32 32 0 0 0 43.423 36.4C39.778 29.166 34.15 23 26.5 23L23.5 23C15.85 23 10.222 29.166 6.577 36.4A32 32 0 0 0 6.577 7.6Z'/></svg>") no-repeat center / 100% 100%;
}

.jp-process-name {
	margin: 0;
	font-family: var(--secondayFont);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--jpIndigo);
	letter-spacing: 0.02em;
	/* break at the ・, never mid-カタカナ語 (デューデリジェ/ンス) */
	word-break: keep-all;
	line-break: strict;
}

/* Diagram annotation, one size for the whole graphic. 16px rather than the
   page's 20px because the capsule labels cannot take 20px — エグゼキューショ
   ン・デューデリジェンス is twenty characters and would wrap to three lines in
   a quarter-width capsule — and a caption that disagreed with its own label
   by a single point was the near-match that made the page look unplanned. */
.jp-process-body {
	margin: 24px 0 0;
	padding-right: 10px;    /* widen the visual gutter between the columns */
	font-size: 16px;
	line-height: 1.9;
}
.jp-process-body p{
	line-height: 1.9;
}
/* Below the four-across layout the diagram goes straight to one column of
   four, connected vertically — never 2×2, so the chain reads unbroken
   (Adam, 22 Aug). The switch is at 1199 because under 1200 the quarter-width
   capsule can no longer hold エグゼキューション・デューデリジェンス in two
   lines, and a taller capsule breaks the neck's r32 end-circle geometry.

   The vertical connection is a 2px rail from each capsule's bottom edge,
   past its (indented) caption, into the next capsule's top edge — docking
   through the same pure-CSS inverted-corner fillets as the by-the-numbers
   strip: 16px radial-gradient quarter-circles, transparent inside r16,
   colour outside. Each junction is one 34×16 pseudo — two 16px fillet
   tiles flanking an unpainted 2px column that the rail shows through.

   Geometry, in the capsule's border-box coords: the rail runs at x 49–51 —
   the fillets flanking it then span x 33–67, and 33 is the first straight
   pixel of the top edge (the r32 corner ends at 32); docked any further
   left the fillet would hang over the curve. Offsets below are 2px off
   these figures because pseudo offsets resolve against the PADDING box
   (the -42px lesson above). The rail's ends run 2px into the capsules'
   border bands (same colour) so the butt joints can't open a seam; its
   top: 62px assumes the 64px capsule height, which holds at every width
   in this range (labels are one line, two at the narrowest). */
@media (max-width: 1199px) {
	.jp-process-grid { grid-template-columns: 1fr; row-gap: 40px; }

	/* the horizontal neck off; the first capsule carries no entry dock */
	.jp-process-col:not(:last-child) .jp-process-pill::after { content: none; }

	/* the rail — spans this column's caption and the 40px row gap */
	.jp-process-col:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 49px;
		top: 62px;
		bottom: -42px;
		width: 2px;
		background: var(--jpSlate3);
	}

	/* junction fillet pairs: exit under every capsule but the last
	   (::before), entry above every capsule but the first (::after) */
	.jp-process-col:not(:last-child) .jp-process-pill::before,
	.jp-process-col:not(:first-child) .jp-process-pill::after {
		content: "";
		position: absolute;
		left: 31px;
		right: auto;
		width: 34px;
		height: 16px;
		transform: none;
		background-size: 16px 16px;
		background-repeat: no-repeat;
		background-position: left top, right top;
	}

	.jp-process-col:not(:last-child) .jp-process-pill::before {
		bottom: -18px;
		background-image:
			radial-gradient(circle 16px at 0 100%,
				#0000 15.9px, var(--jpSlate3) 16.1px),
			radial-gradient(circle 16px at 100% 100%,
				#0000 15.9px, var(--jpSlate3) 16.1px);
	}

	.jp-process-col:not(:first-child) .jp-process-pill::after {
		top: -18px;
		background-image:
			radial-gradient(circle 16px at 0 0,
				#0000 15.9px, var(--jpSlate3) 16.1px),
			radial-gradient(circle 16px at 100% 0,
				#0000 15.9px, var(--jpSlate3) 16.1px);
	}

	/* caption steps aside for the rail — the timeline look */
	.jp-process-body { margin-left: 68px; }
}

/* 金融商品取引業者 registration block — the page's closing fine print, so
   the whole block sits at one small size (14px). It had an 18px semibold
   heading, which claimed a rank of its own for two lines of licence numbers;
   now the licence type is just a bold lead on the first line. The hairline
   rule matches the 投資スタイル list's rules above and keeps the block
   attached to the column rather than floating in the page's bottom margin. */
.jp-reg-note {
	border-top: 1px solid var(--jpSlate2);
	padding-top: 22px;
	color: var(--jpSlate4);
}

.jp-reg-note p {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.02em;
	/* Ordinary CJK breaking with 禁則処理 — NOT the keep-all we give titles.
	   加入協会一般社団法人第二種金融商品取引業協会… is a single unbroken run of
	   kanji with no 文節 boundary a browser can find, so keep-all made it one
	   unbreakable word that overflowed the column on a phone. Fine print
	   breaks like body copy; this matches the footer's own .regulatory-note. */
	word-break: normal;
	line-break: strict;
}

.jp-reg-note b {
	font-weight: 600;
}


/* ---- 私たちの強み (approach) ---------------------------------------------
   The pictogram fills its column. The export drew its own artwork at 75% of
   the column width; the mark Adam supplied is lighter and squarer and read
   too small at that size, so it takes the whole column. `height: auto` keeps
   it square off its 1080×1080 viewBox, and the wrap is text-center, so it
   grows about its own centre rather than off one edge. */
.approach-accordion-section .accordion-image-col svg {
	width: 100%;
}

/* The heading's column carries the export's `mb-100` utility, which computes
   to 160px here — the title floated a long way above the accordion it
   introduces. Cleared: the only gap left is the title's own 33px bottom
   margin, the same as 投資スタイル and every other heading on the page.
   (It also very nearly pays for the pictogram's extra height above — the two
   changes together move everything below by under a pixel.) */
.approach-accordion-section .content-col.mb-100 {
	margin-bottom: 0;
}

/* On about-us the page title is followed by its intro copy inside the same
   section, so the gap under アプローチ's counterpart is just the title's own
   60px margin. This page's title section holds nothing but the title — the
   copy that follows lives in the next section — so its 100px bottom padding
   was landing on top of that margin and opening 159px (Adam, 22 Aug). With
   the padding gone the two pages measure the same 60px. */
.page-approach .title-description-section {
	padding-bottom: 0;
}

/* The intro paragraph that replaced the 私たちの強み heading (22 Aug) keeps
   the gap that heading left below it — 33px, its own bottom margin, which is
   the spacing already signed off. A paragraph carries no such margin here, so
   without this the copy sat flush against the accordion's first row. */
.jp-adv-intro {
	margin-bottom: 33px;
}

/* ---- Careers: roles heading, boilerplate, one-column variant ------------
   The client's 22 Aug re-order: header → blurb → video → 募集職種 + list →
   boilerplate. */

/* Sits over the list, in the listing column — a column heading, so it steps
   down from the page title (採用) rather than competing with it. */
.jp-roles-head {
	margin-bottom: 22px;
}

.jp-roles-title {
	margin: 0;
	font-family: var(--primaryFont);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--jpIndigo);
	word-break: keep-all;
	line-break: strict;
}

/* The closing boilerplate. It used to run the full width of the container
   under both columns, so it carried its own 880px measure, centred. Since
   22 Aug it sits in the same grid column as everything else, and that cap
   was still biting on wide screens: at 1920 the column is 1008px, so 880
   centred it and inset the copy 52px on each side while the intro, the
   posting card and the CTA stayed flush (Adam). The column sets the
   measure now — no max-width, no auto margins. */
.jp-careers-boiler {
	margin-top: 96px;
}

.jp-careers-boiler p {
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: normal;
	margin: 0;
}

/* the same copy where the two-column page puts it — under the video, at the
   foot of the left column, so it needs no measure of its own */
.jp-careers-boiler-col p {
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: normal;
	margin: 0;
}

/* ---- careers.html: one centred column -----------------------------------
   Both blocks stack, so the order in the markup — blurb, video, then roles
   and list — reads straight down under the title. Since 22 Aug the measure
   comes from the grid (col-lg-7 col-md-10, exactly what about-us uses) and
   not from a max-width of its own, so the two pages stay in step at every
   breakpoint; all that is left here is clearing the column padding the
   two-column layout needs and the gutter it opens.

   `.page-careers` prefix on purpose: the two-column page's own rules
   (further down this sheet) zero the listing column's margin and open a 76px
   gutter, at the same specificity as anything scoped to .jp-careers-1col
   alone — and they come later, so they would win. */
.page-careers .jp-careers-1col .feature-news-col .col-inner,
.page-careers .jp-careers-1col .news-listing-col .col-inner {
	padding-left: 0;
}

.page-careers .jp-careers-1col .news-listing-col {
	margin-top: 72px;
}

/* With the postings hidden (CAREERS["show_jobs"] false) the listing column
   holds nothing but the global-careers button, so its 72px top margin was
   stacking on that button's own 26px and opening 132px between the two
   pills — a hole where a list used to be. 44px matches the gap the video
   leaves above the first button. */
.page-careers .jp-careers-1col .news-listing-col:not(:has(.news-listing-wrap)) {
	margin-top: 0;
	/* the template rules a line above this column on narrow screens, to part
	   the featured panel from the listing. With no listing it was a rule
	   across the page between two buttons, dividing nothing. */
	border-top: 0;
	/* …and the padding that rule sat on, which the first pass missed: the
	   chassis sets 60px from 768–991 and 30px below, so the gap under the
	   first button silently changed twice across the range while the margin
	   set here stayed put. With no listing to part, it separates nothing. */
	padding-top: 0;
}

/* The two pills at the foot of careers.html — the Japan recruiting mailto and
   the onward link to the global careers site — are separated by a hairline
   with equal air either side (Adam, 22 Aug). They are two different errands,
   and the rule says so more clearly than a gap alone did.

   The figures this replaces both belong to a page that had a list: the
   column's 72px top margin and, inside the listing column, a 60px .btn-wrap
   margin from the chassis that outranks .jp-careers-cta's own 26px. Together
   they opened 78px, which was then closed to 28px; the rule now takes 40px on
   each side of it. Below 992 the column contributes 30px of its own, so the
   margin is set to 10px there to land on the same 40px of visible air.

   The rule spans the column's measure — the same width as the copy and the
   opening paragraph — because .btn-wrap is a block and the one-column layout
   zeroes this column's left padding.

   Excluded on careers-form.html: there the second pill follows a card, which
   already draws its own edge, and a rule under it would read as a second one. */
.page-careers .jp-careers-1col:not(.jp-careers-has-form)
	.news-listing-col:not(:has(.news-listing-wrap))
	.btn-wrap.jp-careers-cta {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--jpSlate2);
}

/* The onward link under the job list. The markup carries the homepage
   button's own classes (btn btn-outline btn-blue), so every visual property
   — 20px text, 5px/16px padding, the 30px pill, the electric-blue ring and
   chevron — comes from the chassis and matches that button exactly. Nothing
   is restated here; an earlier version restated all of it at different
   values and drifted (Adam).

   The only addition is wrapping. The homepage's label is eight characters
   and never wraps; this one is twenty-two, so on a phone it has to break —
   at the <wbr> boundaries in content.py, never mid-word. */
.jp-careers-cta {
	margin-top: 26px;
}

.jp-careers-cta .btn {
	text-align: left;
	word-break: keep-all;
	line-break: strict;
}


/* ---- careers-form.html: the enquiry form --------------------------------
   The form variant of the 採用 page (Adam, 22 Aug): careers.html exactly,
   with this in place of the mailto pill, so the two can be compared. Every
   string in it is ours — see the note over CAREERS["form"] in content.py.

   Nothing in the chassis styles a form (the export's only <form> is the
   header search), so this is built from the site's own vocabulary rather
   than invented: hairline boxes in --jpSlate2 like the portfolio grid, warm
   white fields on the page's slate ground, and the homepage pill —
   `btn btn-outline btn-blue`, restated nowhere — for both the file-select
   button and submit. */
/* The whole block — heading, intro, fields and the confirmation that
   replaces them — sits in one card (Adam, 22 Aug). Warm white is the brand's
   paper and reads clearly against the page's slate-1 ground; the fields go
   pure white inside it, so each one reads as a well waiting to be typed in.
   10px is the site's own card radius (the portfolio cells carry it), which
   keeps the card distinct from the 5px on the controls inside.
   The CARD's outer edge is what aligns with the copy above it — the fields
   are inset by its padding, which is what a card is. */
.jp-careers-form-wrap {
	margin-top: 44px;       /* the gap the video leaves above the pill it replaces */
	padding: 40px;
	background-color: var(--jpWarmWhite);
	border: 1px solid var(--jpSlate2);
	border-radius: 10px;
}

@media (max-width: 767px) {
	.jp-careers-form-wrap {
		padding: 24px 20px;
	}
}

.jp-form-heading {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.5;
	color: var(--jpIndigo);
	word-break: keep-all;
	line-break: strict;
}

.jp-form-intro {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.9;
	color: var(--jpSlate5);
	line-break: strict;
}

.jp-form-required-note,
.jp-form-hint,
.jp-form-demo-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--jpSlate4);
	/* fine print: ordinary CJK breaking with 禁則処理, never keep-all —
	   an unbroken kanji run under keep-all overflows a phone column */
	word-break: normal;
	line-break: strict;
}

.jp-form-required-note {
	margin-bottom: 28px;
}

.jp-form-req {
	color: var(--jpRed);
	margin-left: 3px;
}

/* the note's asterisk LEADS the sentence, so it takes no left margin */
.jp-form-required-note span {
	color: var(--jpRed);
	margin-right: 2px;
}

/* 姓/名 and セイ/メイ two-up; a single column below 560px, where two fields
   plus the gap leave each one too narrow to read what you have typed. */
.jp-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

@media (max-width: 559px) {
	.jp-form-row {
		grid-template-columns: 1fr;
	}
}

.jp-form-field {
	margin-bottom: 24px;
}

.jp-form-label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--jpSlate5);
	word-break: keep-all;
	line-break: strict;
}

.jp-form-input {
	display: block;
	width: 100%;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 16px;   /* iOS zooms the page on focus below 16px */
	line-height: 1.6;
	color: var(--jpIndigo);
	/* white inside the warm-white card, so a field reads as a well */
	background-color: #fff;
	border: 1px solid var(--jpSlate2);
	border-radius: 5px;     /* Adam, 22 Aug — every control in the form */
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jp-form-input::placeholder {
	color: var(--jpSlate3);
	opacity: 1;    /* Firefox dims placeholders by default; --jpSlate3 already is */
}

.jp-form-input:focus,
.jp-form-input:focus-visible {
	outline: none;
	border-color: var(--colorThird);
	/* an inset ring rather than a thicker border: a border change would
	   reflow the field by a pixel on every focus */
	box-shadow: inset 0 0 0 1px var(--colorThird);
}

textarea.jp-form-input {
	min-height: 132px;
	resize: vertical;
}

/* ---- select: the export's own caret over a stripped-down control */
.jp-form-select {
	position: relative;
}

.jp-form-select .jp-form-input {
	padding-right: 44px;      /* clear of the caret */
	cursor: pointer;
}

/* The caret is centred by stretching the span the full height of the control
   and centring inside it — NOT by top:50% with a negative margin. The SVG is
   inline, so it sits on the text baseline with descender space beneath it:
   the span measured dead centre while the glyph drawn inside it sat 9px low
   (Adam, 22 Aug). `display: block` on the svg is the other half of the fix. */
.jp-form-select .caret {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 16px;
	display: flex;
	align-items: center;
	width: 15px;
	pointer-events: none;     /* the click belongs to the select underneath */
}

.jp-form-select .caret svg {
	display: block;
	width: 15px;
	height: 8.91px;
}

.jp-form-select .caret svg path {
	fill: var(--jpSlate4);
}

/* An unchosen select shows its placeholder option, which should read as a
   placeholder and not as an answer. Scoped to the select on purpose: a bare
   :invalid also matches a text field that is required and empty — and, worse,
   one holding a half-typed email — greying type the reader is looking at. */
.jp-form-select select:has(option[value=""]:checked) {
	color: var(--jpSlate3);
}

.jp-form-select select option {
	color: var(--jpIndigo);
}

/* ---- file: a styled label over a visually-hidden input.
   The native control renders its own button and filename, neither of which
   can be styled and both of which appear in the BROWSER's language — an
   English "Choose file" on a Japanese form. The input is hidden the
   accessible way (clipped, not display:none) so it stays focusable and a
   screen reader still announces a file input; the <label for> is the visible
   control and jp-careers-form.js adds Enter/Space to it. */
.jp-form-file {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.jp-form-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A text link, not a pill (Adam, 22 Aug). The brand's rule for a control that
   acts on the CURRENT page is cobalt and underlined — a pill would have read
   as a third button on a page that already has two, and as the equal of the
   submit beside it. The icon is Material Icons `upload_file`, inlined in
   build.py; only the TEXT carries the underline, so the rule does not run
   under the glyph. */
.jp-form-file-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.6;
	color: var(--colorThird);
}

.jp-form-file-btn span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jp-form-file-btn:hover span {
	text-decoration-thickness: 2px;
}

.jp-upload-icon {
	flex: none;
	width: 20px;
	height: 20px;
	fill: currentColor;
	/* the glyph's optical centre sits a shade above the text's */
	margin-top: -1px;
}

/* the input is off-screen, so its focus ring has to be drawn on the label */
.jp-form-file-input:focus-visible + .jp-form-file-btn {
	outline: 2px solid var(--colorThird);
	outline-offset: 4px;
	border-radius: 2px;
}

.jp-form-file-name {
	font-size: 15px;
	line-height: 1.6;
	color: var(--jpSlate3);
	word-break: break-all;    /* a long filename must not push the layout wide */
}

.jp-form-file-name.has-file {
	color: var(--jpIndigo);
}

.jp-form-hint {
	margin-top: 8px;
}

/* ---- consent checkbox: a drawn box, since the native one cannot be
   coloured consistently across browsers. The real input stays in the DOM
   and drives every state through :checked / :focus-visible. */
.jp-form-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.jp-form-check input {
	position: absolute;
	opacity: 0;
	width: 20px;
	height: 20px;
	margin: 0;
}

.jp-form-box {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;      /* optical centring against the first line of text */
	background-color: #fff;
	border: 1px solid var(--jpSlate2);
	border-radius: 5px;
	position: relative;
}

.jp-form-check input:checked + .jp-form-box {
	background-color: var(--colorThird);
	border-color: var(--colorThird);
}

.jp-form-check input:checked + .jp-form-box::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.jp-form-check input:focus-visible + .jp-form-box {
	outline: 2px solid var(--colorThird);
	outline-offset: 2px;
}

.jp-form-check-text {
	font-size: 15px;
	line-height: 1.8;
	color: var(--jpSlate5);
	word-break: normal;
	line-break: strict;
}

.jp-form-check-text a {
	color: var(--colorThird);
	text-decoration: underline;
	text-underline-offset: 2px;
	/* The sentence around it breaks normally — it is one long kanji-and-kana
	   run with no 文節 a browser can find, so keep-all there would overflow a
	   phone. The LINK is different: プライバシーポリシー is a name, and
	   breaking it across two lines (プライバシーポ / リシー) reads as two
	   half-words and cuts the underline in half. It is short enough to hold
	   whole at 320px, so the break moves in front of it instead. */
	word-break: keep-all;
}

.jp-form-consent {
	margin-top: 32px;
}

/* ---- errors */
.jp-form-error {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--jpRed);
	word-break: normal;
	line-break: strict;
}

/* empty until the script fills it, and an empty <p> should take no room */
.jp-form-error:empty {
	display: none;
}

.jp-form-field.is-invalid .jp-form-input {
	border-color: var(--jpRed);
	box-shadow: inset 0 0 0 1px var(--jpRed);
}

.jp-form-field.is-invalid .jp-form-box {
	border-color: var(--jpRed);
}

.jp-form-summary {
	margin: 0 0 24px;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--jpRed);
	background-color: rgba(255, 75, 63, 0.07);
	border-left: 3px solid var(--jpRed);
	border-radius: 5px;
	word-break: normal;
	line-break: strict;
}

/* ---- submit and the review note */
.jp-form-submit {
	margin-top: 32px;
}

.jp-form-submit .btn {
	cursor: pointer;
	font-family: inherit;
}

.jp-form-demo-note {
	margin-top: 16px;
}

/* The onward CTA is a separate errand from the form, and a card makes that
   plainer than a button did — 28px was the gap between two related pills.
   Scoped to the form page so careers.html keeps the tighter figure Adam set
   for its two pills (22 Aug). */
.page-careers .jp-careers-1col.jp-careers-has-form .news-listing-col
	.btn-wrap.jp-careers-cta {
	margin-top: 60px;
}

/* A touch more on narrow screens, where the card is taller and the CTA has
   further to travel from it. */
@media (max-width: 991px) {
	.page-careers .jp-careers-1col.jp-careers-has-form .news-listing-col
		.btn-wrap.jp-careers-cta {
		margin-top: 76px;
	}
}

/* ---- confirmation, in place of the form.
   `in place of` literally: the heading, the intro and the required-note all
   describe a form that has gone, so once sent the confirmation is the only
   thing left in the block — and with nothing above it, the rule that would
   part it from the form has nothing to part. */
.jp-form-thanks {
	padding: 28px 0 4px;
	border-top: 1px solid var(--jpSlate2);
}

.jp-careers-form-wrap.is-sent > :not(.jp-form-thanks) {
	display: none;
}

.jp-careers-form-wrap.is-sent .jp-form-thanks {
	padding-top: 0;
	border-top: 0;
}

.jp-form-thanks:focus,
.jp-form-thanks:focus-visible {
	/* focus is moved here on submit so the message is announced; it is a
	   region, not a control, so it should not draw a ring */
	outline: none;
}

.jp-form-thanks p {
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
	color: var(--jpSlate5);
	line-break: strict;
}

/* ---- About: the closing photograph --------------------------------------
   Adam's own shot replaces the export's stock office scene. On desktop it
   needs nothing: the subject sits right of centre, the quote sits left, and
   the export's own scrim — a left-to-right navy wash over the first 70% —
   carries the white type at better than 6:1.

   Narrow screens are a different picture, literally. `cover` on a portrait
   box scales the photo by its HEIGHT and crops the sides, so at 390px the
   centred crop showed the back of the second person's head and cut the
   subject's face off the right edge — and the quote, which runs the full
   width there rather than sitting in a left column, ran past the 70% scrim
   onto bare highlit wall (2.1:1, unreadable).

   So below 992 the crop pans right to hold the subject's face, and the scrim
   turns through 90°: a top-down wash, full width, dark where the quote sits
   and clear by the time it reaches him. Measured, not eyeballed — see the
   contrast figures in the build notes. */
@media (max-width: 991px) {
	.page-about [data-barba-namespace="20th-anniversary"] .bottom-banner-section .bg-image {
		background-position: 76% center;
	}

	.page-about [data-barba-namespace="20th-anniversary"] .bottom-banner-section .bg-image::before {
		width: 100%;
		background: linear-gradient(180deg,
			rgba(27, 44, 70, 0.86) 0%,
			rgba(27, 44, 70, 0.78) 30%,
			rgba(27, 44, 70, 0.30) 52%,
			rgba(27, 44, 70, 0) 66%);
	}
}

/* 数字で見る */
.global-private-equity-section .statistic-wrapper {
	justify-content: center;
}

/* ---- Connection points --------------------------------------------------
   The mark that sits where the grid's rules cross: a square with a disc
   bitten out of each corner, so it reads as the negative space between four
   rounded cells. The export draws it with an image
   (`content: url(images/global-equity-border.svg)`), which makes each one a
   replaced element — fixed 32px whatever the type scale, one more request,
   and its #cdc8c2 fill frozen in the file where no stylesheet can reach it.

   Rebuilt here in CSS with the same geometry, exactly. The source is a 32×32
   box whose four arcs are quarter-circles of r16 centred on its corners
   (verified against the SVG's own bezier handles: k = 9 ≈ 0.5523 × 16). Four
   radial gradients, one per quadrant, each knocking a corner disc out of its
   own 16×16 tile, reproduce it to the pixel — and the colour becomes a
   variable the rest of the sheet can drive. The 0.2px feather across the
   arc keeps the curve from stair-stepping without fattening it: the arc
   runs nearly horizontal where it meets the rule, so every extra 0.1px of
   radial softness there spreads sideways into several visible pixels.

   `content: ""` is deliberate: it un-replaces the pseudo-element, so the
   explicit box below is what sizes it. The export's −16.5/−16.7px offsets
   are kept, and they are not fudge: the rules the mark straddles are 1px, so
   its centre belongs half a pixel past the cell edge, on the rule's centre.
   Measured — at a clean −16px the mark sits half a pixel high, and because
   the arc runs nearly horizontal where it meets the rule, that reads as a
   flare several pixels too wide. */
.global-private-equity-wrapper {
	--jpConnect: #cdc8c2;              /* the export's rule colour */
}

.global-private-equity-wrapper .statistic-item::before,
.global-private-equity-wrapper .statistic-item .corner-icon {
	content: "";
	width: 32px;
	height: 32px;
	top: -16.5px;
	right: -16.7px;
	background-image:
		radial-gradient(circle 16px at 0 0,
			#0000 15.9px, var(--jpConnect) 16.1px),
		radial-gradient(circle 16px at 100% 0,
			#0000 15.9px, var(--jpConnect) 16.1px),
		radial-gradient(circle 16px at 0 100%,
			#0000 15.9px, var(--jpConnect) 16.1px),
		radial-gradient(circle 16px at 100% 100%,
			#0000 15.9px, var(--jpConnect) 16.1px);
	background-size: 16px 16px;
	background-position: 0 0, 100% 0, 0 100%, 100% 100%;
	background-repeat: no-repeat;
}

/* the second mark rides the cell's bottom-right corner (export's own rule,
   restated because the shorthand above resets `top`) */
.global-private-equity-wrapper .statistic-item .corner-icon {
	top: auto;
	bottom: -16.5px;
}

/* The export squares off the row's last cell by counting — :nth-child(3n) at
   ≥992, :nth-child(2n) below — which assumed the strip's item count was a
   multiple of both. At three stats the 2-up breakpoint leaves the last one
   alone on its row, and its divider and connection points hung in open
   space beside it. The last cell never needs a right divider at any count,
   so say that directly. */
.global-private-equity-wrapper .statistic-item:last-child {
	border-right: none;
}

.global-private-equity-wrapper .statistic-item:last-child::before,
.global-private-equity-wrapper .statistic-item:last-child .corner-icon {
	display: none;
}

.global-private-equity-section .count-title {
	word-break: keep-all;
	line-break: strict;
	/* at the export's 22px, 投資プロフェッショナル alone overflows the 4-up
	   cell and forces an emergency break mid-katakana; 20px lets the label
	   break at its own space instead */
	font-size: 20px;
}

/* ------------------------------------------------------- 3c. Careers (採用) */
/* the team tiles carry their own white; on slate 1 the outline is noise
   (qualified to outrank .people-listing .team-bg further down this file) */
.page-people .people-listing .team-bg {
	border-color: transparent;
}

/* the video panel between the page title and the overview */
.jp-careers-video {
	/* the blurb sits directly above; give it room */
	margin-top: 40px;
	margin-bottom: 44px;
}

/* The caption breaks only at its own 文節 mark, never mid-word. It also gets
   the same gutter on the right as the export gives it on the left (40px, 30px
   under 1400) — this player sits in a half-width column, where the line would
   otherwise run to the very edge of the frame. */
.jp-careers-video .play-video-btn {
	word-break: keep-all;
	line-break: strict;
	right: 40px;
}

@media only screen and (max-width: 1400px) {
	.jp-careers-video .play-video-btn {
		right: 30px;
	}
}

/* the overview reads as body copy, at the About page's size */
.jp-careers-intro p {
	font-size: 20px;
	line-height: 1.9;
}

/* The export's date/tag spans are pills — rounded, with room under them for
   a background that is never drawn. On a job listing the date is just a line
   above the title, so: square, and closer to it. */
.jp-job .news-date span {
	border-radius: 0;
	margin-bottom: 0;
}

.jp-job .news-title a {
	font-family: var(--secondayFont);
	font-weight: 600;
}

/* Each posting is a card, like the team tiles on the people page: white on
   the page's slate 1, 10px corners, the same 10px apart. The listing column
   loses the export's divider rule and its indent, so the cards run the full
   width of their column. */
.jp-job {
	padding: 28px 24px;
	border-radius: 10px;
	background: #fff;
}

/* the export spaces its news rows 38px apart; these sit 10px apart, as the
   team tiles do */
.news-listing-wrap .jp-job:not(:last-child) {
	margin-bottom: 10px;
}

.page-careers .news-listing-col .col-inner {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

/* 100px between the two columns' content: the grid's own gutter is 12px a
   side, so the listing column carries the remaining 76px */
@media (min-width: 992px) {
	.page-careers .news-listing-col .col-inner {
		padding-left: 76px;
	}
}

.jp-job-meta {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
}

.jp-job-meta li {
	font-family: var(--secondayFont);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--jpSlate4);
}

.jp-job-meta li span {
	display: inline-block;
	margin-right: 8px;
	font-weight: 600;
	color: var(--jpSlate3);
}

/* Listing rows: a slash centred in the gap between items. It hangs off the
   END of each item rather than the start of the next one, so when the line
   wraps the slash stays behind on the line above instead of being stranded
   at the start of the new one. (The sidebar variant on the detail page keeps
   its ruled rows instead.) */
.jp-job-meta:not(.jp-job-meta--detail) li {
	position: relative;
}

.jp-job-meta:not(.jp-job-meta--detail) li:not(:last-child)::after {
	content: "/";
	position: absolute;
	right: -14px;
	transform: translateX(50%);
	color: var(--jpSlate3);
}

/* phones: the line wraps and a wrapped item's slash would strand at the
   start of a row — stack the three items instead, no slashes */
@media (max-width: 575px) {
	.jp-job-meta:not(.jp-job-meta--detail) {
		flex-direction: column;
		gap: 4px;
	}

	.jp-job-meta:not(.jp-job-meta--detail) li:not(:last-child)::after {
		display: none;
	}
}

/* in the sidebar: one item per row, above the share links (whose own top
   rule separates the two blocks) */
.jp-job-meta--detail {
	flex-direction: column;
	gap: 0;
	margin: 0 0 28px;
}

/* no rule above Department — the rows' own dividers are enough. Zero top
   margin + first-row padding so Department's text top lines up with the
   body column's first heading across the gutter. */
.detail-content-left .jp-job-meta--detail {
	border-top: none;
	margin-top: 0;
}

.jp-job-meta--detail li:first-child {
	padding-top: 0;
}

/* values read with the body copy: indigo, 16px (labels keep slate3).
   Fixed line-height so the 東京 row's taller CJK line box doesn't make
   its row deeper than the two Latin ones. */
.jp-job-meta--detail li {
	font-size: 16px;
	color: var(--primaryColor);
	line-height: 24px;
	padding: 14px 0;
	border-bottom-color: var(--jpSlate2);
}

/* the share widget below draws its own top rule — one line there, not two */
.jp-job-meta--detail li:last-child {
	border-bottom: none;
}

/* fixed label column so the three values align */
.jp-job-meta--detail li span {
	min-width: 100px;
}

/* The export styles .small-title.title-uppercase as an 18px eyebrow label,
   but the job detail's body copy is 22px — section titles must outweigh it. */
.page-careers .detail-row-wrapper .small-title.title-uppercase {
	font-size: 26px;
	font-weight: 600;
}

/* h6 qualifier: custom.css paints .detail-content-right h6 light blue at
   0-1-1 specificity — match it and win on order (jp.css loads last) */
h6.jp-job-subhead {
	margin: 26px 0 10px;
	font-family: var(--secondayFont);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--primaryColor);
}

.jp-job-list {
	margin: 0 0 8px;
	padding-left: 22px;
}

.jp-job-list li {
	margin-bottom: 8px;
	line-height: 1.8;
	letter-spacing: normal;
}

/* ---------------------------------------------------------------- 4. Investment process tabs */
.strategy-tab-nav .nav-link .process-step,
.strategy-header .process-no {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--jpRed);
	margin-right: 14px;
	vertical-align: 2px;
}

.strategy-header .process-no {
	display: block;
	margin: 0 0 12px;
	font-size: 13px;
}

/* ---------------------------------------------------------------- 5. Contact */
.contact-lead {
	font-size: 18px;
	line-height: 1.9;
	margin-bottom: 18px;
}

/* the same azure as the alert button's fill (--colorSecondary), so the two
   accents on this page read as one */
.contact-lead a {
	color: var(--colorSecondary, #63b4ff);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* (The .office-card address blocks that used to close the contact page were
   removed 22 Aug — the addresses live on the map itself. The .office-name
   entries left in the grouped word-break lists above are dead selectors now;
   harmless, kept so those lists match across sections.) */

.fraud-alert {
	margin-top: 24px;
}

.fraud-alert a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border: 1px solid currentColor;
	line-height: 1.6;
	font-size: 15px;
}

.fraud-alert a:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* ---------------------------------------------------------------- 6. (was: footer regulatory note)
   Removed 22 Aug with the note itself — the live site carries the 金商
   registration in the page body only, not the footer. The surviving copy is
   .jp-reg-note on approach.html. */

/* ---------------------------------------------------------------- 7. Filters */
.people-filter .dropdown-menu {
	max-height: 60vh;
	overflow-y: auto;
}

.people-filter .dropdown-menu a {
	cursor: pointer;
}

.portfolio-col.is-filtered-out,
.people-grid.is-filtered-out {
	display: none !important;
}

.filter-empty-msg {
	width: 100%;
	padding: 40px 0;
	font-size: 16px;
	opacity: 0.8;
}

/* ---------------------------------------------------------------- 8. Card text fit */
/* Japanese titles run longer than the English they replace — give the team
   and news cards room rather than letting them clip. */
.team-desc h4 span {
	line-height: 1.5;
}

.team-desc h4 small {
	display: block;
	margin-top: 6px;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.team-footer .team-business {
	letter-spacing: 0.04em;
}

.news-title a {
	line-height: 1.7;
}

/* The homepage sitemap block was the one place the leading pass missed: the
   export pins `.sitemap-single-page .sitemap-page-description p` to 1.2 at a
   higher specificity than section 1's rule, and the featured-news date and
   title inherit the same Latin default through a bare <a>. 1.2 is fine for
   Inter's Latin, where ascenders and descenders leave whitespace inside the
   line box, but CJK glyphs fill the full em square — the same ratio reads as
   solid-set. Small-text ratio (1.8) rather than the 1.9 used for running
   copy, so the four columns don't outgrow the panel. */
.sitemap-single-page .sitemap-page-description p,
.sitemap-news-row .news-title-col,
.sitemap-news-row .news-title-col a {
	line-height: 1.8;
}

.sitemap-news-row .news-data {
	line-height: 1.6;
}

@media (max-width: 767px) {
	p, li, .content-text p { line-height: 1.85; }
	.mission-section .mission-quote { font-size: 20px; }
	.portfolio-col .logo-text { font-size: 17px; }
}

/* ============================================================================
   9. Fixes for Japanese running longer than the English it replaced
   ========================================================================== */

/* ---- Primary navigation -------------------------------------------------
   Six Japanese labels plus the site name do not fit at the inherited size,
   and each label was wrapping mid-word. Tighten the scale and forbid wraps. */
/* The export already ramps the nav from 20px to 18px to 15px across
   breakpoints; that ramp is left untouched. All this does is stop the longer
   Japanese labels breaking mid-word and drop the global body tracking, which
   is what was costing the row its width. */
@media (min-width: 992px) {
	.bottom-header .navbar-nav .nav-item > a,
	.bottom-header .navbar-nav .nav-item.site-name > a {
		white-space: nowrap;
		letter-spacing: normal;
	}

	/* The masthead is one flex row: whatever the nav does not use goes to the
	   wordmark. Tightening the gutters buys the logo back some width without
	   changing the type size. No floor is set on the logo — it would push the
	   nav past the container's right edge below 1600. */
	.bottom-header .navbar-nav .nav-item > a {
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* Six Japanese labels still run wider than the export's five English ones, so
   the gutters tighten below 1280 to keep width in the wordmark. */
@media (min-width: 992px) and (max-width: 1279.98px) {
	.bottom-header .navbar-nav .nav-item > a {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* The utility bar sizes itself off its line box; the body rule above would
   otherwise push it from the export's 38.4px to 46.8px. */
.top-header .topLinks .nav-item,
.top-header .topLinks .nav-item > a,
.top-header .topLinks .nav-item > button {
	white-space: nowrap;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: normal;
}

/* ---- Hero ---------------------------------------------------------------
   The headline is a 22-character Japanese sentence where the English was
   four short words; at the inherited size it overran the grid column. */
.banner-section .banner-title {
	/* Japanese allows a break between almost any two characters, so left alone
	   the browser splits 価値創造 and コミットメント mid-word. keep-all closes
	   every break inside the run; the <wbr>s in the markup re-open exactly the
	   文節 boundaries. The line then reflows to the viewport like any other
	   headline, but can only land where it should. */
	word-break: keep-all;
	overflow-wrap: normal;
	/* capped at the theme's own h2 size; the 4.1vw slope reaches it at 1756px */
	font-size: clamp(24px, 4.1vw, 72px);
	line-height: 1.4;
	max-width: none;
}

/* ---- Home intro ---------------------------------------------------------
   jp-typeset.js restores this block after SplitText; the stagger is replaced
   by a single fade-up so nothing depends on word boundaries. */
.intro-section-txt.jp-typeset {
	visibility: visible !important;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s ease, transform .8s ease;
}

.intro-section-txt.jp-typeset.jp-revealed {
	opacity: 1;
	transform: none;
}

.intro-section-txt.jp-typeset .highlight-text {
	/* color: var(--jpRed); */
	font-weight: inherit;
	display: inline;
}

/* Once jp-typeset has split the block into per-line spans it drives the
   reveal itself, so the block-level fade above must stand down. */
.intro-section-txt.jp-typeset.jp-anim {
	opacity: 1;
	transform: none;
	transition: none;
}

.intro-section-txt .jp-il-wrap {
	display: block;
	/* the lines start a full column-width to the right; clip that travel
	   rather than letting it widen the document. `clip` (not `hidden`) so the
	   vertical axis stays visible — `hidden` on one axis computes the other to
	   `auto` and would crop the 45px mincho line boxes. */
	overflow-x: clip;
	overflow-y: visible;
}

.intro-section-txt .jp-il {
	display: block;
	will-change: transform, opacity;
}

/* The characters of the highlighted run carry their own colour now — the
   .highlight-text wrapper is dissolved by the split.

   Colour only — no weight change. The inherited animation adds italic here,
   which Shippori Mincho has no cut for, so this used to carry a 500 instead.
   That reads as invisible on the Japanese (Shippori's 400 and 500 are close
   at display size) but Martina Plantijn has a true Medium, so the Latin
   inside the run — "PE" — came out a full step heavier than the "2006"
   above it. Emphasis is the red alone. */
.jp-ch--hl {
	color: var(--jpRed);
	font-weight: inherit;
}

/* ---- Portfolio cards ----------------------------------------------------
   The wordmark carries the company name visually; the heading stays in the
   document for semantics and assistive tech. */
.portfolio-title.visually-hidden-name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.portfolio-col .portfolio-content {
	min-height: 0;
}

/* ---- Investment process tabs -------------------------------------------
   The pill button is the small-screen disclosure for the tab list, which is
   already visible from 768px up. */
@media (min-width: 768px) {
	.strategy-tab-section .strategy-tab-nav > button {
		display: none;
	}
}

/* ---- Contact -------------------------------------------------------------
   The world map that used to fill this section is gone (two offices, both in
   Japan), so the section no longer needs map-sized headroom. */
.contact-section .section-inner {
	padding-bottom: 80px;
}

.contact-section .contact-content-main {
	min-height: 0;
}

.contact-section .contact-wrapper {
	margin-bottom: 0;
}

.contact-section .title-wrap {
	margin-bottom: 48px;
}

/* The inherited margin pushed this block below the world map that used to
   sit behind it. With the map gone the copy sat 300px adrift. */
.contact-section .contact-content-wrap {
	margin-top: 0 !important;
}

.contact-section {
	min-height: 0;
}

/* ---- Hero ---------------------------------------------------------------
   No scrim is added over the banner. The artwork is clipped into the arrow
   shape by `#clipImage-1` and the inherited SVG `gradient1` does the
   darkening *inside* that shape; a full-width overlay sits outside the clip
   and reads as a grey band across the bottom of the screen. */
.banner-section .container {
	position: relative;
	z-index: 3;
}

/* On the unscrolled masthead (homepage over the hero), the rule under the
   nav — the border-bottom of .navbar-collapse — must sit ON the wordmark's
   baseline, with the nav items landing on it. The export leaves it 4–8px
   high. The wordmark baseline is at 80.04% of the logo's rendered height
   (the final l bottoms out at y 59.85 of the SVG's 74.77 viewBox); these
   offsets close the gap at each masthead step: logo 60px + 20px nav ≥1400,
   60px + 18px nav to 1366, 50px logo to 1200. Below 1200 the 40px logo
   already aligns, and below 992 the nav is the hamburger. The collapse is
   already position:relative, and .scrolled drops the rule and this offset
   together (its `all .5s` transition eases the shift out). */
@media (min-width: 1400px) {
	header:not(.scrolled) .bottom-header .navbar-collapse { top: 6.5px; }
}

@media (min-width: 1366px) and (max-width: 1399px) {
	header:not(.scrolled) .bottom-header .navbar-collapse { top: 7.7px; }
}

@media (min-width: 1200px) and (max-width: 1365px) {
	header:not(.scrolled) .bottom-header .navbar-collapse { top: 4.7px; }
}

/* The export sizes the hero video for ordinary screens (1920×1080 with
   viewport minimums) but its widescreen rule caps the iframe's min-width at
   180vh — so on anything wider than 1.8× its height (any 21:9 monitor) the
   video stops covering the clip shape and a strip of poster frame shows on
   each side. This rule exists only past that threshold, so nothing changes
   at ordinary sizes: 102vw always spans the shape, and 57.4vw keeps the
   iframe at 16:9 so Vimeo never letterboxes inside it.

   The poster frame MUST take the same box. It is the video's first frame, so
   any difference in size shows as a jump the moment Vimeo starts playing —
   and with the iframe alone in this rule the poster kept the 320vh/180vh
   figures above and rendered 4608×2592 against the video's 3509×1975, a
   third larger (Adam, 22 Aug: "much larger than the video"). Both boxes are
   16:9 and both fill by cover, so identical boxes mean identical framing. */
@media (min-aspect-ratio: 9/5) {
	.banner-section iframe,
	.banner-bg-inner .bg-image {
		min-width: 102vw;
		min-height: 57.4vw;
	}
}

/* ---- Detail-page template notice ---------------------------------------- */
.template-note {
	margin-top: 40px;
	padding: 16px 20px;
	border-left: 3px solid var(--jpRed);
	background: rgba(255, 75, 63, 0.06);
	font-size: 14px;
	line-height: 1.9;
}


@media (max-width: 991px) {
	.banner-section .banner-title {
		font-size: clamp(24px, 6.4vw, 32px);
		line-height: 1.45;
		max-width: none;
	}
}

/* The export caps the caption column at 60% on short landscape screens to keep
   it clear of the clipped artwork. The Japanese headline's first line is 14
   characters and needs more measure than that leaves. */
@media (orientation: landscape) and (max-width: 1200px) {
	.banner-section .banner-caption > [class*="col-"] {
		max-width: 88%;
	}
}

/* ---------------------------------------------------------------- 10. Footer content pages */
.text-page .text-page-lead {
	font-size: 19px;
	line-height: 1.95;
	margin-bottom: 40px;
}

.text-page .text-page-heading {
	font-family: var(--primaryFont);
	margin: 48px 0 20px;
	padding-top: 32px;
	border-top: 1px solid var(--jpSlate2);
}

.text-page .text-page-list {
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
}

.text-page .text-page-list li {
	position: relative;
	padding: 0 0 22px 32px;
	line-height: 1.95;
}

.text-page .text-page-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 15px;
	width: 16px;
	height: 2px;
	background: var(--jpRed);
}

.text-page a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* A legal heading is not a hero headline — these two pages take a step down
   from the display scale used by the primary pages. */
.text-page-title .section-title {
	font-size: clamp(26px, 3vw, 44px);
	line-height: 1.5;
	max-width: 22em;
}

/* ---------------------------------------------------------------- 11. Team cards (no headshots) */
/* No photography exists for the Japanese team, and the card reads better as a
   name block than as a placeholder image. Name first in the serif, title
   under it, English name last in the sans. */
/* One value drives both axes, so the grid is square by construction rather
   than by two numbers that happen to agree. The export sets the column
   padding to 5px a side (a 10px gap) and a 30px bottom margin, which made the
   rows read as bands; both are replaced here. */
.people-listing {
	--jpGridGap: 10px;
	row-gap: var(--jpGridGap);
}

.people-listing .people-grid {
	padding-left: calc(var(--jpGridGap) / 2);
	padding-right: calc(var(--jpGridGap) / 2);
	margin-bottom: 0;
}

.people-listing .team-bg {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px 24px;
	border: 1px solid var(--jpSlate2);
	border-radius: 10px;
	background: #fff;
}

.people-listing .people-detail-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.people-listing .team-desc {
	position: static;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
	background: none;
}

.people-listing .team-desc h4 {
	margin: 0;
	display: block;
}

.people-listing .team-desc h4 span {
	display: block;
	font-family: var(--primaryFont);
	font-size: 21px;
	line-height: 1.45;
	font-weight: 700;
	color: var(--jpIndigo);
	letter-spacing: 0.01em;
}

.people-listing .team-desc h4 small {
	display: block;
	/* 禁則処理: without this the long-vowel mark could open a line —
	   「オペレーティングパートナ / ー、ITスペシャリスト」, which is what these
	   labels were doing. Same rule the headings carry. */
	line-break: strict;
	overflow-wrap: break-word;
	/* the two line boxes already contribute ~10px of half-leading between the
	   name and the title, so this only adds to it — 0 lands the pair at a 10px
	   visual gap, roughly half the name's size */
	margin-top: 0;
	font-family: var(--secondayFont);
	font-size: 15px;
	line-height: 1.7;
	font-weight: 400;
	color: var(--jpSlate4);
	letter-spacing: 0.02em;
}

/* The English name is Latin, so it sets in Inter off the front of the sans
   stack — pinned here so it cannot drift to the Japanese fallback.
   The export absolutely-positions this to the bottom of the card, which
   ignored the card's padding once the card gained a background; `margin-top:
   auto` keeps it bottom-aligned across a row but inside the box. */
.people-listing .team-footer {
	position: static;
	margin-top: auto;
	padding-top: 14px;
	border: 0;
}

.people-listing .team-footer .team-business {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--jpSlate4);
	text-transform: none;
}

.people-listing .team-bg:hover .team-desc h4 span {
	color: var(--jpAzure);
}

/* The filter row sets tight and plain — the JP tracking rules (brow 0.12em,
   body 0.02–0.03em) all read as gappy UI chrome here. */
.portfolio-search,
.portfolio-search * {
	letter-spacing: normal;
}

/* The export runs both the placeholder and the typed value off the same pale
   celestial/slate-3 pair, which reads as disabled next to the rest of the
   listing. Placeholder takes slate 4 (matching the titles), the value typed
   into it takes indigo so it reads as live input. Selectors carry the
   export's own `.portfolio-search-wrap .search-portfolio` prefix so they
   outrank it, and are scoped to the people page. */
.page-people .portfolio-search-wrap .search-portfolio input.page-search-field {
	color: var(--jpIndigo);
}

.page-people .portfolio-search-wrap .search-portfolio input.page-search-field::placeholder {
	color: var(--jpSlate4);
	opacity: 1;
}

.page-people .filter-wrapper {
	border-top-color: var(--jpSlate2);
}

/* ---- List view -----------------------------------------------------------
   The export's Layout toggle: main.js swaps .list-view onto .people-listing.
   Formatting matches the export's list — full-width rows, thin bottom rule,
   no card box, name in the left half, title in the right half with the
   English name under it (where the export set business/location). */
.people-listing.list-view {
	row-gap: 0;
}

.people-listing.list-view .people-grid {
	display: block;
	flex: none;
	max-width: none;
	width: 100%;
	margin: 0 0 20px;
}

.people-listing.list-view .team-bg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: auto;
	padding: 0 0 20px;
	background: none;
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid #a9a7a8;
}

.people-listing.list-view .team-desc {
	/* one line per row: name | title | English name. The h4's contents join
	   the grid directly (the grid card's column flexbox would otherwise turn
	   the footer's basis into a height). */
	display: grid;
	grid-template-columns: 40% 1fr auto;
	align-items: center;
	column-gap: 24px;
	width: 100%;
	flex: none;
}

.people-listing.list-view .team-desc h4 {
	display: contents;
}

.people-listing.list-view .team-desc h4 span {
	margin: 0;
}

.people-listing.list-view .team-desc h4 small {
	margin: 0;
}

.people-listing.list-view .team-footer {
	/* the export's list rules give .team-business a 60% width and flex the
	   footer we don't need — a plain cell at the row's right end */
	display: block;
	flex: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.people-listing.list-view .team-footer .team-business {
	width: auto;
	text-align: right;
	white-space: nowrap;
}
@media (max-width: 1400px) {
	.jp-careers-intro p{
		font-size: 18px;
	}
}
@media (max-width: 767px) {
	.people-listing.list-view .team-desc {
		grid-template-columns: 1fr;
		row-gap: 4px;
	}
	.people-listing.list-view .team-footer .team-business { text-align: left; }
	.jp-careers-intro p{
		font-size: 16px;
	}
	.jp-careers-boiler{
		margin-top: 60px;
	}
}

@media (max-width: 575px) {
	.people-listing .team-desc h4 span { font-size: 18px; }
}

/* app.css pins this section to 150vh so the copy can sit above a full-bleed
   map. With a real map in the flow it has to size to its content instead. */
.contact-section {
	height: auto;
}

/* The export sets height:100% down this chain so the copy can sit over an
   absolutely-placed world map. That map is gone, so they size to content and
   the section grows to fit the one below. */
.contact-section .container,
.contact-section .contact-wrapper,
.contact-section .contact-content-main {
	height: auto;
}

/* ---------------------------------------------------------------- 12. Contact map */
/* Japan drawn from the amCharts geodata at build time — see make_map.py. The
   pins are HTML over the SVG so their labels stay a readable size as the
   drawing scales. */

/* The map is the page's background: an absolute layer of .contact-section,
   behind the copy. The rail parks the page's load scroll at 100px (the
   prev-page section's pad), so 100px is the window's top edge — and the
   drawing is pulled 5% of its width above it, so Hokkaido's tip runs off the
   top of the page. The crop happens at the glass, behind the fixed header,
   never mid-page. The sea is transparent and the section's own ground shows
   through, so the drawing's other edges are invisible. The right offset
   grows as the viewport narrows so Tokyo's label always clears the right
   edge. */
.jp-map {
	position: absolute;
	top: calc(100px - min(81vw, 1200px) * 0.05);
	right: max(42px, calc(130px - 5.5vw));
	width: min(81vw, 1200px);
	margin: 0;
}

.jp-map-inner {
	position: relative;
}

.jp-map-stage {
	position: relative;
}

.jp-map-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Colours match the office map on the other Bain Capital sites, using the two
   closest brand slates: slate 4 as the sea (already the section's ground) and
   slate 5 for land. No internal borders — the prefectures read as one
   silhouette, as the countries do there. */
.jp-map-land path {
	fill: var(--jpSlate5);
	stroke: none;
}

.jp-map-inset rect {
	fill: none;
	stroke: var(--jpSlate2);
	stroke-width: 1;
	opacity: .35;
}

.jp-map-inset path {
	fill: var(--jpSlate5);
	stroke: none;
}

.jp-map-inset text {
	fill: var(--jpSlate2);
	font-family: var(--secondayFont);
	font-size: 17px;
	opacity: .8;
}

/* the marker the other sites use, in brand red 3 */
.jp-map-marker {
	fill: var(--jpRed);
}

/* ---- contact-2: the ECharts world map (jp-worldmap.js) ---- */
/* full-bleed background layer over the whole section; the sea is the page's
   own slate-4 ground, land is drawn slate 5 by the chart */
.jp-worldmap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.jp-worldmap-canvas {
	position: absolute;
	inset: 0;
}

/* the map is draggable — with a mouse; see canRoam() in jp-worldmap.js */
@media (hover: hover) and (pointer: fine) {
	.jp-worldmap-canvas {
		cursor: grab;
	}

	.jp-worldmap-canvas:active {
		cursor: grabbing;
	}
}

/* the zoom buttons stay on touch — they work without roam */

/* location cards — the baincapital.com locations-map popup, rebuilt.
   The text is selectable: echarts marks its tooltip box user-select:none,
   so the card opts back in — addresses and numbers want copying. */
@keyframes jp-wm-card-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes jp-wm-card-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

.jp-wm-card.is-leaving {
	animation: jp-wm-card-out .12s ease both;
	pointer-events: none;
}


.jp-wm-card {
	animation: jp-wm-card-in .12s ease both;
	position: relative;
	min-width: 240px;
	max-width: min(86vw, 700px);
	/* real padding, uniform on all sides — the title's top MARGIN collapsed
	   through this wrapper and shoved the whole card 18px down inside the
	   white tooltip box, which is why the close button kept reading as
	   low-set no matter what its own offsets said */
	padding: 16px 16px 0;
	font-family: var(--secondayFont);
	white-space: normal;
	user-select: text;
	-webkit-user-select: text;
	cursor: auto;
}

.jp-wm-card-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jpIndigo);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jp-wm-card-close svg {
	width: 6px;
	height: 6px;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	fill: none;
	overflow: visible;
}

.jp-wm-card-city {
	margin: 0 30px 6px 0;
	font-family: var(--primaryFont);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--jpIndigo);
}

.jp-wm-card-offices {
	display: flex;
	gap: 24px;
	padding: 0 0 14px;
}

.jp-wm-office {
	min-width: 150px;
}

.jp-wm-office-label {
	display: block;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.5;
	color: var(--jpIndigo);
}

.jp-wm-line {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--jpIndigo);
	font-feature-settings: "tnum" 1;
}

.jp-wm-maps {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--jpAzure);
}

.jp-wm-maps:hover {
	text-decoration: underline;
	color: var(--jpAzure);
}

/* footer: local day / date / time with a live analog clock. Day face
   (07:00–18:59 local) light with red hands; night indigo with light hands. */
.jp-wm-card-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	/* bleeds through the card's side padding to the box edges */
	margin: 0 -16px;
	padding: 12px 16px;
	background: #bbddfc;   /* brand cloud blue, as on the source cards */
}

.jp-wm-clock {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
}

.jp-wm-clock-face {
	fill: var(--jpIndigo);
	stroke: none;
}

.jp-wm-clock-ticks path,
.jp-wm-clock-h,
.jp-wm-clock-m,
.jp-wm-clock-s {
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	fill: none;
}

.jp-wm-clock-s {
	stroke-width: 1.4;
}

/* day face: white disc with an indigo rim and indigo hour marks, red hands */
.jp-wm-foot--day .jp-wm-clock-face {
	fill: #fff;
	stroke: var(--jpIndigo);
	stroke-width: 2.4;
}

.jp-wm-foot--day .jp-wm-clock-ticks path {
	stroke: var(--jpIndigo);
}

.jp-wm-foot--day .jp-wm-clock-h,
.jp-wm-foot--day .jp-wm-clock-m,
.jp-wm-foot--day .jp-wm-clock-s {
	stroke: var(--jpRed);
}

.jp-wm-time span {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	color: var(--jpIndigo);
	font-feature-settings: "tnum" 1;
}

.jp-wm-clock {
	width: 55px;
	height: 55px;
}

/* The legend is also the view switch — the red row flies to Japan, the blue
   one out to every office. It sits 250px down the page, not tight under the
   masthead: the scroll rail parks the load scroll at 100px and the header is
   fixed, so anything higher lands behind it. */
.jp-worldmap-legend {
	position: absolute;
	top: 250px;
	right: max(42px, calc(130px - 5.5vw));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	pointer-events: auto;
	z-index: 2;
}

.jp-wm-legend-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.jp-wm-legend-mark {
	width: 16px;
	height: 15px;
	flex: 0 0 auto;
}

.jp-wm-legend-mark--japan {
	fill: var(--jpRed);
}

.jp-wm-legend-mark--world {
	fill: #63b4ff;                     /* celestial blue, as the markers */
}

.jp-wm-legend-text {
	font-family: var(--secondayFont);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.4;
	color: #fff;
	/* the legend sits over land as often as over sea */
	text-shadow: 0 1px 6px rgba(15, 20, 45, .55);
}

.jp-wm-legend-row:hover .jp-wm-legend-text,
.jp-wm-legend-row:focus-visible .jp-wm-legend-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 991px) {
	/* below 992 the rail parks at 60px and the header is shorter */
	.jp-worldmap-legend {
		top: 170px;
		right: 16px;
	}
}

/* On a phone the legend is pinned to the bottom of the window instead of
   parked under Japan. It is the page's only view switch and the map is a
   full-page background, so it has to travel with the reader — parked, it
   scrolled away and the world view became undiscoverable. `fixed` is safe
   here: ScrollSmoother falls back to native scrolling at this width, so
   there is no transformed ancestor to trap it. jp-worldmap.js stands it down
   once the map layer has scrolled past, so it never floats over the footer. */
@media (max-width: 767px) {
	.jp-worldmap-legend {
		position: fixed;
		top: auto;
		bottom: 22px;
		gap: 12px;
		transition: opacity .25s ease;
	}

	.jp-worldmap-legend.is-off {
		opacity: 0;
		pointer-events: none;
	}
}

.jp-map-pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* The label sits beside the triangle, never over it: the offset is measured
   from the marker's centre (50% of the hotspot), plus half the marker's
   rendered width, plus a gap. --jp-marker-half is a bare number of cqw units
   set on .jp-map by the build, so the clearance scales with the drawing. */
@supports (width: 1cqw) {
	.jp-map-stage { container-type: inline-size; }
	.jp-map-pin--start .jp-map-name { left: calc(50% + var(--jp-marker-half) * 1cqw + 12px); }
	.jp-map-pin--end   .jp-map-name { right: calc(50% + var(--jp-marker-half) * 1cqw + 12px); }
}

.jp-map-pin-html {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

.jp-map-hotspot {
	display: block;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.jp-map-name {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-family: var(--secondayFont);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #fff;
	/* the labels sit over land as often as over sea */
	text-shadow: 0 1px 6px rgba(15, 20, 45, .55);
}

/* px fallback for the cqw rule above — 50% is the marker's centre */
.jp-map-pin--start .jp-map-name { left: calc(50% + 29px); }
.jp-map-pin--end   .jp-map-name { right: calc(50% + 29px); }

.jp-map-tip {
	position: absolute;
	left: 50%;
	bottom: calc(50% + 26px);
	transform: translateX(-50%) translateY(6px);
	min-width: 236px;
	padding: 16px 18px;
	border-radius: 10px;
	background: #fff;
	color: var(--jpIndigo);
	box-shadow: 0 10px 30px rgba(15, 20, 45, .28);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 3;
	text-align: left;
}

.jp-map-pin-html:hover .jp-map-tip,
.jp-map-hotspot:focus-visible + .jp-map-tip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.jp-map-tip-name {
	display: block;
	font-family: var(--primaryFont);
	font-size: 17px;
	margin-bottom: 8px;
}

.jp-map-tip-line,
.jp-map-tip-tel {
	display: block;
	font-family: var(--secondayFont);
	font-size: 13px;
	line-height: 1.8;
	color: var(--jpSlate4);
}

.jp-map-tip-tel {
	margin-top: 8px;
	font-feature-settings: "tnum" 1;
}

@media (max-width: 991px) {
	/* below 992 the rail parks the load scroll at 60px, not 100 — the
	   first-child pad shrinks with it — so the top edge moves to match,
	   again pulled up 5% of the drawing's width (here 100vw) */
	.jp-map { top: calc(60px - 5vw); right: 0; width: 100%; }
	/* no room here for copy over the map: push the intro below its bottom
	   edge (60px + 89vw from the page top) minus the section's 250px pad */
	.jp-contact-top { margin-top: calc(89vw - 154px); }
}

@media (max-width: 767px) {
	/* the section pad drops to 150px here, so the push grows to compensate */
	.jp-contact-top { margin-top: calc(89vw - 54px); }

	/* On a phone the world map's page reads top-down: title and intro first,
	   then the drawing, then the offices. So the copy is NOT pushed below the
	   map here — instead it reserves the room beneath itself, measured in
	   jp-worldmap.js (placePhoneCopy). */
	.contact-section:has(.jp-worldmap) .jp-contact-top {
		margin-top: 0;
	}
	.jp-map-name { font-size: 12px; }
	/* the drawing runs to the right edge here, so Tokyo's label moves to the
	   marker's land side instead of running off the glass */
	.jp-map-pin--start .jp-map-name { left: auto; right: calc(50% + 16px); }
	.jp-map-tip { min-width: 180px; padding: 13px 15px; }
}

/* ---- Contact layout ------------------------------------------------------
   The map is the page's background (see above); the heading and the two
   contact lines sit over its empty top-left corner. Offices below, then the
   alert as a brand button. The ground is slate 4 end to end — the section
   already paints it, and the body is set to the same so its different blue
   can never show above or below. */
body:has(.contact-section) {
	background-color: var(--jpSlate4);
}

.contact-section {
	background-color: var(--jpSlate4);
}

/* The copy layers sit over the map background, and the export's stagger
   animation leaves a transform on .contact-wrapper and .contact-content-main
   — each becomes a stacking context that paints (and hit-tests) above the
   absolutely-placed map, swallowing every hover meant for the markers. The
   boxes go transparent to the pointer; the actual content — the intro with
   its mailto links, the office cards, the alert button — takes events back. */
.jp-contact-top {
	position: relative;
}

.contact-section .contact-wrapper,
.contact-section .contact-content-main,
.jp-contact-top {
	pointer-events: none;
}

/* The copy layer sits over the full-page map and is mostly empty, so it lets
   pointer events through (.jp-contact-top above); the text takes them back.
   Only the intro is left to name — the office cards and the locations button
   that used to be listed here were removed 22 Aug. */
.jp-contact-intro {
	pointer-events: auto;
}

/* On the world-map variant the markers can land anywhere, including behind
   the intro block — which is 42% of the width and mostly empty. Narrow it to
   its own text so the map is hoverable and draggable around it. */
.contact-section:has(.jp-worldmap) .jp-contact-intro {
	pointer-events: none;
}

.contact-section:has(.jp-worldmap) .jp-contact-intro .section-title,
.contact-section:has(.jp-worldmap) .jp-contact-intro p {
	pointer-events: auto;
}
@media(max-width:1400px){
	.jp-style-name,
	.jp-styles-list li p
	{
		font-size:18px
	}

}
@media (min-width: 992px) {
	.jp-contact-intro {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 42%;
	}

	/* The map is out of the flow, so the copy block reserves its room. That
	   reservation used to be measured off the drawing itself — enough height
	   to clear Kyushu and the Okinawa inset, because the office cards
	   followed underneath. Those cards (and then the locations button) were
	   removed on 22 Aug, so nothing follows the copy any more and the old
	   figure was only holding the footer 700px below the fold.

	   Nothing follows the copy any more, so the reservation moves off the
	   copy block and onto the section itself: the map fills the opening
	   screen and the footer sits entirely below the fold, reached by
	   scrolling (Adam, 22 Aug).

	   Height is set on the section rather than computed from the copy
	   because the copy's version had to subtract the section's padding, and
	   that padding is not constant — at 1024 and below the export uses
	   different figures, which left 41px of footer showing there. Stated on
	   the section it holds at every width.

	   The +102px is the export's own: the scroll rail parks the load
	   position at 100px and the section carries a -1px margin, so its top
	   edge starts 101px above the viewport, and the footer section carries the
	   same -1px margin — 102 covers both. A plain 100vh left the
	   footer intruding ~102px on first paint. Desktop-only — below 992 the
	   rail parks at 60px and jp-worldmap.js places the copy itself.

	   Second term: a 16:9 floor. The map is exactly viewport-wide, so 9/16 of
	   that is 56.25vw. On a short, wide window the first term alone let the
	   drawing flatten past 16:9 — 2.05:1 at 1440×600 — which crops the
	   Pacific and pushes Japan's markers toward the legend. Whichever is
	   taller wins, so the fold rule governs ordinary windows and the ratio
	   takes over once the viewport gets short (below about 1.78:1 minus the
	   102px, i.e. under ~708px tall at 1440 wide). */
	.contact-section {
		min-height: max(calc(100vh + 102px), 56.25vw);
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.jp-contact-intro { width: 44%; }
}

/* No margin of its own: the title inside carries the export's mb-60 ladder
   (60px, 40 under 1200, 30 on phones) exactly like every other page title —
   the wrap's old 40px stacked on the title's 40 and opened an 80px hole
   (Adam, 22 Aug). */
.jp-contact-intro .title-wrap {
	margin-bottom: 0;
}

/* (The .jp-contact-cta block — the locations button's spacing, pill padding
   and white-on-slate hover — was removed 22 Aug with the button itself.) */

@media (max-width: 991px) {
	.jp-contact-intro { margin-bottom: 32px; }
}

/* Phone, world-map page only. The copy sits over the top of the drawing, so
   every pixel it gives back is a pixel Japan moves up: the block's own
   bottom margin is redundant now that PHONE_GAP in jp-worldmap.js sets the
   copy-to-Japan distance on its own. (The old 4px title-gap override is
   gone: the title's mb-60 ladder already drops to 30px here, which is the
   phone measure every other page title uses.) */
@media (max-width: 767px) {
	.contact-section:has(.jp-worldmap) .jp-contact-intro {
		margin-bottom: 0;
	}
	.jp-style-name,
	.jp-styles-list li p
	{
		font-size:16px
	}

}









/* Anniverary Page */
.anniversary-banner-section .banner-image-col {
    margin-right: calc((100vw - 1430px + 15px) / -2);
    width: calc((58.33% + (100vw - 1430px + 15px) / 2));
    padding-right: 0;
    margin-top: -100px;
}

.anniversary-banner-section .banner-image-col img {
    width: 100%;
}

.anniversary-banner-section .row {
    /* align-items: center; */
}

.anniversary-banner-section .banner-title {
    font-size: 4.5vw;
    margin-left: 0px;
    margin-right: -150px;
    margin-bottom: 100px;
}

.anniversary-banner-section .banner-title span {
    display: block;
    display: inline-block;
    margin-left: -60px;
}

.anniversary-banner-section .banner-title .year-text {
    display: block;
    font-size: 420px;
    font-style: italic;
    line-height: 0.8;
    margin-left: 0;
    font-weight: 300;
    margin-left: -30px;
    color: #1080ff;
	font-family: var(--primaryFont);
    margin-top: -.03em;

}

.banner-title .year-text sup {
    top: -.22em;
    font-size: .75em;
}

.anniversary-banner-section .banner-title .bottom-text {
    display: block;
    display: block;
    margin-left: 180px;
    margin-top: -89px;
}

.anniversary-banner-section .banner-content-col .col-inner {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.banner-content-col .col-inner>div {
    width: 100%;
}

.banner-content-col .banner-caption-text {
    font-size: 45px;
    font-weight: 500;
    margin-top: auto;
    margin-right: 5%;
    margin-bottom: 150px;

}

.anniversary-banner-section .title-wrap {
    margin-top: 20%;
}

.section-title span {
    color: #1080ff;
}

.anniversary-col .anniversary-grid-title {
    font-weight: 700;
    margin-bottom: 20px;
    font-family: var(--secondayFont);
}

.anniversary-col .anniversary-grid-title,
.anniversary-col .content-wrap {
    font-size: 22px;
}

.anniversary-col .content-wrap p {
    margin-bottom: 2rem;
}

.anniversary-col {
    padding-right: 30px;
    margin-bottom: 30px;
}

section.video-section {
    padding: 180px 0;
}

.investment-section .portfolio-row .portfolio-col a {
    padding: 30px 25px;
    display: block;
    border-radius: 10px;
    min-height: 100%;
    background-color: #1b2c46;
    border: 1px solid #315d90;
    border-right: none;
    border-top: none;
    display: flex;
    flex-direction: column;
}

.investment-section .portfolio-row:not(.list-view) .portfolio-col {
    height: 320px;
    max-height: 320px;
}

.investment-section .portfolio-row:not(.list-view) .portfolio-col.case-study-grid {
    height: 640px;
    max-height: 640px;
    min-height: 640px;
}

.investment-section .portfolio-row .portfolio-col:last-child:not(:nth-child(5)) a {
    border-right: 1px solid #315d90;
}

.investment-section .portfolio-row .portfolio-col a:hover {
    background-color: #fff;
}

.investment-section .portfolio-col a:hover .portfolio-title,
.investment-section .portfolio-col a:hover .year-text {
    color: var(--primaryColor);
}

.investment-section .portfolio-col a:hover .logo-wrap img {
    filter: none;
}

.investment-section .portfolio-row .portfolio-col .col-inner {
    overflow: hidden;
    position: relative;
    height: 100%;
    background-color: #315d90;
}

.investment-section .portfolio-col .logo-wrap img {
    max-width: 100%;
    max-height: 80%;
    width: 80%;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
}

.investment-section .portfolio-col .logo-wrap img.dark-logo {
    display: none;
}

.investment-section .portfolio-col a:hover .logo-wrap img.dark-logo {
    display: block;
}

.investment-section .portfolio-col a:hover .logo-wrap img.white-logo {
    display: none;
}

.investment-section .portfolio-col .logo-wrap {
    position: relative;
    padding: 0 20px 20px;
    height: 190px;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.investment-section .portfolio-col .portfolio-content {
    margin-top: auto;
}

.investment-section .portfolio-col .portfolio-title {
    color: #fff;
    font-size: 18px;
    font-family: var(--secondayFont);
    font-weight: 700;
    margin-bottom: 0;
}

.investment-section .portfolio-col .year-text {
    font-size: 15px;
    color: #fff;
}

.investment-section .home-portfolio-row .portfolio-col a {
    padding: 45px 30px;
    background-color: rgb(34, 64, 100);
    border-radius: 5px;
    overflow: hidden;
    display: block;
    position: relative;
    transform-style: preserve-3d;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    height: 100%;
    min-height: 180px;
    max-height: 185px;
}

.investment-section .home-portfolio-row .portfolio-col a {
    align-items: center;
}

.investment-section .home-portfolio-row .portfolio-col a img {
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
}

.investment-section .home-portfolio-row .portfolio-col a .dark-logo {
    display: none;
}

.investment-section .home-portfolio-row .portfolio-col a:hover { background-color: #ffffff; }

.investment-section .home-portfolio-row .portfolio-col a:hover .white-logo {
    display: none;
}

.investment-section .home-portfolio-row .portfolio-col a:hover .dark-logo {
    display: block;
}

.investment-section .home-portfolio-row {
    margin: 0 -5px;
}

.investment-section .home-portfolio-row .portfolio-col {

    padding: 0 5px;
    margin-bottom: 10px;
}

.investment-section .portfolio-wrapper {
    padding-left: 50px;
}

.investment-grid-col .line-verticle-text {
    position: absolute;
    transform: rotate(-90deg);
    font-size: 18px;
    color: #5d8bbf;
    transform-origin: right;
    top: 0;
    right: 100%;
    left: auto;
    width: 400px;
    text-align: right;
    top: -6px;
    right: calc(100% - 6px);
}

.investment-grid-col .col-inner {
    position: relative;
}

.investment-grid-col .anim-verticle-line {
    height: 100%;
    width: 1px;
    background-color: #5d8bbf;
    opacity: 0.5;
    position: absolute;
    left: 30px;
}

.investment-grid-col {
    padding-right: 40px;
}

.investment-text-col .counter-number-wrapper {
    margin-top: 40px;
}

.investment-text-col .btn-wrap {
    margin-top: 30px;
}

.anniversary-year-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
}

[data-barba-namespace="20th-anniversary"] .bottom-banner-section .banner-content-wrap {
    position: relative;
    height: 100%;
}

[data-barba-namespace="20th-anniversary"] .bottom-banner-section .title-wrap {
    /* max-width: 1000px; */
}

.alert-dismissible {
    display: none;
}
[data-barba-namespace="20th-anniversary"] .site-footer
{
	    color: #1b215a !important;
    background-color: #abcae9!important;
}


@media(min-width:768px) {
   .investment-row .btn-col{
    display: none;
   }
}
@media(min-width:1200px) {

    .investment-section .home-portfolio-row .portfolio-col a {
        max-height: 180px;
        min-height: 180px;
    }

}



@media(max-width:1600px) {
    .anniversary-banner-section .title-wrap {
        margin-top: 15%;
    }

    .anniversary-banner-section .banner-title {
        /* font-size: 80px; */
    }
    .anniversary-banner-section .banner-title .year-text{
        font-size: 370px;
        letter-spacing: -0.05em;
        padding-left: 1vw;
    }
    .anniversary-banner-section .banner-title svg {
        width: 390px;
        height: auto;
    }

    .banner-content-col .banner-caption-text {
        font-size: 40px;
    }
    .anniversary-banner-section .banner-title .bottom-text{
        margin-left: 150px;
    margin-top: -80px;
    }

    .anniversary-banner-section .banner-image-col {
        margin-right: -4rem;
        width: calc(58.33% + 4rem);
    }

    section.video-section {
        padding: 160px 0;
    }
}


@media(max-width:1400px) {
    .banner-content-col .banner-caption-text {
        font-size: 36px;
    }

    .anniversary-banner-section .banner-title {
        /* font-size: 65px; */
    }

   .anniversary-banner-section .banner-title .year-text{
    font-size: 300px;
   }

    .anniversary-banner-section .banner-title span {
        margin-left: -50px;
    }

    .anniversary-banner-section .banner-title .bottom-text {
               margin-left: 120px;
        margin-top: -54px;
    }

    .banner-content-col .banner-caption-text {
        margin-bottom: 100px;
    }

    .anniversary-col .anniversary-grid-title,
    .anniversary-col .content-wrap {
        font-size: 20px
    }

    section.video-section {
        padding: 120px 0;
    }

    .investment-section .home-portfolio-row .portfolio-col a {
        min-height: 150px;
        max-height: 150px;
    }
}

@media(max-width:1199px) {
    .anniversary-banner-section .banner-title {
        font-size: 45px;
    }

    .anniversary-banner-section .banner-title svg {
        width: 220px;
    }
    .anniversary-banner-section .banner-title .year-text
    {
        font-size: 220px;
    }
    .anniversary-banner-section .banner-title .bottom-text {
               margin-left: 80px;
        margin-top: -44px;
    }

    .banner-content-col .banner-caption-text {
        font-size: 26px;
    }

    .anniversary-banner-section .banner-title span {
        margin-left: -30px;
    }

    .anniversary-banner-section .banner-title {
        margin-left: 40px;
    }

    .investment-grid-col .line-verticle-text {
        font-size: 16px;
    }
}

@media(max-width:991px) {
    .anniversary-banner-section .banner-image-col {
        margin-right: -2rem;
        width: calc(58.33% + 2rem);
    }

    .anniversary-banner-section .banner-image-col {
        margin-top: -10px;
    }

    .banner-content-col .banner-caption-text {
        font-size: 20px;
    }

    .investment-section .home-portfolio-row .portfolio-col a {
        min-height: 130px;
        max-height: 130px;
    }
}

@media(max-width:767px) {
    .anniversary-banner-section .banner-title {
        margin-bottom: 50px;
    }

    .banner-content-col .banner-caption-text {
        margin-bottom: 0;
    }

    .anniversary-banner-section .banner-image-col {
        width: calc(100% + 40px);
        margin-right: -20px;
        max-width: calc(100% + 40px);
        margin-top: 20px;
    }

    .anniversary-col .anniversary-grid-title,
    .anniversary-col .content-wrap,
    .anniversary-col .content-wrap p {
        font-size: 18px
    }

    section.video-section {
        padding: 80px 0;
    }

    .investment-section .home-portfolio-row .portfolio-col a {
        padding: 20px;
        min-height: 110px;
        max-height: 110px;
    }

    .investment-grid-col {
        padding-right: 0;
        margin-top: 40px;
        order: 2;
    }

    .investment-grid-col .line-verticle-text {
        font-size: 12px;
    }

    .investment-section .portfolio-wrapper {
        padding-left: 30px;
    }
    .investment-row .btn-col{
        margin-top: 30px;
        order: 3;
    }

    .investment-grid-col .anim-verticle-line {
        left: 18px;
    }
    .investment-text-col .btn-wrap{
        display: none;
    }
    [data-barba-namespace="20th-anniversary"] .bottom-banner-section .image-wrap {
        height: 140px;
        width: 140px;
    }
    .anniversary-banner-section .banner-title .year-text{
        margin-left: -20px;
    }
}