/* KHOME homepage — classic PHP template styles */

:root {
	--kh-orange:     #ff6b1a; /* primary action color — buttons, eyebrows, links, accents */
	--kh-orange-600: #e85a0c;
	--kh-navy:       #0c2340; /* dark backgrounds — CTA, footer, badge, logo mark */
	--kh-navy-700:   #143258;
	--kh-dark:       #111827;
	--kh-grey:       #6B7280;
	--kh-light:      #F5F7FA;
	--kh-border:     rgba(0,0,0,.08);
}

.kh-home { color: var(--kh-dark); }
.kh-home a { color: inherit; }
.kh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.kh-section { padding: 80px 0; }
.kh-section--grey { background: var(--kh-light); }
.kh-section--dark {
	background: var(--kh-navy);
	background-image:
		radial-gradient(circle at 20% 50%, rgba(255, 107, 26, .15), transparent 50%),
		radial-gradient(circle at 80% 50%, rgba(20, 50, 88, .8), transparent 50%);
	color: #fff;
}
/* Section header (eyebrow/h2/sub/section--head) is shared from khome-global.css */
.kh-home .kh-arrow {
	display: inline-block;
	color: var(--kh-orange);
	font-weight: 600;
	text-decoration: none;
	margin-top: 16px;
}
.kh-home .kh-arrow:hover { color: var(--kh-orange-600); text-decoration: underline; }

/* Hero */
.kh-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--kh-dark) center/cover no-repeat;
	padding: 96px 24px;
	text-align: center;
}
.kh-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: rgba(0,0,0,.55);
}
.kh-hero-inner { position: relative; z-index: 1; max-width: 1100px; width: 100%; }
.kh-hero h1 {
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 36px !important;
	color: #fff;
}
.kh-hero h1 .accent { color: var(--kh-orange); display: block; margin-top: 20px; }
.kh-hero p.lead {
	font-size: 1.05rem;
	max-width: 680px;
	margin: 0 auto 32px;
}
.kh-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.kh-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 6px;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	transition: transform .15s, opacity .15s;
}
.kh-btn:hover { transform: translateY(-1px); }
.kh-btn--primary { background: var(--kh-orange); color: #fff; }
.kh-btn--ghost   { border: 1px solid #fff; color: #fff; }

.kh-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 56px;
}
.kh-stat strong {
	display: block;
	font-size: 2.4rem;
	font-weight: 700;
}
.kh-stat span { font-size: .9rem; opacity: .85; }

/* About */
.kh-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.kh-about-list { padding-left: 1.2em; line-height: 1.9; margin: 18px 0 24px; }
.kh-about-visual {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.kh-about-img {
	border-radius: 12px;
	overflow: hidden;
	background: #ddd;
	aspect-ratio: 4/3;
}
.kh-about-img.is-tall { grid-column: 1 / span 2; aspect-ratio: 16/8; }
.kh-about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-badge {
	background: var(--kh-navy);
	color: #fff;
	border-radius: 12px;
	padding: 28px 18px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.kh-badge strong {
	color: var(--kh-orange);
	font-size: 1.4rem;
	font-weight: 800;
	display: block;
	margin-bottom: 6px;
}
.kh-badge span { font-size: .85rem; color: rgba(255,255,255,.85); }

/* Brands */
.kh-brands-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.kh-card {
	background: #fff;
	border-radius: 12px;
	padding: 36px;
	border: 1px solid var(--kh-border);
	min-width: 0;
	overflow: hidden;
	transition: transform 200ms cubic-bezier(.2,.7,.3,1), box-shadow 200ms cubic-bezier(.2,.7,.3,1), border-color 200ms cubic-bezier(.2,.7,.3,1);
}
.kh-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(12, 35, 64, .12);
	border-color: transparent;
}
.kh-card .kh-card-img {
	background: #f5f5f5;
	margin: -36px -36px 24px;
	overflow: hidden;
	max-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kh-card .kh-card-img img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.kh-card h3 { font-size: 1.4rem; font-weight: 700; margin: 0 0 16px; }
.kh-card p  { color: #555; margin: 0; }

/* Products */
.kh-products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.kh-product-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	overflow: hidden;
	min-width: 0;
	transition: transform 200ms cubic-bezier(.2,.7,.3,1), box-shadow 200ms cubic-bezier(.2,.7,.3,1), border-color 200ms cubic-bezier(.2,.7,.3,1);
}
.kh-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(12, 35, 64, .12);
	border-color: transparent;
}
.kh-product-card .kh-product-img {
	height: 220px;
	background: #e5e7eb;
	overflow: hidden;
}
.kh-product-card .kh-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-product-body { padding: 0 24px 24px; }
.kh-product-card h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.2; margin: 30px 0 6px !important; color: var(--kh-navy); }
.kh-product-card p  { color: var(--kh-grey); font-size: .95rem; margin: 0 0 8px; }
.kh-product-card .kh-arrow { margin-top: 8px; }

/* Why */
.kh-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.kh-why-card {
	background: #fff;
	border-radius: 12px;
	padding: 28px;
	border: 1px solid var(--kh-border);
}
.kh-why-icon {
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(237,106,34,.1);
	color: var(--kh-orange);
	border-radius: 10px;
	margin-bottom: 16px;
}
.kh-why-icon img { width: 28px; height: 28px; object-fit: contain; }
.kh-why-icon i { font-size: 22px; line-height: 1; }
.kh-why-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.kh-why-card p  { color: #555; font-size: .9rem; margin: 0; }

/* Projects */
.kh-projects-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.kh-project {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	min-height: 320px;
	background: #333 center/cover no-repeat;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	text-decoration: none;
}
.kh-project::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 60%);
}
.kh-project > * { position: relative; z-index: 1; }
.kh-project .tag {
	font-size: .75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: .9;
	margin-bottom: 6px;
}
.kh-project h3 { font-size: 1.3rem; font-weight: 700; margin: 0; }

/* CTA */
.kh-cta-inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 36px;
	align-items: center;
}
.kh-cta-inner h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; margin: 0 0 8px; }
.kh-cta-inner p  { margin: 0; opacity: .85; }
.kh-cta-inner .kh-btns { justify-content: flex-end; }
.kh-cta-inner .kh-btn--primary { padding: 14px 28px; }

/* Responsive */
@media (max-width: 960px) {
	.kh-about-grid,
	.kh-cta-inner { grid-template-columns: 1fr; }
	.kh-cta-inner .kh-btns { justify-content: flex-start; }
	.kh-products-grid { grid-template-columns: repeat(2, 1fr); }
	.kh-why-grid      { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.kh-stats         { grid-template-columns: 1fr; }
	.kh-brands-grid   { grid-template-columns: 1fr; }
	.kh-products-grid { grid-template-columns: 1fr; }
	.kh-why-grid      { grid-template-columns: 1fr; }
	.kh-projects-grid { grid-template-columns: 1fr; }
	.kh-section { padding: 56px 0; }
	.kh-card    { padding: 24px; }
	.kh-card .kh-card-img { margin: -24px -24px 20px; }
}

/* home-hero-overlay:v1 */
/* Match the shared .kh-page-hero treatment (used by ShinkoLite/TOSTEM/About/
   Contact): a 135deg navy gradient over the background image, plus a vertical
   fade at the bottom. .kh-hero-inner already has z-index:1 so content stays
   above both overlays. */
.kh-hero::before,
.kh-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.kh-hero::before {
	background: linear-gradient(135deg, rgba(12,35,64,.55), rgba(12,35,64,.92));
	z-index: 0;
}
.kh-hero::after {
	background: linear-gradient(180deg, transparent 0%, rgba(12,35,64,.5) 100%);
	z-index: 0;
}