/* Southleigh Consulting
   Palette sampled from the logo mark: navy ink, teal water, meadow green, corn gold.
   The logo sits horizontally at the top left; the symbol, enlarged and dropped well
   back, is the hero's ground. Everything else stays quiet: chalk bands, hairline
   rules, marginal headings. */

/* ---------- fonts ---------- */

/* Self-hosted rather than fetched from Google: it removes two third-party
   origins and the CSS round trip before the font files can start, lets the
   critical faces be preloaded by exact URL, keeps visitor IPs off a third
   party, and allows a CSP with no external origins at all. Only the latin
   subsets are ever fetched for English copy; unicode-range makes the
   latin-ext faces free until a character actually needs them. */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url("fonts/archivo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url("fonts/archivo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 300 400;
	font-display: swap;
	src: url("fonts/newsreader-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 300 400;
	font-display: swap;
	src: url("fonts/newsreader-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url("fonts/newsreader-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ink:       #16224F;
	--ink-soft:  #34406B;
	--graphite:  #4C5568;
	--water:     #0B6A8E;
	--water-dk:  #085671;
	--meadow:    #57A436;
	--corn:      #BE9A3A;
	--paper:     #FFFFFF;
	--chalk:     #EEF1EC;
	--hair:      rgba(22, 34, 79, 0.14);
	--hair-dark: rgba(255, 255, 255, 0.18);

	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--shell:  1200px;
	--gutter: clamp(1.25rem, 5vw, 5rem);
	--rail:   11rem;
	--measure: 36em;

	/* vertical rhythm for the bands */
	--band-y: clamp(4.25rem, 9vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
}

/* Smooth scroll only answers the one in-page jump, and only if motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--graphite);
	font-family: var(--serif);
	font-optical-sizing: auto;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--water-dk); }

:focus-visible {
	outline: 2px solid var(--water);
	outline-offset: 3px;
	border-radius: 1px;
}

.contact :focus-visible,
.footer :focus-visible { outline-color: #9FD2E8; }

/* ---------- layout scaffolding ---------- */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); }

/* Asymmetric grid: a narrow margin for the running head, a measured column for prose. */
.split {
	display: grid;
	grid-template-columns: var(--rail) minmax(0, 1fr);
	gap: 0 clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.col { max-width: 46rem; }

/* Marginal running head, set small in the sans. Sentence case, never caps. */
.rail {
	margin: 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--hair);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.005em;
	color: var(--ink);
	opacity: 0.72;
}

.rail-dark {
	border-top-color: var(--hair-dark);
	color: #DCE6EE;
	opacity: 0.85;
}

/* ---------- type ---------- */

.display {
	margin: 0;
	max-width: 12em;
	font-family: var(--serif);
	font-size: clamp(2.5rem, 6.4vw, 5rem);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.021em;
	color: var(--ink);
	text-wrap: balance;
}

.heading {
	margin: 0 0 1rem;
	max-width: 16em;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -0.014em;
	color: var(--ink);
	text-wrap: balance;
}

.heading-dark { color: var(--paper); }

.lead {
	margin: 0;
	max-width: 26em;
	font-size: clamp(1.125rem, 1.65vw, 1.375rem);
	font-weight: 400;
	line-height: 1.58;
	color: var(--ink-soft);
}

.intro {
	max-width: 34em;
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	line-height: 1.66;
}

.intro-dark { color: #C6D4E2; }

/* ---------- hero ---------- */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: clamp(2.75rem, 7vw, 5.5rem);
	padding-bottom: clamp(4rem, 9vw, 8rem);
	border-bottom: 1px solid var(--hair);
}

.hero-shell { position: relative; }

/* The logo set horizontally: symbol, then the name beside it. Sized to be read
   rather than admired, since the enlarged symbol behind it does the showing.
   The symbol is sized by height and the wordmark by width, so the pair keeps
   its proportions however the clamps land. */
.lockup {
	display: flex;
	align-items: center;
	gap: clamp(0.7rem, 1.5vw, 1rem);
	/* Hugs the logo rather than stretching the column, so the box matches what
	   is actually drawn. */
	width: fit-content;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.lockup-symbol {
	width: auto;
	height: clamp(38px, 5vw, 50px);
}

.lockup-symbol { flex: none; }

/* The name carries the alt text, so the symbol beside it is decorative. */
.lockup-word {
	flex: none;
	width: clamp(160px, 20vw, 208px);
}

.lockup-word img {
	display: block;
	width: 100%;
	height: auto;
}

/* The symbol, enlarged and dropped right back, as the hero's ground.
   Two rules it has to keep: stay whole, because cropping loses the closed circle
   that makes the mark readable, and stay pale enough that the headline can cross
   it untouched (navy on a 15% tint still clears AA several times over), which is
   why there is no gradient veil here masking part of the mark away. */
.hero-field {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: clamp(0.5rem, 2vw, 2.5rem);
	transform: translateY(-50%);
	width: min(46%, 470px);
	aspect-ratio: 291 / 270;
	background: url("images/symbol.svg") no-repeat center / contain;
	opacity: 0.15;
	pointer-events: none;
}

.lead { margin-top: clamp(1.75rem, 2.8vw, 2.5rem); }

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
}

.cta {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.7rem 1.6rem;
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 2px;
	color: var(--paper);
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cta:hover, .cta:focus-visible {
	background: var(--water-dk);
	border-color: var(--water-dk);
}


/* ---------- the three stages ---------- */

/* A single line descends through the stages, changing colour as it goes: the
   content really is a sequence, so the device carries information. */
.stages {
	position: relative;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 0 0 0 clamp(1.5rem, 3vw, 2.25rem);
	list-style: none;
}

.stages::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	bottom: 4.5rem;
	left: 0;
	width: 2px;
	background: linear-gradient(to bottom,
		var(--meadow) 0%,
		var(--meadow) 14%,
		var(--water) 45%,
		var(--corn) 82%,
		var(--corn) 100%);
}

.stage { position: relative; }
.stage + .stage { margin-top: clamp(2.25rem, 4vw, 3rem); }

/* Station marker on the line, in that stage's own colour. */
.stage::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: calc(-1 * clamp(1.5rem, 3vw, 2.25rem) - 4px);
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: var(--paper);
}

.stage-meadow { color: var(--meadow); }
.stage-water  { color: var(--water); }
.stage-corn   { color: var(--corn); }

.stage-title {
	margin: 0 0 0.4rem;
	font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.006em;
	color: var(--ink);
}

.stage p {
	max-width: var(--measure);
	margin: 0;
	color: var(--graphite);
}

/* ---------- what we cover ---------- */

.cover { background: var(--chalk); }

.cover-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(2rem, 4vw, 3.5rem);
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}

.cover-item {
	padding: 1.15rem 0;
	border-top: 1px solid var(--hair);
}

.cover-item dt {
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink);
}

.cover-item dd {
	margin: 0.3rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--graphite);
}

/* ---------- the tenet ---------- */

/* Deliberately overrides .band: the pull-quote is given more air than the
   other sections, and sits at the outer margin rather than in the prose column. */
.tenet {
	padding-block: clamp(4rem, 8.5vw, 7rem);
	border-top: 1px solid var(--hair);
}

.tenet-quote {
	margin: 0;
	max-width: 18em;
	font-size: clamp(1.625rem, 4vw, 3rem);
}

.tenet-quote p {
	margin: 0;
	font-size: inherit;
	font-weight: 300;
	font-style: italic;
	line-height: 1.18;
	letter-spacing: -0.016em;
	color: var(--ink);
	text-wrap: balance;
}

/* ---------- contact ---------- */

.contact { background: var(--ink); }

.email {
	display: inline-block;
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding: 0.35rem 0 0.45rem;
	min-height: 2.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	font-size: clamp(1.375rem, 4.2vw, 2.375rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.014em;
	color: var(--paper);
	text-decoration: none;
	overflow-wrap: break-word;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.email:hover, .email:focus-visible {
	border-bottom-color: var(--corn);
	color: #F4F0E4;
}

/* ---------- footer ---------- */

.footer {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + env(safe-area-inset-bottom, 0px));
	background: var(--ink);
	border-top: 1px solid var(--hair-dark);
}

.footer-shell {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1.25rem clamp(2rem, 5vw, 4rem);
}

.footer-mark {
	width: clamp(140px, 18vw, 168px);
	margin-right: auto;
	opacity: 0.92;
}

.footer-mark img {
	display: block;
	width: 100%;
	height: auto;
}

.footer-line {
	margin: 0;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.65;
	color: #C6D4E2;
}

.footer-muted { color: rgba(198, 212, 226, 0.62); }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
	:root { --rail: 8.5rem; }
}

@media (max-width: 800px) {
	/* The marginal head folds above its column. */
	.split {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
	.rail { max-width: 20rem; }
	.col { max-width: none; }

	.cover-list { grid-template-columns: minmax(0, 1fr); }

	/* Stacked, the mark moves up into the corner beside the lockup rather than
	   sitting behind the whole column. Capped in px: a percentage keeps growing
	   on tablets while the hero gets shorter, walking the mark over the copy. */
	/* Stacked, the mark sits below the lockup rather than behind it, and stays
	   whole. Offset in rem/vw, not a percentage of the hero: the hero's height
	   changes with how the headline wraps, which would drift the mark. */
	.hero-field {
		top: clamp(5.5rem, 22vw, 7.5rem);
		right: clamp(0.25rem, 1vw, 0.75rem);
		transform: none;
		width: min(62%, 250px);
		opacity: 0.13;
	}
}

@media (max-width: 560px) {
	body { font-size: 1rem; }
	.display { max-width: none; letter-spacing: -0.018em; }
	.lead, .intro, .heading { max-width: none; }
	.tenet-quote p { line-height: 1.24; }
	.cta { width: 100%; justify-content: center; }
	.hero-cta { gap: 0.9rem; }
	.footer-shell { align-items: start; gap: 1.5rem; }
	.footer-mark { margin-right: 0; }
}

/* ---------- motion: one orchestrated arrival, nothing else ---------- */

@media (prefers-reduced-motion: no-preference) {
	.lockup,
	.display,
	.lead,
	.hero-cta {
		animation: rise 0.9s cubic-bezier(0.22, 0.67, 0.28, 1) backwards;
	}

	/* Opacity only. The field is centred with a transform that differs between
	   layouts, so animating transform here would fight the layout. */
	.hero-field {
		animation: fade 1.6s ease-out backwards;
	}
	.lockup    { animation-delay: 0.1s; }
	.display   { animation-delay: 0.26s; }
	.lead      { animation-delay: 0.42s; }
	.hero-cta  { animation-delay: 0.54s; }
}

@keyframes rise {
	from { opacity: 0; transform: translate3d(0, 1.1rem, 0); }
	to   { opacity: 1; transform: none; }
}

/* No `to`: with backwards fill the end state is the element's own opacity, which
   differs between layouts. Hardcoding it here would snap on the narrow layout. */
@keyframes fade {
	from { opacity: 0; }
}

@media print {
	.hero-field { display: none; }
	.contact, .footer { background: var(--paper); }
	.heading-dark, .email { color: var(--ink); }
	.intro-dark, .footer-line, .footer-muted { color: var(--graphite); }
	.rail-dark { color: var(--ink); }
}