/* ---------- Company page ---------- */

/* index.css pulls .site-main up under the header for the home hero; not here. */
.company-page { top: 0; }

/* Distance from the container edge to the viewport edge (used to pin decorations). */
.company-page .container {
	--edge: max(var(--gutter), (100vw - 1100px) / 2);
}

/* Fluid sizes below go linearly from the 375px value to the 1440px design value:
   clamp(min, intercept + slope vw, max). */

/* ---------- Section headings ---------- */
.company-page .section-title { margin-bottom: 16px; }
.company-page .section-title h2 { line-height: 37px; letter-spacing: .07em; }
.company-page .section-title p { font-weight: 800; line-height: 30px; letter-spacing: .01em; }
.company-page .section-title .section-title-serif {
	margin-top: 8px;
	font-family: var(--font-serif-jp);
	font-size: clamp(14px, 13.3px + .19vw, 16px);
	font-weight: 700;
	line-height: 23px;
	letter-spacing: .05em;
}

/* Shared body copy */
.mv-content h3,
.value-item h3 {
	font-family: var(--font-serif-jp);
	font-size: clamp(20px, 17.2px + .75vw, 28px);
	font-weight: 500;
	line-height: 1.71;
	color: var(--ink);
}
.mv-content p,
.value-item p:not(.value-script) {
	font-family: var(--font-serif-jp);
	font-size: clamp(15px, 14.3px + .19vw, 17px);
	font-weight: 500;
	line-height: 2.1;
	letter-spacing: -.02em;
	color: #7b7d8c;
}

/* Script lettering (Mission / Vision / value names) */
.mv-script,
.value-script {
	font-family: "Luxurious Script", cursive;
	font-weight: 400;
	line-height: 64px;
	letter-spacing: .1em;
	color: var(--international-klein-blue);
}

/* ---------- About Us ---------- */
.company-about {
	position: relative;
	isolation: isolate;
	margin-top: clamp(32px, 7.5vw, 40px);
	text-align: center;
}
.company-about-media {
	width: 72%;
	height: auto;
	aspect-ratio: 60 / 20;
	margin: 0 14%;
	object-fit: cover;
	border-radius: 12px;
}
.company-about-lead {
	margin-top: 24px;
	padding: 0 var(--gutter);
	font-family: var(--font-serif-jp);
	/* 15px at 375px wide → 20px at 1440px wide */
	font-size: clamp(15px, 13.2px + .47vw, 20px);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .1em;
	color: #7b7d8c;
}
/* Gradient bubble pinned to the left edge, starting around the middle of the photo
   (photo height = 72vw / 3 = 24vw). The section is full-width, so left: 0 is the viewport edge.
   --bubble-w / --bubble-top describe the part on screen (bubble_shape_1, 527 × 586); the
   animated bubble_shape_5_anim.svg is the full shape (114 more on the left, off-screen) plus
   60 of room on every side → 761 × 706, so it is offset by that much. */
.company-about::before {
	--bubble-w: min(440px, 36.6vw);
	--bubble-top: calc(100px + 8vw);
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--bubble-top) - var(--bubble-w) * 60 / 527);
	left: calc(var(--bubble-w) * -174 / 527);
	width: calc(var(--bubble-w) * 761 / 527);
	aspect-ratio: 761 / 706;
	background: url("../images/background/bubble_shape_5_anim.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	animation: bubble-float 12s ease-in-out infinite alternate;
}

/* ---------- Our Vision (Mission / Vision) ---------- */
.company-vision { margin-top: clamp(96px, 11.7vw, 168px); }
.company-vision .section-title { margin-bottom: clamp(48px, 6.1vw, 88px); }

.mv-list {
	display: flex;
	flex-direction: column;
	gap: clamp(72px, 7vw, 100px);
}
.mv-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.mv-media {
	position: relative;
	width: min(460px, 100%);
	margin-left: -24px;
	/* The script word is sized against the blob width (cqw), so it scales with it. */
	container-type: inline-size;
}
/* Blob from images/company/bubble_vector1.svg (376 x 353) */
.mv-blob {
	aspect-ratio: 376 / 353;
	background: center / cover no-repeat;
	-webkit-mask: url("../images/company/bubble_vector1.svg") center / 100% 100% no-repeat;
	mask: url("../images/company/bubble_vector1.svg") center / 100% 100% no-repeat;
}
/* 112px on the 376px blob → 29.8cqw */
.mv-script {
	position: absolute;
	left: 15%;
	bottom: -6.4cqw;
	font-size: 29.8cqw;
	line-height: .57;
	letter-spacing: .15em;
	white-space: nowrap;
	text-shadow: 2px 4px 42px #fff, 2px 8px 36px #fff, 2px 4px 36px #fff;
	transform: rotate(-6.28deg);
	transform-origin: left bottom;
}
.mv-content h3 { margin-bottom: clamp(16px, 2.1vw, 30px); }
.mv-content p + p { margin-top: 18px; }

/* ---------- Value ---------- */
.company-value {
	position: relative;
	isolation: isolate;
	margin-top: clamp(96px, 12.5vw, 180px);
	padding-bottom: clamp(40px, 5.6vw, 80px);
}
.company-value .section-title { margin-bottom: clamp(48px, 6.7vw, 96px); }

/* Gradient bubble pinned to the right edge, beside the heading.
   --bubble-w / --bubble-top describe the part on screen (bubble_shape_2, 467 × 625); the
   animated bubble_shape_6_anim.svg is the full shape (187 more on the right, off-screen) plus
   60 of room on every side → 774 × 745. */
.company-value::before {
	--bubble-w: min(467px, 32.4vw);
	--bubble-top: -150px;
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--bubble-top) - var(--bubble-w) * 60 / 467);
	right: calc(-1 * var(--edge) - var(--bubble-w) * 247 / 467);
	width: calc(var(--bubble-w) * 774 / 467);
	aspect-ratio: 774 / 745;
	background: url("../images/background/bubble_shape_6_anim.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	animation: bubble-float 12s ease-in-out infinite alternate;
	animation-delay: -6s;
}

.value-list {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 38px;
	padding-right: 38px;
}
/* Faded photo blob behind item 02, pinned to the left edge */
.value-list::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 300px;
	left: calc(-1 * var(--edge) - 108px);
	width: 460px;
	aspect-ratio: 578 / 608;
	background: var(--value-image) center / cover no-repeat;
	-webkit-mask: var(--value-shape) center / 100% 100% no-repeat;
	mask: var(--value-shape) center / 100% 100% no-repeat;
	opacity: .25;
	pointer-events: none;
	--value-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 578 608'%3E%3Cpath d='M527.43 355.937C502.769 378.345 490.385 382.622 474.178 411.738C454.055 447.873 459.735 490.571 448 530.23C436.853 567.834 407.431 585.644 370.301 598.276C333.155 610.908 270.482 610.382 232.422 600.867C122.207 573.301 31.2514 479.848 6.65589 368.932C-17.9396 258.016 27.4159 137.748 113.231 63.3084C227.281 -35.612 459.869 -22.9308 555.345 132.019C593.438 193.842 581.174 307.105 527.43 355.937Z'/%3E%3C/svg%3E");
}
.value-item + .value-item { margin-top: 56px; }
.value-item:nth-child(2) { margin-left: 452px; }
.value-item:nth-child(3) { margin-top: 120px; }
.value-script {
	/* 32px at 375px wide → 56px at 1440px wide */
	font-size: clamp(52px, 23.5px + 2.25vw, 56px);
	line-height: 1.15;
	text-shadow: 0 0 21px #fff;
	white-space: nowrap;
}
.value-item h3 { margin-top: clamp(16px, 2.2vw, 32px); margin-bottom: 16px; }

/* ---------- Responsive ---------- */

/* Tablet: two columns stay, but items are no longer offset by fixed pixels. */
@media (max-width: 1100px) {
	.mv-item { grid-template-columns: 1fr 1fr; }
	.mv-media { margin: 0 auto; }
	.mv-content p br { display: none; }

	.value-list { padding-left: 0; padding-right: 0; }
	.value-item:nth-child(2) { margin-left: auto; }
	.value-item + .value-item,
	.value-item:nth-child(3) { margin-top: 72px; }
}

/* Mobile: single column. */
@media (max-width: 782px) {
	.company-about-media { width: calc(100% - var(--gutter) * 2); margin: 0 auto; aspect-ratio: 3 / 2; }

	.mv-item { grid-template-columns: 1fr; gap: 56px; }
	.mv-media { width: min(320px, 95%); }
	.mv-content { width: 90%; margin: 0 5%; }
	.company-about::before {
		--bubble-w: min(60vw, 148px);
		z-index: -2;
		top: unset;
		bottom: calc(80px - var(--bubble-w) * 60 / 527);
	}
	.company-value::before { --bubble-w: 55vw; --bubble-top: -80px; }
	.value-list::before { 
		top: unset;
        bottom: -124px;
        left: calc(-1 * var(--edge) - 72px);
        width: 200px;
        opacity: .15;
	}
	.value-item:nth-child(2) { margin-left: 0; }
	.value-item + .value-item,
	.value-item:nth-child(3) { margin-top: 56px; }
	.value-script { white-space: normal; }

	.mv-content p,
	.value-item p:not(.value-script) { line-height: 2; }
	/* Let long lines wrap naturally on small screens */
	.value-item p br,
	.mv-content h3 br,
	.company-about-lead br { display: none; }
}

/* The off-screen part of the bubbles would otherwise widen the page on phones. */
.company-page { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
	/* static, cropped originals at their on-screen size */
	.company-about::before,
	.company-value::before { animation: none; width: var(--bubble-w); }
	.company-about::before {
		top: var(--bubble-top);
		left: 0;
		aspect-ratio: 527 / 586;
		background-image: url("../images/background/bubble_shape_1.svg");
	}
	.company-value::before {
		top: var(--bubble-top);
		right: calc(-1 * var(--edge));
		aspect-ratio: 467 / 625;
		background-image: url("../images/background/bubble_shape_2.svg");
	}
}
@media (prefers-reduced-motion: reduce) and (max-width: 782px) {
	.company-about::before { top: unset; bottom: 80px; }
}