@charset "UTF-8";
/*
Theme Name: jpjconsultancywp
*/
:root {
	--navy: #111b28;
	--gold: #b8954f;
	--sand: #f5f1e9;
	--ink: #17202b;
	--muted: #626870
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth;
	margin-top:0;
}

body {
	margin: 0;
	font-family: Arial,Helvetica,sans-serif;
	color: var(--ink)
}

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

.wrap {
	width: min(1180px,90%);
	margin: auto
}

header {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	top: 0
}

.nav {
	height: 108px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255,255,255,.25)
}

.logo-box {
	background: #fff;
	padding: 5px 14px
}

.logo {
	width: 150px;
	height: 75px;
	display: block;
	object-fit: contain
}

.links {
	display: flex;
	gap: 30px;
	align-items: center;
	color: #fff;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase
}

.outline {
	border: 1px solid #d3b56d;
	padding: 12px 19px
}

.hero {
	min-height: 780px;
	display: flex;
	align-items: center;
	color: #fff;
	background: linear-gradient(90deg,rgba(8,17,28,.94),rgba(8,17,28,.70) 49%,rgba(8,17,28,.20)),url("/wp-content/themes/jpjconsultancywp/images/jpjconsultancycoBannerBG.webp") center/cover no-repeat
}

.hero-copy {
	max-width: 800px;
	padding-top: 85px
}

.tag,.kicker {
	color: #d3b56d;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 3.4px;
	text-transform: uppercase
}

h1,h2,h3 {
	font-family: Georgia,serif;
	font-weight: 400
}

h1 {
	font-size: clamp(48px,6.8vw,82px);
	line-height: 1.04;
	margin: 18px 0 25px
}

.hero p {
	font-size: 18px;
	line-height: 1.8;
	color: #e6e8ea;
	max-width: 720px
}

.btn {
	display: inline-block;
	background: #c2a15d;
	color: #111;
	margin-top: 25px;
	padding: 15px 25px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1.4px;
	font-weight: bold
}

section {
	padding: 100px 0
}

h2 {
	font-size: clamp(37px,4.3vw,55px);
	line-height: 1.12;
	margin: 14px 0 24px
}

.about {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 90px
}

.about-mark {
	font: 30px Georgia,serif;
	color: #a98743;
	border-top: 2px solid var(--gold);
	padding-top: 18px
}

.about p {
	font-size: 16px;
	color: var(--muted);
	line-height: 1.85
}

.expertise {
	background: var(--navy);
	color: #fff
}

.expertise-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 50px
}

.expertise-head p {
	max-width: 480px;
	color: #b6bdc4;
	line-height: 1.75
}

.pillars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 48px
}

.pillar {
	border: 1px solid #3a4551;
	padding: 42px
}

.pillar h3 {
	font-size: 31px;
	margin: 12px 0
}

.pillar p {
	color: #b6bdc4;
	line-height: 1.75
}

.pillar span {
	color: #d0ad63;
	font-size: 12px;
	letter-spacing: 2px
}

.services {
	background: var(--sand)
}

.cards {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 18px;
	margin-top: 42px
}

.card {
	background: #fff;
	padding: 32px;
	min-height: 205px;
	border-top: 2px solid var(--gold)
}

.card h3 {
	font-size: 23px;
	margin: 15px 0 10px
}

.card p {
	font-size: 14px;
	color: #666;
	line-height: 1.7
}

.num {
	color: #af8941;
	font: 18px Georgia,serif
}

.promise {
	text-align: center
}

.promise h2 {
	max-width: 900px;
	margin: 15px auto
}

.promise p {
	max-width: 760px;
	margin: auto;
	color: #666;
	line-height: 1.8
}

.contact {
	background: #f7f7f5
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px
}

.contact p {
	color: #666;
	line-height: 1.8
}

.info {
	padding: 18px 0;
	border-bottom: 1px solid #ddd;
	line-height: 1.7
}

.info small {
	display: block;
	color: #9b7938;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 10px
}

footer {
	background: #0a1119;
	color: #a0a7ae;
	padding: 30px 0;
	font-size: 12px
}

.foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px
}

.foot img {
	width: 100px;
	background: #fff;
	padding: 3px
}

.legal {
	font-size: 11px
}

@media(max-width:800px) {
	.links a:not(.outline) {
		display: none
	}

	.nav {
		height: 90px
	}

	.logo {
		width: 118px;
		height: 59px
	}

	.hero {
		min-height: 700px;
		background-position: 62% center
	}

	.about,.pillars,.contact-grid,.cards {
		grid-template-columns: 1fr
	}

	.expertise-head {
		display: block
	}

	section {
		padding: 70px 0
	}

	.foot {
		flex-direction: column;
		text-align: center
	}
}