/*
	Page styles for /services and /agencies.
	Loaded after main.css (Dimension by HTML5 UP); overrides its layout
	for these two standalone one-pagers. No framework.

	Dark palette
	------------
	Page background      #212224   (same as the homepage)
	Elevated surface     #2A2B2D
	Body text            #E4E4E4   12.5:1 on bg, 11.2:1 on surface
	Muted / labels       #9A9A9A    5.7:1 on bg,  5.0:1 on surface
	Hairlines, borders   #3A3B3D
	Accent               #FFE26A   12.4:1 on bg, and ink 12.4:1 on gold
	Ink (text on gold)   #212224

	Layout
	------
	Both pages use one 48rem column. Every filled block, rule, and border
	runs to the column edge; every line of text starts at --pad inside it,
	so all copy shares a single left edge on both pages.
*/

/* ---------- Tokens ---------- */

:root {
	--bg: #212224;
	--surface: #2A2B2D;
	--text: #E4E4E4;
	--muted: #9A9A9A;
	--rule: #3A3B3D;
	--gold: #FFE26A;
	--ink: #212224;
	--link-underline: rgba(228, 228, 228, 0.4);
	--sheet: 48rem;
	--pad: 2rem;
	/* Georgia leads on dark: sturdiest stems and largest x-height of the three,
	   where Palatino's hairlines are the first to break up. */
	--serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
	--sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

@media screen and (max-width: 736px) {
	:root { --pad: 1.25rem; }
}

/* ---------- Shared base ---------- */

html {
	font-size: 17px;
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 980px) {
	html { font-size: 16px; }
}

@media screen and (max-width: 480px) {
	html { font-size: 15px; }
}

body.page {
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.65;
}

body.page a {
	color: inherit;
	border-bottom: none;
	text-decoration: none;
}

body.page h1,
body.page h2,
body.page h3,
body.page h4 {
	color: var(--text);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 0;
}

body.page p {
	margin: 0 0 1.15rem 0;
}

body.page ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.page ul li {
	padding-left: 0;
}

body.page strong {
	color: var(--text);
	font-weight: 600;
}

.page .home-link {
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--rule);
	padding-bottom: 2px;
	white-space: nowrap;
}

.page .home-link:hover {
	color: var(--text);
	border-bottom-color: var(--text);
}

/* =====================================================================
   /services -- editorial. Reads like a consultant's letterhead.
   ===================================================================== */

.editorial {
	max-width: var(--sheet);
	margin: 0 auto;
	padding: 4.5rem 0 4rem 0;
}

@media screen and (max-width: 736px) {
	.editorial { padding: 2.75rem 0 3rem 0; }
}

/* Letterhead */

.editorial .masthead h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2.35rem, 7vw, 3.35rem);
	letter-spacing: -0.015em;
	padding: 0 var(--pad);
	margin: 0 0 0.85rem 0;
}

.editorial .masthead .credentials {
	font-family: var(--sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0 var(--pad);
	margin: 0 0 1.5rem 0;
	line-height: 1.75;
}

.editorial .masthead .credentials .sep {
	opacity: 0.5;
	margin: 0 0.45em;
	font-weight: 300;
}

.editorial .gold-rule {
	border: 0;
	height: 2px;
	background: var(--gold);
	margin: 0 0 1.1rem 0;
}

.editorial .contact-line {
	font-family: var(--sans);
	font-size: 0.85rem;
	color: var(--muted);
	padding: 0 var(--pad);
	margin: 0 0 3.25rem 0;
	line-height: 1.95;
}

.editorial .contact-line a {
	border-bottom: 1px solid var(--rule);
	padding-bottom: 1px;
}

.editorial .contact-line a:hover {
	color: var(--text);
	border-bottom-color: var(--muted);
}

.editorial .contact-line .sep {
	opacity: 0.5;
	margin: 0 0.35em;
}

/* Serif body copy. Sized up and opened out for the dark background. */

.editorial .lead,
.editorial .body {
	font-family: var(--serif);
	font-size: 1.13rem;
	line-height: 1.8;
	color: var(--text);
}

.editorial .lead {
	font-size: 1.22rem;
	line-height: 1.75;
	padding: 0 var(--pad);
	margin-bottom: 3.5rem;
}

/* Quiet section labels. Rule runs the full column, text sits on the shared edge. */

.editorial .section-label {
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	border-top: 1px solid var(--rule);
	padding: 0.9rem var(--pad) 0 var(--pad);
	margin: 0 0 2rem 0;
}

.editorial section {
	margin-bottom: 3.25rem;
}

/* Service entries */

.editorial .entry {
	padding: 0 var(--pad);
	margin-bottom: 2.75rem;
}

.editorial .entry:last-child {
	margin-bottom: 0;
}

.editorial .entry h3 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.45rem;
	margin: 0 0 0.35rem 0;
}

.editorial .entry .terms {
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1rem 0;
}

.editorial .entry .terms .sep {
	opacity: 0.5;
	margin: 0 0.35em;
	font-weight: 300;
}

.editorial .entry .note {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--text);
	margin: 0;
}

/* Proof entries */

.editorial .proof-item {
	padding: 0 var(--pad);
	margin-bottom: 1.9rem;
}

.editorial .proof-item:last-child {
	margin-bottom: 0;
}

.editorial .proof-item h3 {
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0 0 0.5rem 0;
}

.editorial .proof-item p {
	margin: 0;
}

.editorial .proof-item a {
	border-bottom: 1px solid var(--link-underline);
}

.editorial .proof-item a:hover {
	border-bottom-color: var(--text);
}

/* Outlined call to action. Stays outlined -- never filled. */

.editorial .cta {
	border: 2px solid var(--gold);
	padding: 2.25rem var(--pad) 2rem var(--pad);
	margin: 0 0 3rem 0;
}

.editorial .cta h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.45rem, 4.4vw, 1.85rem);
	line-height: 1.35;
	margin: 0 0 0.9rem 0;
}

.editorial .cta p {
	font-family: var(--serif);
	font-size: 1.08rem;
	line-height: 1.8;
	color: var(--muted);
	margin: 0 0 1.35rem 0;
}

.editorial .cta .cta-contact {
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--text);
	margin: 0;
}

.editorial .cta .cta-contact a {
	border-bottom: 2px solid var(--gold);
	padding-bottom: 2px;
}

.editorial .cta .cta-contact .sep {
	opacity: 0.5;
	margin: 0 0.4em;
	font-weight: 300;
}

/* Footer */

.editorial .sheet-foot {
	border-top: 1px solid var(--rule);
	padding: 1.1rem var(--pad) 0 var(--pad);
	font-size: 0.8rem;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	align-items: baseline;
}

.editorial .sheet-foot p {
	margin: 0;
	max-width: 32rem;
}

/* =====================================================================
   /agencies -- bold block. Higher contrast, more graphic.
   ===================================================================== */

.block-page {
	max-width: var(--sheet);
	margin: 0 auto;
}

/* Gold header band. Bright block anchoring a dark page. */

.block-page .band {
	background: var(--gold);
	color: var(--ink);
	padding: 3.25rem var(--pad) 2.75rem var(--pad);
}

@media screen and (max-width: 736px) {
	.block-page .band { padding: 2.25rem var(--pad) 2rem var(--pad); }
}

.block-page .band h1 {
	color: var(--ink);
	font-size: clamp(2.1rem, 6.4vw, 3.05rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.7rem 0;
}

.block-page .band .role {
	font-size: clamp(1rem, 3vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 1.4rem 0;
	line-height: 1.4;
}

.block-page .band .contact-line {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	line-height: 1.95;
}

.block-page .band .contact-line a {
	border-bottom: 1px solid rgba(33, 34, 36, 0.35);
	padding-bottom: 1px;
}

.block-page .band .contact-line a:hover {
	border-bottom-color: var(--ink);
}

.block-page .band .sep {
	margin: 0 0.35em;
	opacity: 0.55;
	font-weight: 300;
}

.block-page .inner {
	padding: 0 0 3rem 0;
}

.block-page .lead {
	font-size: 1.14rem;
	line-height: 1.65;
	padding: 0 var(--pad);
	margin: 2.5rem 0 3rem 0;
}

.block-page .lead .setup {
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.4;
	display: block;
	margin-bottom: 0.9rem;
}

/* Section bars: elevated surface, gold label. */

.block-page .bar {
	background: var(--surface);
	color: var(--gold);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 0.9rem var(--pad);
	margin: 0 0 1.75rem 0;
}

.block-page section {
	margin-bottom: 3rem;
}

/* Engagement cards */

.block-page .card {
	background: var(--surface);
	padding: 1.9rem var(--pad) 1.6rem var(--pad);
	margin-bottom: 1.1rem;
}

.block-page .card h3 {
	font-size: 1.32rem;
	font-weight: 600;
	margin: 0 0 0.3rem 0;
}

.block-page .card .terms {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1rem 0;
}

.block-page .card p {
	color: var(--text);
}

.block-page .card .punch {
	color: var(--text);
	font-weight: 600;
	font-size: 1.05rem;
	border-top: 1px solid var(--rule);
	margin: 1.1rem 0 0 0;
	padding-top: 1rem;
}

/* Why US-Based */

.block-page .rate-note {
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--text);
	padding: 0 var(--pad);
	margin: 0 0 1.5rem 0;
}

.block-page .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
}

@media screen and (max-width: 736px) {
	.block-page .grid { grid-template-columns: 1fr; }
}

.block-page .grid .cell {
	background: var(--surface);
	padding: 1.5rem var(--pad);
}

.block-page .grid .cell h3 {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0 0 0.5rem 0;
}

.block-page .grid .cell p {
	margin: 0;
	color: var(--text);
	font-size: 0.97rem;
	line-height: 1.6;
}

/* Proof */

.block-page .proof {
	border-left: 6px solid var(--rule);
	padding: 0.25rem var(--pad) 0.25rem calc(var(--pad) - 6px);
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--text);
}

.block-page .proof p {
	margin: 0;
}

.block-page .proof a {
	color: var(--text);
	font-weight: 600;
	border-bottom: 2px solid var(--gold);
}

/* Solid gold call to action */

.block-page .cta-block {
	background: var(--gold);
	color: var(--ink);
	padding: 2.75rem var(--pad) 2.5rem var(--pad);
	margin-bottom: 2.5rem;
}

@media screen and (max-width: 736px) {
	.block-page .cta-block { padding: 1.85rem var(--pad) 1.6rem var(--pad); }
}

.block-page .cta-block h2 {
	color: var(--ink);
	font-size: clamp(1.6rem, 5vw, 2.25rem);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 1rem 0;
}

.block-page .cta-block p {
	font-size: 1.06rem;
	line-height: 1.6;
	margin: 0 0 1.5rem 0;
}

.block-page .cta-block .cta-contact {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
}

.block-page .cta-block .cta-contact a {
	border-bottom: 2px solid var(--ink);
	padding-bottom: 2px;
}

.block-page .cta-block .cta-contact .sep {
	margin: 0 0.4em;
	opacity: 0.55;
	font-weight: 300;
}

/* Footer */

.block-page .sheet-foot {
	border-top: 1px solid var(--rule);
	padding: 1.1rem var(--pad) 0 var(--pad);
	font-size: 0.8rem;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	align-items: baseline;
}

.block-page .sheet-foot p {
	margin: 0;
	max-width: 32rem;
}