/*=========================
	SITE FOOTER
=========================*/

.site-footer {
	color: var(--color-n-black);
	font-family: inherit;
}

.site-footer .container {
	max-width: none;
	width: 100%;
	margin: 0;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

/* ---------- 1. Contact / Newsletter ---------- */
.site-footer__contact > .container {
	/* Full-bleed across viewport edges, ignore the global container constraints */
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.site-footer__newsletter {
	padding: 13.6rem 9.6rem;
}
.site-footer__newsletter h2 {
	/* live: 56px / 56px, 32px below */
	font-size: 56px !important;
	line-height: 56px;
	margin: 0 0 32px;
}

/* ---- Gravity Forms styling — matches qld.guidedogs.com.au ---- */
.site-footer__form .gform_wrapper {
	margin: 0;
}
.site-footer__form .gform_required_legend {
	display: none;
}
.site-footer__form .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer__form .gfield {
	margin: 0;
	padding: 0;
}
/* Force any field flagged full-width (or by Gravity's own class) onto its own row */
.site-footer__form .gfield--width-full,
.site-footer__form .gfield.gfield--width-full,
.site-footer__form .gfield_consent,
.site-footer__form .gfield_html,
.site-footer__form .gfield_section {
	grid-column: 1 / -1;
}

.site-footer__form .gfield_label {
	display: block;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 6px;
	color: var(--color-n-black, #282829);
}
.site-footer__form .gfield_required {
	color: #000;
	font-weight: 700;
	margin-left: 2px;
}
.site-footer__form .gfield_required .gfield_required_text {
	display: none; /* hide the "(Required)" sr-only text the live site hides */
}

/* Inputs / selects / textareas — borderless on white fill */
.site-footer__form .gform_wrapper input[type="text"],
.site-footer__form .gform_wrapper input[type="email"],
.site-footer__form .gform_wrapper input[type="tel"],
.site-footer__form .gform_wrapper input[type="url"],
.site-footer__form .gform_wrapper input[type="number"],
.site-footer__form .gform_wrapper input[type="password"],
.site-footer__form .gform_wrapper input[type="date"],
.site-footer__form .gform_wrapper select,
.site-footer__form .gform_wrapper textarea {
	width: 100%;
	background-color: #f6f6f8;
	border: 2px solid #e9e9e7;
	border-radius: 0;
	padding: 16px 20px;
	font: inherit;
	color: var(--color-n-black, #282829);
	transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0, 1);
}
.site-footer__form .gform_wrapper input::placeholder,
.site-footer__form .gform_wrapper textarea::placeholder {
	color: #69696a;
	opacity: 1;
}
.site-footer__form .gform_wrapper input:focus,
.site-footer__form .gform_wrapper select:focus,
.site-footer__form .gform_wrapper textarea:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--color-p, #ff6e33);
}
.site-footer__form .gform_wrapper textarea {
	min-height: 140px;
	resize: vertical;
}

/* Validation states */
.site-footer__form .gfield_error input,
.site-footer__form .gfield_error select,
.site-footer__form .gfield_error textarea {
	box-shadow: inset 0 0 0 2px var(--color-m-error, #ee0004);
}
.site-footer__form .gfield_validation_message,
.site-footer__form .validation_message {
	color: var(--color-m-error, #ee0004);
	font-size: 1.4rem;
	margin-top: 6px;
}

/* Validation summary at top of form */
.site-footer__form .gform_validation_errors {
	background: #fff;
	border-left: 4px solid var(--color-m-error, #ee0004);
	padding: 12px 16px;
	margin-bottom: var(--space-3, 16px);
}
.site-footer__form .gform_validation_errors h2 {
	font-size: 1.6rem;
	margin: 0;
	color: var(--color-m-error, #ee0004);
}

/* Confirmation message */
.site-footer__form .gform_confirmation_message {
	background: var(--color-m-success-light, #e9fbf6);
	border-left: 4px solid var(--color-m-success, #01b483);
	padding: 16px 20px;
	color: var(--color-n-black, #282829);
}

/* ---- Submit button: charcoal pill with arrow, matching live "Choose your preferences" ---- */
.site-footer__form .gform_footer {
	margin: 5rem 0 0;
	padding: 0;
	display: flex;
}
/* Footer newsletter submit button — black pill */
.site-footer__form .gform_footer .gform_button,
.site-footer__form .gform_footer button {
	align-items: center;
	background: var(--color-n-black, #282829);
	border: none;
	border-radius: 100px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 1.8rem;
	font-weight: 600;
	gap: 10px;
	line-height: 1.3;
	padding: 1.1em 2.6em;
	transition: opacity 0.2s ease;
}
.site-footer__form .gform_footer .gform_button::after,
.site-footer__form .gform_footer button::after {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 19 19' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5.576 7.914 2.163 14.19 8.45H.5v2.25h13.691l-6.277 6.29L9.5 18.575l9-9-9-9z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	flex-shrink: 0;
	height: 14px;
	width: 14px;
}
.site-footer__form .gform_footer .gform_button:hover,
.site-footer__form .gform_footer button:hover {
	opacity: 0.85;
}

/* Honeypot / hidden helper rows shouldn't reserve grid space */
.site-footer__form .gform_validation_container,
.site-footer__form .gfield--type-html:empty,
.site-footer__form .gfield_visibility_hidden {
	display: none !important;
}

/* AJAX spinner */
.site-footer__form .gform_ajax_spinner {
	margin-left: 12px;
}

@media only screen and (max-width: 479.98px) {
	.site-footer__form .gform_fields {
		grid-template-columns: 1fr;
	}
}

.site-footer__contact-info {
	background: #f1f1f3;
	display: flex;
	flex-direction: column;
}
.site-footer__contact-info .row {
	padding: 10rem 9.6rem;
	flex: 1 1 auto;
}
.site-footer__contact-info .u-h4 {
	font-size: 2.4rem !important;
	font-weight: 600 !important;
	line-height: 1.25em;
	margin: 0 0 var(--space-3, 16px);
}
.site-footer__contact-info .list--unstyled {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 12px);
}
.site-footer__contact-info .list--unstyled li {
	display: flex;
	align-items: center;
	gap: 40px;
}
.site-footer__contact-info .list--unstyled a,
.site-footer__contact-info .list--unstyled a:link,
.site-footer__contact-info .list--unstyled a:visited,
.site-footer__contact-info .list--unstyled a .border-bot-sweep__elem {
	color: #282829;
	font-size: 1.8rem;
	font-weight: 500;
}

/* border-bot-sweep--reverse: full-width underline at rest, recedes on hover */
.site-footer__contact-info .list--unstyled a .border-bot-sweep__elem,
.border-bot-sweep--reverse .border-bot-sweep__elem,
.border-bot-sweep--reverse {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 2px;
	transition: background-size 0.35s cubic-bezier(0.4, 0, 0, 1);
	padding-bottom: 2px;
	text-decoration: none;
}
.site-footer__contact-info .list--unstyled a:hover .border-bot-sweep__elem,
.site-footer__contact-info .list--unstyled a:focus-visible .border-bot-sweep__elem,
.border-bot-sweep--reverse:hover .border-bot-sweep__elem,
.border-bot-sweep--reverse:focus-visible .border-bot-sweep__elem {
	background-size: 0% 2px;
}

/* Circular brand-colored icon button (matches live c-btn-circle) */
.site-footer__contact-info .c-btn-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	min-width: 4rem;
	border-radius: 50%;
	flex-shrink: 0;
	color: #fff;
}
.site-footer__contact-info .c-btn-circle .c-icon,
.site-footer__contact-info .c-btn-circle svg {
	display: inline-flex;
	align-items: center;
	width: 1.8rem;
	height: 1.8rem;
}
.site-footer__contact-info .c-btn-circle--pink {
	background: #fcbbe0;
	color: var(--color-n-black, #282829);
}
.site-footer__contact-info .c-btn-circle--green {
	background: #01b483;
	color: #fff;
}

/* Map — full-bleed on the right side */
.newsletter-signup__map {
	margin-top: auto;
}
.newsletter-signup__link {
	display: block;
}
.site-footer__map,
.c-map-ratio {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	min-height: 220px;
}
.site-footer__map img,
.c-map-ratio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
}
.u-object-fit {
	object-fit: cover;
}

/* ---------- 2. Main footer (dark) ---------- */
.site-footer__main {
	background: var(--color-n-black, #282829);
	color: #fff;
	padding-top: 13.5rem;
	padding-bottom: var(--space-6, 48px);
}
.site-footer__brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4, 24px);
	margin-bottom: var(--space-6, 48px);
	flex-wrap: wrap;
}
.site-footer__logo img {
	width: 322px;
	height: auto;
	display: block;
}
/* Animated (Lottie) braille logo — desktop only, same as live (322x67).
   Hidden until the animation mounts; the static white SVG is the fallback. */
.site-footer__logo .site-footer__animated-logo {
	display: none;
	width: 322px;
	height: 67px;
}
.site-footer__logo .site-footer__animated-logo svg {
	display: block;
	width: 100%;
	height: 100%;
}
.site-footer__logo.has-lottie .site-footer__animated-logo {
	display: block;
}
.site-footer__logo.has-lottie img {
	display: none;
}
@media (max-width: 767.98px) {
	/* Mobile keeps the static logo (live parity) */
	.site-footer__logo .site-footer__animated-logo,
	.site-footer__logo.has-lottie .site-footer__animated-logo {
		display: none;
	}
	.site-footer__logo.has-lottie img {
		display: block;
	}
}
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}

/* Per-platform brand color — exact hex pulled from live site (qld.guidedogs.com.au)
   c-btn-circle--blue-light / --pink / --grey / --green classes */
.site-footer__social-item.is-facebook {
	--social-bg: #a4dbde;
} /* blue-light */
.site-footer__social-item.is-instagram {
	--social-bg: #fcbbe0;
} /* pink */
.site-footer__social-item.is-linkedin {
	--social-bg: #f1f1f3;
} /* grey */
.site-footer__social-item.is-twitter,
.site-footer__social-item.is-x {
	--social-bg: var(--color-s, #01b483);
}
.site-footer__social-item.is-youtube {
	--social-bg: #a4dbde;
} /* blue-light */
.site-footer__social-item.is-default {
	--social-bg: var(--color-p, #ff6e33);
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--social-bg, var(--color-p));
	border: 2px solid var(--social-bg, var(--color-p));
	transition:
		transform 0.2s cubic-bezier(0.4, 0, 0, 1),
		box-shadow 0.2s ease;
	color: var(--color-n-black, #282829);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	transform: rotate(-8deg) scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.site-footer__social img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	/* SVGs use fill="currentColor" — force them black inside the colored circle,
	   then drop opacity slightly to match the soft charcoal look on the live site */
	filter: brightness(0);
	opacity: 0.7;
	transition: opacity 0.2s ease;
}
.site-footer__social a:hover img,
.site-footer__social a:focus-visible img {
	opacity: 1;
}

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5, 32px);
}
.site-footer__col-title {
	color: #fff;
	margin: 0 0 var(--space-3, 16px);
	font-weight: 700;
}
.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.site-footer__col a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 1.8rem;
	line-height: 1.5;
	transition:
		background-size 0.35s cubic-bezier(0.4, 0, 0, 1),
		color 0.2s cubic-bezier(0.4, 0, 0, 1);
}

/* Per-column accent (mirrors live u-color-hover-focus--{pink|blue-light|peach|green}) */
.site-footer__col--1 {
	--col-accent: #fcbbe0;
} /* Get Support  → pink */
.site-footer__col--2 {
	--col-accent: #a4dbde;
} /* Get Involved → blue-light */
.site-footer__col--3 {
	--col-accent: #f8a087;
} /* Get Resources → peach */
.site-footer__col--4 {
	--col-accent: #01b483;
} /* About Us     → green */

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
	color: var(--col-accent, #fff);
}

/* Column title: same accent + underline-sweep on hover as the links below it */
.site-footer__col-title .border-bot-sweep__elem {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 0% 3px;
	transition:
		background-size 0.35s cubic-bezier(0.4, 0, 0, 1),
		color 0.2s cubic-bezier(0.4, 0, 0, 1);
	padding-bottom: 2px;
}
.site-footer__col-title:hover,
.site-footer__col .site-footer__col-title:hover {
	color: var(--col-accent, #fff);
}
.site-footer__col-title:hover .border-bot-sweep__elem,
.site-footer__col-title:focus-within .border-bot-sweep__elem {
	background-position: left bottom;
	background-size: 100% 3px;
}

/* Border-bottom-sweep: underline slides in from the left on hover,
   then slides out to the right on leave. The anchor swaps right↔left
   while the line is collapsed (0%), so the swap itself is never visible —
   only background-size is transitioned, never background-position. */
.border-bot-sweep {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 0% 3px;
	transition:
		background-size 0.35s cubic-bezier(0.4, 0, 0, 1),
		color 0.2s cubic-bezier(0.4, 0, 0, 1);
	padding-bottom: 2px;
}
/* Footer column links: 1px sweep line */
.site-footer__col a.border-bot-sweep {
	background-size: 0% 1px;
}
.site-footer__col .border-bot-sweep:hover,
.site-footer__col .border-bot-sweep:focus-visible {
	color: var(--col-accent, #fff);
	background-position: left bottom;
	background-size: 100% 1px;
}

/* ---------- 3. Bottom bar ---------- */
.site-footer__bottom {
	background: #000;
	color: rgba(255, 255, 255, 0.85);
	min-height: 80px;
	display: flex;
	align-items: center;
	font-size: 1.4rem;
}
.site-footer__bottom > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4, 24px);
	flex-wrap: wrap;
	width: 100%;
}

/* Left — partner badge */
.site-footer__bottom-left {
	display: flex;
	align-items: center;
}
.site-footer__partner img {
	width: 49px;
	height: 49px;
	display: block;
}

/* Center — links + meta */
.site-footer__bottom-center {
	flex: 1;
	display: flex;
	justify-content: center;
}
.site-footer__bottom-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	align-items: center;
	justify-content: center;
}
.site-footer__bottom-nav li {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
.site-footer__bottom-nav li:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 20px;
	background: #fff;
	margin: 0 16px;
	user-select: none;
	pointer-events: none;
}
.site-footer__bottom-nav a,
.site-footer__bottom-nav span {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.6rem;
	line-height: 1.5;
	text-decoration: none;
}
.site-footer__bottom-nav a {
	border-bottom: 1px solid transparent;
	transition:
		border-color 0.2s ease,
		color 0.15s ease;
}
.site-footer__bottom-nav a:hover,
.site-footer__bottom-nav a:focus-visible {
	color: #fff;
	border-bottom-color: currentColor;
}

/* Right — GD initials mark */
.site-footer__bottom-right {
	display: flex;
	align-items: center;
}
.site-footer__gd-mark {
	display: inline-flex;
	color: #fff;
}
.site-footer__gd-mark .c-icon,
.site-footer__gd-mark svg {
	display: block;
	width: 57px;
	height: 27px;
	color: inherit;
}
@media only screen and (max-width: 1199.98px) {
	.site-footer__gd-mark .c-icon,
	.site-footer__gd-mark svg {
		height: 14px;
	}
}

@media only screen and (max-width: 767.98px) {
	.site-footer__bottom {
		padding-top: var(--space-5);
		padding-bottom: var(--space-5);
	}
	.site-footer__bottom > .container {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.site-footer__bottom-nav ul {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--space-1);
	}
	.site-footer__bottom-nav li:not(:last-child)::after {
		display: none;
	}
	.site-footer__gd-mark .c-icon,
	.site-footer__gd-mark svg {
		height: 40px;
		width: auto;
	}
}

/* ---------- responsive ---------- */
/* Tablet (up to 1199px): nav drops to 2 columns with space-6 gap */
@media only screen and (max-width: 1199.98px) {
	.site-footer__nav {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
	}
}
/* Below 768px: nav stacks to 1 column */
@media only screen and (max-width: 767.98px) {
	.site-footer__nav {
		grid-template-columns: 1fr;
	}
	.site-footer__newsletter h2 {
		font-size: 26px !important;
	}
	.site-footer__form .gform_fields {
		grid-template-columns: 1fr;
	}
}
/* Mobile through tablet (up to 1199px): logo+social row stacks */
@media only screen and (max-width: 1199.98px) {
	.site-footer__contact > .container {
		grid-template-columns: 1fr;
	}
	/* Use the standard container padding + reduce vertical padding for tablet+mobile */
	.site-footer__newsletter {
		padding: var(--space-6) var(--container-px);
	}
	.site-footer__contact-info .row {
		padding: var(--space-6) var(--container-px);
	}
	.site-footer__main {
		padding-top: var(--space-6);
		padding-bottom: var(--space-5);
	}
}

@media only screen and (max-width: 479.98px) {
	.site-footer__newsletter {
		padding: var(--space-4, 24px) var(--container-px);
	}
	.site-footer__form .row {
		grid-template-columns: 1fr;
	}
	.site-footer__nav {
		grid-template-columns: 1fr;
	}
	.site-footer__brand {
		justify-content: center;
		text-align: center;
	}
	.site-footer__bottom > .container {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ===========================================================================
   FOOTER NEWSLETTER SIGNUP — 1:1 with qld.guidedogs.com.au
   Live markup is a hand-built two-step form (#newsletter-signup-form) inside a
   vertical Slick carousel, not a Gravity Form. Every value below was read off
   the live computed styles. Scoped to the form so nothing leaks site-wide.
   =========================================================================== */

/* ---- 16-column grid (live's own grid, not bootstrap's 12) ---- */
#newsletter-signup-form .row {
	display: flex;
	flex: 0 1 auto;
	flex-flow: row wrap;
	margin-left: -16px;
	margin-right: -16px;
}
#newsletter-signup-form .col-xs-16 {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 100%;
	max-width: 100%;
	padding-left: 16px;
	padding-right: 16px;
}
@media only screen and (min-width: 48em) {
	#newsletter-signup-form .col-sm-8 {
		flex-basis: 50%;
		max-width: 50%;
	}
}

/* ---- Utilities live relies on inside this form ---- */
#newsletter-signup-form .u-none,
.site-footer__form .u-none {
	display: none !important;
}
#newsletter-signup-form .u-visuallyhidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
#newsletter-signup-form .u-m-tx1 {
	margin-top: 8px;
}
#newsletter-signup-form .weight-700 {
	font-weight: 700;
}

/* ---- Rows, labels, inputs ---- */
#newsletter-signup-form .form__row {
	margin-bottom: 32px;
}
#newsletter-signup-form label {
	display: block;
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 27px;
	color: #282829;
}
#newsletter-signup-form .c-form__input input {
	display: inline-block;
	width: 100%;
	padding: 15px 20px;
	margin: 0;
	font-family: inherit;
	font-size: 20px;
	font-weight: 300;
	line-height: 32px;
	color: #282829;
	background-color: #f6f6f8;
	border: 2px solid #e9e9e7;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
#newsletter-signup-form .c-form__input input::placeholder {
	color: #282829;
	opacity: 1;
}
#newsletter-signup-form .c-form__input input:focus {
	outline: 2px solid #282829;
	outline-offset: 2px;
}

/* ---- Error text ---- */
#newsletter-signup-form .error {
	font-size: 20px;
	font-weight: 300;
	line-height: 27px;
	color: #ee0004;
}
#newsletter-signup-form .error-dark {
	color: #282829;
}
#newsletter-signup-form .error:empty {
	display: none;
}
#newsletter-signup-form #newsletter-error {
	margin: 0 0 24px;
}

/* ---- Validation summary alert ---- */
#newsletter-signup-form .c-alert {
	padding: 32px;
	margin: 0 0 40px;
	font-size: 20px;
	font-weight: 300;
	line-height: 27px;
	color: #282829;
	background-color: #f1f1f3;
	border: 2px solid #ff6e33;
	border-radius: 10px;
}
#newsletter-signup-form .c-alert .u-h4 {
	margin: 0 0 32px;
	font-size: 28px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: -1px;
	color: #282829;
}
#newsletter-signup-form .c-alert ul {
	list-style: none;
	padding-left: 0;
	margin: 35px 0 0;
}
#newsletter-signup-form .c-alert li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 24px;
}
#newsletter-signup-form .c-alert li:last-child {
	margin-bottom: 0;
}
#newsletter-signup-form .c-alert li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 7px;
	height: 7px;
	border-radius: 6px;
	background: #282829;
}

/* ---- Opt-in checkboxes ---- */
#newsletter-signup-form .input-checkbox {
	position: absolute;
	left: -9999px;
}
#newsletter-signup-form .input-checkbox + label {
	cursor: pointer;
	display: block;
	font-size: 20px;
	font-weight: 400;
	line-height: 27px;
	margin-bottom: 16px;
	padding-left: 35px;
	position: relative;
}
#newsletter-signup-form .input-checkbox + label::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 3px;
	width: 27px;
	height: 27px;
	border: 2px solid #282829;
	border-radius: 3px;
	transition: border 0.3s cubic-bezier(0.4, 0, 0, 1), background 0.2s cubic-bezier(0.4, 0, 0, 1);
}
#newsletter-signup-form .input-checkbox + label::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 7px;
	width: 8px;
	height: 14px;
	/* Tick is dark, not white: the box stays transparent when ticked (James, 30 Jul)
	   — live fills the box black and uses a white tick. */
	border-right: 2px solid #282829;
	border-bottom: 2px solid #282829;
	transform: rotate(45deg);
	opacity: 0;
	z-index: 1;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0, 1);
}
#newsletter-signup-form .input-checkbox:checked + label::before {
	opacity: 1;
}
/* Box never takes a fill — ticked, focused or hovered — only the outline + tick. */
#newsletter-signup-form .input-checkbox:checked + label::after {
	background: transparent;
	border-color: #282829;
}
#newsletter-signup-form .input-checkbox:focus + label::after,
#newsletter-signup-form .input-checkbox:hover + label::after {
	background: transparent;
	border-color: #282829;
}

/* ---- Buttons (live .c-btn pill + hover sweep) ---- */
#newsletter-signup-form .c-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	padding: 20px 36px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	text-decoration: none;
	border: 0;
	border-radius: 100px;
	background-color: transparent;
	box-shadow: 0 0 0 1px #282829, inset 0 0 0 1px #282829;
	cursor: pointer;
	transition: color 0.3s cubic-bezier(0.4, 0, 0, 1);
}
#newsletter-signup-form .c-btn::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	background: #282829;
	transition: width 0.3s cubic-bezier(0.4, 0, 0, 1);
}
#newsletter-signup-form .c-btn > * {
	position: relative;
	z-index: 2;
}
/* "Sign up now" / "Choose your preferences" stay solid black in EVERY state
   (James, 30 Jul). Live sweeps the fill off on hover (`background:none; color:#282829`),
   which left the pill as an outline — we deliberately don't do that here, so the
   sweep ::before is kept at width 0 and hover/focus keep the fill and white label. */
#newsletter-signup-form .c-btn--primary,
#newsletter-signup-form .c-btn--primary:hover,
#newsletter-signup-form .c-btn--primary:focus,
#newsletter-signup-form .c-btn--primary:active {
	background-color: #282829;
	color: #fff;
}
#newsletter-signup-form .c-btn--primary::before,
#newsletter-signup-form .c-btn--primary:hover::before {
	width: 0;
}
#newsletter-signup-form .c-btn--secondary {
	color: #282829;
}
#newsletter-signup-form .c-btn--secondary:hover {
	color: #fff;
}
#newsletter-signup-form .c-btn--secondary:hover::before {
	width: 100%;
}
#newsletter-signup-form .c-btn:disabled {
	opacity: 0.4;
	cursor: default;
}
/* Live: the icon BOX is 1.45em (27.5px) but the glyph inside keeps its natural
   19x19 and sits centred, leaving ~4.25px of slack each side. Stretching the svg
   to 100% (as this did) both fattened the arrow and ate the gap between the arrow
   and the label — live's arrow-to-text gap is 13.8px, not 9.5px. */
#newsletter-signup-form .c-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 27.5px;
	height: 19px;
	color: currentColor;
}
#newsletter-signup-form .c-btn__icon svg {
	width: 19px;
	height: 19px;
	flex: none;
	display: block;
	fill: currentColor;
}
#newsletter-signup-form .c-btn--icon-right .c-btn__icon {
	order: 2;
	margin-left: 9.5px;
	/* the theme's generic .c-btn i rule adds 10px here; live has none */
	margin-right: 0;
}
#newsletter-signup-form .c-btn--icon-left .c-btn__icon {
	order: 0;
	margin-right: 9.5px;
	margin-left: 0;
	transform: scaleX(-1);
}
/* Live puts no margin between the two buttons — the ~5px gap is just the
   whitespace between the inline-flex elements. 16px made it 21px. */
#newsletter-signup-form #newsletter-back {
	margin-right: 0;
}

/* ---- Vertical carousel (replaces slick: same 750ms, vertical, no swipe) ---- */
#newsletter-signup-form .form-carousel__list {
	overflow: hidden;
	transition: height 750ms ease;
}
#newsletter-signup-form .form-carousel__track {
	display: block;
	transition: transform 750ms ease;
	will-change: transform;
}
#newsletter-signup-form .form-carousel__item {
	padding: 16px 0;
}
/* Before JS boots, only the first step should be visible. */
#newsletter-signup-form .form-carousel:not(.is-initialised) .form-carousel__item + .form-carousel__item {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	#newsletter-signup-form .form-carousel__list,
	#newsletter-signup-form .form-carousel__track {
		transition: none;
	}
}

/* ---- Success panel ---- */
#newsletter-signup-form #newsletter-signup-success .u-h4 {
	margin: 0 0 32px;
	font-size: 28px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: -1px;
	color: #282829;
}
#newsletter-signup-form #newsletter-signup-success p {
	font-size: 20px;
	font-weight: 300;
	line-height: 27px;
	color: #282829;
}
#newsletter-signup-form #newsletter-signup-success p:last-child {
	margin-bottom: 0;
}