/* ============================================================
   Union Point Consulting — Typography System
   Headings: Source Serif 4  |  Body: Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&display=swap');

/* --- Base: Inter for all body copy --- */

body,
input,
select,
textarea,
p,
li,
td {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0;
}

/* --- Headings: Source Serif 4 --- */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	line-height: 1.2;
}

/* H1 — Hero headline (e.g. "Planning from the inside out") */
h1 {
	font-size: 52px;
	font-weight: 300;
	letter-spacing: 0.01em;
}

/* H2 — Section titles ("Our Approach", "The Problem We Solve") */
h2 {
	font-size: 34px;
	font-weight: 400;
	letter-spacing: 0;
}

/* H3 — Subsection headers, service names */
h3 {
	font-size: 23px;
	font-weight: 600;
	letter-spacing: 0;
}

/* H4 — Project titles, team names */
h4 {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
}

/* --- Responsive heading sizes --- */

@media screen and (max-width: 736px) {
	h1 { font-size: 36px; }
	h2 { font-size: 26px; }
	h3 { font-size: 20px; }
	h4 { font-size: 17px; }
}

@media screen and (max-width: 480px) {
	h1 { font-size: 30px; }
	h2 { font-size: 22px; }
}

/* --- Lead / intro paragraphs (first p in content blocks) --- */

#main .inner > p:first-of-type,
.inner > header.major + p,
p.lead {
	font-size: 18px;
	line-height: 1.7;
}

/* --- Navigation links: Inter Medium --- */

#header nav a,
#menu ul.links a,
#menu ul.actions a {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.05em;
}

/* --- Caption / metadata / labels --- */

.team-role,
small,
figcaption,
p.caption {
	font-size: 13px;
	color: #6B6B6B;
	letter-spacing: 0.03em;
}

/* Inline breadcrumb / back-link labels */
p[style*="text-transform:uppercase"],
p[style*="uppercase"] {
	font-size: 13px;
	letter-spacing: 0.15em;
}

/* --- Max content widths --- */

/* Essay / single-column content pages: 760px */
#main.alt .inner {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Full layout (homepage, work, team): 1100px */
#wrapper > * > .inner {
	max-width: 1100px;
}

/* Tile article h3 — keep proportional within tile cards */
.tiles article h3 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
}

/* Team bios use h2 for names — keep readable */
.team-member h2 {
	font-size: 26px;
	font-weight: 400;
}

/* Approach / essay / alt-layout h2 section headings */
#main.alt h2 {
	font-size: 32px;
	font-weight: 400;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

/* Stage/sub-section h3 on alt pages — clearly subordinate to h2 */
#main.alt h3 {
	font-size: 20px;
	font-weight: 600;
	margin-top: 1.4em;
}

/* Body paragraphs on approach/essay pages */
#main.alt .inner p {
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 1.2em;
}

/* First section heading — no extra top margin needed */
#main.alt .inner > h2:first-of-type {
	margin-top: 0.5em;
}

/* Approach/alt pages: first paragraph same size as rest — no lead upsizing */
#main.alt .inner > p:first-of-type {
	font-size: 16px;
	line-height: 1.75;
}

/* Home page header — always visible on dark background */
#header {
	background-color: rgba(26, 31, 46, 0.98) !important;
}
#header .logo,
#header nav a {
	color: rgba(255,255,255,0.85) !important;
	border-color: rgba(255,255,255,0.15) !important;
}
/* White hamburger icon for dark header */
#header nav a[href="#menu"]:before,
#header nav a[href="#menu"]:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 2px%3B stroke: %23ffffff%3B %7D%3C/style%3E%3Cline x1='0' y1='11' x2='24' y2='11' /%3E%3Cline x1='0' y1='21' x2='24' y2='21' /%3E%3Cline x1='0' y1='16' x2='24' y2='16' /%3E%3C/svg%3E") !important;
}

/* Banner — ensure background and visibility with no image */
#banner {
	background-image: none !important;
	background-color: #1a1f2e !important;
}
#banner:after {
	background-color: rgba(0,0,0,0.3) !important;
}
#banner > .inner,
body.is-preload #banner > .inner {
	opacity: 1 !important;
	filter: none !important;
	-webkit-filter: none !important;
	transform: none !important;
	-webkit-transform: none !important;
}

/* Banner headline — sized for multi-line statement */
#banner header.major h1 {
	font-size: 36px;
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 1.3;
	max-width: 800px;
	color: #fff !important;
}

@media screen and (max-width: 980px) {
	#banner header.major h1 { font-size: 28px; }
}

@media screen and (max-width: 736px) {
	#banner header.major h1 { font-size: 22px; }
}