/*
 * Home page layout.
 *
 * Loaded by front-page.php only, on top of base.css — which defines the design
 * tokens, the reset, and the shared nav/menu/footer chrome this file assumes.
 *
 * Breakpoints:
 *   1024px  two-column sections collapse; the sticky service preview is
 *           replaced by an image inside each service row
 *    700px  phone layout
 */

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

.g-hero {
	position: relative;
	min-height: 100svh;
	box-sizing: border-box;
	display: flex;
}

.g-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/*
 * Taller than its frame and pulled up by half the overflow, so the parallax
 * script has room to move it without exposing an edge.
 */
.g-hero__img {
	position: absolute;
	inset: -14% 0;
	width: 100%;
	height: 128%;
	object-fit: cover;
	/*
	 * Pulled towards the page colour rather than left as shot. Contrast stays
	 * a little above 1 on purpose: the beige wash below is thinnest across the
	 * middle of the hero, so that band is carried by the photograph alone and
	 * a flattened image reads as soft rather than as calm.
	 */
	filter: saturate(0.82) contrast(1.08) brightness(1.02);
	will-change: transform;
}

.g-hero__scrim {
	position: absolute;
	inset: 0;
	/*
	 * The page colour rather than a dark wash, so the hero type stays dark
	 * like the rest of the page. Nearly opaque at the foot, where the 168px
	 * title sits.
	 */
	background: linear-gradient(
		180deg,
		rgba(var(--g-ink-rgb), 0.72) 0%,
		rgba(var(--g-ink-rgb), 0.3) 40%,
		rgba(var(--g-ink-rgb), 0.95) 100%
	);
}

.g-hero__inner {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 120px var(--g-gutter) 56px;
}

.g-hero__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.g-hero__title {
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(56px, 9.4vw, 168px);
	line-height: 0.88;
	letter-spacing: -0.02em;
	text-transform: lowercase;
}

.g-hero__meta {
	margin-bottom: 14px;
	max-width: 280px;
	font-size: 13px;
	line-height: 1.85;
	letter-spacing: 0.02em;
	color: var(--g-text-dim);
	text-wrap: pretty;
}

.g-hero__meta span {
	display: block;
}

.g-hero__eyebrow {
	display: none; /* phone only */
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: lowercase;
	color: var(--g-gold);
}

.g-hero__scroll {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(34px, 4vh, 52px);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: lowercase;
	color: var(--g-text-soft);
}

.g-hero__scroll::before {
	content: "";
	display: block;
	width: 52px;
	height: 1px;
	background: var(--g-rule);
}

/* ------------------------------------------------------------ marquee ---- */

.g-marquee {
	overflow: hidden;
	border-top: 1px solid var(--g-line-soft);
	border-bottom: 1px solid var(--g-line-soft);
	padding: 22px 0;
}

.g-marquee__track {
	display: flex;
	width: max-content;
	animation: goldie-marquee 38s linear infinite;
	font-family: var(--g-serif);
	font-size: 26px;
	letter-spacing: 0.01em;
	color: var(--g-text-faint);
	text-transform: lowercase;
	white-space: nowrap;
}

.g-marquee__track > span {
	padding-right: 44px;
}

.g-marquee__dot {
	color: var(--g-gold);
}

/* Translating by half the track works because the list is printed twice. */
@keyframes goldie-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.g-marquee__track {
		animation: none;
	}
}

/* ------------------------------------------------------ section heads ---- */

.g-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 56px;
}

.g-head__title {
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 52px);
	text-transform: lowercase;
	letter-spacing: -0.01em;
}

/* ----------------------------------------------------------- services ---- */

.g-services {
	padding: clamp(80px, 11vh, 150px) var(--g-gutter);
}

.g-services__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 70px;
	align-items: start;
}

.g-services__list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--g-line);
}

.g-service {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 26px;
	padding: 34px 0;
	border-bottom: 1px solid var(--g-line);
	cursor: pointer;
	transition: padding-left 0.5s var(--g-ease);
}

.g-service:hover,
.g-service:focus-within {
	padding-left: 16px;
}

.g-service__no {
	padding-top: 12px;
	font-size: 11px;
	letter-spacing: 0.22em;
	color: var(--g-text-faint);
}

.g-service__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.g-service__name {
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 58px);
	line-height: 1;
	text-transform: lowercase;
	letter-spacing: -0.01em;
}

.g-service__text {
	max-width: 640px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--g-text-muted);
	text-wrap: pretty;
}

/* Shown instead of the sticky preview once the grid collapses. */
.g-service__photo {
	display: none;
	height: 230px;
	overflow: hidden;
}

.g-service__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.g-services__preview {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.g-preview {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--g-surface);
}

/*
 * All four images are stacked and cross-faded by opacity rather than swapped,
 * so hovering a service never shows a loading gap.
 */
.g-preview img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s var(--g-ease);
}

.g-preview img.is-active {
	opacity: 1;
}

.g-preview__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: lowercase;
	color: var(--g-text-soft);
}

.g-preview__link {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--g-line-strong);
}

/* ------------------------------------------------------------- studio ---- */

.g-studio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	border-top: 1px solid var(--g-line-soft);
}

.g-studio__media {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.g-studio__media img {
	position: absolute;
	inset: -12% 0;
	width: 100%;
	height: 124%;
	object-fit: cover;
	filter: saturate(0.75);
}

.g-studio__body {
	display: flex;
	flex-direction: column;
	gap: 34px;
	padding: clamp(90px, 14vh, 170px) var(--g-gutter);
}

.g-studio__label {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: lowercase;
	color: var(--g-gold);
}

.g-studio__title {
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 60px);
	line-height: 1.08;
	text-transform: lowercase;
	letter-spacing: -0.01em;
}

.g-studio__text {
	font-size: 15px;
	line-height: 2.05;
	color: var(--g-text-muted);
	text-wrap: pretty;
}

/*
 * A 2-up block, not the horizontal .g-stats strip the other pages use — hence
 * its own name. 1px background showing through the gap is the divider.
 */
.g-studio-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: 10px;
	background: var(--g-line);
}

.g-studio-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 30px 26px;
	background: var(--g-ink);
}

.g-studio-stat__value {
	font-family: var(--g-serif);
	font-size: 46px;
	line-height: 1;
}

.g-studio-stat__label {
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: lowercase;
	color: var(--g-text-soft);
}

.g-certs {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--g-line);
}

.g-cert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--g-line);
	font-size: 13px;
	color: var(--g-text-muted);
}

.g-cert__by {
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--g-text-quiet);
	text-align: right;
}

/* ------------------------------------------------------------ courses ---- */

.g-courses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--g-line-mid);
}

.g-courses__head {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 30px;
	padding: clamp(80px, 11vh, 140px) var(--g-gutter) 46px;
	background: var(--g-ink);
}

.g-course {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
	min-height: 520px;
	padding: 44px;
	overflow: hidden;
	background: var(--g-ink);
}

.g-course img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Lower than the dark scheme wanted: on beige the photo lightens rather
	 * than darkens, and the card type over it is dark.
	 */
	opacity: 0.36;
	transition: transform 1.5s var(--g-ease), opacity 0.8s ease;
}

.g-course:hover img,
.g-course:focus-visible img {
	transform: scale(1.06);
	opacity: 0.5;
}

.g-course > span {
	position: relative;
}

.g-course__eyebrow {
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: lowercase;
	color: var(--g-gold);
}

.g-course__name {
	font-family: var(--g-serif);
	font-size: clamp(38px, 4.6vw, 74px);
	line-height: 1;
	text-transform: lowercase;
}

.g-course__cta {
	align-self: flex-start;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--g-line-strong);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: lowercase;
	color: var(--g-text-muted);
}

/* ------------------------------------------------------------ reviews ---- */

.g-reviews {
	padding: clamp(80px, 11vh, 150px) var(--g-gutter);
}

.g-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--g-line-mid);
	border-top: 1px solid var(--g-line-mid);
	border-left: 1px solid var(--g-line-mid);
}

.g-review {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 44px 36px;
	background: var(--g-ink);
	transition: background 0.5s ease;
}

.g-review:hover {
	background: var(--g-panel);
}

.g-review__text {
	font-family: var(--g-serif);
	font-size: 21px;
	line-height: 1.55;
	color: var(--g-quote);
	text-wrap: pretty;
}

.g-review__name {
	margin-top: auto;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: lowercase;
	color: var(--g-gold);
	font-style: normal;
}

/* ------------------------------------------------------------ booking ---- */

.g-booking {
	position: relative;
	overflow: hidden;
	padding: clamp(120px, 20vh, 240px) var(--g-gutter);
}

.g-booking__img {
	position: absolute;
	inset: -18% 0;
	width: 100%;
	height: 136%;
	object-fit: cover;
	/* Carries more of the photo, since the beige scrim above is lighter. */
	opacity: 0.45;
	filter: saturate(0.7);
}

.g-booking__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--g-ink-rgb), 0.72), rgba(var(--g-ink-rgb), 0.9));
}

.g-booking__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
}

.g-booking__label {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: lowercase;
	color: var(--g-gold);
}

.g-booking__title {
	font-family: var(--g-serif);
	font-weight: 400;
	font-size: clamp(44px, 8vw, 140px);
	line-height: 0.92;
	text-transform: lowercase;
	letter-spacing: -0.02em;
}

.g-booking__text {
	max-width: 420px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--g-text-muted);
	text-wrap: pretty;
}

.g-booking__cta {
	margin-top: 10px;
	padding: 19px 46px;
	border-radius: 999px;
	background: var(--g-bone);
	color: var(--g-ink);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: lowercase;
	transition: background 0.4s ease;
}

.g-booking__cta:hover {
	background: var(--g-gold);
	color: var(--g-ink);
}

/* -------------------------------------------------------- ≤1024px ------- */

@media (max-width: 1024px) {
	.g-services__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.g-services__preview {
		display: none;
	}

	.g-service {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		cursor: default;
	}

	.g-service:hover,
	.g-service:focus-within {
		padding-left: 0;
	}

	.g-service__no {
		padding-top: 0;
	}

	.g-service__photo {
		display: block;
	}

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

	.g-studio__media {
		position: relative;
		height: 420px;
	}

	.g-studio__media img {
		inset: 0;
		height: 100%;
	}

	.g-reviews__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.g-course {
		min-height: 330px;
	}
}

/* --------------------------------------------------------- ≤700px ------- */

@media (max-width: 700px) {
	.g-hero__inner {
		padding: 100px var(--g-gutter) 96px;
	}

	.g-hero__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.g-hero__eyebrow {
		display: block;
	}

	.g-hero__title {
		font-size: clamp(48px, 16vw, 72px);
		line-height: 0.9;
	}

	.g-hero__meta {
		margin-bottom: 0;
		max-width: none;
	}

	/* The gold eyebrow already carries this line here. */
	.g-hero__meta span:first-child {
		display: none;
	}

	.g-hero__scroll {
		display: none;
	}

	.g-marquee {
		padding: 16px 0;
	}

	.g-marquee__track {
		font-size: 20px;
		animation-duration: 26s;
	}

	.g-marquee__track > span {
		padding-right: 30px;
	}

	.g-head {
		flex-direction: column;
		gap: 10px;
		margin-bottom: 30px;
	}

	.g-services,
	.g-reviews {
		padding: 60px var(--g-gutter);
	}

	.g-service {
		padding: 26px 0;
	}

	.g-service__name {
		font-size: 36px;
	}

	.g-studio-stats {
		margin-top: 0;
	}

	.g-reviews__grid {
		grid-template-columns: minmax(0, 1fr);
		border-left: 0;
	}

	.g-review {
		padding: 28px 20px;
	}

	.g-review__text {
		font-size: 20px;
	}

	.g-course {
		padding: 26px var(--g-gutter);
	}

	.g-course__name {
		font-size: 44px;
	}

	.g-booking {
		padding: 90px var(--g-gutter) 100px;
	}

	.g-booking__title {
		font-size: clamp(44px, 15vw, 58px);
	}
}