:root {
	--ink: #111111;
	--paper: #fafafa;
	--line: #A35D3D;
	--muted: #4a4a4a;
	--focus: #111111;
	--measure: 45ch;
}
/* Reset-ish basics */
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
}
body {
	background: #f7f2ea;
	color: var(--ink);
}
img {
	max-width: 45ch;
	display: block;
}
/* ---- Display type: unchanged from original (system-ui) ---- */
nav, h1, h2, h3, .eyebrow {
	font-family: system-ui, sans-serif;
}
/* ---- Body copy: Atkinson Hyperlegible, built for reading ---- */
body, p, li, .subtitle, address, blockquote {
	font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
}
p, li {
	font-size: 1.0625rem;
	line-height: 1.65;
	max-width: var(--measure);
}
a {
	color: var(--ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
a:hover {
	text-decoration-thickness: 2px;
}
/* Visible focus for every interactive element */
a:focus-visible,button:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}
/* Skip link */
.skip-link {
	position: absolute;
	left: 1rem;
	top: -3rem;
	background: var(--paper);
	color: var(--ink);
	padding: 0.75rem 1.25rem;
	border: 2px solid var(--ink);
	font-family: system-ui, sans-serif;
	font-weight: 700;
	z-index: 100;
	transition: top 0.15s ease;
}
.skip-link:focus {
	top: 1rem;
}
/* ---- Hero (kept from original: full-bleed photo + nav + title) ---- */
.hero {
	background-image: url("images/westpac1.jpg");
	background-size: cover;
	background-position: ;
	background-repeat: no-repeat;
	background-color: #000;
	/* fallback while image loads / if missing */
	background-attachment: fixed;
	display: grid;
	place-items: center;
	min-height: 100vh;
	color: #fff;
	text-align: center;
	position: relative;
}
.hero h1 {
	margin: 0;
	padding: 0.35em 0.6em;
	font-size: clamp(1.25rem, 3vw, 2.25rem);
	font-weight: 600;
	background: #1B3B2F;
	display: inline-block;
  border-radius: 24px;
}
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.4rem 0.2rem;
	background: #1B3B2F;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	z-index: 50;
}
.site-nav a {
	color: #fff;
	padding: 0.25rem 0.5rem;
}

.nav-sep {
  visibility: hidden;
  padding: 0 0.4ch;
}
.nav-sep.is-visible {
  visibility: visible;
}

/* ---- Section blocks: bordered cards with heading, subtitle, body, image ---- */
main {
	max-width: 74rem;
	margin: 3rem auto;
	padding: clamp(1rem, 1vw, 1rem);
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 8vw, 6rem);
	background-color: transparent;
}
.block {
	background-color: var(--paper);
	border: 1px solid var(--line);
	padding: clamp(1.25rem, 4vw, 2.5rem);
}
.block h2 {
	margin: 0 0 1em;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	color: #A35D3D;
}
/* From 40rem up, each block splits into two columns: the heading andbody copy on the left, images stacked on the right starting levelwith the heading. Below 40rem everything stacks in reading order. */
@media (min-width: 40rem) {
	.block {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: clamp(1.5rem, 4vw, 3rem);
		align-items: start;
	}
	.block > * {
		grid-column: 1;
	}
	.block > figure,.block > .media-support {
		grid-column: 2;
	}
	.block > .project,.block > form,.block > .feature-row {
		grid-column: 1 / -1;
	}
}
/* ---- Feature rows: alternating text/image pairs within a section ----
   Each .feature-row holds one .feature-text + one .media-feature.
   By default text sits left, image sits right. Add the
   .feature-row--reverse modifier to flip a row so the image sits
   left and text sits right, letting a section zig-zag: text/image,
   image/text, text/image ... Every section starts with a default
   (text-left) row. Below 40rem rows simply stack text, then image. */
.feature-row + .feature-row {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.feature-row .media-feature {
	margin-bottom: 0;
}
@media (min-width: 40rem) {
	.feature-row {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: clamp(1.5rem, 4vw, 3rem);
		align-items: start;
	}
	.feature-row .feature-text {
		grid-column: 1;
	}
	.feature-row .media-feature {
		grid-column: 2;
	}
	.feature-row--reverse .feature-text {
		grid-column: 2;
	}
	.feature-row--reverse .media-feature {
		grid-column: 1;
	}
}
/* Image hierarchy: one feature image, then a row of smaller supporting images */
figure {
	margin: 0;
}

.feature-row .feature-text--right {
	grid-column: 2;
}
.media-feature {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.media-feature img {
	width: 100%;
	object-fit: contain;
	border: 1px solid var(--line);
	background-color: #111111;
	color: #fafafa;
}
.media-support {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.25rem;
}
.media-support img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--line);
}
/* Work: individual project entries */
.project {
	border-top: 1px solid var(--line);
	padding-top: 1.75rem;
	margin-top: 1.75rem;
}
.project:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}
.project h3 {
	margin: 0 0 0.2em;
	font-size: clamp(1.125rem, 2vw, 1.4rem);
}
.project-media {
	margin-bottom: 1rem;
}
.project-media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--line);
}
/* Tools list */
.tools-list {
	list-style:square;
	margin: 0 0 1.75rem;
	padding-top: 0;
	padding-left: 3rem;
	display: grid;
	gap: 0.75rem;
}
.tools-list li {
	max-width: none;
}
.tools-list strong {
	font-family: system-ui, sans-serif;
}
/* Contact */
.contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	max-width: none;
}
.contact-list a {
	display: inline-block;
	border: 1px solid var(--line);
	padding: 0.85rem 1.1rem;
	font-weight: 700;
	font-family: system-ui, sans-serif;
	width: 100%;
}
.contact-list a:hover,.contact-list a:focus-visible {
	background: var(--ink);
	color: var(--paper);
}
footer {
	max-width: 74rem;
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem);
	color: var(--muted);
	font-size: 0.9rem;
}
blockquote{
	background-color: antiquewhite;
}
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}
@media (min-width: 40rem) {
	.project {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		gap: 1.75rem;
		align-items: start;
	}
	.project-media {
		margin-bottom: 0;
	}
	/* Default: text (first in the markup) sits left, image sits right.
	   Add .project--reverse to flip a project so the image sits left
	   and text sits right, so a run of projects can alternate. */
	.project--reverse .project-media {
		order: -1;
	}
}

/* Floating contact button (bottom-left) */
.floating-contact {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	z-index: 200;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.1rem;
	min-height: 44px;
	text-decoration: none;
	font-family: system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.floating-contact:hover {
	background: var(--ink);
	color: var(--paper);
}
.floating-contact:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.floating-contact { transition: none; }
}

/* Pin both halves of a feature row to the same grid row */
@media (min-width: 40rem) {
	.feature-row .feature-text,
	.feature-row .media-feature {
		grid-row: 1;
	}
}

/* Remove default top margin so content starts flush with the row */
.feature-text > *:first-child,
.media-feature > *:first-child {
	margin-top: 0;
}

.media-feature iframe {
	display: block;
	width: 100%;
	border: 1px solid var(--line);
}