@charset "UTF-8";

/* ══════════════════════════════════════════════════════════════════════
   PlayPlus 我們是 PlayPlus 頁面樣式 (About Page Styles)
   檔案路徑：css/about-playplus.css
   設計參考：Rundoo.ai / About 頁面視覺與極簡優雅排版
   遵循 PlayPlus 全站 Design System 規範
   ══════════════════════════════════════════════════════════════════════ */

/* ── 頂部區塊包裝 (Hero & Breadcrumb Wrapper) ── */
.hero-scenarios-wrapper {
	position: relative;
	z-index: 1;
}

/* 2026-10-30：黑底範圍從整個頂部包裝（含麵包屑）就開始，不是只有 Hero 區塊本身，
   避免 header 上方／麵包屑那一條還露出淺色色塊；header-on-dark 偵測也改抓這一層的 #about，
   確保一進頁面（scrollY = 0）就已經疊在深色區塊上，header 從第一眼就是深色版本 */
.hero-scenarios-wrapper.is-dark {
	background: var(--swatch-slate-dark);
}

.hero-scenarios-wrapper.is-dark .breadcrumb-list {
	color: rgba(255, 255, 255, 0.48);
}

.hero-scenarios-wrapper.is-dark .breadcrumb-item a {
	color: rgba(255, 255, 255, 0.72);
}

.hero-scenarios-wrapper.is-dark .breadcrumb-item a:hover {
	color: var(--swatch-brand-green);
}

.hero-scenarios-wrapper.is-dark .breadcrumb-item.current {
	color: var(--swatch-white);
}

.hero-scenarios-wrapper.is-dark .breadcrumb-separator {
	color: rgba(255, 255, 255, 0.4);
	opacity: 1;
}

/* ── 麵包屑導航 Breadcrumb ── */
.breadcrumb-nav {
	margin-top: 0;
	padding-top: calc(68px + var(--space-sm));
	padding-bottom: var(--space-sm);
	position: relative;
	z-index: 2;
}

@media (max-width: 1024px) {
	.breadcrumb-nav {
		padding-top: calc(64px + var(--space-xs));
	}
}

.breadcrumb-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-xs);
	font-size: var(--text-sm);
	color: var(--text-muted);
	list-style: none;
	padding: 0;
	margin: 0;
}

.breadcrumb-item a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb-item a:hover {
	color: var(--swatch-brand-green);
}

.breadcrumb-item.current {
	color: var(--text-primary);
	font-weight: 600;
}

.breadcrumb-separator {
	display: inline-flex;
	align-items: center;
	color: var(--swatch-cloud-dark);
	opacity: 0.6;
}

.breadcrumb-separator svg {
	width: 18px;
	height: 18px;
}

/* ── 1. Hero 區塊（參考 Rundoo.ai 置中大器排版）── */
.about-hero {
	padding: var(--space-4xl) 0 var(--space-5xl);
	position: relative;
	z-index: 1;
	text-align: center;
}

/* 2026-10-30 黑底動態光暈改版：Hero 標籤改用跟首頁「品牌對外形象」同一套
   .section-badge 元件（原本的 .about-eyebrow / .about-eyebrow-dot 已移除），
   並改成滿版黑底＋Orb WebGL 動態光暈背景（色相 35，貼近品牌綠） */
.about-hero.is-dark {
	background: var(--swatch-slate-dark);
	color: var(--swatch-ivory-light);
	overflow: hidden;
	isolation: isolate;
	/* 原本沿用 .about-hero 的 48px 下邊距，疊加下方區塊往上蓋的圓角負 margin 後幾乎貼在一起，
	   加大黑底本身的下邊距，讓黑底跟下方淺色區塊之間留出清楚的呼吸空間 */
	padding-bottom: clamp(5rem, 9vw, 7.5rem);
	/* 2026-10-30：黑底 banner 整體高度拉到接近一屏幕，內容垂直置中 */
	min-height: min(88vh, 860px);
	display: flex;
	align-items: center;
}

.about-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}

.about-hero-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 60% at 50% 38%, transparent 0%, rgba(21, 22, 26, 0.3) 62%, rgba(21, 22, 26, 0.76) 100%);
	pointer-events: none;
	z-index: 0;
}

.about-hero.is-dark .container {
	position: relative;
	z-index: 1;
}

.about-hero.is-dark .section-badge {
	align-self: center; /* 覆蓋 .section-badge 預設的 flex-start，避免在置中版面裡跑到最左邊 */
	background: rgba(255, 255, 255, 0.08);
	color: var(--swatch-ivory-light);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 0 16px 1px color-mix(in srgb, var(--swatch-brand-green) 35%, transparent);
	margin-bottom: var(--space-lg);
}

.about-hero-content {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.about-hero-title {
	font-family: var(--font-sans);
	font-size: round(nearest, clamp(2.4rem, 5.2vw, 4.25rem), 2px);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin: 0 auto var(--space-xl);
	max-width: 880px;
	text-align: center;
	text-wrap: balance;
}

.about-hero-title .accent-gradient {
	color: var(--swatch-brand-green);
	display: inline;
}

.about-hero.is-dark .about-hero-title {
	color: var(--swatch-white);
}

.about-hero-desc {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.about-hero-p {
	font-size: round(nearest, clamp(1.05rem, 1.25vw, 1.18rem), 2px);
	line-height: 1.85;
	color: var(--swatch-slate-light);
	margin: 0 0 var(--space-md) 0;
}

.about-hero-p:last-child {
	margin-bottom: 0;
}

.about-hero.is-dark .about-hero-p {
	color: rgba(255, 255, 255, 0.72);
}

/* ── 核心數據條（Stats Band）── */
.about-hero-stats {
	margin-top: var(--space-3xl);
	width: 100%;
	max-width: 1000px;
}

.about-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--radius-card);
	padding: var(--space-2xl) var(--space-xl);
	box-shadow:
		0 18px 40px -8px rgba(24, 25, 28, 0.06),
		0 2px 6px rgba(24, 25, 28, 0.03),
		inset 0 1px 0 var(--swatch-white);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* 深色 Hero 版本：底色提高到 14% 不透明度，避免數字跟底色混在一起看不清楚 */
.about-hero.is-dark .about-stats-grid {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow:
		0 18px 40px -8px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.about-hero.is-dark .about-stat-item:not(:last-child)::after {
	background: rgba(255, 255, 255, 0.16);
}

.about-hero.is-dark .about-stat-number {
	color: var(--swatch-white);
}

.about-hero.is-dark .about-stat-label {
	color: rgba(255, 255, 255, 0.64);
}

.about-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}

.about-stat-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -0.75rem;
	top: 15%;
	bottom: 15%;
	width: 1px;
	background: rgba(21, 22, 26, 0.08);
}

.about-stat-number {
	font-family: var(--font-display);
	font-size: round(nearest, clamp(2.2rem, 3.4vw, 3rem), 2px);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.about-stat-number .stat-accent {
	color: var(--swatch-brand-green);
	font-weight: 700;
	margin-left: 2px;
}

.about-stat-label {
	font-size: var(--text-sm);
	color: var(--swatch-slate-light);
	font-weight: 500;
	margin-top: var(--space-2xs);
	line-height: 1.5;
}

/* 跟上方黑底 Hero 銜接：不用透明度漸層，改成本區塊上緣抓圓角、往上疊一截蓋在黑底 Hero
   下緣，露出的直角三角區塊仍是黑色，形成「淺色卡片疊在黑底上」的俐落轉場 */
.about-mission-section {
	padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3rem, 5vw, 4.5rem);
	text-align: center;
	position: relative;
	z-index: 2;
	background: var(--swatch-ivory-light);
	border-radius: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px) 0 0;
	margin-top: clamp(-56px, -5vw, -32px);
}

/* 左圖右文：插畫在左欄，文案在右欄並垂直置中 */
.about-mission-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: var(--space-4xl);
	text-align: left;
}

.about-mission-visual {
	width: 100%;
	max-width: 440px;
	aspect-ratio: 940 / 820;
	margin: 0 auto;
}

.about-mission-visual svg {
	width: 100% !important;
	height: 100% !important;
}

.about-mission-copy {
	display: flex;
	flex-direction: column;
}

.about-mission-quote {
	font-family: var(--font-sans);
	/* 兩欄版面右欄寬度在桌機最大固定在 ~533px，字級改成以此為上限反推，
	   確保「先理解、再設計、後開發」在兩欄版面（992px 以上）都能維持單行、不換行 */
	font-size: round(nearest, clamp(1.85rem, 3.1vw, 2.45rem), 2px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: var(--swatch-slate-dark);
	margin: 0;
	white-space: nowrap;
}

/* 跟全站「免費顧問諮詢」等處同一套手繪螢光筆標記效果（.cta-marker / .services-marker），
   捲動到視野內時才畫出來。.cta-marker 原本用 ::before 絕對定位，是假設文字只有一行；
   這裡在較窄的兩欄版面裡文字會換行，inline-block + 絕對定位的色塊撐開到整個換行後的
   外框寬度，才會跑版。改用 box-decoration-break: clone，讓背景色塊逐行各自獨立渲染，
   換幾行都不會跑版。 */
.about-mission-quote .quote-highlight,
.about-quote-heading .quote-highlight {
	display: inline;
	color: var(--swatch-slate-dark);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0 0.035em;
	margin: 0 -0.035em;
	border-radius: 0.06em 0.1em 0.04em 0.08em;
	background-image: linear-gradient(to top,
		transparent 0%,
		transparent 13%,
		rgba(51, 204, 51, 0.45) 13%,
		rgba(51, 204, 51, 0.45) 59%,
		transparent 59%,
		transparent 100%);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 100%;
	transition: background-size 850ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.about-mission-inner.visible .quote-highlight,
.about-quote-intro.visible .quote-highlight {
	background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	.about-mission-quote .quote-highlight,
	.about-quote-heading .quote-highlight {
		transition: none;
		background-size: 100% 100%;
	}
}

.about-mission-desc {
	font-size: round(nearest, clamp(1.1rem, 1.3vw, 1.25rem), 2px);
	color: var(--swatch-slate-light);
	line-height: 1.85;
	max-width: none;
	margin: var(--space-lg) 0 0;
}

.about-mission-desc--center {
	text-align: center;
}

/* ── 區塊分隔線（非滿版，最大寬度對齊 Hero 視覺大圖 1140px）── */
.about-section-divider {
	width: 100%;
	max-width: 1140px;
	height: 1px;
	background: rgba(21, 22, 26, 0.08);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* ── 3. 我們是做什麼的？（What We Do & 4 專業服務卡片）── */
.about-what-section {
	padding: clamp(3.5rem, 5.5vw, 5rem) 0 clamp(2.5rem, 4vw, 4rem);
	position: relative;
	z-index: 2;
}

/* 左標題、右文字段落的兩欄排版（參考 .process-layout 左右分欄手法） */
.about-section-header {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
	gap: var(--space-2xl) var(--space-5xl);
	align-items: start;
	max-width: 1100px;
	margin: 0 auto var(--space-4xl);
	text-align: left;
}

.about-section-title {
	font-family: var(--font-sans);
	font-size: round(nearest, clamp(2rem, 3.4vw, 2.85rem), 2px);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0;
}

.about-section-desc-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.about-section-desc {
	font-size: round(nearest, clamp(1.05rem, 1.2vw, 1.15rem), 2px);
	line-height: 1.85;
	color: var(--swatch-slate-light);
	margin: 0;
}

/* 4 服務卡片網格（電腦版 1 列 4 張）；max-width 跟 .about-section-header 對齊，
   避免寬螢幕時卡片網格比上方標題寬，左右邊界對不齊 */
.about-services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-xl);
	max-width: 1100px;
	margin: 0 auto;
}

.about-service-card {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(21, 22, 26, 0.08);
	border-radius: var(--radius-card);
	padding: var(--space-xl);
	text-decoration: none;
	color: inherit;
	box-shadow:
		0 12px 30px -6px rgba(24, 25, 28, 0.04),
		0 2px 6px rgba(24, 25, 28, 0.02);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition: transform var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out);
	position: relative;
	overflow: hidden;
}

.about-service-card:hover {
	transform: translateY(-8px);
	background: var(--swatch-white);
	border-color: rgba(51, 204, 51, 0.45);
	box-shadow:
		0 24px 48px -10px rgba(24, 25, 28, 0.1),
		0 0 0 1px rgba(51, 204, 51, 0.25);
}

.about-service-thumb {
	aspect-ratio: 16 / 10;
	margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-lg);
	border-bottom: 1px solid rgba(21, 22, 26, 0.06);
	background: var(--swatch-ivory-medium);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
}

.about-service-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--duration-med) var(--ease-out);
}

.about-service-card:hover .about-service-thumb img {
	transform: scale(1.06);
}

/* 2026-10-30 同步：原本 4 張卡片共用企業管理系統子項目的靜態插畫（素材對不上服務內容），
   改成各服務頁自己的動態插畫（跟各服務頁 Hero 用同一份 Lottie JSON），素材才會對應正確 */
.about-service-lottie {
	width: 100%;
	height: 100%;
	transition: transform var(--duration-med) var(--ease-out);
}

.about-service-lottie svg {
	width: 100% !important;
	height: 100% !important;
}

.about-service-card:hover .about-service-lottie {
	transform: scale(1.06);
}

.about-service-tag {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--swatch-brand-green);
	text-transform: uppercase;
	margin-bottom: var(--space-xs);
	display: block;
}

.about-service-title {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	margin: 0 0 var(--space-sm) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.about-service-arrow {
	color: var(--swatch-slate-dark);
	display: inline-flex;
	align-items: center;
	transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.about-service-arrow svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

.about-service-card:hover .about-service-arrow {
	transform: translateX(4px);
	color: var(--swatch-brand-green);
}

.about-service-desc {
	font-size: var(--text-sm);
	color: var(--swatch-slate-light);
	line-height: 1.75;
	margin: 0;
	flex-grow: 1;
}

/* ── 4. 深度理念：我們如何做到？與為何脫穎而出？ ── */
.about-pillars-section {
	padding: 1.5rem 0;
	background: var(--swatch-ivory-light);
	position: relative;
	z-index: 2;
}

/* 左文右圖／左圖右文：兩欄排版，欄位順序直接跟著 HTML 裡的先後順序走，
   「我們如何做到？」文字在前（左欄）；「我們為何脫穎而出？」插畫在前（左欄）；
   圖／文欄寬固定抓 40% / 60% */
.about-pillar-block {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	align-items: center;
	gap: var(--space-4xl);
	text-align: left;
}

.about-pillar-block--text-first {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.about-pillar-block--visual-first {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.about-pillar-block:not(:last-child) {
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.about-pillar-visual {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 「我們為何脫穎而出？」左欄插畫（Lottie） */
.about-pillar-lottie {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 417 / 482;
}

.about-pillar-lottie svg {
	width: 100% !important;
	height: 100% !important;
}

/* 「我們如何做到？」右欄互動彈跳球：固定高度當作球可以活動的舞台，
   實際的球體繪製與物理運算在 js/about-bounce-ball.js */
.about-pillar-visual--ball {
	position: relative;
	width: 100%;
	height: clamp(240px, 26vw, 360px);
}

.about-ball-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	/* 預設一般游標，只有滑到球本體上時才由 JS 切換成可抓取樣式，
	   不要整個區塊都顯示可拖曳游標 */
	cursor: default;
	/* 球可以被拖曳，手機上要關閉瀏覽器預設的捲動／縮放手勢，
	   拖曳行為完全交給 JS 處理 */
	touch-action: none;
}

.about-ball-canvas.is-hoverable {
	cursor: grab;
}

.about-ball-canvas.is-dragging {
	cursor: grabbing;
}

.about-ball-canvas:focus-visible {
	outline: 2px solid var(--swatch-brand-green);
	outline-offset: 4px;
	border-radius: 50%;
}

.about-pillar-title {
	font-family: var(--font-sans);
	font-size: round(nearest, clamp(2rem, 3.4vw, 2.85rem), 2px);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-xs) 0;
}

.about-pillar-subtitle {
	font-size: round(nearest, clamp(1.35rem, 1.9vw, 1.65rem), 2px);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	line-height: 1.6;
	opacity: 0.92;
	margin: 0 0 var(--space-xl) 0;
}

.about-pillar-content p {
	font-size: round(nearest, clamp(1.05rem, 1.2vw, 1.15rem), 2px);
	line-height: 1.85;
	color: var(--swatch-slate-light);
	margin: 0;
}

.about-pillar-content p+p {
	margin-top: var(--space-md);
}

/* ── 5. 專屬引言區塊（Pull-Quote：為客戶思考長期利益）── */
.about-quote-section {
	padding: clamp(2.5rem, 4vw, 3.75rem) 0;
	position: relative;
	z-index: 2;
}

/* 引言標題＋副標：移到白色卡片外面上方，水平置中 */
.about-quote-intro {
	max-width: 760px;
	margin: 0 auto clamp(2rem, 3.5vw, 2.75rem);
	text-align: center;
}

.about-quote-container {
	max-width: 980px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(21, 22, 26, 0.08);
	border-radius: var(--radius-xl);
	padding: clamp(1.375rem, 2.5vw, 2.25rem) clamp(2.75rem, 5vw, 4.5rem);
	box-shadow:
		0 24px 60px -12px rgba(24, 25, 28, 0.08),
		0 2px 6px rgba(24, 25, 28, 0.03),
		inset 0 1px 0 var(--swatch-white);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	position: relative;
}

.about-quote-heading {
	font-family: var(--font-sans);
	font-size: round(nearest, clamp(1.85rem, 3.2vw, 2.75rem), 2px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: var(--swatch-slate-dark);
	margin: 0 0 var(--space-xs) 0;
	text-wrap: balance;
}

.about-quote-subheading {
	font-size: round(nearest, clamp(1.15rem, 1.4vw, 1.35rem), 2px);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	line-height: 1.5;
	opacity: 0.9;
	margin: 0;
}

.about-quote-divider {
	border: 0;
	height: 0;
	background: none;
	margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
}

.about-quote-text {
	font-size: round(nearest, clamp(1.05rem, 1.25vw, 1.18rem), 2px);
	line-height: 1.9;
	color: var(--swatch-slate-light);
	margin-bottom: var(--space-lg);
}

.about-quote-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
}

.about-quote-brand {
	display: flex;
	align-items: center;
}

.about-quote-logo {
	display: block;
	height: 26px;
	width: auto;
	max-width: 160px;
}

.about-quote-role {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	letter-spacing: 0.02em;
}

/* ── 彎曲文字跑馬燈（Curved Loop）──
   移植自 Vue Bits 的 <CurvedLoop />，改寫成不依賴框架的原生 SVG
   textPath 版本（js/about-curved-loop.js 負責量測文字寬度、複製節點、
   用 requestAnimationFrame 捲動 startOffset）。文字是品牌黑，星星是品牌綠，
   左右邊界直接被容器裁切，營造無限跑馬燈的效果。 */
.about-curved-loop {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: clamp(0.75rem, 1.5vw, 1.25rem) 0;
}

.about-loop-svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 180;
	overflow: visible;
}

.about-loop-text,
.about-loop-measure {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 58px;
	letter-spacing: 0.01em;
	fill: var(--swatch-slate-dark);
}

.about-loop-star {
	fill: var(--swatch-brand-green);
}

/* ── 6. 團隊成員區塊（Our Team，5 人專業團隊）＋簡報下載 ──
   這兩個區塊共用同一片背景，畫在共同父層 .about-team-briefing-wrapper 上
   （跟企業管理系統服務頁的 .faq-briefing-wrapper 同一套做法），避免兩個
   區塊各自畫背景在交界處出現接縫；底下兩個子區塊本身不再各自畫背景。 */
.about-team-briefing-wrapper {
	background: var(--swatch-ivory-light);
	position: relative;
	z-index: 2;
}

.about-team-section {
	padding: clamp(2.5rem, 4vw, 3.75rem) 0 var(--space-4xl);
}

.about-team-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-lg);
	margin-top: var(--space-3xl);
}

.about-team-card {
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
	transition: transform var(--duration-fast) var(--ease-out);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.about-team-card:hover {
	transform: translateY(-6px);
}

/* 頭像縮小一些，避免看起來太擁擠：外框維持原本網格比例，
   內部用 flex 置中 + padding 讓插畫本身縮小並留白 */
.about-member-photo-frame {
	aspect-ratio: 1 / 1;
	width: 100%;
	background: transparent;
	margin-bottom: var(--space-xs);
	position: relative;
	border: none;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10%;
}

.about-member-photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	background: transparent;
	display: block;
	transition: transform var(--duration-med) var(--ease-out);
}

.about-team-card:hover .about-member-photo {
	transform: scale(1.04);
}

.about-member-info {
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
}

.about-member-name {
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	line-height: 1.3;
	margin: 0 0 4px 0;
	letter-spacing: -0.01em;
	text-align: center;
}

.about-member-role {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--swatch-slate-light);
	line-height: 1.45;
	margin: 0;
	text-align: center;
}

/* ── 7. 簡報下載區塊（Sales Briefing Download）──
   2026-10-30 同步：原本是置中白卡片＋上方漸層細線＋PDF 圖示的舊版樣式，
   改成跟服務頁（例如企業管理系統）現行一致的左右分欄＋插畫版設計。
   背景已移到共同父層 .about-team-briefing-wrapper，這裡只保留版面間距；
   卡片本身是白色，在共用背景上形成卡片層次 */
.briefing-section {
	padding: clamp(2.5rem, 4vw, 3.5rem) 0 var(--space-7xl);
	position: relative;
}

.briefing-card {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-4xl);
	max-width: none;
	margin: 0;
	padding: var(--space-3xl);
	background: var(--swatch-white);
	border: 1px solid var(--swatch-ivory-medium);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	overflow: visible;
	text-align: left;
	position: relative;
}

.briefing-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	max-width: none;
	width: 100%;
}

.briefing-title {
	font-size: round(nearest, clamp(2rem, 4vw, 3rem), 2px);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-xs);
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: left;
}

.briefing-subtitle {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--swatch-slate-light);
	margin: 0 0 var(--space-md);
	text-align: left;
}

.briefing-subtitle::before {
	content: "";
	width: 2px;
	height: 22px;
	background: var(--swatch-brand-green);
	flex-shrink: 0;
}

.briefing-desc {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.75;
	margin-bottom: 0;
	text-align: left;
}

.briefing-meta {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px dashed var(--swatch-ivory-medium);
	width: 100%;
	text-align: left;
}

.briefing-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 520px;
	position: relative;
}

.briefing-dl-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.briefing-illust {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0;
}

.briefing-illust-link {
	display: block;
	text-decoration: none;
	margin: 0;
	transition: transform var(--duration-fast) var(--ease-out);
}

.briefing-dl-group .briefing-illust-link,
.briefing-dl-group .briefing-dl-btn {
	transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.briefing-dl-group:hover .briefing-illust-link,
.briefing-dl-group:hover .briefing-dl-btn {
	transform: translateY(-4px);
}

.briefing-dl-group:hover .briefing-dl-btn {
	box-shadow: var(--shadow-2);
}

.briefing-illust-link:hover {
	transform: none;
}

.briefing-illust-link:focus-visible {
	outline: 2px solid var(--swatch-brand-green);
	outline-offset: 6px;
	border-radius: var(--radius-card);
}

.briefing-dl-btn {
	margin: 0 0 var(--space-xl);
	padding: 1.1rem 2.75rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.briefing-visual-title {
	font-size: var(--text-md);
	font-weight: 500;
	color: var(--swatch-slate-dark);
	margin: var(--space-md) 0 var(--space-md);
	text-align: center;
	transition: transform var(--duration-fast) var(--ease-out);
}

.briefing-dl-group:hover .briefing-visual-title {
	transform: translateY(-4px);
}

.briefing-visual-subtitle {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-bottom: 0;
	text-align: left;
}

/* ── 響應式佈局 (Responsive Breakpoints) ── */
@media (max-width: 1200px) {
	.about-team-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.about-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 991px) {
	/* 「我們是做什麼的？」「為你實現願景的團隊」都改靠左對齊比較好讀，
	   跟 .about-pillar-content 同一個理由，兩個區塊共用同一個
	   .about-section-header，直接統一調整 */
	.about-section-header {
		grid-template-columns: 1fr;
		gap: var(--space-md);
		text-align: left;
	}

	.about-mission-inner {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		text-align: center;
	}

	.about-mission-visual {
		margin: 0 auto;
	}

	/* 992px 以下改回單欄堆疊，原本怕 nowrap 撐出水平捲動所以改成自動換行，
	   但換行後兩行字數不均、標題感變弱。改用更貼合容器寬度反推的 clamp
	   （經實測 375～991px 各寬度都不會溢出），讓這句話在手機／平板直式
	   都能完整顯示一整行，不斷行 */
	.about-mission-quote {
		font-size: round(nearest, clamp(1.6rem, 4.6vw, 2.4rem), 2px);
		white-space: nowrap;
	}

	.about-pillar-block {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
		/* 原本整塊置中，標題跟內文都置中反而不好讀；改回靠左，
		   插畫／彈跳球本身仍用 margin:0 auto 保持置中 */
		text-align: left;
	}

	.about-pillar-lottie {
		margin: 0 auto;
	}

	/* 「我們為何脫穎而出？」桌機版是圖在左／文在右，手機版堆疊後
	   DOM 順序會讓插畫跑到文字上面，跟「我們如何做到？」（文字本來就在前）
	   不一致；用 order 讓兩個區塊在手機版統一「上文下圖」 */
	.about-pillar-block--visual-first .about-pillar-text {
		order: -1;
	}

	/* 「你們很用心在理解我們」引言標題：原本靠 text-wrap:balance 自動換行，
	   字級沒跟著窄螢幕縮小，容易斷成兩行。改成強制單行＋貼合容器寬度反推的
	   clamp（經實測 360～991px 都不會溢出），完整顯示一整行 */
	.about-quote-heading {
		font-size: round(nearest, clamp(1.5rem, 7.2vw, 2.1rem), 2px);
		white-space: nowrap;
		text-wrap: nowrap;
	}

	.about-pillar-visual--ball {
		height: clamp(200px, 50vw, 280px);
	}

	.about-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-xl) var(--space-md);
	}

	.about-stat-item:nth-child(2)::after {
		display: none;
	}

	.about-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.briefing-card {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
		padding: var(--space-xl);
	}
}

@media (max-width: 640px) {
	.about-hero {
		padding: var(--space-2xl) 0 var(--space-4xl);
	}

	.about-hero.is-dark {
		min-height: auto;
	}

	.about-hero-title {
		font-size: round(nearest, clamp(1.65rem, 6.8vw, 2.35rem), 2px);
		line-height: 1.28;
	}

	.about-stats-grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		padding: var(--space-xl) var(--space-md);
	}

	.about-stat-item::after {
		display: none !important;
	}

	.about-mission-section {
		padding: var(--space-2xl) 0 var(--space-xl);
	}

	.about-what-section,
.about-quote-section,
.about-team-section {
		padding: var(--space-4xl) 0;
	}

	.about-services-grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	/* 團隊頭像維持兩欄（跟上一層 991px 斷點一致），不要縮到最窄時
	   又收成單欄、整排頭像變得又大又空 */
	.about-team-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.about-quote-container {
		padding: var(--space-2xl) var(--space-lg);
	}
}

/* ── 簡報下載卡片與下方 CTA 區塊之間留白：手機／平板版減半 ──
   .briefing-section 底部固定 var(--space-7xl)=64px，加上 #cta 本身在
   ≤768px 斷點（見 style.css）也是上下 var(--space-7xl)=64px，兩者相加
   128px 的空白明顯過多。#cta 是首頁、服務頁共用的區塊，不能直接改全站，
   這裡只針對「緊接在簡報下載卡片後面」的這個 #cta 實例縮減上緣間距 */
@media (max-width: 991px) {
	.briefing-section {
		padding-bottom: var(--space-2xl); /* 64px → 32px */
	}

	.about-team-briefing-wrapper + #cta {
		padding-top: var(--space-2xl); /* 64px → 32px，下緣維持不變 */
	}
}