/*
 * Toro Capital — visual design.
 *
 * Faithful rebuild of the approved reference site (see the handoff
 * package's 02_REFERENCE_SITE/toro-capital-reference.html), reorganised
 * into a maintainable stylesheet with accessible focus states and
 * reduced-motion support added.
 */

:root {
	--bg: #232323;
	--text: #f0eee8;
	--muted: #aaa69e;
	--line: rgba(240, 238, 232, 0.13);
	--accent: #b79a64;
	--max: 1180px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: radial-gradient(circle at 78% 12%, rgba(183, 154, 100, 0.07), transparent 28rem), var(--bg);
	color: var(--text);
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
	overflow-x: hidden;
}

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

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.container {
	width: min(calc(100% - 48px), var(--max));
	margin: 0 auto;
}

/* Fixed private-enquiries bar — hidden until the visitor scrolls */
.topbar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 20;
	background: rgba(35, 35, 35, 0.84);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-12px);
	transition: 0.24s;
}
.topbar.visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	border-bottom-color: var(--line);
}
.topbar-inner {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.brand {
	display: inline-flex;
	align-items: center;
	letter-spacing: 0.24em;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
}
.brand span {
	color: var(--accent);
}
.brand img {
	max-height: 40px;
	width: auto;
	display: block;
}
.top-link {
	color: var(--muted);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Opening cover — full viewport, wordmark only */
.cover {
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 40px 0;
}
.cover-inner {
	width: min(calc(100% - 48px), 1320px);
	text-align: center;
}
.cover-title {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(3rem, 9vw, 8rem);
	line-height: 0.95;
	letter-spacing: -0.055em;
	text-transform: uppercase;
	white-space: nowrap;
}
.cover-title .accent {
	color: var(--accent);
}
.scroll {
	position: absolute;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	color: var(--muted);
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

section {
	padding: 130px 0;
	border-top: 1px solid var(--line);
}

/* Proposition */
.hero {
	min-height: 100svh;
	display: grid;
	align-items: end;
	padding: 180px 0 80px;
}
.eyebrow,
.section-label {
	color: var(--accent);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.hero h1 {
	max-width: 1040px;
	margin-top: 24px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(3.8rem, 9.2vw, 8.6rem);
	line-height: 0.92;
	letter-spacing: -0.055em;
}
.hero-bottom {
	margin-top: 74px;
	display: grid;
	grid-template-columns: 1fr minmax(280px, 430px);
	gap: 80px;
	align-items: end;
}
.hero-meta {
	display: flex;
	justify-content: flex-end;
	gap: 18px;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.hero-meta span + span::before {
	content: "\2022";
	margin-right: 18px;
	color: var(--accent);
}
.hero-statement {
	color: var(--muted);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.75;
}

/* What we do */
.intro {
	display: grid;
	grid-template-columns: 0.65fr 1.35fr;
	gap: 80px;
}
.intro h2,
.approach h2,
.contact h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(2.9rem, 5.6vw, 5.6rem);
	line-height: 1;
	letter-spacing: -0.04em;
}
.intro-copy {
	margin-top: 38px;
	max-width: 680px;
	color: var(--muted);
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.7;
}

/* Three focus areas */
.services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.service {
	min-height: 355px;
	padding: 34px 30px 34px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.service + .service {
	border-left: 1px solid var(--line);
	padding-left: 30px;
}
.service-number {
	color: var(--accent);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
}
.service h3 {
	margin-top: auto;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.2rem;
	font-weight: 400;
}
.service p {
	margin-top: 20px;
	max-width: 315px;
	color: var(--muted);
	font-size: 0.98rem;
	line-height: 1.75;
	/* Reserve height for the longest approved copy (4 lines) so the
	   heading above sits at the same position in every column,
	   regardless of how many lines that column's text wraps to. */
	min-height: 7em;
}

/* Approach */
.approach-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	align-items: end;
}
.approach-copy {
	color: var(--muted);
	font-size: 1.12rem;
	line-height: 1.8;
}
.approach-copy p + p {
	margin-top: 24px;
}
.pillars {
	margin-top: 70px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.pillar {
	border-top: 1px solid var(--line);
	padding-top: 20px;
	color: var(--muted);
	font-size: 0.76rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.pillar strong {
	display: block;
	margin-bottom: 10px;
	color: var(--text);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.65rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* Contact */
.contact {
	min-height: 76svh;
	display: grid;
	align-items: center;
}
.contact-inner {
	max-width: 920px;
}
.contact h2 {
	margin-top: 24px;
}
.contact p {
	max-width: 650px;
	margin-top: 34px;
	color: var(--muted);
	font-size: 1.15rem;
	line-height: 1.75;
}
.contact-link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-top: 46px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--accent);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Footer */
footer {
	padding: 28px 0 42px;
	border-top: 1px solid var(--line);
}
.footer-inner {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Scroll reveal */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 850px) {
	.hero-bottom,
	.intro,
	.approach-grid {
		grid-template-columns: 1fr;
		gap: 42px;
	}
	.hero-meta {
		justify-content: flex-start;
	}
	.services {
		grid-template-columns: 1fr;
	}
	.service {
		min-height: 280px;
		padding: 30px 0;
	}
	.service p {
		/* Stacked single-column layout — no cross-column heading
		   alignment to preserve, so don't reserve extra space. */
		min-height: 0;
	}
	.service + .service {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding-left: 0;
	}
	.pillars {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.container,
	.cover-inner {
		width: min(calc(100% - 30px), var(--max));
	}
	.cover-title {
		font-size: clamp(2rem, 10.3vw, 4.6rem);
	}
	section {
		padding: 92px 0;
	}
	.hero {
		padding-top: 140px;
	}
}

/* Respect the visitor's reduced-motion preference: keep the layout,
   drop the smooth-scroll and reveal transitions entirely. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.topbar {
		transition: none;
	}
}