/* HareDev — shared chrome + layout for /work/*.html pages.
   css/style.css and css/custom.css give the black/white bootstrap base;
   this file adds the same brand polish index.html defines inline
   (teal accent, Sora/Nunito fonts, pill buttons, section labels)
   plus the case-study/product page layout itself. */

:root {
	--accent: #3aa494;
	--accent-deep: #2b8676;
	--accent-soft: #eef7f5;
	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

body, .body, p, li, td, th, span, a, input, textarea, button,
.navbar-custom .nav li a {
	font-family: 'Nunito', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, .cs-hero-name, .navbar-brand {
	font-family: 'Sora', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Header / nav (mirrors index.html's premium polish) ── */
.navbar-brand {
	height: auto;
	padding: 8px 15px;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
}
.brand-logo {
	height: 46px;
	width: auto;
	display: block;
	transition: height 0.4s var(--ease-expo);
}
.top-nav-collapse .brand-logo { height: 36px; }
@media (max-width: 767px) { .brand-logo { height: 34px; } }

.lang-switch {
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin-left: 6px;
	padding-left: 16px !important;
}
.lang-switch a {
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 1px;
	opacity: 0.5;
	padding: 4px 2px !important;
}
.lang-switch a.active { opacity: 1; color: var(--accent) !important; }
.lang-switch span { opacity: 0.3; font-size: 11px; }

footer .social a:hover { color: var(--accent); }

/* ── Buttons (same pill treatment as the homepage) ── */
.btn-primary-hd, .btn-outline-hd {
	border-radius: 100px;
	text-transform: none;
	letter-spacing: 0.3px;
	font-weight: 700;
	font-family: 'Nunito', sans-serif;
	display: inline-block;
	font-size: 13px;
	padding: 14px 36px;
	border: 2px solid transparent;
	transition: all .2s ease-in-out;
}
.btn-primary-hd {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.btn-primary-hd:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-outline-hd {
	background: transparent;
	color: #fff;
	border-color: #fff;
}
.btn-outline-hd:hover { background: #fff; color: #000; }

/* ── Section label / heading (subset used on these pages) ── */
.section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--accent);
	display: block;
	margin-bottom: 16px;
}

/* ── Page anchor offset so #page-top isn't hidden under the fixed navbar ── */
body { padding-top: 0; }

/* ══════════════════════════════════════════
   CASE STUDY / PRODUCT PAGE LAYOUT
══════════════════════════════════════════ */

.cs-hero {
	background: #000;
	padding: 200px 0 90px;
}
.cs-back {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #888;
	margin-bottom: 40px;
}
.cs-back:hover { color: var(--accent); }

.cs-hero-top {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.cs-category {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent);
}
.cs-role-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ccc;
	border: 1px solid #333;
	border-radius: 100px;
	padding: 5px 14px;
}

.cs-hero-name {
	font-size: 48px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 20px;
	line-height: 1.1;
}

.cs-one-liner {
	font-size: 19px;
	color: #aaa;
	max-width: 720px;
	line-height: 1.7;
	margin: 0 0 44px;
}

.cs-hero-media {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #222;
}
.cs-hero-media img {
	display: block;
	width: 100%;
	height: auto;
}

.cs-hero-media--panel {
	aspect-ratio: 16 / 7;
	background:
		radial-gradient(circle at 20% 20%, rgba(58,164,148,0.18), transparent 45%),
		radial-gradient(circle at 80% 80%, rgba(58,164,148,0.12), transparent 50%),
		#0a0a0a;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
.cs-hero-media--panel span {
	font-family: 'Sora', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #444;
}
@media (max-width: 767px) {
	.cs-hero-media--panel { aspect-ratio: 4 / 3; }
}

/* ── Narrative blocks ── */
.cs-body {
	background: #0d0d0d;
	padding: 100px 0;
}
.cs-blocks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	border: 1px solid #222;
	border-radius: 16px;
	overflow: hidden;
}
.cs-block {
	background: #111;
	padding: 44px 38px;
}
.cs-block-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 18px;
}
.cs-block-text {
	font-size: 15px;
	color: #bbb;
	line-height: 1.85;
	margin: 0;
}

.cs-stack {
	margin-top: 40px;
	padding: 28px 36px;
	border: 1px solid #222;
	border-radius: 14px;
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}
.cs-stack-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #666;
	flex-shrink: 0;
}
.cs-stack-val {
	font-size: 14px;
	color: #ccc;
}

/* ── Product page (JustTrain) extras ── */
.cs-feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cs-feature-list li {
	font-size: 15px;
	color: #bbb;
	line-height: 1.7;
	padding: 16px 0;
	border-bottom: 1px solid #222;
}
.cs-feature-list li:last-child { border-bottom: none; }

.cs-tier-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}
.cs-tier-list li {
	font-size: 14px;
	color: #ccc;
	padding: 10px 0;
	border-bottom: 1px solid #222;
}
.cs-tier-list li:last-child { border-bottom: none; }

/* ── CTA row ── */
.cs-cta {
	background: #fff;
	padding: 100px 0;
	text-align: center;
}
.cs-cta h2 {
	color: #1a1a1a;
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 16px;
}
.cs-cta p {
	color: #666;
	max-width: 560px;
	margin: 0 auto 40px;
	font-size: 16px;
	line-height: 1.7;
}
.cs-cta-buttons {
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
}
.cs-cta .btn-outline-hd { color: #1a1a1a; border-color: #1a1a1a; }
.cs-cta .btn-outline-hd:hover { background: #1a1a1a; color: #fff; }

@media (max-width: 900px) {
	.cs-blocks { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.cs-hero { padding: 140px 0 60px; }
	.cs-hero-name { font-size: 32px; }
	.cs-one-liner { font-size: 16px; }
	.cs-block { padding: 32px 26px; }
}

/* ══════════════════════════════════════════
   SALES PLAYBOOK PAGE (internal, unlisted)
══════════════════════════════════════════ */

.pb-hero {
	background: #000;
	padding: 160px 0 70px;
}
.pb-hero-label {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #888;
	border: 1px solid #333;
	border-radius: 100px;
	padding: 6px 16px;
	margin-bottom: 24px;
}
.pb-hero h1 {
	font-size: 42px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 16px;
	line-height: 1.15;
}
.pb-hero-sub {
	font-size: 17px;
	color: #999;
	max-width: 680px;
	line-height: 1.7;
	margin: 0;
}

.pb-section {
	background: #0d0d0d;
	padding: 80px 0;
	border-top: 1px solid #1a1a1a;
}
.pb-section--alt { background: #000; }
.pb-section-heading {
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 14px;
}
.pb-section-sub {
	font-size: 15px;
	color: #999;
	max-width: 700px;
	line-height: 1.7;
	margin: 0 0 48px;
}

.pb-intro-text p {
	font-size: 16px;
	color: #bbb;
	line-height: 1.85;
	max-width: 780px;
	margin: 0 0 18px;
}
.pb-intro-text p:last-child { margin-bottom: 0; }

.pb-capability-list { border-top: 1px solid #222; }
.pb-capability {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	padding: 32px 0;
	border-bottom: 1px solid #222;
}
.pb-capability-title {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin: 0;
}
.pb-capability-text {
	font-size: 15px;
	color: #aaa;
	line-height: 1.75;
	margin: 0 0 14px;
}
.pb-proof-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #555;
	margin-right: 10px;
}
.pb-proof-link {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
	border: 1px solid rgba(58,164,148,0.4);
	border-radius: 100px;
	padding: 5px 14px;
	margin: 0 8px 8px 0;
}
.pb-proof-link:hover { background: var(--accent); color: #fff; }

.pb-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	border: 1px solid #222;
	border-radius: 16px;
	overflow: hidden;
}
.pb-product-card {
	background: #111;
	padding: 32px;
	display: flex;
	gap: 18px;
}
.pb-product-thumb {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	border: 1px solid #222;
}
.pb-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-product-body { min-width: 0; }
.pb-product-name {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
}
.pb-product-icp {
	font-size: 12px;
	color: #777;
	line-height: 1.6;
	margin: 0 0 14px;
}
.pb-product-angle {
	font-size: 13px;
	color: #bbb;
	line-height: 1.6;
	margin: 0 0 10px;
}
.pb-product-angle strong {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 4px;
	font-family: 'Nunito', sans-serif;
}
.pb-product-caveat {
	margin-top: 12px;
	font-size: 12px;
	color: #e0ac4c;
	background: rgba(224,172,76,0.08);
	border: 1px solid rgba(224,172,76,0.3);
	border-radius: 8px;
	padding: 10px 14px;
	line-height: 1.6;
}
.pb-product-link {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	font-weight: 700;
	color: #888;
}
.pb-product-link:hover { color: var(--accent); }

.pb-comp-box {
	border: 1px solid rgba(58,164,148,0.35);
	background: linear-gradient(135deg, rgba(58,164,148,0.12), rgba(58,164,148,0.02));
	border-radius: 20px;
	padding: 56px 48px;
	text-align: center;
}
.pb-comp-sub {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #888;
	margin: 0 0 12px;
}
.pb-comp-rate {
	font-family: 'Sora', sans-serif;
	font-size: 64px;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
	margin: 0 0 20px;
}
.pb-comp-text {
	font-size: 17px;
	color: #ddd;
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.8;
}

@media (max-width: 900px) {
	.pb-capability { grid-template-columns: 1fr; gap: 10px; }
	.pb-product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.pb-hero { padding: 120px 0 50px; }
	.pb-hero h1 { font-size: 30px; }
	.pb-section { padding: 56px 0; }
	.pb-comp-box { padding: 36px 22px; }
	.pb-comp-rate { font-size: 44px; }
	.pb-product-card { flex-direction: column; }
}