/* The About and Services pages, set on the landing page's terms.

   The landing is built from a small vocabulary: headings flush left and very
   large, a two column row where a piece of film sits beside the words about it,
   corners at --r-media, and a lot of air between one thing and the next. These
   pages are the same vocabulary applied to longer content, so moving between
   them does not feel like moving between two sites. */

/* --- shared --- */

.fcg-page {
	padding: 0 4rem;
}
.fcg-page-inner {
	max-width: 148rem;
	margin: 0 auto;
}

/* the lede under the page title, set wide and quiet */
.fcg-lede {
	color: var(--c-black, #020202);
	font-size: 2.6rem;
	line-height: 1.42;
	letter-spacing: -0.01em;
	max-width: 68rem;
	margin: 0;
	color: var(--c-black, #020202);
}
.fcg-page-intro {
	padding: 4vh 0 12vh;
}

/* a small letter-spaced label, the way the landing marks a section */
.fcg-eyebrow {
	display: block;
	font-size: 1.2rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(2, 2, 2, 0.42);
	margin-bottom: 2.4rem;
}

/* --- the services, one row each --- */

.fcg-svc {
	/* was 14vh, which left two hundred pixels of empty page between the last
	   service and the footer */
	padding-bottom: 5vh;
}

/* --- the services, closed until they are reached --- */

/* Each is a line and nothing more until its turn comes. Seven of them stand as
   a list you can take in at a glance, and scrolling opens them one at a time,
   so the detail arrives where you are looking instead of all at once. */
.fcg-svc-row {
	border-top: 1px solid rgba(2, 2, 2, 0.12);
}
.fcg-svc-row:last-child {
	border-bottom: 1px solid rgba(2, 2, 2, 0.12);
}
.fcg-svc-head {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 2.8rem 0;
	/* The arrow is drawn in currentColor, and these pages carry a dark theme
	   that sets text in the cream used on black — so it arrived the same colour
	   as the paper and looked like it had never been added. Stated here, it
	   inherits correctly for both the arrow and the wording. */
	color: var(--c-black, #020202);
	cursor: pointer;
	/* a finger lands on the whole line, not just the words */
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.fcg-svc-head:focus-visible {
	outline: 2px solid var(--c-purple, #001eff);
	outline-offset: 4px;
}
.fcg-svc-head:hover .fcg-svc-title { color: var(--c-black, #020202); }
/* The site's own arrow, drawn in whatever colour the line is. It is always in
   the line and always nothing wide, so on the one being pointed at — or the one
   standing open — it opens from the left and pushes the wording along in front
   of it. That is the move the landing page makes, rather than a mark appearing
   beside the list. */
.fcg-svc-lead {
	flex: 0 0 auto;
	width: 0;
	height: 2rem;
	opacity: 0;
	align-self: center;
	background: currentColor;
	-webkit-mask: var(--fcg-arrow) center / contain no-repeat;
	mask: var(--fcg-arrow) center / contain no-repeat;
	transition: width 0.34s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
		margin-right 0.34s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
		opacity 0.24s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-svc-head:hover .fcg-svc-lead,
.fcg-svc-row.is-open .fcg-svc-lead {
	width: 2rem;
	margin-right: 0.9rem;
	opacity: 1;
}
.fcg-svc-title {
	color: rgba(2, 2, 2, 0.34);
	font-size: 3.2rem;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0;
	font-weight: 300;
	transition: color 0.4s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
/* the one that is open is the only one at full strength */
.fcg-svc-row.is-open .fcg-svc-title { color: var(--c-black, #020202); }

/* 0fr to 1fr opens to whatever the content actually needs, which a fixed
   max-height cannot do without either clipping or leaving a gap */
.fcg-svc-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.62s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-svc-row.is-open .fcg-svc-panel {
	grid-template-rows: 1fr;
}
.fcg-svc-panel-in {
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.42s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-svc-row.is-open .fcg-svc-panel-in {
	opacity: 1;
}
.fcg-svc-inner-pad {
	display: block;
}
.fcg-svc-panel-in > * {
	min-height: 0;
}
/* opened, it is the same two columns the landing uses */
/* The film takes its height from the row, as it does on the landing page.

   Given a ratio of its own it stood 480px tall beside 250px of words, leaving a
   quarter of the row empty; re-proportioning the columns only moved the gap
   about. Stretched instead, both halves end where the taller of them ends and
   the film simply covers whatever shape it is handed. */
.fcg-svc-panel-in {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	column-gap: 4rem;
	align-items: stretch;
}
.fcg-svc-media {
	position: relative;
	width: 100%;
	/* no ratio: the row decides, and a floor keeps it from collapsing when a
	   service's description is unusually short */
	min-height: 26rem;
	border-radius: var(--r-media, 1.2rem);
	overflow: hidden;
	background: #f3f2ec;
	margin-bottom: 3.2rem;
}
.fcg-svc-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fcg-svc-body {
	padding-left: 0;
	padding-bottom: 3.2rem;
}

/* --- the client line --- */

.fcg-clients {
	padding: 12vh 0;
	border-top: 1px solid rgba(2, 2, 2, 0.12);
}
.fcg-clients-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3.2rem;
}
.fcg-clients-list li {
	font-size: 2.8rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--c-black, #020202);
}

/* --- narrow --- */

@media (max-width: 1099px) {
	.fcg-page { padding: 0 2rem; }
	.fcg-lede { font-size: 2.2rem; }
	.fcg-svc-panel-in {
		grid-template-columns: 1fr;
		row-gap: 2.8rem;
	}
	/* stacked, the film always comes first whichever way the row was turned */
	.fcg-svc-body { padding-left: 0; }
	.fcg-svc-title { font-size: 2.6rem; }
	.fcg-svc-note { font-size: 1.7rem; max-width: none; }
	.fcg-clients-list li { font-size: 2.2rem; }
}

/* The sections the rebuilt pages replace.

   They are hidden rather than deleted. The site's own bundle wires a set of
   components per page and reaches into these by name as it does it; with them
   gone that wiring threw, the router's transition never finished, and the page
   was left permanently under `is-transitioning` — a black screen with nothing
   on it. Kept in the document and hidden, the wiring finds what it expects and
   the page shows. */
.fcg-retired {
	display: none !important;
}

/* --- the detail under each service --- */

.fcg-svc-more {
	font-size: 1.5rem;
	line-height: 1.62;
	color: rgba(2, 2, 2, 0.52);
	max-width: 46rem;
	margin: 1.6rem 0 0;
}


/* the site's pill button, turning blue on hover like the rest */
.fcg-svc-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: 2.8rem;
	height: 4rem;
	padding: 0 2.2rem;
	border-radius: var(--r-btn, 999rem);
	background: var(--c-black, #020202);
	color: var(--c-white, #fbfbf4);
	font-size: 1.4rem;
	text-decoration: none;
	transition: background-color 0.3s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-svc-cta:hover {
	background: var(--c-purple, #001eff);
}
/* The site paints every span inside a hovered link blue. On a button that also
   fills blue on hover that left blue lettering on a blue ground — the label
   vanished at the exact moment it was being pointed at. The ink is held here
   instead, for the wording and for the arrow, which takes its colour from it. */
.fcg-svc-cta,
.fcg-svc-cta span,
.fcg-svc-cta:hover,
.fcg-svc-cta:hover span,
.fcg-svc-cta:focus-visible span {
	color: var(--c-white, #fbfbf4) !important;
}
.fcg-svc-arrow,
.fcg-svc-cta:hover .fcg-svc-arrow {
	background: var(--c-white, #fbfbf4) !important;
}
.fcg-svc-cta span {
	display: block;
	line-height: 1;
}
/* the site's own arrow, drawn in whatever colour the label is, sitting ahead of
   it and pointing the way it sends you */
.fcg-svc-arrow {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	-webkit-mask: var(--fcg-arrow) center / contain no-repeat;
	mask: var(--fcg-arrow) center / contain no-repeat;
	transition: transform 0.34s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-svc-cta:hover .fcg-svc-arrow {
	transform: translateX(0.3rem);
}

@media (max-width: 1099px) {
	.fcg-svc-more { font-size: 1.6rem; max-width: none; }
}


/* The page title and the line under it are set, not performed.

   The design they sit in splits a heading and blurs it in as the section
   arrives, and fades the paragraph with it. On a page whose whole job is to be
   read that left the title assembling itself and the opening line dissolving as
   you scrolled past. Both are held still here. */
#services .hero-title,
#services .hero-title span,
#services .fcg-lede,
#about .hero-title,
#about .hero-title span,
#about .fcg-lede {
	/* held against the fade and the blur only. The transform is left alone:
	   pinning it in place was what kept the title on screen while the rest
	   scrolled under it. */
	filter: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	will-change: auto !important;
}
/* one word where the design had two, so the empty half takes no room */
#services .fcg-hero-title .hero-title-right {
	display: none;
}

/* The title sits at the top of its page rather than filling a screen.

   The design gives every hero a full viewport and a 24rem word, sized for a
   landing page that opens on it. On a page whose job is the list underneath,
   that pushed everything a screen down and — being carried on the hero's own
   scroll animation — rode up over the services as you went past. Set to its
   own height it stays where it is put and the list follows it directly. */
/* Measured off the Work page so the two match: "All Work" sits 165.7px tall,
   23px in from the left, 158px down the document. In the page's own units that
   is 14.4rem of type at 2rem of indent, 12vh from the top. */
#services .hero {
	min-height: 0 !important;
	height: auto !important;
	padding: 12vh 2rem 0 !important;
	display: block !important;
}
#services .hero .hero-title {
	font-size: 14.4rem !important;
	line-height: 1.02 !important;
	display: block !important;
	margin: 0 !important;
}

/* everything on the page starts on the same left edge as the title */
#services .fcg-page {
	padding-left: 2rem;
	padding-right: 2rem;
}
/* the opening line is quieter than the title and set on that same edge */
#services .fcg-lede {
	font-size: 1.8rem;
	line-height: 1.5;
	max-width: 58rem;
	color: rgba(2, 2, 2, 0.66);
}
/* top and bottom only — the shorthand here zeroed the left edge the rule above
   had just set, and the opening line slid back out to the margin */
#services .fcg-page-intro {
	padding-top: 3vh;
	padding-bottom: 8vh;
}

/* --- about, on the same terms as services --- */

#about .hero {
	min-height: 0 !important;
	height: auto !important;
	padding: 12vh 2rem 0 !important;
	display: block !important;
}
/* The design lifts this wrapper out of the flow and places it by hand, sized
   for a hero that fills the screen. Left absolute in a hero that no longer
   does, it escaped the section entirely — the title landed four hundred pixels
   down, on top of the opening line, and outside the padding that sets every
   other left edge on the page. Put back in flow it sits where it belongs. */
#about .hero .hero-title-wrapper {
	position: static !important;
	inset: auto !important;
	transform: none !important;
}
#about .hero .hero-title-wrapper,
#about .hero .hero-title {
	display: block !important;
	margin: 0 !important;
	width: auto !important;
}
/* the page carries its own photographs further down, in the landing's grid */
#about .hero .hero-images {
	display: none !important;
}
#about .hero .hero-title {
	font-size: 14.4rem !important;
	line-height: 1.02 !important;
}
/* the design sets this heading over two lines with a mark between them; with
   one word the empty halves would still take their space */
#about .hero .hero-title-top-right,
#about .hero .hero-title-bottom,
#about .hero .hero-icon {
	display: none !important;
}
#about .fcg-page {
	padding-left: 2rem;
	padding-right: 2rem;
}
#about .fcg-lede {
	font-size: 1.8rem;
	line-height: 1.5;
	max-width: 58rem;
	color: rgba(2, 2, 2, 0.66);
}
#about .fcg-page-intro {
	padding-top: 3vh;
	padding-bottom: 8vh;
}


/* --- about --- */

/* Built from the landing page's own vocabulary: type set very large and flush
   left, a dark band for rhythm against the paper, lists whose rows are divided
   by hairlines and answer the pointer with the arrow opening from the left, and
   photographs in the same grid the work uses. */

#about .fcg-lede {
	font-size: 3.4rem !important;
	line-height: 1.28 !important;
	letter-spacing: -0.015em;
	max-width: 84rem !important;
	color: var(--c-black, #020202) !important;
}
#about .fcg-page-intro {
	padding-top: 4vh !important;
	padding-bottom: 8vh !important;
}

/* the words, with one frame beside them */
.fcg-ab-say-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	column-gap: 8rem;
	align-items: start;
	padding-top: 5vh;
	border-top: 1px solid rgba(2, 2, 2, 0.12);
	padding-bottom: 12vh;
}
.fcg-ab-copy p {
	font-size: 1.9rem;
	line-height: 1.62;
	color: rgba(2, 2, 2, 0.68);
	margin: 0 0 2.2rem;
	max-width: 54rem;
}
.fcg-ab-copy p:last-child { margin-bottom: 0; }

.fcg-ab-fig {
	margin: 0;
	border-radius: var(--r-media, 1.2rem);
	overflow: hidden;
	background: #f3f2ec;
	aspect-ratio: 3 / 2;
}
.fcg-ab-fig-tall { aspect-ratio: 4 / 5; }
.fcg-ab-fig img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* a section heading, set like the page title but smaller */
.fcg-ab-h {
	font-size: 6.4rem;
	line-height: 1.04;
	letter-spacing: -0.025em;
	font-weight: 300;
	margin: 0 0 4rem;
	color: inherit;
}

/* --- the two lists --- */

.fcg-ab-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fcg-ab-item {
	display: flex;
	align-items: center;
	font-size: 3.2rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	padding: 2.4rem 0;
	border-top: 1px solid currentColor;
	/* the divider is the ink at a tenth, whatever colour the section is */
	border-top-color: color-mix(in srgb, currentColor 16%, transparent);
	transition: opacity 0.3s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
	opacity: 0.55;
}
.fcg-ab-item:last-child {
	border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.fcg-ab-item:hover { opacity: 1; }

/* the site's arrow: nothing wide until it is wanted, then it opens from the
   left and pushes the wording along in front of it */
.fcg-ab-arrow {
	flex: 0 0 auto;
	width: 0;
	height: 2.4rem;
	opacity: 0;
	background: currentColor;
	-webkit-mask: var(--fcg-arrow) center / contain no-repeat;
	mask: var(--fcg-arrow) center / contain no-repeat;
	transition: width 0.34s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
		margin-right 0.34s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
		opacity 0.24s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-ab-item:hover .fcg-ab-arrow {
	width: 2.4rem;
	margin-right: 1rem;
	opacity: 1;
}

/* the dark band, as the work section is on the landing */
.fcg-ab-dark {
	background: var(--c-black, #020202);
	color: var(--c-white, #fbfbf4);
	padding: 12vh 2rem;
	margin-top: 0;
}
.fcg-ab-dark .fcg-ab-h { color: var(--c-white, #fbfbf4); }

.fcg-ab-does {
	padding-top: 12vh;
}
.fcg-ab-does .fcg-svc-cta { margin-top: 4rem; }

.fcg-ab-strip { padding-top: 12vh; }
.fcg-ab-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem;
}

.fcg-ab-where { padding-top: 12vh; padding-bottom: 6vh; }
.fcg-ab-offices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10rem;
}

@media (max-width: 1099px) {
	#about .fcg-lede { font-size: 2.4rem !important; }
	.fcg-ab-say-grid,
	.fcg-ab-offices {
		grid-template-columns: 1fr;
		row-gap: 4rem;
	}
	.fcg-ab-copy p { font-size: 1.8rem; max-width: none; }
	.fcg-ab-fig-tall { aspect-ratio: 3 / 2; }
	.fcg-ab-row { grid-template-columns: 1fr; }
	.fcg-ab-h { font-size: 4rem; }
	.fcg-ab-item { font-size: 2.2rem; padding: 1.8rem 0; }
	.fcg-ab-dark { padding: 9vh 2rem; }
	.fcg-ab-does, .fcg-ab-strip, .fcg-ab-where { padding-top: 8vh; }
}

/* --- contact --- */

/* A contact page's job is to be written to, so the form leads and the studios
   sit beside it. The version before this one opened on a statement and a large
   photograph — the About page's shape — which read well and put the only thing
   anyone came for two screens down. The two columns are the landing's own: the
   substance on the left, the list of particulars on the right. */
#contact .hero {
	min-height: 0 !important;
	height: auto !important;
	padding: 12vh 2rem 0 !important;
	display: block !important;
}
#contact .hero .hero-title-wrapper {
	position: static !important;
	inset: auto !important;
	transform: none !important;
}
#contact .hero .hero-title-wrapper,
#contact .hero .hero-title {
	display: block !important;
	margin: 0 !important;
	width: auto !important;
}
#contact .hero .hero-title {
	font-size: 14.4rem !important;
	line-height: 1.02 !important;
}
#contact .hero .hero-title-top-right,
#contact .hero .hero-title-bottom,
#contact .hero .hero-icon,
#contact .hero .hero-media-wrapper,
#contact .hero .hero-guide {
	display: none !important;
}
#contact .fcg-page {
	padding-left: 2rem;
	padding-right: 2rem;
}
#contact .fcg-lede {
	font-size: 3.4rem !important;
	line-height: 1.28 !important;
	letter-spacing: -0.015em;
	max-width: 84rem !important;
	color: var(--c-black, #020202) !important;
}
#contact .fcg-page-intro {
	padding-top: 4vh !important;
	padding-bottom: 7vh !important;
}

#contact .fcg-ct {
	padding-bottom: 12vh;
}
.fcg-ct-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	column-gap: 10rem;
	align-items: start;
	padding-top: 5vh;
	border-top: 1px solid rgba(2, 2, 2, 0.12);
}

/* the particulars, stacked and quiet beside the form */
.fcg-ct-side {
	display: flex;
	flex-direction: column;
	gap: 3.4rem;
}
.fcg-ct-line {
	display: block;
	font-size: 1.7rem;
	line-height: 1.5;
	color: rgba(2, 2, 2, 0.68);
	text-decoration: none;
	margin-bottom: 0.7rem;
	transition: color 0.28s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.fcg-ct-line:last-child {
	margin-bottom: 0;
}
.fcg-ct-line:hover {
	color: var(--c-purple, #001eff);
}

/* the form is inside the column now, so its own section spacing goes */
#contact .fcg-ct-form .form-section {
	padding: 0 !important;
}

@media (max-width: 1099px) {
	#contact .fcg-lede { font-size: 2.4rem !important; }
	.fcg-ct-grid {
		grid-template-columns: 1fr;
		row-gap: 6rem;
	}
	/* on one column the particulars come first: shorter, and often all
	   somebody wants */
	.fcg-ct-side { order: -1; }
}

/* --- the contact form --- */

/* The fields arrived as heavy black slabs — the dark theme's own treatment,
   which reads on black and turns into a row of blobs on paper. Set as the login
   screen is instead: a hairline outline that firms up under the cursor and
   again when it holds focus, so the form is a set of lines rather than a stack
   of weights. */
#contact .form-section {
	padding: 0;
}
#contact .form-title {
	color: var(--c-black, #020202) !important;
	font-size: 2.8rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--c-black, #020202);
	margin: 0 0 3rem;
	font-weight: 300;
}
#contact .form {
	max-width: none;
}
#contact .form-row {
	margin-bottom: 1.6rem;
}
#contact .form-row-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6rem;
}
#contact .form-label {
	display: block;
	width: 100%;
}
/* forced: the design's own field rules are more specific than a class selector
   here, and were keeping the dark fill, the cream ink and their own height —
   the radius was the only thing getting through */
#contact .form-input {
	width: 100%;
	font: inherit;
	font-size: 1.6rem;
	color: var(--c-black, #020202) !important;
	background: transparent !important;
	border: 1px solid rgba(2, 2, 2, 0.18) !important;
	border-radius: var(--r-btn, 999rem) !important;
	padding: 0 2.2rem !important;
	height: 5.4rem !important;
	outline: none;
	transition: border-color 0.28s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
/* the honeypot stays invisible and out of the layout */
#contact .form .sr-only,
#contact .form input[name="extra"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0 !important;
}
#contact .form-input::placeholder {
	color: rgba(2, 2, 2, 0.42) !important;
}
#contact .form-input:hover {
	border-color: rgba(2, 2, 2, 0.38) !important;
}
#contact .form-input:focus {
	border-color: var(--c-purple, #001eff) !important;
}
/* the message is a box, not a line, so it takes the softer corner */
#contact .form-input-textarea {
	height: auto !important;
	min-height: 16rem !important;
	border-radius: var(--r-box, 1.6rem) !important;
	padding: 1.8rem 2.2rem !important;
	resize: vertical;
	line-height: 1.55;
}
#contact .form-row-message .form-label-text {
	display: none;
}

/* a checkbox drawn to match, since the real one is hidden for the screen reader */
#contact .form-row-checkbox {
	margin: 2.8rem 0 3.2rem;
}
#contact .form-checkbox-label {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	font-size: 1.4rem;
	color: rgba(2, 2, 2, 0.62);
	cursor: pointer;
}
#contact .form-checkbox-label:before {
	content: "";
	flex: 0 0 auto;
	width: 1.8rem;
	height: 1.8rem;
	border: 1px solid rgba(2, 2, 2, 0.28);
	border-radius: 0.4rem;
	transition: background-color 0.24s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
		border-color 0.24s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
#contact .form-input-checkbox:checked + .form-checkbox-label:before {
	background: var(--c-purple, #001eff);
	border-color: var(--c-purple, #001eff);
}
#contact .form-input-checkbox:focus-visible + .form-checkbox-label:before {
	outline: 2px solid var(--c-purple, #001eff);
	outline-offset: 2px;
}

/* the submit, as a pill like every other button on the site */
#contact .form .btn-block {
	width: auto !important;
	height: auto !important;
	background: none !important;
	aspect-ratio: auto !important;
	display: inline-block;
}
#contact .form .btn-block-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 5.4rem;
	padding: 0 3.2rem;
	font: inherit;
	font-size: 1.5rem;
	color: var(--c-white, #fbfbf4);
	background: var(--c-black, #020202);
	border: 0;
	border-radius: var(--r-btn, 999rem);
	cursor: pointer;
	transition: background-color 0.3s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
#contact .form .btn-block-link:hover {
	background: var(--c-purple, #001eff);
	color: var(--c-white, #fbfbf4);
}

@media (max-width: 1099px) {
	#contact .form-title { font-size: 3.2rem; }
	#contact .form-row-grid { grid-template-columns: 1fr; }
}

/* --- the rebuilt pages, narrow --- */

/* The page titles are sized against the Work page's "All Work", which is a
   desktop measurement: 14.4rem comes out at about 135px once the root size
   switches at 500px, and "Contact" then runs some 240px past the right edge of
   a 375px screen. It was clipped rather than scrolling, so it read as a word
   with its end cut off rather than as a broken page. Sized down here. */
@media (max-width: 1099px) {
	/* Clear of the navigation.

	   Its own box ends at 66px, but the animated mark inside it paints down to
	   139 — so measuring the nav element said there was no overlap while the
	   logo sat squarely across the title. The padding is set against what is
	   actually drawn, with room to spare. */
	#services .hero,
	#about .hero,
	#contact .hero {
		padding: 21vh 2rem 0 !important;
	}
	#services .hero .hero-title,
	#about .hero .hero-title,
	#contact .hero .hero-title {
		font-size: 8.6rem !important;
	}
}
@media (max-width: 599px) {
	#services .hero .hero-title,
	#about .hero .hero-title,
	#contact .hero .hero-title {
		font-size: 6.2rem !important;
		line-height: 1.04 !important;
	}
}