/* Bands, wraps and grids. */

.band {
	background: var(--bg);
	color: var(--body);
	padding: var(--band-pad) 0;
	position: relative;
	isolation: isolate;
}
/* The bridging picture's top half intrudes here, so this section carries that
   half in addition to a normal band-pad. That leaves exactly --band-pad of
   clear space above the picture, matching the gap below it. */
.band--pad-bottom { padding-bottom: calc(var(--band-pad) + var(--straddle-h) / 2); }
/* A page whose first band is only an introduction: the reader needs to
   reach what follows it without scrolling for it. */
.band--tight { --band-pad: clamp(56px, 6vw, 92px); }

/* A hero that fills the first screen, so whatever follows it sits exactly at
   the fold rather than peeking above it. --rail-h is the height of the jump
   rail underneath; JavaScript measures it and keeps it current on resize,
   because the rail wraps to two rows on narrow screens. The fallback matches
   a single row, so this is right without scripting too.

   svh, not vh: on mobile vh is the LARGEST viewport, which leaves the bottom
   of the hero under the browser chrome until the user scrolls. */
.band--first-screen {
	min-height: calc(100vh - var(--header-h, 78px) - var(--rail-h, 83px));
	min-height: calc(100svh - var(--header-h, 78px) - var(--rail-h, 83px));
	display: flex;
	align-items: center;
}
/* The mark is absolutely positioned, so it stays out of the flex flow. */
.band--first-screen > .wrap { width: 100%; }

.band--flush-top    { padding-top: 0; }
/* Lets a mark from the band above show through. The page ground is the
   same brand green, so this looks identical, it just stops painting a
   solid rectangle over the shape. */
.band--clear        { background: transparent; }
/* A hairline where one band meets the next, the same space on every side. */
.band--ruled        { border-top: 1px solid var(--rule-soft); padding-top: var(--s9); padding-bottom: var(--s9); }
.band--flush-bottom { padding-bottom: 0; }
.band--bleed        { padding: 0; }

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--s5);
}
@media (min-width: 900px) { .wrap { padding: 0 var(--s8); } }

.wrap--narrow { max-width: 860px; }

.stack > * + * { margin-top: var(--s5); }

.grid { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Section heading with a rule that draws itself */

.sec-head { margin-bottom: var(--s8); }
/* Matches the gap between the people rows, so the heading sits in the
   same rhythm as the section it introduces. */
.sec-head:has(+ .people) { margin-bottom: var(--s10); }
/* The work grid runs on a 128px rhythm, so 64px above it reads tight.
   Scoped by what follows, so no other section head moves. */
.sec-head:has(+ .work-grid) { margin-bottom: var(--s9); }
.sec-head__row { display: flex; align-items: baseline; gap: var(--s4); }
.sec-head__mark { font-family: var(--serif); font-size: 12px; color: var(--local-accent); flex: none; }

/* Header */

.site-header {
	position: sticky; top: 0; z-index: var(--z-header);
	/* Solid, not translucent. Content sliding under a blur read as noise.
	   Lifted from near-black, but kept a step below the heroes it sits above so
	   the bar still reads as its own surface rather than merging into them. */
	background: var(--green-brand);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s6); padding: var(--s4) 0; max-width: var(--wrap); margin: 0 auto;
	padding-left: var(--s5); padding-right: var(--s5);
}
@media (min-width: 900px) { .site-header__inner { padding-left: var(--s8); padding-right: var(--s8); } }

.site-header__mark { display: flex; align-items: center; gap: var(--s3); text-decoration: none; flex: none; }
/* Enlarged on the client's 16/09/26 note 2, stronger brand presence. */
.site-header__mark .logo { height: 80px; width: auto; color: var(--ink-dk); }

.site-nav { display: none; }
/* Grouped at the right beside the call to action, not spread across the
   middle. The header is space-between, so margin-left:auto swallows the free
   space before the nav and the two sit together. The gap tightens to match:
   the wide one was there to fill a centred nav. */
@media (min-width: 900px) {
	.site-nav { display: flex; gap: clamp(22px, 2.1vw, 38px); margin-left: auto; }
}

.site-nav a {
	font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink-dk); text-decoration: none;
	padding: var(--s2) 0;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* The Contact button's twin. It was 37px tall against that button's 32px, from
   9px of padding around a 10.5px label: heavier padding on smaller type, which
   made the secondary control the larger of the two.
   Its padding and font size are no longer written here at all. They come from
   the same declaration as .btn--sm in components.css, so the two cannot drift
   apart again. The outline is an inset shadow rather than a border, because a
   border occupies layout and would make this box 2px taller than a button with
   identical padding. */
.nav-toggle {
	display: inline-flex; align-items: center; gap: var(--s2);
	background: none; border: 0; border-radius: 2px;
	box-shadow: inset 0 0 0 1px var(--green-700);
	cursor: pointer; color: var(--ink-dk);
	font-family: var(--serif); line-height: 1.25;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-nav {
	position: fixed; inset: 0; z-index: 120;
	background: var(--green-brand);
	display: grid; align-content: center; gap: var(--s5);
	padding: var(--s8) var(--s5);
}
.mobile-nav[hidden] { display: none; }
/* 800 and the display face's wider axis, matching every other headline on the
   site: at 700 these read lighter than the page titles they lead to. */
.mobile-nav a {
	font-family: var(--display); font-weight: 800; font-size: clamp(30px, 9vw, 52px);
	font-variation-settings: "wdth" 110;
	letter-spacing: -.02em;
	color: var(--ink-dk); text-decoration: none; line-height: 1.06;
}
.mobile-nav__close {
	position: absolute; top: var(--s5); right: var(--s5);
	background: none; border: 0; color: var(--ink-dk); cursor: pointer;
	font-family: var(--serif); font-size: 11px;
}

/* Footer */

/* Two bands: the brand green above, the deepest green below, each running the
   full width of the page. */
.site-footer { color: var(--body-dk); }

.site-footer__main {
	background: var(--green-brand);
	padding: var(--s9) 0;
}

.site-footer__grid { display: grid; gap: var(--s8); }
/* 250px + 100px gaps + two auto columns needs about 1070px inside the wrap.
   At the old 760px breakpoint the row simply pushed the page sideways. */
/* The two text columns stack under the logo on a narrow screen and sit side by
   side beside it on a wide one. align-items: start inside is what top-aligns
   Studio to Contact; the block they form is then centred against the logo by
   the outer grid, which is the arrangement asked for. */
.site-footer__cols { display: grid; gap: var(--s8); align-items: start; }

@media (min-width: 1100px) {
	.site-footer__grid {
		grid-template-columns: 250px 1fr auto;
		gap: var(--s8) 100px;
		align-items: center;
	}
	.site-footer__grid > *:nth-child(1) { grid-column: 1; }
	.site-footer__grid > .site-footer__cols { grid-column: 3; }
	.site-footer__cols { grid-auto-flow: column; gap: 100px; }
}

.site-footer__heading {
	font-family: var(--display); font-weight: 700;
	font-size: 36px; line-height: 1.1; letter-spacing: -.02em;
	color: var(--accent);
	margin: 0 0 var(--s5);
}

.site-footer__blurb {
	font-family: var(--serif); font-size: 16px; line-height: 1.6;
	color: var(--body-dk); margin: var(--s5) 0 0; max-width: 24ch;
}

.site-footer a { color: var(--ink-dk); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

.site-footer address {
	font-style: normal; font-family: var(--serif);
	font-size: 16px; line-height: 1.75; color: var(--body-dk);
}

.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__links li { margin-bottom: var(--s3); font-size: 16px; }

/* The LinkedIn mark, on its own, white on the footer's dark ground. Sized to
   sit with the links rather than above them, and given a little room since a
   logo needs more breathing space than a line of text. */
.site-footer__linked { margin-top: var(--s5); }
.site-footer__linked a { display: inline-block; color: #fff; }
.site-footer__linked a:hover { color: var(--accent); }
.site-footer__linked .icon-linkedin { width: 92px; height: auto; display: block; }

/* Equal space above and below, and no rule: the change of ground is the
   separation. */
.site-footer__base {
	background: var(--green-950);
	padding: var(--s5) 0;
}
.site-footer__base-inner {
	font-family: var(--serif); font-size: 14.5px; color: var(--mute-dk);
	display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
	/* Centred: space-between was for two items, and only the copyright is left. */
	justify-content: center; align-items: baseline; text-align: center;
}