/**
 * Homepage sections (ports routes/index.tsx layout).
 */

.home-muted {
	background: var(--muted);
}

/* ---------- Hero ---------- */

.home-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(5rem, 12vw, 9rem) clamp(6rem, 14vw, 10rem);
}

.home-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -3;
}

.home-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(to top, var(--background), color-mix(in oklab, var(--background) 50%, transparent) 50%, color-mix(in oklab, var(--background) 20%, transparent)),
		color-mix(in oklab, var(--background) 70%, transparent);
}

.home-hero-grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.04;
	pointer-events: none;
}

/* Full container width — the text block hugs the start (right in RTL)
   edge like the original max-w-3xl inside max-w-7xl. */
.home-hero-inner {
	max-width: 1200px;
}

.home-hero h1,
.home-hero-tagline {
	max-width: 44rem;
}

.hero-badge {
	display: inline-block;
	padding: 4px 12px;
	background: color-mix(in oklab, var(--background) 90%, transparent);
	color: var(--blueprint);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	border: 1px solid color-mix(in oklab, var(--blueprint) 20%, transparent);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	margin-bottom: 2rem;
}

.home-hero h1 {
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	line-height: 1.05;
	margin-bottom: 1.5rem;
}

.home-hero-tagline {
	font-family: var(--font-mono);
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 2rem;
}

.home-hero-lead {
	font-size: 1.1rem;
	max-width: 36rem;
	line-height: 1.7;
	margin-bottom: 2.5rem;
}

/* Block buttons (square, uppercase — the homepage CTA style) */

.btn-block {
	display: inline-block;
	padding: 1rem 2rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-block-solid {
	background: var(--foreground);
	color: var(--background);
}

.btn-block-solid:hover {
	background: var(--accent-lime);
	color: var(--blueprint);
}

.btn-block-outline {
	border: 1px solid oklch(0.55 0.15 118);
	color: oklch(0.45 0.13 118);
}

.btn-block-outline:hover {
	background: var(--accent-lime);
	color: var(--blueprint);
}

.btn-block-accent {
	background: var(--accent-lime);
	color: var(--blueprint);
}

.btn-block-accent:hover {
	background: var(--background);
	color: var(--foreground);
}

.btn-block-green {
	background: oklch(0.55 0.15 118);
	color: oklch(1 0 0);
	align-self: center;
}

.btn-block-green:hover {
	background: var(--foreground);
	color: var(--background);
}

/* ---------- Section header helpers ---------- */

.section-sub {
	max-width: 44rem;
	color: var(--muted-foreground);
	margin-bottom: 3rem;
}

.section-copy {
	max-width: 44rem;
	font-size: 1.05rem;
	margin-bottom: 3rem;
}

/* ---------- Arms ---------- */

.arm-grid {
	display: grid;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
}

.arm-grid-2 { border-bottom: 0; }

@media (min-width: 768px) {
	.arm-grid-2 { grid-template-columns: 1fr 1fr; }
	.arm-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.arm-card {
	min-height: 280px;
}

.arm-card-sm {
	min-height: 200px;
	padding: 2rem;
}

.arm-card-sm h3 {
	font-size: 1.05rem;
}

.arm-card-sm p {
	font-size: 0.8rem;
}

.arm-card .hub-view {
	display: inline-block;
	margin-top: 1.25rem;
}

/* ---------- Engineering cards ---------- */

.eng-grid {
	display: grid;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
}

@media (min-width: 768px) {
	.eng-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.eng-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.eng-cell {
	background: var(--background);
	padding: 2rem;
}

.eng-cell h3 {
	font-size: 1.05rem;
	margin: 0.75rem 0 0.5rem;
}

.eng-cell p {
	font-size: 0.88rem;
	color: var(--muted-foreground);
	margin: 0;
}

/* ---------- DFM / DfAM ---------- */

.dfm-grid {
	display: grid;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
}

@media (min-width: 768px) {
	.dfm-grid { grid-template-columns: 1fr 1fr; }
}

.dfm-col {
	position: relative;
	background: var(--background);
	padding: 2.5rem;
}

.dfm-col-grid {
	position: absolute;
	inset: 0;
	opacity: 0.05;
	pointer-events: none;
}

.dfm-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.dfm-head h3 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	margin: 0;
}

.dfm-sub {
	font-size: 0.88rem;
	margin-block: 0.5rem 2rem;
}

.arrow-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
	position: relative;
}

.arrow-list li::before {
	content: "←";
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: oklch(0.55 0.15 118);
	margin-inline-end: 0.9rem;
}

html[dir="ltr"] .arrow-list li::before {
	content: "→";
}

.dfm-closer {
	margin-top: 3rem;
	max-width: 44rem;
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.35;
}

/* ---------- Manufacturing (dark) ---------- */

.home-mfg {
	position: relative;
	overflow: hidden;
}

.home-mfg-grid {
	position: absolute;
	inset: 0;
	opacity: 0.04;
	pointer-events: none;
}

.home-mfg .container {
	position: relative;
}

.mfg-grid {
	display: grid;
	gap: 1px;
	background: oklch(1 0 0 / 15%);
	border: 1px solid oklch(1 0 0 / 15%);
}

@media (min-width: 768px) {
	.mfg-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.mfg-grid { grid-template-columns: repeat(4, 1fr); }
}

.mfg-cell {
	background: var(--blueprint);
	padding: 2.5rem;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mfg-cell h3 {
	font-size: 1.35rem;
	margin: 0;
}

.mfg-cell p {
	font-size: 0.85rem;
	opacity: 0.7;
	margin: 0;
}

/* ---------- Accent banners ---------- */

.banner-accent {
	margin-top: 3rem;
	border: 1px solid color-mix(in oklab, var(--accent-lime) 40%, transparent);
	background: color-mix(in oklab, var(--accent-lime) 5%, transparent);
	padding: 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.banner-accent {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.banner-title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
	max-width: 34rem;
}

/* ---------- Split sections (shop/courses/care) ---------- */

.split-grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 900px) {
	.split-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
	.split-reverse .split-media { order: -1; }
}

.split-copy p {
	font-size: 1.02rem;
}

.split-cta {
	margin-top: 2rem;
}

.split-media {
	border: 1px solid var(--border);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.split-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.shop-cats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
}

.shop-cat {
	min-height: 140px;
	padding: 2rem;
}

.shop-cat p {
	font-size: 1rem;
	font-weight: 700;
	color: inherit;
	margin: 0;
}

.shop-cat-img {
	background: var(--background);
	min-height: 140px;
	overflow: hidden;
}

.shop-cat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Split CTA paths ---------- */

.paths-head {
	text-align: center;
	margin-bottom: 3rem;
}

.paths-grid {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.paths-grid { grid-template-columns: 1fr 1fr; }
}

.path-card {
	background: var(--background);
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
}

.path-a { border-top: 4px solid oklch(0.55 0.15 118); }
.path-b { border-top: 4px solid var(--accent-lime); }

.path-card h3 {
	font-size: clamp(1.3rem, 2.5vw, 1.7rem);
	margin: 1rem 0;
}

.path-card p {
	flex: 1;
	color: var(--muted-foreground);
	margin-bottom: 2rem;
}

/* ---------- Shop: announcements / deals ---------- */

.announce-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	.announce-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.announce-grid { grid-template-columns: repeat(3, 1fr); }
}

.announce-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.6rem;
	border: 1px solid var(--border);
	background: var(--surface);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.announce-card:hover {
	border-color: color-mix(in oklab, var(--accent-lime) 60%, transparent);
	transform: translateY(-2px);
}

.announce-tag {
	align-self: flex-start;
	font-family: var(--font-mono, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	background: color-mix(in oklab, var(--accent-lime) 15%, transparent);
	color: var(--foreground); /* dark text for AA contrast on the light-lime chip */
	border: 1px solid color-mix(in oklab, var(--accent-lime) 55%, transparent);
}

.announce-card h3 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
}

.announce-card p {
	font-size: 0.9rem;
	line-height: 1.55;
	opacity: 0.75;
	margin: 0;
}

.announce-more {
	margin-top: auto;
	font-family: var(--font-mono, monospace);
	font-size: 0.8rem;
	color: color-mix(in oklab, var(--accent-lime) 75%, black);
}

/* ---------- Shop: Why P3 ---------- */

.why-p3-grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 900px) {
	.why-p3-grid { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}

.why-p3-text h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.2;
	margin: 0.5rem 0 1rem;
}

.why-p3-text p {
	line-height: 1.7;
	opacity: 0.8;
	margin: 0 0 1.25rem;
	max-width: 34rem;
}

.why-p3-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
}

.why-p3-stat {
	background: var(--surface);
	padding: 2rem 1.5rem;
	text-align: center;
}

.why-p3-num {
	font-family: var(--font-mono, monospace);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 700;
	color: color-mix(in oklab, var(--accent-lime) 80%, black);
	line-height: 1;
}

.why-p3-label {
	font-size: 0.85rem;
	opacity: 0.7;
	margin-top: 0.5rem;
}

/* ---------- Shop: newsletter ---------- */

.newsletter-inner {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

.newsletter-inner h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0.5rem 0 0.75rem;
}

.newsletter-inner > p {
	line-height: 1.6;
	opacity: 0.8;
	margin: 0 0 1.5rem;
}

.newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-bottom: 1rem;
}

.newsletter-form input[type="email"] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--border);
	background: var(--surface);
	color: inherit;
	font-size: 1rem;
}

.newsletter-form input[type="email"]:focus {
	outline: none;
	border-color: var(--accent-lime);
}

.newsletter-form button {
	padding: 0.85rem 2rem;
	border: none;
	background: var(--accent-lime);
	color: #0a0a0a;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.newsletter-form button:hover { opacity: 0.85; }

.newsletter-note {
	font-size: 0.9rem;
	margin: 0 0 1rem;
	padding: 0.6rem 1rem;
	display: inline-block;
}

.newsletter-ok {
	color: color-mix(in oklab, var(--accent-lime) 80%, black);
	background: color-mix(in oklab, var(--accent-lime) 12%, transparent);
}

.newsletter-err {
	color: #b3261e;
	background: color-mix(in oklab, #b3261e 10%, transparent);
}

/* ---------- Homepage FAQ (migrated from old site) ---------- */

.home-faq .faq-list {
	max-width: 52rem;
	margin-top: 1.75rem;
}
.faq-item {
	border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
	border-top: 1px solid var(--border);
}
.faq-q {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 0.25rem;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--foreground);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: color-mix(in oklab, var(--accent-lime) 75%, black);
	transition: transform 0.2s ease;
}
.faq-item[open] > .faq-q::after { content: "–"; }
.faq-item[open] > .faq-q { color: color-mix(in oklab, var(--accent-lime) 75%, black); }
.faq-a {
	padding: 0 0.25rem 1.4rem;
	line-height: 1.85;
	color: var(--muted-foreground);
}
.faq-a p { margin: 0 0 0.85rem; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--foreground); }
.faq-a a {
	color: color-mix(in oklab, var(--accent-lime) 78%, black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Client logo wall (parts/client-marquee.php) ---------- */

.clients-wall {
	overflow: hidden;
	background: var(--background);
}

.clients-wall .section-sub { margin-bottom: 2rem; }

.clients-marquee {
	display: grid;
	gap: 0.75rem;
	/* Fade both edges so logos enter and leave softly instead of being sliced
	   off at the viewport line. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.clients-track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

/* Deliberately no `gap`. N items separated by gap produce N-1 gaps, so half the
   track falls half a gap short of one full repeat and the loop visibly jumps.
   The spacing lives on the item instead, where every item carries its own. */
.clients-track > li {
	flex: 0 0 auto;
	margin-inline-end: 0.75rem;
}

/* In RTL the flex row is laid out right-to-left, so a negative translation
   pushes content off-screen instead of pulling the duplicate copy in. Each
   direction needs its own sign. */
@keyframes clients-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes clients-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

.clients-track-0 { animation: clients-ltr 70s linear infinite; }
.clients-track-1 { animation: clients-ltr 82s linear infinite reverse; }
.clients-track-2 { animation: clients-ltr 76s linear infinite; }

html[dir="rtl"] .clients-track-0 { animation-name: clients-rtl; }
html[dir="rtl"] .clients-track-1 { animation-name: clients-rtl; }
html[dir="rtl"] .clients-track-2 { animation-name: clients-rtl; }

/* No hover pause: the wall is decoration, not something to stop and read.
   Keyboard focus still pauses - otherwise a tabbing user chases a moving target. */
.clients-marquee:focus-within .clients-track {
	animation-play-state: paused;
}

/* Every logo gets the same box regardless of its own proportions. object-fit
   keeps each logo's real aspect ratio inside that box, so nothing is stretched
   and the row still reads as one even strip. */
.clients-track img {
	display: block;
	width: 150px;
	height: 64px;
	object-fit: contain;
	object-position: center;
	padding: 0.55rem 0.9rem;
	box-sizing: content-box;
	/* White, not the muted grey: a good third of these files are opaque images
	   with their own white background baked in, which on grey would read as
	   pale patches instead of logos. */
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
}

/* Logos drawn in white ink on transparency would vanish on the white tile.
   They keep their real colour and get a dark tile instead - inverting them
   would show a fake, recoloured version of someone's brand. */
.clients-track img.is-light-logo {
	background: var(--blueprint);
	border-color: var(--blueprint);
}

@media (max-width: 640px) {
	.clients-track img { width: 108px; height: 48px; padding: 0.45rem 0.7rem; }
	.clients-track > li { margin-inline-end: 0.5rem; }
}

/* Someone who asked for less motion should not get three moving strips. It
   becomes a normal horizontal scroller they control themselves. */
@media (prefers-reduced-motion: reduce) {
	.clients-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.clients-track {
		animation: none;
		width: auto;
		overflow-x: auto;
	}
}