/*
Theme Name: AOJ Group
Theme URI: https://aoj.hk/
Author: AOJ Group
Description: Group site for AOJ Medical, AOJ Health and RPM Core. Section-aware templates, RPM product catalogue, hand-built structured data and an llms.txt endpoint.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: aoj-group
*/

:root {
	--accent: #00c2e3;
	--accent-dark: #00a8c4;
	--accent-tint: #eafafd;
	--ink: #111111;
	--text: #3d4348;
	--muted: #6b7378;
	--faint: #9aa1a6;
	--line: #e8ebed;
	--line-soft: #f2f4f5;
	--bg-alt: #f7fafb;
	--radius: 16px;
	--radius-sm: 10px;
	--radius-pill: 999px;
	--wrap: 1160px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	color: var(--ink);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: #fff;
	padding: 10px 16px;
	z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

.arrow { display: inline-block; transition: transform .2s ease; }

/* ---------------------------------------------------------------- header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--line-soft);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 68px;
}

.brand { display: inline-flex; align-items: baseline; gap: 8px; }

.brand-mark {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.6px;
	color: var(--ink);
}
.brand-dot { color: var(--accent); }
.brand-sub {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--faint);
}
.brand-logo { height: 34px; width: auto; }

.primary-nav { display: flex; align-items: center; gap: 26px; }
.primary-nav a {
	font-size: 14px;
	font-weight: 500;
	color: #4d5459;
	transition: color .18s ease;
}
.primary-nav a:hover { color: var(--accent-dark); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--primary { background: var(--accent); color: #06313a; }
.btn--primary:hover { background: var(--accent-dark); color: #04262d; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn--lg { padding: 14px 28px; font-size: 15px; }
.header-cta { white-space: nowrap; }

.subnav { border-top: 1px solid var(--line-soft); background: #fff; }
.subnav-inner { display: flex; gap: 24px; overflow-x: auto; }
/* Horizontal scroll container by design: on narrow screens the section links
   scroll sideways rather than wrapping. documentElement.scrollWidth stays equal
   to the viewport, so this is not a page-overflow bug. */
.subnav a {
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	padding: 11px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.subnav a:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ hero */

.hero { padding: 72px 0 56px; }
.hero--group { text-align: center; padding: 84px 0 40px; }
.hero--group h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero--rpm { background: linear-gradient(180deg, var(--accent-tint) 0%, #fff 100%); }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr); }
.hero-copy { max-width: 720px; }

.eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--accent-dark);
	margin-bottom: 16px;
}

.hero-lede {
	font-size: 17px;
	color: var(--muted);
	max-width: 62ch;
	line-height: 1.75;
}
.hero--group .hero-lede { margin: 0 auto; }
.hero-body { max-width: 62ch; margin: 24px auto 0; text-align: left; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.proof-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 44px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--line);
}
.proof-item dt { font-size: 17px; font-weight: 600; color: var(--ink); }
.proof-item dd { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* -------------------------------------------------------------- sections */

.section { padding: 68px 0; }
.section--alt { background: var(--bg-alt); }
.section--page { padding: 40px 0 72px; }
.section--product { padding: 8px 0 56px; }
.section--narrow { max-width: 820px; }
.wrap.section--narrow { padding-left: 24px; padding-right: 24px; }

.section-head { max-width: 68ch; margin-bottom: 36px; }
.section-head h2 { margin-bottom: 10px; }
.section-head p { color: var(--muted); margin: 0; }

.section-kicker {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 32px;
}

.section-foot { margin-top: 32px; }

/* ------------------------------------------------------------ group home */

.lines-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.line-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.line-card:hover {
	border-color: var(--accent);
	box-shadow: 0 12px 34px rgba(0, 40, 52, .08);
	transform: translateY(-3px);
}
.line-card__bar { height: 6px; background: var(--accent); }
.line-card__body { padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.line-card__brand {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--accent-dark);
}
.line-card__title { font-size: 21px; font-weight: 600; color: var(--ink); }
.line-card__desc { font-size: 14px; color: var(--muted); flex: 1; }
.line-card__cta { font-size: 14px; font-weight: 600; color: var(--accent-dark); }
.line-card:hover .line-card__cta .arrow { transform: translateX(5px); }
.line-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }

.tag {
	font-size: 12px;
	color: #6d757a;
	background: var(--line-soft);
	border-radius: var(--radius-pill);
	padding: 4px 12px;
}

.line-card--external .line-card__bar { background: #767676; }
.line-card--external:hover { border-color: #767676; box-shadow: 0 12px 34px rgba(0, 0, 0, .07); }
.line-card--external .line-card__brand,
.line-card--external .line-card__cta { color: #5c5c5c; }

/* ---------------------------------------------------------------- trust */

.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.trust-item { text-align: center; }
.trust-value { font-size: 27px; font-weight: 600; color: var(--accent-dark); }
.trust-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.trust-footnote {
	max-width: 74ch;
	margin: 34px auto 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--faint);
}

/* ------------------------------------------------------------ rpm cards */

.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cat-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 26px 24px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cat-card:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 40, 52, .07); transform: translateY(-3px); }
.cat-card h3 { margin: 0; }
.cat-card p { margin: 0; font-size: 14px; color: var(--muted); flex: 1; }
.cat-card__cta { font-size: 14px; font-weight: 600; color: var(--accent-dark); }
.cat-card:hover .cat-card__cta .arrow { transform: translateX(5px); }

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.product-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.product-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { border-color: var(--accent); box-shadow: 0 12px 30px rgba(0, 40, 52, .08); transform: translateY(-3px); }

.product-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--bg-alt);
	overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }

.product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 16px;
	text-align: center;
}
.product-card__model {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .6px;
	color: var(--faint);
}

.product-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-card__cat {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--accent-dark);
}
.product-card__title { font-size: 16px; margin: 0; line-height: 1.35; }
.product-card__title a:hover { color: var(--accent-dark); }
.product-card__body .product-card__model { margin: 0; }
.product-card__tagline { font-size: 13.5px; color: var(--muted); margin: 0; flex: 1; }

.pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: #075e6e;
	background: var(--accent-tint);
	border: 1px solid #bdeef7;
	border-radius: var(--radius-pill);
	padding: 4px 12px;
	align-self: flex-start;
}
.pill--muted { color: var(--muted); background: var(--line-soft); border-color: transparent; }

.solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.solution-card {
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 24px 24px 22px;
}
.solution-card h3 { font-size: 17px; }
.solution-card p { margin: 0; font-size: 14px; color: var(--muted); }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 18px 22px;
}
.faq-item summary {
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent-dark); font-weight: 600; }
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding-top: 12px; }
.faq-answer p { margin: 0; font-size: 14.5px; color: var(--muted); }

.cta-band { background: #06232b; color: #dbedf1; padding: 56px 0; }
.cta-band h2 { color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.cta-band p { color: #9dc2ca; margin: 0; max-width: 62ch; }
.cta-band__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.cta-band .btn--primary { background: var(--accent); color: #04262d; flex-shrink: 0; }
.cta-band .btn--primary:hover { background: #fff; }

/* ------------------------------------------------------------ page hero */

.page-hero { padding: 52px 0 34px; border-bottom: 1px solid var(--line-soft); }
.page-hero__lede { font-size: 16.5px; color: var(--muted); max-width: 70ch; margin: 0; }

.entry-body { font-size: 16px; }
.entry-body h2 { margin-top: 1.6em; }
.entry-body h3 { margin-top: 1.4em; }
.entry-body ul, .entry-body ol { padding-left: 1.25em; }
.entry-body li { margin-bottom: .5em; }
.entry-body a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------------- article */

/*
 * Typography for migrated article bodies. The content brought over from
 * rpmcore.com is unusually rich - 38 data tables, ~190 inline images, code
 * blocks and pull quotes - so every one of those needs an explicit rule or it
 * inherits the reset and looks broken.
 */

.entry-cover { margin: 32px 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); background: var(--bg-alt); }
.entry-cover img { width: 100%; }

.section-title { font-size: 22px; margin: 0 0 20px; }

.entry-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 26px 0;
	font-size: 14.5px;
	display: block;
	overflow-x: auto;
}
.entry-body thead th,
.entry-body table td,
.entry-body table th {
	border: 1px solid var(--line);
	padding: 10px 13px;
	text-align: left;
	vertical-align: top;
	line-height: 1.55;
}
.entry-body thead th,
.entry-body thead td { background: var(--accent-tint); color: var(--ink); font-weight: 600; }
.entry-body tbody tr:nth-child(even) { background: #fafbfc; }

.entry-body img { margin: 22px auto; border-radius: var(--radius-sm); }
.entry-body p > img:only-child { margin-left: auto; margin-right: auto; }

.entry-body blockquote {
	margin: 26px 0;
	padding: 6px 0 6px 20px;
	border-left: 3px solid var(--accent);
	color: var(--ink);
	font-style: normal;
}
.entry-body blockquote p { margin: 0 0 10px; }

.entry-body pre {
	margin: 24px 0;
	padding: 16px 18px;
	background: #f6f8fa;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm);
	overflow-x: auto;
	font-size: 13.5px;
	line-height: 1.6;
}
.entry-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.entry-body p code { background: #f0f3f5; padding: 2px 6px; border-radius: 4px; }

.entry-body video { width: 100%; max-width: 100%; margin: 26px 0; border-radius: var(--radius-sm); background: #000; }

.entry-body h1 { font-size: 30px; margin-top: 1.6em; }
.entry-body h4 { margin-top: 1.3em; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 26px; font-size: 13px; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-dark); }
.crumbs .current { color: var(--ink); font-weight: 600; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter-chip {
	font-size: 13.5px;
	font-weight: 500;
	color: #4d5459;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 7px 16px;
	transition: all .18s ease;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: #06313a; font-weight: 600; }

/* ------------------------------------------------------------- product */

.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.product-media {
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-media__img { width: 100%; height: 100%; object-fit: cover; }
.product-media__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-media__placeholder span { font-size: 20px; font-weight: 600; color: var(--faint); letter-spacing: .5px; }

.product-intro h1 { margin-bottom: 14px; }
.product-model { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.product-model__label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--faint);
}
.product-model__value { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: .4px; }
.product-tagline { font-size: 17px; color: var(--muted); }

.product-detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.feature-panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 26px 26px 22px;
}
.feature-panel h2 { font-size: 16px; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
	font-size: 14.5px;
	color: var(--text);
}
.feature-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 38%; font-weight: 600; color: var(--ink); background: var(--bg-alt); }
/* Body images that came with the migrated product pages. The aoj.hk PDPs keep
   their pictures in the gallery strip, so only those pages render these. */
.product-figure { margin: 28px 0; }
.product-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--bg-alt);
}
.spec-request {
	background: var(--accent-tint);
	border: 1px solid #c9eef7;
	border-radius: var(--radius-sm);
	padding: 26px;
}
.spec-request p { color: #26545e; margin-bottom: 18px; }

/* ----------------------------------------------------------------- form */

.inquiry {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 34px;
}
.inquiry h2 { margin-bottom: 6px; }
.inquiry__note { color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field-row label, .field-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field-row span, .field-block span { font-size: 13px; font-weight: 600; color: var(--ink); }
.inquiry input, .inquiry textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--text);
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	width: 100%;
}
.inquiry input:focus, .inquiry textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 194, 227, .14); }
.inquiry__fallback { font-size: 13.5px; color: var(--muted); margin: 16px 0 0; }
.inquiry__fallback a { color: var(--accent-dark); font-weight: 600; }

/* ----------------------------------------------------------------- blog */

.post-list { display: flex; flex-direction: column; gap: 8px; }
.post-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 24px 26px;
}
.post-item time { font-size: 12.5px; color: var(--faint); }
.post-item h2 { font-size: 18px; margin: 6px 0 8px; }
.post-item p { margin: 0; font-size: 14.5px; color: var(--muted); }

.empty-note { color: var(--muted); font-size: 15px; }

/* -------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line-soft); background: #fff; padding: 56px 0 28px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.footer-col--brand { max-width: 40ch; }
.brand-mark--footer { font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); }
.footer-logo { height: 30px; width: auto; margin-bottom: 14px; }
.footer-note { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.footer-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 14px;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 9px; }
.footer-list a { font-size: 14px; color: var(--muted); }
.footer-list a:hover { color: var(--accent-dark); }

.footer-base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
}
.footer-base p { margin: 0; font-size: 13px; color: var(--faint); }
.footer-legal a:hover { color: var(--accent-dark); }

/* -------------------------------------------------------------- 404 page */

.notfound { padding: 64px 0 96px; text-align: center; }
.notfound__links { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.notfound__links a {
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-dark);
	background: var(--accent-tint);
	border-radius: var(--radius-pill);
	padding: 9px 18px;
}

/* ---------------------------------------------------------- pagination */

.pagination { margin-top: 40px; }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 8px 14px;
}
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #06313a; font-weight: 600; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
	.primary-nav { display: none; }
	.lines-grid { grid-template-columns: 1fr; }
	.proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.product-layout { grid-template-columns: 1fr; gap: 28px; }
	.product-detail-grid { grid-template-columns: 1fr; gap: 28px; }
	.cat-grid { grid-template-columns: 1fr; }
	.product-grid, .product-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.section { padding: 52px 0; }
	.hero { padding: 52px 0 40px; }
	.cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
	.product-grid, .product-grid--three, .solution-grid { grid-template-columns: 1fr; }
	.field-row { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.wrap { padding: 0 18px; }
	.inquiry { padding: 24px; }
	.subnav-inner { gap: 18px; }
}

/* -------------------------------------------------------------------------
   AOJ Health section (/health/)
   ---------------------------------------------------------------------- */

/* Brand palette. The AOJ Health mark is orange; the fill keeps its dark ink
   from the base stylesheet (≈6.5:1). accentDark is used for link text on white,
   where the brand orange would only reach ~1.9:1, so it is a deep amber. */
.aoj-section--health {
	--accent: #ffa400;
	--accent-dark: #a85a00;
	--accent-tint: #fff7e9;
}

.hero--health { background: linear-gradient(180deg, var(--accent-tint) 0%, #fff 100%); }

/* Product-line grid on the landing page. */
.line-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.line-tile {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.line-tile:hover {
	border-color: var(--accent);
	box-shadow: 0 12px 30px rgba(0, 40, 52, .08);
	transform: translateY(-3px);
}

.line-tile__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-bottom: 1px solid var(--line-soft);
}

.line-tile__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }

.line-tile__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }

.line-tile__body h3 { margin: 0; font-size: 19px; color: var(--ink); }

.line-tile__body p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }

.line-tile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.line-tile__tags .tag {
	font-size: 12px;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	background: var(--accent-tint);
	color: var(--accent-dark);
	font-weight: 600;
}

/* Sub-category chips under a product-line archive. */
.filter-bar--sub { margin-top: 12px; }

.filter-chip--ghost { background: var(--accent-tint); border-color: transparent; color: var(--accent-dark); }

/* Product gallery strip on the detail page. */
.gallery-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.gallery-strip img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 8px;
}

/* Two-column info band (ODM scope / certifications). */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 26px; }

.split h3 { margin: 0 0 10px; font-size: 19px; color: var(--ink); }

.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.check-list li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
}

.check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--accent-dark);
	font-weight: 700;
}

/* Blocks emitted by the seeded page content. */
.stat-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; padding: 0; list-style: none; }

.stat-list li {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	background: var(--bg-alt);
}

.stat-list strong { display: block; font-size: 21px; color: var(--accent-dark); }

.stat-list span { font-size: 13.5px; color: var(--muted); }

.cred-list { margin: 14px 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.cred-list li {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	background: #fff;
}

.cred-list strong { display: block; font-size: 15px; color: var(--ink); }

.cred-list span { font-size: 13px; color: var(--muted); }

.cmp { font-size: 15px; color: var(--text); margin: 6px 0; }

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1000px) {
	.line-grid { grid-template-columns: repeat(2, 1fr); }
	.gallery-strip { grid-template-columns: repeat(3, 1fr); }
	.split { grid-template-columns: 1fr; }
	.stat-list { grid-template-columns: repeat(2, 1fr); }
	.cred-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.line-grid { grid-template-columns: 1fr; }
	.gallery-strip { grid-template-columns: repeat(2, 1fr); }
	.stat-list { grid-template-columns: 1fr; }
	.cred-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   /health/ landing — 1:1 reproduction of the legacy www.aoj.hk home layout
   --------------------------------------------------------------------------
   The eight blocks in template-parts/legacy-health-home.php carry their own
   hand-written CSS (the legacy site embedded it in Elementor HTML widgets).
   Only two things have to be re-stated here: the Elementor container
   semantics that used to wrap those blocks, and the two elements that were
   real Elementor widgets (the "Certificate" heading and its banner image).

   Generated by tools/build-health-home.py — edit that script, not the markup.
   ========================================================================== */

.legacy-home { overflow-x: hidden; }

/* The legacy site runs Work Sans as its GLOBAL body font, so every block that
   does not name a family itself renders in Work Sans there. Reproduce that,
   otherwise the wider system stack changes line wraps inside the blocks. */
.legacy-home,
.legacy-home p,
.legacy-home li {
	font-family: 'Work Sans', Arial, sans-serif;
}

/* Astra's heading rhythm (h3 = 24px/1.3) differs from this theme's h1-h4
   (1.22 / -.015em). Titles that carry their own legacy class override these;
   this only restores the baseline for the ones that do not. */
.legacy-home h1,
.legacy-home h2,
.legacy-home h3,
.legacy-home h4 {
	line-height: 1.3;
	letter-spacing: normal;
}

/* Elementor container equivalent: flex column, always full width. */
.legacy-home .aoj-con {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}

/* Elementor "boxed" container: the inner column was capped at --content-width
   and centred. Full-bleed bands (hero, therapy strip) stay edge to edge. */
.legacy-home .aoj-con--boxed {
	max-width: var(--aoj-content-width, 1250px);
	margin-left: auto;
	margin-right: auto;
	padding-bottom: var(--aoj-pad-bottom, 0);
}

/* Was an Elementor heading widget: Roboto 600, 36px, #333, centred. */
.legacy-home .aoj-legacy-h2 {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: #333;
	text-align: center;
}

/* Was an Elementor image widget with padding: 0 0 30px 0. */
.legacy-home .aoj-con--boxed > img {
	display: block;
	width: 100%;
	max-width: 1024px;
	height: auto;
	margin: 0 auto;
	padding: 0 0 30px;
}

/* The legacy home page ships no <h1>, and its banners carry the headlines as
   pixels. page-health.php therefore emits the theme's own landing heading as
   an <h1> and clips it out of sight, so the document outline is correct for
   crawlers and screen readers while the rendered page stays the design.
   Standalone utility class — not scoped to .legacy-home, which is retired. */
.aoj-legacy-h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

@media (max-width: 768px) {
	.legacy-home .aoj-legacy-h2 { font-size: 28px; }
}

/* ================================================================= group home
   Components used only by front-page.php: the "2+1" manufacturing network,
   the capability cards, the brand wall and the newsroom list. Same tokens,
   same rhythm as the rest of the sheet — nothing here overrides an existing
   selector.
   ================================================================= */

.site-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.site-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 24px 22px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.site-card:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 40, 52, .07); transform: translateY(-3px); }
.site-card__loc {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--accent-dark);
}
.site-card h3 { margin: 0; font-size: 17px; }
.site-card dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.site-card dt { color: var(--faint); }
.site-card dd { margin: 0; color: var(--text); font-weight: 500; }
.site-card .pill { margin-top: 8px; }
.mfg-note {
	margin: 26px auto 0;
	max-width: 78ch;
	text-align: center;
	font-size: 13.5px;
	color: var(--muted);
}

.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cap-card {
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 24px 24px 22px;
}
.cap-card h3 { font-size: 17px; }
.cap-card p { margin: 0; font-size: 14px; color: var(--muted); }

.logo-wall { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.logo-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-sm);
	padding: 14px 10px;
	min-height: 64px;
}
.logo-tile img {
	max-height: 30px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .62;
	transition: filter .2s ease, opacity .2s ease;
}
.logo-tile:hover img { filter: grayscale(0); opacity: 1; }
.logo-note {
	margin: 22px auto 0;
	max-width: 74ch;
	text-align: center;
	font-size: 12.5px;
	color: var(--faint);
}

.news-list { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin: 0 auto; }
.news-row {
	display: flex;
	align-items: baseline;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 18px 24px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.news-row:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(0, 40, 52, .06); }
.news-row time {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--accent-dark);
	min-width: 128px;
}
.news-row h3 { margin: 0; font-size: 16px; flex: 1; }
.news-row .arrow { color: var(--accent-dark); }

@media (max-width: 1024px) {
	.site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.cap-grid { grid-template-columns: 1fr; }
	.logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.site-grid { grid-template-columns: 1fr; }
	.logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.news-row { flex-direction: column; gap: 6px; }
	.news-row time { min-width: 0; }
}

/* ==========================================================================
   AOJ Group — Home page redesign (v2)
   Appended override layer: dark premium hero, product-photo business cards,
   gold accent, poster-derived figures.
   ========================================================================== */

:root {
	--accent-bright: #33d6f2;
	--accent-dark: #0093ad;
	--gold: #d8b45a;
	--navy: #0a1a2a;
	--ink: #0a1420;
	--ink-2: #0e1c2b;
	--muted-on-dark: #a7b6c2;
	--bg-dark: #0a1a2a;
	--radius: 20px;
	--shadow-lg: 0 30px 60px -20px rgba(4, 20, 32, .28);
	--shadow-md: 0 16px 40px -18px rgba(4, 20, 32, .22);
}

/* ---- header: centered nav ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(14px); }
.header-inner { position: relative; justify-content: space-between; gap: 20px; }
.brand-mark { font-size: 24px; font-weight: 800; letter-spacing: -1px; }
.brand-sub { font-size: 12px; font-weight: 600; letter-spacing: 2px; }
.primary-nav { position: absolute; left: 50%; transform: translateX(-50%); gap: 32px; }
.primary-nav a { position: relative; font-weight: 500; }
.primary-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--accent); transition: width .25s ease; }
.primary-nav a:hover::after { width: 100%; }
.btn--primary:hover { background: var(--accent-bright); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(0,194,227,.6); }

/* ---- hero: dark premium ---- */
.hero--group { position: relative; text-align: center; padding: 108px 0 120px; background: radial-gradient(120% 130% at 80% -10%, #12334a 0%, var(--navy) 42%, #08131f 100%); color: #e8f2f7; overflow: hidden; border-bottom: 0; }
.hero--group::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size: 26px 26px; opacity: .6; }
.hero--group::after { content: ""; position: absolute; right: -140px; top: -140px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(0,194,227,.22) 0%, rgba(0,194,227,0) 65%); }
.hero--group .wrap { position: relative; z-index: 2; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 26px; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 36px; height: 1px; background: var(--accent); opacity: .6; }
.hero--group h1 { color: #fff; max-width: 19ch; margin: 0 auto 26px; letter-spacing: -.03em; }
.hero--group h1 .grad { background: linear-gradient(90deg, var(--accent-bright), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero--group .hero-lede { max-width: 66ch; margin: 0 auto; font-size: 18px; line-height: 1.7; color: var(--muted-on-dark); }
.hero--group .hero-actions { justify-content: center; margin-top: 38px; }
.hero--group .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.hero--group .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin-top: 64px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-proof__item { text-align: center; }
.hero-proof__value { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.hero-proof__label { font-size: 12.5px; color: var(--muted-on-dark); margin-top: 2px; }

/* ---- sections ---- */
.section { padding: 96px 0; }
.section-head { max-width: 72ch; margin-bottom: 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 18px; }
.section-head h2 { letter-spacing: -.025em; margin-bottom: 16px; }
.section-head p { font-size: 17px; line-height: 1.7; }
.grad-ink { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- business lines: photo cards ---- */
.lines-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.line-card { display: flex; flex-direction: column; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.line-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.line-card__bar { display: none; }
.line-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.line-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.line-card:hover .line-card__media img { transform: scale(1.04); }
.line-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,26,42,0) 55%, rgba(10,26,42,.55) 100%); }
.line-card__flag { position: absolute; left: 20px; bottom: 14px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.line-card__body { display: flex; flex-direction: column; gap: 9px; padding: 26px 30px 30px; }
.line-card__title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.line-card__tagline { font-size: 12.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent); margin-top: -4px; }
.line-card__desc { font-size: 15px; line-height: 1.65; }
.line-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.line-card__cta { margin-top: 8px; }
.line-card--external .line-card__tagline { color: var(--gold); }
.tag { background: var(--bg-alt); border: 1px solid var(--line); padding: 5px 14px; font-weight: 500; }

/* ---- strengths: dark band ---- */
.strengths { background: var(--bg-dark); color: #dce7ee; position: relative; overflow: hidden; }
.strengths::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 24px 24px; }
.strengths .wrap { position: relative; z-index: 2; }
.strengths .section-eyebrow { color: var(--accent-bright); }
.strengths .section-head h2 { color: #fff; }
.strengths .section-head p { color: var(--muted-on-dark); }
.evidence-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); overflow: hidden; margin-bottom: 64px; }
.evidence-item { padding: 38px 18px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.evidence-item:last-child { border-right: 0; }
.evidence-value { display: block; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.evidence-value .u { color: var(--accent-bright); }
.evidence-label { display: block; font-size: 12.5px; color: var(--muted-on-dark); margin-top: 6px; }
.strength-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: stretch; }
.strength-visual__frame { position: relative; height: 100%; min-height: 420px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden; }
.strength-visual__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strength-visual__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,19,31,.05) 40%, rgba(8,19,31,.55) 100%); }
.strength-visual__tag { position: absolute; left: 24px; bottom: 22px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.strength-list { display: flex; flex-direction: column; }
.strength-row { display: flex; gap: 24px; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.strength-row:last-child { border-bottom: 0; }
.strength-row__num { font-size: 15px; font-weight: 800; color: var(--accent); letter-spacing: 1px; padding-top: 5px; }
.strength-row__body { display: flex; flex-direction: column; gap: 9px; }
.strength-row__body h3 { margin: 0; font-size: 22px; color: #fff; letter-spacing: -.015em; }
.strength-row__body p { margin: 0; font-size: 15.5px; color: var(--muted-on-dark); line-height: 1.7; }
.strength-row__metric { font-size: 13px; font-weight: 700; color: var(--accent-bright); letter-spacing: .5px; }

/* ---- brand wall ---- */
.logo-tile { border-radius: 12px; padding: 18px 14px; min-height: 76px; transition: box-shadow .25s ease, border-color .25s ease; }
.logo-tile:hover { box-shadow: var(--shadow-md); border-color: transparent; }

/* ---- story ---- */
.story-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.story-copy .section-eyebrow { margin-bottom: 14px; }
.story-copy h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 18px; letter-spacing: -.02em; }
.story-copy p { font-size: 16px; line-height: 1.75; }
.timeline li { padding: 0 0 34px 30px; border-left: 2px solid var(--line); }
.timeline li::before { left: -8px; top: 5px; width: 14px; height: 14px; box-shadow: 0 0 0 4px var(--accent-tint); }
.timeline__year { font-size: 14px; font-weight: 700; letter-spacing: .5px; }
.timeline__label { font-size: 14.5px; line-height: 1.6; margin-top: 5px; }

/* ---- news ---- */
.news-row { padding: 22px 26px; border-radius: 12px; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.news-row:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.news-row time { min-width: 170px; font-size: 13px; font-weight: 500; }
.news-row h3 { font-size: 17px; }

/* ---- cta ---- */
.cta-band { position: relative; padding: 96px 0; background: radial-gradient(120% 140% at 15% 0%, #0e2336 0%, #08131f 70%); color: #dce7ee; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; left: 50%; top: -180px; transform: translateX(-50%); width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(0,194,227,.18) 0%, rgba(0,194,227,0) 65%); }
.cta-band__inner { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em; }
.cta-band p { color: var(--muted-on-dark); font-size: 16px; }
.cta-band .btn--primary { flex-shrink: 0; }

/* ---- footer ---- */
.site-footer { background: var(--ink-2); border-top: 0; color: var(--muted-on-dark); padding: 72px 0 32px; }
.brand-mark--footer { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: #fff; }
.footer-note { font-size: 14px; color: #8fa0ad; margin-top: 16px; line-height: 1.7; }
.footer-title { color: #6b7f8d; }
.footer-list a { font-size: 14.5px; color: var(--muted-on-dark); }
.footer-list a:hover { color: var(--accent-bright); }
.footer-base { border-top: 1px solid rgba(255,255,255,.1); margin-top: 52px; padding-top: 24px; }
.footer-base p { color: #6b7f8d; }
.footer-slogan { font-weight: 600; color: var(--accent-bright); letter-spacing: .3px; }
.footer-certs { font-size: 11.5px; letter-spacing: .5px; }
.footer-legal a:hover { color: var(--accent-bright); }

/* ---- responsive ---- */
@media (max-width: 960px) {
	.primary-nav { display: none; }
	.lines-grid { grid-template-columns: 1fr; }
	.strength-split { grid-template-columns: 1fr; gap: 40px; }
	.strength-visual__frame { min-height: 280px; }
	.evidence-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.evidence-item { border-right: 1px solid rgba(255,255,255,.08); }
	.evidence-item:nth-child(3n) { border-right: 0; }
	.evidence-item:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.08); }
	.story-grid { grid-template-columns: 1fr; gap: 44px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.cta-band__inner { flex-direction: column; align-items: flex-start; }
	.logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.footer-base { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 560px) {
	.hero--group { padding: 72px 0 80px; }
	.logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.evidence-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.evidence-item { border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
	.evidence-item:nth-child(2n) { border-right: 0; }
	.line-card__body { padding: 22px 22px 26px; }
	.line-card__title { font-size: 23px; }
}

/* ==========================================================================
   Home redesign v2.1 — brand logo lockup + polish
   ========================================================================== */

.brand--group { display: inline-flex; align-items: center; }
.brand-logo--group { height: 46px; width: auto; }
.brand--footer { display: inline-flex; align-items: center; }
.brand-logo--footer { height: 52px; width: auto; }
.footer-col--brand .brand-logo--footer { margin-bottom: 0; }

@media (max-width: 960px) {
	.brand-logo--group { height: 40px; }
}
@media (max-width: 560px) {
	.brand-logo--group { height: 34px; }
	.brand-logo--footer { height: 42px; }
}

/* ==========================================================================
   Home redesign v2.1 — brand logo lockup + polish
   ========================================================================== */

.brand--group { display: inline-flex; align-items: center; }
.brand-logo--group { height: 46px; width: auto; }
.brand--footer { display: inline-flex; align-items: center; }
.brand-logo--footer { height: 52px; width: auto; }
.footer-col--brand .brand-logo--footer { margin-bottom: 0; }

@media (max-width: 960px) {
	.brand-logo--group { height: 40px; }
}
@media (max-width: 560px) {
	.brand-logo--group { height: 34px; }
	.brand-logo--footer { height: 42px; }
}

/* v2.2 — larger brand presence in the header */
.brand-logo--group { height: 58px; width: auto; }
.header-inner { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 960px) { .brand-logo--group { height: 46px; } }
@media (max-width: 560px) { .brand-logo--group { height: 40px; } }

/* ==========================================================================
   Home redesign v2.1 — brand logo lockup + polish
   ========================================================================== */

.brand--group { display: inline-flex; align-items: center; }
.brand-logo--group { height: 46px; width: auto; }
.brand--footer { display: inline-flex; align-items: center; }
.brand-logo--footer { height: 52px; width: auto; }
.footer-col--brand .brand-logo--footer { margin-bottom: 0; }

@media (max-width: 960px) {
	.brand-logo--group { height: 40px; }
}
@media (max-width: 560px) {
	.brand-logo--group { height: 34px; }
	.brand-logo--footer { height: 42px; }
}

/* v2.2 — larger brand presence in the header */
.brand-logo--group { height: 58px; width: auto; }
.header-inner { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 960px) { .brand-logo--group { height: 46px; } }
@media (max-width: 560px) { .brand-logo--group { height: 40px; } }

/* v2.3 — larger header logo on first paint */
.site-header .brand-logo--group { height: 58px; }
.site-header .header-inner { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 960px) { .site-header .brand-logo--group { height: 46px; } }
@media (max-width: 560px) { .site-header .brand-logo--group { height: 44px; } }

/* ==========================================================================
   Home redesign v2.1 — brand logo lockup + polish
   ========================================================================== */

.brand--group { display: inline-flex; align-items: center; }
.brand-logo--group { height: 46px; width: auto; }
.brand--footer { display: inline-flex; align-items: center; }
.brand-logo--footer { height: 52px; width: auto; }
.footer-col--brand .brand-logo--footer { margin-bottom: 0; }

@media (max-width: 960px) {
	.brand-logo--group { height: 40px; }
}
@media (max-width: 560px) {
	.brand-logo--group { height: 34px; }
	.brand-logo--footer { height: 42px; }
}

/* v2.2 — larger brand presence in the header */
.brand-logo--group { height: 58px; width: auto; }
.header-inner { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 960px) { .brand-logo--group { height: 46px; } }
@media (max-width: 560px) { .brand-logo--group { height: 40px; } }

/* v2.3 — larger header logo on first paint */
.site-header .brand-logo--group { height: 58px; }
.site-header .header-inner { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 960px) { .site-header .brand-logo--group { height: 46px; } }
@media (max-width: 560px) { .site-header .brand-logo--group { height: 44px; } }

/* v2.4 — keep the centred nav clear of the larger mark on mid-size screens */
@media (min-width: 1200px) { .site-header .brand-logo--group { height: 58px; } }
@media (min-width: 961px) and (max-width: 1199px) { .site-header .brand-logo--group { height: 62px; } }
@media (max-width: 960px) { .site-header .brand-logo--group { height: 54px; } }
@media (max-width: 560px) { .site-header .brand-logo--group { height: 44px; } }

/* ==========================================================================
   Hero banner v3 — copy left, person photo right
   Fixes: the ghost button was white-on-white (base .btn--ghost has a #fff
   background, the dark hero only overrode its color).
   ========================================================================== */

.hero--group .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.hero--group .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }

.hero--group .hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 56px;
	align-items: center;
}
.hero--group .hero-copy { text-align: left; }
.hero--group .hero-copy h1 { margin-left: 0; margin-right: 0; max-width: 17ch; text-align: left; }
.hero--group .hero-copy .hero-lede { margin-left: 0; text-align: left; }
.hero--group .hero-copy .hero-actions { justify-content: flex-start; }

.hero--group .hero-media { position: relative; }
.hero--group .hero-media::before {
	content: "";
	position: absolute;
	inset: -18px auto auto -18px;
	width: 120px;
	height: 120px;
	border-radius: 28px;
	background: linear-gradient(135deg, rgba(0,194,227,.35), rgba(0,194,227,0));
	filter: blur(2px);
	pointer-events: none;
}
.hero--group .hero-media img {
	display: block;
	width: 100%;
	height: clamp(320px, 36vw, 470px);
	object-fit: cover;
	border-radius: 24px;
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 30px 70px -30px rgba(0,0,0,.65), 0 0 0 8px rgba(255,255,255,.03);
}

/* keep the proof strip centred under the two-column banner */
.hero--group .hero-proof { justify-content: center; }

@media (max-width: 960px) {
	.hero--group .hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.hero--group .hero-copy h1,
	.hero--group .hero-copy .hero-lede { margin-left: auto; margin-right: auto; text-align: center; max-width: 22ch; }
	.hero--group .hero-copy { text-align: center; }
	.hero--group .hero-copy .hero-actions { justify-content: center; }
	.hero--group .hero-media { order: 2; }
	.hero--group .hero-media img { height: clamp(240px, 52vw, 380px); }
	.hero--group .hero-media::before { display: none; }
}

/* =====================================================================
   Home page redesign v3 — commercial edition
   Photographic layout: studio hero, lifestyle cards, full-bleed band.
   Scope: .fp3-* classes only (front-page v3 markup).
   ===================================================================== */

@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-400.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-600.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-700.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}

.fp3-hero, .fp3-section, .fp3-band, .fp3-compliance, .fp3-cta {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------- atoms ------------------------------ */

.fp3-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.fp3-eyebrow {
	display: inline-block;
	font-size: 11.5px; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase;
	color: #0092B4;
	margin-bottom: 18px;
}
.fp3-eyebrow--light { color: rgba(255,255,255,.85); }
.fp3-eyebrow--cyan { color: #00C2E3; }

.fp3-h2 {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #0B1D28;
	margin: 0 0 0;
}
.fp3-h2 span { color: #0092B4; }
.fp3-dot { color: #00C2E3; }

.fp3-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 14.5px; font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.fp3-btn--solid { background: #00C2E3; color: #06222C; box-shadow: 0 10px 24px -10px rgba(0,194,227,.55); }
.fp3-btn--solid:hover { background: #00b1d1; transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(0,194,227,.6); }
.fp3-btn--line { background: #fff; color: #0B1D28; border-color: #C7D6DD; }
.fp3-btn--line:hover { border-color: #0B1D28; transform: translateY(-2px); }
.fp3-btn--light { background: #fff; color: #081821; }
.fp3-btn--light:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0,0,0,.5); }
.fp3-btn--cyan { background: #00C2E3; color: #06222C; box-shadow: 0 14px 30px -12px rgba(0,194,227,.65); }
.fp3-btn--cyan:hover { background: #00b1d1; transform: translateY(-2px); }
.fp3-btn--ghostlight { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.fp3-btn--ghostlight:hover { border-color: #fff; transform: translateY(-2px); }

.fp3-textlink {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 26px;
	font-size: 14.5px; font-weight: 600; color: #0B1D28;
	text-decoration: none;
	border-bottom: 2px solid #00C2E3;
	padding-bottom: 3px;
}
.fp3-textlink i { font-style: normal; transition: transform .2s ease; }
.fp3-textlink:hover i { transform: translateX(4px); }

/* ------------------------------- hero ------------------------------- */

.fp3-hero {
	position: relative;
	background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FA 100%);
	overflow: hidden;
}
.fp3-hero::before {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(0,194,227,.14) 1px, transparent 0);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46%, transparent 72%);
	mask-image: linear-gradient(90deg, #000 0%, #000 46%, transparent 72%);
	pointer-events: none;
}
.fp3-hero__inner {
	position: relative;
	max-width: 1240px; margin: 0 auto;
	padding: 92px 40px 96px;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: 56px;
	align-items: center;
}
.fp3-hero__title {
	font-size: clamp(36px, 4.3vw, 58px);
	line-height: 1.07;
	font-weight: 700;
	letter-spacing: -.025em;
	color: #0B1D28;
	margin: 0 0 22px;
}
.fp3-hero__title em {
	font-style: normal;
	background: linear-gradient(92deg, #00C2E3 10%, #0A7FC1 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.fp3-hero__lede {
	font-size: 16.5px; line-height: 1.7;
	color: #46565F;
	max-width: 54ch;
	margin: 0 0 34px;
}
.fp3-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }

.fp3-hero__stats {
	display: flex; flex-wrap: wrap;
}
.fp3-stat { padding: 0 34px; border-left: 1px solid #D5E1E7; }
.fp3-stat:first-child { padding-left: 0; border-left: 0; }
.fp3-stat__v {
	display: block;
	font-size: 30px; font-weight: 700; letter-spacing: -.02em;
	color: #0B1D28; line-height: 1.1;
}
.fp3-stat__l { display: block; margin-top: 4px; font-size: 12.5px; color: #7E8C95; }

.fp3-hero__stage {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 40px 90px -36px rgba(9, 42, 60, .45);
	border: 1px solid rgba(255,255,255,.7);
}
.fp3-hero__stage img { display: block; width: 100%; height: auto; }

/* ---------------------------- sections ------------------------------ */

.fp3-section { padding: 104px 0; }

.fp3-head { margin-bottom: 52px; }
.fp3-head--split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 40px;
	align-items: end;
}
.fp3-head--center { text-align: center; }
.fp3-head__sub {
	margin: 0; font-size: 15.5px; line-height: 1.7; color: #5B6B75;
}

/* --------------------------- businesses ----------------------------- */

.fp3-lines__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}
.fp3-card {
	position: relative;
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid #E3EAEE;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fp3-card::after {
	content: "";
	position: absolute; top: 0; left: 0;
	width: 0; height: 3px;
	background: linear-gradient(90deg, #00C2E3, #0A7FC1);
	transition: width .3s ease;
}
.fp3-card:hover {
	transform: translateY(-6px);
	border-color: rgba(0,194,227,.55);
	box-shadow: 0 30px 55px -28px rgba(9, 42, 60, .35);
}
.fp3-card:hover::after { width: 100%; }
.fp3-card__media {
	margin: 0; aspect-ratio: 4 / 4.6; overflow: hidden; background: #F0F5F8;
}
.fp3-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.fp3-card:hover .fp3-card__media img { transform: scale(1.05); }
.fp3-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.fp3-card__brand {
	font-size: 11px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: #0092B4;
	margin-bottom: 8px;
}
.fp3-card__title {
	font-size: 20px; font-weight: 700; letter-spacing: -.01em;
	color: #0B1D28; margin: 0 0 10px;
}
.fp3-card__desc {
	font-size: 13.5px; line-height: 1.65; color: #5B6B75; margin: 0 0 18px;
}
.fp3-card__more {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13.5px; font-weight: 600; color: #0B1D28;
}
.fp3-card__more i { font-style: normal; transition: transform .2s ease; color: #0092B4; }
.fp3-card:hover .fp3-card__more i { transform: translateX(5px); }

/* -------------------------- care band ------------------------------- */

.fp3-band {
	position: relative;
	min-height: 480px;
	display: flex; align-items: center;
	background: #081821;
	overflow: hidden;
}
.fp3-band__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: .9;
}
.fp3-band__veil {
	position: absolute; inset: 0;
	background: linear-gradient(92deg, rgba(6,20,28,.94) 8%, rgba(6,20,28,.72) 46%, rgba(6,20,28,.28) 100%);
}
.fp3-band__content {
	position: relative;
	max-width: 1240px; margin: 0 auto; padding: 88px 40px;
	width: 100%;
}
.fp3-band__title {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.16; font-weight: 700; letter-spacing: -.02em;
	color: #fff;
	max-width: 21ch;
	margin: 0 0 18px;
}
.fp3-band__lede {
	font-size: 16px; line-height: 1.7;
	color: rgba(255,255,255,.78);
	max-width: 56ch;
	margin: 0 0 34px;
}

/* --------------------------- strengths ------------------------------ */

.fp3-strength { background: #fff; }
.fp3-strength__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 64px;
	align-items: start;
	margin-bottom: 56px;
}
.fp3-strength__list .fp3-h2 { margin-bottom: 34px; }

.fp3-pillar {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 18px;
	padding: 26px 0;
	border-top: 1px solid #E3EAEE;
}
.fp3-pillar:last-child { border-bottom: 1px solid #E3EAEE; }
.fp3-pillar__no {
	font-size: 14px; font-weight: 700; color: #0092B4;
	letter-spacing: .06em;
	padding-top: 3px;
}
.fp3-pillar__main h3 {
	font-size: 18.5px; font-weight: 600; letter-spacing: -.01em;
	color: #0B1D28; margin: 0 0 8px;
}
.fp3-pillar__main p {
	font-size: 14px; line-height: 1.7; color: #5B6B75; margin: 0 0 14px;
}
.fp3-pillar__metric {
	display: inline-block;
	font-size: 12.5px; font-weight: 600; color: #007A96;
	background: #E1F6FB;
	border-radius: 999px;
	padding: 5px 14px;
}

.fp3-strength__media {
	display: grid; gap: 22px;
}
.fp3-shot {
	margin: 0; position: relative;
	border-radius: 18px; overflow: hidden;
	box-shadow: 0 26px 55px -30px rgba(9, 42, 60, .4);
}
.fp3-shot--tall { aspect-ratio: 16 / 10; }
.fp3-shot:not(.fp3-shot--tall) { aspect-ratio: 4 / 3; }
.fp3-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp3-shot figcaption {
	position: absolute; left: 16px; bottom: 16px;
	background: rgba(255,255,255,.92);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12px; font-weight: 600; letter-spacing: .04em;
	color: #0B1D28;
}

.fp3-evidence {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px;
	background: #E3EAEE;
	border: 1px solid #E3EAEE;
	border-radius: 16px;
	overflow: hidden;
}
.fp3-evidence__item {
	background: #FBFDFE;
	padding: 26px 20px;
	text-align: center;
}
.fp3-evidence__item b {
	display: block;
	font-size: 25px; font-weight: 700; letter-spacing: -.02em;
	color: #0B1D28;
}
.fp3-evidence__item span {
	display: block; margin-top: 6px;
	font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
	color: #7E8C95;
}

/* ---------------------------- clients ------------------------------- */

.fp3-clients { background: #F5F9FB; }
.fp3-clients__map { margin: 0; }
.fp3-clients__map img {
	width: 100%; display: block;
	border-radius: 18px;
	border: 1px solid #E3EAEE;
	background: #fff;
}

/* --------------------------- compliance ----------------------------- */

.fp3-compliance {
	background:
		radial-gradient(720px 340px at 82% 10%, rgba(0,194,227,.16), transparent 70%),
		#081821;
	padding: 88px 0;
}
.fp3-compliance__inner {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: 56px;
	align-items: center;
}
.fp3-compliance__text h2 {
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
	color: #fff;
	margin: 0 0 14px;
}
.fp3-compliance__text p {
	font-size: 14px; line-height: 1.8; letter-spacing: .02em;
	color: rgba(255,255,255,.72);
	margin: 0;
}
.fp3-compliance__wall { margin: 0; }
.fp3-compliance__wall img {
	width: 100%; display: block;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.14);
}

/* ------------------------------ story ------------------------------- */

.fp3-story { background: #fff; }
.fp3-story__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 64px;
	align-items: center;
	margin-bottom: 72px;
}
.fp3-story__text .fp3-h2 { margin-bottom: 22px; }
.fp3-story__lede {
	font-size: 16px; line-height: 1.75; color: #33434D;
	margin: 0 0 16px;
}
.fp3-story__body {
	font-size: 14.5px; line-height: 1.8; color: #5B6B75;
	margin: 0;
}
.fp3-story__media { margin: 0; }
.fp3-story__media img {
	width: 100%; display: block;
	border-radius: 18px;
	box-shadow: 0 30px 60px -32px rgba(9, 42, 60, .4);
}

.fp3-timeline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
}
.fp3-timeline__item {
	border-top: 2px solid #E3EAEE;
	padding-top: 18px;
}
.fp3-timeline__item:first-child { border-top-color: #00C2E3; }
.fp3-timeline__year {
	display: inline-block;
	font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase;
	color: #0092B4;
	margin-bottom: 8px;
}
.fp3-timeline__item p {
	font-size: 13.5px; line-height: 1.65; color: #5B6B75; margin: 0;
}

/* ----------------------------- newsroom ----------------------------- */

.fp3-news { background: #F5F9FB; }
.fp3-news__list { display: grid; gap: 12px; }
.fp3-news__row {
	display: grid;
	grid-template-columns: 92px 170px minmax(0, 1fr) 24px;
	gap: 22px;
	align-items: center;
	background: #fff;
	border: 1px solid #E3EAEE;
	border-radius: 14px;
	padding: 22px 26px;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fp3-news__row:hover {
	border-color: rgba(0,194,227,.6);
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -24px rgba(9, 42, 60, .3);
}
.fp3-news__row time {
	font-size: 14px; font-weight: 700; letter-spacing: .02em;
	color: #7E8C95;
}
.fp3-news__tag {
	font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase;
	color: #0092B4;
}
.fp3-news__title {
	font-size: 15.5px; font-weight: 500; line-height: 1.5;
	color: #0B1D28;
}
.fp3-news__row i {
	font-style: normal; color: #0092B4;
	transition: transform .2s ease;
}
.fp3-news__row:hover i { transform: translateX(5px); }

/* ------------------------------- cta -------------------------------- */

.fp3-cta {
	background:
		radial-gradient(760px 360px at 74% 18%, rgba(0,194,227,.22), transparent 70%),
		#081821;
	padding: 108px 0;
	text-align: center;
}
.fp3-cta h2 {
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
	color: #fff;
	margin: 0 0 18px;
}
.fp3-cta p {
	font-size: 16px; line-height: 1.7;
	color: rgba(255,255,255,.72);
	max-width: 58ch;
	margin: 0 auto 36px;
}
.fp3-cta__actions {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 14px;
}

/* ---------------------------- responsive ---------------------------- */

@media (max-width: 1080px) {
	.fp3-hero__inner { grid-template-columns: 1fr; padding: 64px 28px 72px; gap: 44px; }
	.fp3-hero__stage { max-width: 720px; }
	.fp3-lines__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp3-head--split { grid-template-columns: 1fr; align-items: start; gap: 16px; }
	.fp3-strength__cols { grid-template-columns: 1fr; gap: 48px; }
	.fp3-evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fp3-compliance__inner { grid-template-columns: 1fr; gap: 36px; }
	.fp3-story__cols { grid-template-columns: 1fr; gap: 44px; }
	.fp3-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp3-news__row { grid-template-columns: 80px minmax(0, 1fr) 24px; }
	.fp3-news__tag { display: none; }
}

@media (max-width: 640px) {
	.fp3-wrap, .fp3-hero__inner, .fp3-band__content { padding-left: 20px; padding-right: 20px; }
	.fp3-section { padding: 64px 0; }
	.fp3-hero__inner { padding: 48px 20px 56px; }
	.fp3-hero__actions .fp3-btn { width: 100%; }
	.fp3-stat { padding: 0 18px; }
	.fp3-stat__v { font-size: 24px; }
	.fp3-lines__grid { grid-template-columns: 1fr; }
	.fp3-card__media { aspect-ratio: 4 / 3.4; }
	.fp3-band { min-height: 420px; }
	.fp3-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fp3-timeline { grid-template-columns: 1fr; gap: 18px; }
	.fp3-news__row { grid-template-columns: minmax(0, 1fr) 24px; padding: 18px 20px; }
	.fp3-news__row time { display: none; }
	.fp3-cta { padding: 76px 0; }
	.fp3-cta__actions .fp3-btn { width: 100%; }
}
/* =====================================================================
   v3.1 — density & presence polish
   Feedback: too much whitespace, imagery feels small, header logo's
   slogan unreadable. Tighter rhythm, larger hero art, bigger logo.
   ===================================================================== */

/* --- header logo: make the slogan legible --------------------------- */
.brand-logo--group { width: auto; }
@media (min-width: 1200px) { .brand-logo--group { height: 46px; } }
@media (min-width: 961px) and (max-width: 1199px) { .brand-logo--group { height: 42px; } }
@media (max-width: 960px) { .brand-logo--group { height: 37px; } }
@media (max-width: 560px) { .brand-logo--group { height: 32px; } }

/* --- wider canvas ---------------------------------------------------- */
.fp3-wrap { max-width: 1280px; }
.fp3-hero__inner { max-width: 1280px; }
.fp3-band__content { max-width: 1280px; }

/* --- hero: bigger art, less air -------------------------------------- */
.fp3-hero { background: linear-gradient(180deg, #FFFFFF 0%, #E7F1F8 100%); }
.fp3-hero::before {
	background-image: radial-gradient(circle at 1px 1px, rgba(0,194,227,.22) 1.2px, transparent 0);
}
.fp3-hero__inner {
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: 44px;
	padding: 64px 40px 76px;
}
.fp3-hero__title { font-size: clamp(38px, 4.7vw, 63px); }
.fp3-hero__lede { max-width: 50ch; }
.fp3-hero__actions { margin-bottom: 38px; }
.fp3-stat__v { font-size: 32px; }
.fp3-hero__stage { border-radius: 24px; }

/* --- tighter sections ------------------------------------------------ */
.fp3-section { padding: 84px 0; }
.fp3-head { margin-bottom: 42px; }
.fp3-band { min-height: 520px; }

/* --- businesses on mist so white cards pop --------------------------- */
.fp3-lines { background: #F5F9FB; }
.fp3-card { box-shadow: 0 14px 34px -26px rgba(9, 42, 60, .25); }
.fp3-card:hover { box-shadow: 0 30px 55px -26px rgba(9, 42, 60, .4); }

/* --- evidence strip: louder numbers ---------------------------------- */
.fp3-evidence__item { padding: 30px 18px; }
.fp3-evidence__item b { font-size: 28px; }

/* --- mobile rebalance ------------------------------------------------ */
@media (max-width: 1080px) {
	.fp3-hero__inner { padding: 52px 28px 60px; }
}
@media (max-width: 640px) {
	.fp3-section { padding: 56px 0; }
	.fp3-hero__inner { padding: 40px 20px 48px; }
	.fp3-stat__v { font-size: 26px; }
}

/* --- header logo: make the slogan legible --------------------------- */
.site-header .brand-logo--group { width: auto; }
@media (min-width: 1200px) { .site-header .brand-logo--group { height: 46px; } }
@media (min-width: 961px) and (max-width: 1199px) { .site-header .brand-logo--group { height: 42px; } }
@media (max-width: 960px) { .site-header .brand-logo--group { height: 37px; } }
@media (max-width: 560px) { .site-header .brand-logo--group { height: 32px; } }

/* --- wider canvas ---------------------------------------------------- */
.fp3-wrap { max-width: 1280px; }
.fp3-hero__inner { max-width: 1280px; }
.fp3-band__content { max-width: 1280px; }

/* --- hero: bigger art, less air -------------------------------------- */
.fp3-hero { background: linear-gradient(180deg, #FFFFFF 0%, #E7F1F8 100%); }
.fp3-hero::before {
	background-image: radial-gradient(circle at 1px 1px, rgba(0,194,227,.22) 1.2px, transparent 0);
}
.fp3-hero__inner {
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: 44px;
	padding: 64px 40px 76px;
}
.fp3-hero__title { font-size: clamp(38px, 4.7vw, 63px); }
.fp3-hero__lede { max-width: 50ch; }
.fp3-hero__actions { margin-bottom: 38px; }
.fp3-stat__v { font-size: 32px; }
.fp3-hero__stage { border-radius: 24px; }

/* --- tighter sections ------------------------------------------------ */
.fp3-section { padding: 84px 0; }
.fp3-head { margin-bottom: 42px; }
.fp3-band { min-height: 520px; }

/* --- businesses on mist so white cards pop --------------------------- */
.fp3-lines { background: #F5F9FB; }
.fp3-card { box-shadow: 0 14px 34px -26px rgba(9, 42, 60, .25); }
.fp3-card:hover { box-shadow: 0 30px 55px -26px rgba(9, 42, 60, .4); }

/* --- evidence strip: louder numbers ---------------------------------- */
.fp3-evidence__item { padding: 30px 18px; }
.fp3-evidence__item b { font-size: 28px; }

/* --- mobile rebalance ------------------------------------------------ */
@media (max-width: 1080px) {
	.fp3-hero__inner { padding: 52px 28px 60px; }
}
@media (max-width: 640px) {
	.fp3-section { padding: 56px 0; }
	.fp3-hero__inner { padding: 40px 20px 48px; }
	.fp3-stat__v { font-size: 26px; }
}

/* v3.1b — hero title back to a 3–4 line rhythm */
.fp3-hero__title { font-size: clamp(34px, 3.9vw, 56px); }

/* v3.1c — rebalance hero columns for a 3-line title */
.fp3-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fp3-hero__title { font-size: clamp(34px, 3.8vw, 52px); }
/* =====================================================================
   v3.2 — lock the cyan to the logo (#00C0E0)
   The v3 gradient drifted blue (#0A7FC1) and small-text accents used a
   desaturated steel tone (#0092B4). Everything below stays in the
   logo's hue (~188deg): large display text takes the logo cyan family,
   small text takes the same hue darkened for contrast.
   ===================================================================== */

/* hero headline gradient: cyan → deeper cyan, no blue drift */
.fp3-hero__title em {
	background: linear-gradient(92deg, #00C0E0 8%, #00A3C4 92%);
	-webkit-background-clip: text;
	background-clip: text;
}
.fp3-dot { color: #00C0E0; }

/* section headings accent */
.fp3-h2 span { color: #00A7C6; }

/* small text accents: same hue, darkened for legibility */
.fp3-eyebrow { color: #0083A0; }
.fp3-eyebrow--cyan { color: #00C0E0; }
.fp3-card__brand { color: #0083A0; }
.fp3-card__more i { color: #00A0BE; }
.fp3-pillar__no { color: #00A0BE; }
.fp3-pillar__metric { color: #00758E; background: #DFF5FB; }
.fp3-news__tag { color: #0083A0; }
.fp3-news__row i { color: #00A0BE; }
.fp3-timeline__year { color: #0083A0; }
.fp3-timeline__item:first-child { border-top-color: #00C0E0; }
.fp3-textlink { border-bottom-color: #00C0E0; }

/* card hover top bar: pure logo cyan gradient */
.fp3-card::after { background: linear-gradient(90deg, #00C0E0, #00A3C4); }

/* v3.3 — clients strip: logo grid card + one-line endorsement copy */
.fp3-clients__map img { padding: 34px 44px; }
.fp3-clients__note {
	max-width: 720px;
	margin: 30px auto 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.75;
	color: #46565F;
}
@media (max-width: 640px) {
	.fp3-clients__map img { padding: 18px; }
}

/* ==========================================================================
   v2.4 — 英文 master logo（5.4:1）适配
   新 logo 比旧版更宽（400px @ 74px 高），导航改为流式布局避免与 slogan 重叠
   ========================================================================== */
@media (min-width: 961px) {
	.site-header .primary-nav { position: static; left: auto; transform: none; flex: 1; justify-content: center; }
}

/* --- hero responsive fix (2026-10-19, v1.7.2) ------------------------- */
/* The "bigger art" re-tune above re-declares .fp3-hero__inner at top level
   AFTER the 1080px single-column block earlier in the file, so its
   grid-template-columns won the cascade and phones rendered the hero as two
   columns (title crushed to one word per line, stage image shrunk). Re-assert
   the stacked layout here, after every top-level declaration. */
@media (max-width: 1080px) {
	.fp3-hero__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.fp3-hero__stage {
		max-width: 720px;
		margin: 0 auto;
		width: 100%;
	}
}
@media (max-width: 640px) {
	.fp3-hero__title { font-size: clamp(31px, 8.6vw, 38px); line-height: 1.12; }
	.fp3-hero__lede { font-size: 15.5px; }
	.fp3-hero__stats { flex-wrap: wrap; }
}

/* --- sticky filter rows + subnav highlight (2026-10-20, v1.7.5) --- */
/* The filter rows stay pinned under the sticky header while the product
   list scrolls, so the filter is always on top of the list. The active
   chip keeps its highlight; picking another chip navigates and the row
   highlights the newly selected one on the target page. */
.filter-bar,
.tag-filter {
	position: sticky;
	top: 118px;
	z-index: 30;
}
.filter-bar {
	padding: 10px 12px;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(160%) blur(8px);
	border: 1px solid var(--line-soft);
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(9, 30, 36, .05);
}
@media (max-width: 960px) {
	.filter-bar,
	.tag-filter { top: 64px; }
}

/* Section subnav doubles as the category filter — highlight the term in view. */
.subnav a.is-active {
	color: var(--accent-dark);
	border-bottom-color: var(--accent);
	font-weight: 600;
}

/* Homepage: business-line chips above the four cards; anchors must clear
   the sticky header, and this row is a one-screen navigator, not a sticky. */
.fp3-lines__filter { position: static; margin-bottom: 28px; }
.fp3-lines__filter .filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: #06313a; }
.fp3-lines__grid .fp3-card { scroll-margin-top: 96px; }

/* --- footer contact block (2026-10-20, v1.7.6) --- */
/* Email / Phone / Address on one shared block across all three sections. The
   label sits on its own line so the long Shenzhen address wraps cleanly in
   the narrow footer column instead of being squeezed beside "Address:". */
.footer-list--contact li { line-height: 1.55; }
.footer-list--contact li + li { margin-top: 10px; }
.footer-list--contact strong {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	opacity: .72;
	margin-bottom: 2px;
}
.footer-list__address { max-width: 34ch; }

/* --- long unbreakable runs in imported copy (2026-10-20, v1.7.8) --- */
/* Some legacy posts were pasted with a non-breaking space between every word
   ("In&nbsp;the&nbsp;future,..."). The paragraph is then a single unbreakable
   run whose min-content width (~642px) pushes documentElement.scrollWidth past
   the viewport on phones. Breaking inside the run is the correct fix: the copy
   still reads as one sentence, and overflow-wrap only kicks in when a line
   genuinely cannot fit. */
.entry-body,
.page-hero__lede,
.card__excerpt,
.entry-cover figcaption {
	overflow-wrap: anywhere;
	word-break: normal;
}