/*
Theme Name: Eastern Sierra
Theme URI: https://www.easternsierraphotography.com
Author: Bedford+Co.
Description: Editorial block theme for Eastern Sierra Photography. Core blocks only; design tokens in theme.json.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eastern-sierra
*/

/* Shared CSS. Loaded on the front end and in the editor (functions.php). Mobile first. */

/* ---------- Base ---------- */

body {
	font-size: var(--wp--preset--font-size--body-mobile);
}

@media (min-width: 768px) {
	body {
		font-size: var(--wp--preset--font-size--body);
	}
}

/* Sections sit flush; spacing comes from section padding, not block gap. */
.wp-site-blocks > * + *,
.page-sections > * + * {
	margin-block-start: 0;
}

p {
	max-width: var(--wp--custom--measure);
}

.has-text-align-center {
	margin-inline: auto;
}

/* Links: 1px underline, offset 4px, thicker on hover. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Arrow links ("Read more", "View details", photo captions): a static 1px
   underline under the text, and an arrow added by CSS that slides right on
   hover or keyboard focus. The underline does not change on hover. */
.arrow-link a {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.arrow-link a,
.arrow-link a:hover,
.standfirst__image figcaption a,
.standfirst__image figcaption a:hover {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.arrow-link a::after,
.standfirst__image figcaption a::after {
	content: "→";
	display: inline-block;
	margin-inline-start: var(--wp--preset--spacing--8);
}

@media (prefers-reduced-motion: no-preference) {
	.arrow-link a::after,
	.standfirst__image figcaption a::after {
		transition: transform 200ms ease;
	}

	.arrow-link a:hover::after,
	.arrow-link a:focus-visible::after,
	.standfirst__image figcaption a:hover::after,
	.standfirst__image figcaption a:focus-visible::after {
		transform: translateX(var(--wp--preset--spacing--8));
	}
}

/* Olive bands: every heading, paragraph and link on the deep olive is white (4.52:1). */
.has-accent-deep-background-color,
.has-accent-deep-background-color :where(h1, h2, h3, h4, p, li, a, summary) {
	color: var(--wp--preset--color--white);
}

.has-accent-deep-background-color :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Focus: 3px solid contrast outline, 3px offset, everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.has-dark-background-color :where(a, button):focus-visible,
.hero-strip :where(a, button):focus-visible,
.hero-full__title :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Buttons: 48px minimum target. Text-to-button gap 40px. */
.wp-element-button,
.wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

:where(.is-layout-flow, .is-layout-constrained) > :is(p, h1, h2, h3) + .wp-block-buttons {
	margin-block-start: calc(var(--wp--preset--spacing--32) + var(--wp--preset--spacing--8));
}

/* ---------- Text styles (block style variations, registered in functions.php) ---------- */

.is-style-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.5;
	text-transform: uppercase;
}

.is-style-statement {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--statement);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--statement);
	max-width: none;
}

/* Display caps: large uppercase serif headings (the "editorial cover" style).
   Size is capped so a line up to 10.4em wide fits the screen; headings with
   shorter lines override the cap. */
.display-caps {
	font-size: min(var(--wp--preset--font-size--title), calc((100vw - 2 * var(--wp--preset--spacing--24)) / 10.6));
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--letter-spacing--title);
	text-transform: uppercase;
}

.display-caps em {
	text-transform: none;
}

/* ---------- Images ---------- */

.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	.wp-block-image a img {
		transition: opacity 300ms ease;
	}

	.wp-block-image a:hover img {
		opacity: 0.85;
	}
}


/* Placeholder for a photograph the client has not supplied yet. */
.photo-placeholder {
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--24);
	text-align: center;
}

/* ---------- Sections ---------- */

.section {
	padding-block: var(--wp--preset--spacing--96);
}

@media (min-width: 1024px) {
	.section {
		padding-block: var(--wp--preset--spacing--160);
	}
}

/* ---------- Instagram ---------- */

/* Deep olive band, 4px in from the sides (Daniel's setting; below the 8px
   spacing scale, so it is a literal value). From the top: the scrolling name
   band, the feed 16px below it, then the logo and the profile link in two
   columns split by a 1px white line exactly in the middle (stacked, with a
   short white line between them, below 768px). */
.instagram-embed.alignfull {
	padding-inline: 4px;
	padding-block-start: var(--wp--preset--spacing--48);
}

@media (min-width: 1024px) {
	.instagram-embed.alignfull {
		padding-block-start: var(--wp--preset--spacing--64);
	}
}

.instagram-embed > * {
	margin-block-start: 0;
}

.instagram-embed__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
}

.instagram-embed__head > * {
	margin: 0;
}

.instagram-embed__head::after {
	content: "";
	order: 1;
	width: var(--wp--preset--spacing--48);
	height: 1px;
	background-color: var(--wp--preset--color--white);
}

.instagram-embed__head > .arrow-link {
	order: 2;
	max-width: none;
}

.instagram-embed__logo img {
	width: clamp(96px, 14vw, 240px);
	height: auto;
}

.instagram-embed > [class*="elfsight-app"] {
	margin-block-start: var(--wp--preset--spacing--16);
	/* Holds the feed's height before it loads (Elfsight shows 4:5 tiles, 2 across,
	   3 from 768px, 5 from 1024px), so the page doesn't jump when it appears. */
	aspect-ratio: 8 / 5;
}

@media (min-width: 768px) {
	.instagram-embed > [class*="elfsight-app"] {
		aspect-ratio: 12 / 5;
	}
}

@media (min-width: 1024px) {
	.instagram-embed > [class*="elfsight-app"] {
		aspect-ratio: 4 / 1;
	}
}

.instagram-embed > .instagram-embed__head {
	margin-block-start: var(--wp--preset--spacing--64);
}

@media (min-width: 768px) {
	.instagram-embed__head {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 0;
	}

	/* The dividing line: 1px, centred on the middle of the band. */
	.instagram-embed__head::after {
		position: absolute;
		left: calc(50% - 0.5px);
		top: 0;
		bottom: 0;
		width: 1px;
		height: auto;
	}

	.instagram-embed__logo {
		justify-self: end;
		padding-inline-end: var(--wp--preset--spacing--48);
	}

	.instagram-embed__head > .arrow-link {
		justify-self: start;
		padding-inline-start: var(--wp--preset--spacing--48);
		text-align: start;
	}
}

@media (min-width: 1024px) {
	.instagram-embed > .instagram-embed__head {
		margin-block-start: var(--wp--preset--spacing--96);
	}
}

/* ---------- Text marquee (scrolling name band) ---------- */

/* One line of display caps that scrolls slowly left in a loop. functions.php
   adds three aria-hidden copies of the text; the track moves by half its width
   (two copies), so the loop is seamless at any screen width. Hover pauses it.
   Under reduced motion it is one still, centred line that may wrap. CSS only. */
.instagram-embed > .text-marquee {
	margin-inline: -4px;
	max-width: none;
	overflow: hidden;
}

.text-marquee__track {
	display: flex;
	width: max-content;
}

.text-marquee__track > * {
	margin: 0;
}

.text-marquee__text {
	max-width: none;
	padding-inline-end: 0.6em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--letter-spacing--title);
	text-transform: uppercase;
	white-space: nowrap;
}

.text-marquee__text[aria-hidden="true"] {
	display: none;
}

/* A solid circle before each repeat, so every phrase sits between two dots.
   Drawn with CSS (no text), so screen readers skip it; sized to the type and
   centred on the capitals. */
.text-marquee__text::before,
.text-marquee__text::after {
	display: inline-block;
	width: 0.2em;
	height: 0.2em;
	border-radius: 50%;
	background-color: currentColor;
	vertical-align: 0.24em;
}

.text-marquee__text::before {
	content: "";
	margin-inline-end: 0.6em;
}

@media (prefers-reduced-motion: reduce) {
	.text-marquee__track {
		width: auto;
		justify-content: center;
	}

	/* The still line shows the name once, with a dot at each end. */
	.text-marquee__text::after {
		content: "";
		margin-inline-start: 0.6em;
	}

	/* Capped so the longest word ("Photography", 7.3em) fits a phone screen. */
	.text-marquee__text {
		padding-inline: var(--wp--preset--spacing--24);
		font-size: min(var(--wp--preset--font-size--title), calc((100vw - 2 * var(--wp--preset--spacing--24)) / 7.8));
		text-align: center;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.text-marquee__text[aria-hidden="true"] {
		display: block;
	}

	.text-marquee__track {
		animation: es-marquee 80s linear infinite;
	}

	.text-marquee:hover .text-marquee__track {
		animation-play-state: paused;
	}
}

/* ---------- Header ---------- */

/* Centred nav, no site title. Solid base on inner pages; transparent over the
   front-page hero (template part className "is-overlay"). */
.wp-site-blocks {
	position: relative;
}

.site-header {
	background-color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--24);
}

.site-header__nav a:hover {
	text-decoration: underline;
}

.is-overlay {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 10;
}

.is-overlay .site-header {
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

.is-overlay .wp-block-navigation__responsive-container-open:focus-visible,
.is-overlay .wp-block-navigation__responsive-container:not(.is-menu-open) a:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Keep the menu collapsed until the full nav fits (core collapses at 600px). */
@media (max-width: 959px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header .site-header__nav {
		justify-content: flex-end;
	}
}

/* Logo in the left corner while the menu is collapsed: white over the hero,
   tinted to Contrast (#1A1A1A) on the solid header of inner pages. */
.site-header {
	position: relative;
}

.site-header > .site-header__nav {
	margin-block-start: 0;
}

.site-header__logo {
	position: absolute;
	top: 50%;
	left: var(--wp--style--root--padding-left);
	transform: translateY(-50%);
}

.site-header__logo a,
.site-header__logo img {
	display: block;
}

.wp-block-template-part:not(.is-overlay) .site-header__logo img {
	filter: brightness(0) invert(0.1);
}

@media (min-width: 960px) {
	.site-header__logo {
		display: none;
	}
}

/* Menu button: two thin lines that turn into an X. The close button sits
   exactly over the open button, so the lines appear to cross in place. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	color: inherit;
}

.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.site-header .wp-block-navigation__responsive-container-open::before,
.site-header .wp-block-navigation__responsive-container-open::after,
.site-header .wp-block-navigation__responsive-container-close::before,
.site-header .wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	right: 2px;
	height: 1px;
	background-color: currentColor;
	transform: translateY(-4px);
}

.site-header .wp-block-navigation__responsive-container-open::after {
	transform: translateY(4px);
}

.site-header .wp-block-navigation__responsive-container-close::before {
	transform: rotate(45deg);
}

.site-header .wp-block-navigation__responsive-container-close::after {
	transform: rotate(-45deg);
}

.site-header .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: var(--wp--preset--spacing--24);
	right: var(--wp--style--root--padding-right);
}

.admin-bar .site-header .wp-block-navigation__responsive-container-close {
	top: calc(var(--wp--preset--spacing--24) + var(--wp-admin--admin-bar--height, 0px));
}

/* Desktop (menu not collapsed): links keep the header colour and the menu
   logo stays hidden; the olive overlay colours only apply when open. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open),
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item {
	color: inherit;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .site-header__menu-logo {
	display: none;
}

/* Open menu: deep olive, large serif links centred, logo at the foot. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
}

.site-header .is-menu-open .wp-block-navigation__responsive-close,
.site-header .is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	align-items: center;
	padding: var(--wp--preset--spacing--96) var(--wp--style--root--padding-right) var(--wp--preset--spacing--48) var(--wp--style--root--padding-left);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	margin-block: auto;
	gap: var(--wp--preset--spacing--24);
}

.site-header .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--letter-spacing--title);
}

.site-header__menu-logo {
	margin-block: var(--wp--preset--spacing--48) 0;
}

.site-header__menu-logo img {
	display: block;
	width: 120px;
	height: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: es-menu-in 300ms ease-in-out both;
	}

	.site-header .is-menu-open .wp-block-navigation__responsive-container-close::before {
		animation: es-burger-top-to-x 400ms ease-in-out both;
	}

	.site-header .is-menu-open .wp-block-navigation__responsive-container-close::after {
		animation: es-burger-bottom-to-x 400ms ease-in-out both;
	}

	.site-header .is-closing .wp-block-navigation__responsive-container-open::before {
		animation: es-burger-top-to-x 400ms ease-in-out reverse both;
	}

	.site-header .is-closing .wp-block-navigation__responsive-container-open::after {
		animation: es-burger-bottom-to-x 400ms ease-in-out reverse both;
	}

	/* Links rise in one after another, 80ms apart, then the logo. */
	.site-header .is-menu-open .wp-block-navigation-item,
	.site-header .is-menu-open .site-header__menu-logo {
		animation: es-menu-item-in 500ms ease-in-out 100ms both;
	}

	.site-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 180ms; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 260ms; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 340ms; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 420ms; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 500ms; }

	.site-header .is-menu-open .site-header__menu-logo {
		animation-delay: 340ms;
	}
}

@keyframes es-menu-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes es-menu-item-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes es-burger-top-to-x {
	from { transform: translateY(-4px) rotate(0); }
	to { transform: translateY(0) rotate(45deg); }
}

@keyframes es-burger-bottom-to-x {
	from { transform: translateY(4px) rotate(0); }
	to { transform: translateY(0) rotate(-45deg); }
}

/* ---------- Hero, full screen ---------- */

/* Photograph and title share one grid cell; the standfirst follows below. */
.hero-full {
	display: grid;
}

.hero-full > * {
	margin-block-start: 0;
}

.hero-full__image,
.hero-full__title {
	grid-area: 1 / 1;
}

.hero-full__image img {
	height: 100vh;
	height: 100svh;
	object-fit: cover;
	object-position: 30% 50%;
}

/* Title on one line in the lower left corner, over a dark gradient at the
   bottom of the photograph; a lighter one at the top keeps the menu legible.
   Its size is capped so one line fits the screen (the title is 10.38em wide). */
.hero-full__title {
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--24);
	background: var(--wp--custom--scrim-top), var(--wp--custom--scrim-bottom);
}

.hero-full__title h1 {
	margin: 0;
	max-width: none;
	white-space: nowrap;
	font-size: min(var(--wp--preset--font-size--title), calc((100vw - 2 * var(--wp--preset--spacing--24)) / 10.6));
	line-height: 1;
}

@media (min-width: 768px) {
	.hero-full__title {
		padding: var(--wp--preset--spacing--48);
	}

	.hero-full__title h1 {
		font-size: min(var(--wp--preset--font-size--title), calc((100vw - 2 * var(--wp--preset--spacing--48)) / 10.6));
	}
}

.hero-full__standfirst {
	grid-area: 2 / 1;
}

/* Opening spread: text beside a large portrait, with a smaller portrait
   overlapping the large one's lower left corner. */
.standfirst {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--16);
	row-gap: var(--wp--preset--spacing--48);
	padding-block: var(--wp--preset--spacing--96);
}

.standfirst > * {
	margin-block-start: 0;
}

.standfirst__body {
	grid-column: 1 / -1;
}

.standfirst__body > :first-child {
	margin-block-start: 0;
}

.standfirst__image img {
	object-fit: cover;
}

.standfirst__image figcaption {
	margin-block: var(--wp--preset--spacing--8) 0;
	text-align: start;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.standfirst__image-a {
	grid-column: 1 / 11;
}

.standfirst__image-b {
	grid-column: 6 / 13;
	margin-block-start: calc(-1 * var(--wp--preset--spacing--96));
	z-index: 1;
}


@media (min-width: 1024px) {
	.standfirst {
		column-gap: var(--wp--preset--spacing--32);
		row-gap: 0;
		padding-block: var(--wp--preset--spacing--160);
	}

	.standfirst__body {
		grid-column: 1 / 6;
		grid-row: 1;
		align-self: start;
		padding-block-start: var(--wp--preset--spacing--64);
	}

	.standfirst__kicker {
		padding-block-start: var(--wp--preset--spacing--16);
		border-block-start: 1px solid var(--wp--preset--color--contrast);
	}

	.standfirst__image-a {
		grid-column: 6 / 13;
		grid-row: 1 / 3;
	}

	/* The small portrait overlaps this one's lower left, so its caption sits right. */
	.standfirst__image-a figcaption {
		text-align: end;
	}

	.standfirst__image-b {
		grid-column: 2 / 7;
		grid-row: 2;
		align-self: end;
		margin-block: var(--wp--preset--spacing--96) calc(-1 * var(--wp--preset--spacing--96));
	}
}

/* Parallax on the hero photograph: CSS scroll-driven animation, no JavaScript.
   Browsers without support, and visitors who prefer reduced motion, get a still image. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.hero-full__image {
			overflow: hidden;
		}

		.hero-full__image img {
			animation: es-parallax linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100vh;
		}
	}
}

@keyframes es-parallax {
	to {
		transform: translateY(30%);
	}
}

/* ---------- Hero strip ---------- */

/* Panels and title share one grid cell; tagline and Inquire follow below. */
.hero-strip {
	display: grid;
}

.hero-strip > * {
	margin-block-start: 0;
}

.hero-strip__panels,
.hero-strip__title {
	grid-area: 1 / 1;
}

.hero-strip__intro {
	grid-area: 2 / 1;
	padding-block: var(--wp--preset--spacing--32);
}

.hero-strip__panels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-strip__panels > .hero-strip__panel:first-child {
	grid-column: 1 / -1;
}

.hero-strip__panel img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Mobile: the title covers the first, full-width panel only. */
.hero-strip__title {
	align-self: start;
	aspect-ratio: 4 / 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--24);
	background: var(--wp--custom--scrim);
	text-align: center;
}

.hero-strip__title > * {
	margin-inline: auto;
}

.hero-strip__tagline {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 768px) {
	.hero-strip__panels {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hero-strip__panels > .hero-strip__panel:first-child {
		grid-column: auto;
	}

	.hero-strip__title {
		align-self: stretch;
		aspect-ratio: auto;
		padding-block-end: var(--wp--preset--spacing--32);
	}
}

/* ---------- About split (5/7 from 1024px, stacked below) ---------- */

.about-split__grid {
	display: grid;
	gap: var(--wp--preset--spacing--48);
	align-items: center;
}

@media (min-width: 1024px) {
	.about-split__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--wp--preset--spacing--96);
	}
}

.about-split__image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ---------- Offerings, numbered ---------- */

.offerings__list {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.offerings__list > .offerings__item {
	margin-block-start: 0;
}

.offerings__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"image image"
		"numeral body";
	column-gap: var(--wp--preset--spacing--24);
	row-gap: var(--wp--preset--spacing--24);
	padding-block: var(--wp--preset--spacing--48);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.offerings__numeral {
	grid-area: numeral;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numeral);
	font-weight: 300;
	line-height: 1;
	margin: 0;
}

.offerings__body {
	grid-area: body;
}

.offerings__body > :first-child {
	margin-block-start: 0;
}

.offerings__media {
	grid-area: image;
	margin: 0;
}

.offerings__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 768px) {
	.offerings__item {
		grid-template-columns: 96px minmax(0, 1fr) minmax(0, 280px);
		grid-template-areas: "numeral body image";
		column-gap: var(--wp--preset--spacing--48);
		align-items: start;
	}
}

/* ---------- About feature (magazine profile) ---------- */

.about-feature__head {
	margin-block-end: var(--wp--preset--spacing--64);
}

.about-feature__head > :first-child {
	margin-block-start: 0;
}

/* Heading block centred in the section, its lines left-aligned. Set at 90% of
   the display size; the cap fits its longest line ("Cultivated Imagery", 9.81em). */
.about-feature__head h2 {
	font-size: calc(0.9 * min(var(--wp--preset--font-size--title), calc((100vw - 2 * var(--wp--preset--spacing--24)) / 10.2)));
	width: fit-content;
	margin-inline: auto;
	text-align: start;
}

.about-feature__head h2 em {
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.about-feature__head {
		margin-block-end: var(--wp--preset--spacing--96);
	}
}

.about-feature__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--16);
	row-gap: var(--wp--preset--spacing--24);
}

.about-feature__grid > * {
	margin-block-start: 0;
}

.about-feature__portrait {
	grid-column: 1 / 11;
	grid-row: 1 / 3;
}

/* The smaller black-and-white portrait overlaps the corner of the large one. */
.about-feature__inset {
	grid-column: 7 / 13;
	grid-row: 2 / 4;
	z-index: 1;
}

.about-feature__text {
	grid-column: 1 / -1;
	grid-row: 4;
	padding-block-start: var(--wp--preset--spacing--24);
}

.about-feature__text > :first-child {
	margin-block-start: 0;
}

.about-feature__quote {
	padding-block: var(--wp--preset--spacing--24);
	border-block: 1px solid var(--wp--preset--color--line);
}

.about-feature__portrait img,
.about-feature__inset img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.about-feature__grid {
		column-gap: var(--wp--preset--spacing--32);
	}

	.about-feature__portrait {
		grid-column: 1 / 6;
		grid-row: 1 / 3;
	}

	.about-feature__inset {
		grid-column: 5 / 8;
		grid-row: 2 / 4;
	}

	.about-feature__text {
		grid-column: 8 / 13;
		grid-row: 1 / 4;
		align-self: center;
		padding-block-start: 0;
	}
}

/* ---------- Statement, parallax ---------- */

/* Photograph and text share one grid cell. The photograph is 130% of the band's
   height so it has room to drift; the text sits on a dark overlay (flat on
   phones, a side gradient from 1024px). */
.statement-parallax {
	display: grid;
	overflow: hidden;
	view-timeline-name: --es-band;
}

.statement-parallax > * {
	margin-block-start: 0;
}

.statement-parallax__image,
.statement-parallax__content {
	grid-area: 1 / 1;
}

.statement-parallax__image {
	position: relative;
	overflow: hidden;
}

.statement-parallax__image img {
	position: absolute;
	inset-inline: 0;
	top: -15%;
	width: 100%;
	height: 130%;
	object-fit: cover;
	object-position: 78% 60%;
}

/* Wider screens show the whole boat; keep the hillside village in frame. */
@media (min-width: 1024px) {
	.statement-parallax__image img {
		object-position: 60% 60%;
	}
}

.statement-parallax__content {
	position: relative;
	z-index: 1;
	min-height: 90vh;
	min-height: 90svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-block: var(--wp--preset--spacing--96);
	background-color: var(--wp--custom--overlay-dark);
}

.statement-parallax__inner,
.statement-parallax__text > :first-child {
	margin-block-start: 0;
}

/* Stacked display title: uppercase, one italic lowercase word. Capped so the
   longest line ("Authenticity,", 7.24em wide) fits a phone screen and, from
   1024px, stays in the upper left, clear of the boat in the photograph. */
.statement-parallax__text h2 {
	margin-block-start: var(--wp--preset--spacing--24);
	font-size: min(var(--wp--preset--font-size--title), calc((100vw - 2 * var(--wp--preset--spacing--24)) / 8.4));
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--letter-spacing--title);
	text-transform: uppercase;
}

.statement-parallax__text h2 em {
	text-transform: none;
}

.statement-parallax__text h2 + p {
	margin-block-start: var(--wp--preset--spacing--48);
}

.statement-parallax :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Desktop: text block left of centre over a side gradient, so the right of the photograph stays bright. */
@media (min-width: 1024px) {
	.statement-parallax__content {
		padding-block: var(--wp--preset--spacing--120);
		background: var(--wp--custom--overlay-side);
	}

	.statement-parallax__inner {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--32);
	}

	.statement-parallax__text {
		grid-column: 2 / 10;
	}

	.statement-parallax__text h2 {
		font-size: min(var(--wp--preset--font-size--title), 7.5vw);
	}
}

/* Closing call to action: the same parallax band with the text centred over
   a light, even overlay (the photograph has open granite in the centre and the
   couple small near the bottom). */
.closing-parallax .statement-parallax__content {
	justify-content: center;
	background: var(--wp--custom--overlay-light);
}

/* Phones: the crop centres on the couple; wider screens show the whole face. */
.closing-parallax .statement-parallax__image img {
	object-position: 26% 70%;
}

.closing-parallax .statement-parallax__text > p {
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.closing-parallax .statement-parallax__content {
		background: var(--wp--custom--overlay-light);
	}

	.closing-parallax .statement-parallax__text {
		grid-column: 3 / 11;
	}

	.closing-parallax .statement-parallax__image img {
		object-position: 50% 70%;
	}
}

.statement-parallax__text h2 + p + .wp-block-buttons {
	margin-block-start: calc(var(--wp--preset--spacing--32) + var(--wp--preset--spacing--8));
}

/* Button style: white outline and white text, for photographs and dark bands.
   Hover fills with the dark colour, like the default button. */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--dark);
	border-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.statement-parallax__image img {
			animation: es-parallax-band linear both;
			animation-timeline: --es-band;
			animation-range: cover;
		}
	}
}

@keyframes es-parallax-band {
	from {
		transform: translateY(-10%);
	}

	to {
		transform: translateY(10%);
	}
}

/* ---------- Offerings, editorial (features at different scales) ---------- */

.offerings-editorial__head {
	padding-block-end: var(--wp--preset--spacing--64);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.offerings-editorial__head > :first-child {
	margin-block-start: 0;
}

.offerings-editorial__grid {
	display: grid;
	gap: var(--wp--preset--spacing--64);
	padding-block-start: var(--wp--preset--spacing--64);
}

.offerings-editorial__grid > *,
.feature > .feature__image {
	margin-block-start: 0;
}

.feature__image img {
	object-fit: cover;
}

.feature__numeral {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numeral);
	font-weight: 300;
	line-height: 1;
	margin-block-end: 0;
}

.feature__numeral + .wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--8);
}

.contents-row {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--24);
	padding-block: var(--wp--preset--spacing--24);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.contents-row > * {
	margin: 0;
}

.contents-row a {
	text-decoration: none;
}

.contents-row a:hover {
	text-decoration: underline;
}

.offerings-editorial__contents {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

@media (min-width: 768px) {
	.offerings-editorial__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--48);
	}

	.feature-a,
	.offerings-editorial__contents {
		grid-column: 1 / -1;
	}

	.feature-c {
		margin-block-start: var(--wp--preset--spacing--120);
	}
}

@media (min-width: 1024px) {
	.offerings-editorial__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--32);
		row-gap: var(--wp--preset--spacing--96);
	}

	.feature-a {
		grid-column: 1 / 8;
		grid-row: 1;
	}

	.feature-b {
		grid-column: 9 / 13;
		grid-row: 1;
		margin-block-start: var(--wp--preset--spacing--160);
	}

	.feature-c {
		grid-column: 2 / 6;
		grid-row: 2;
		margin-block-start: 0;
	}

	.offerings-editorial__contents {
		grid-column: 8 / 13;
		grid-row: 2;
		align-self: end;
	}
}

/* ---------- Page intro (inner pages without a hero) ---------- */

.page-intro__inner > :first-child {
	margin-block-start: 0;
}

.page-intro .is-style-statement {
	margin-block-start: var(--wp--preset--spacing--48);
}

.page-intro__body {
	margin-block-start: var(--wp--preset--spacing--48);
	padding-block-start: var(--wp--preset--spacing--48);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

@media (min-width: 1024px) {
	.page-intro__body {
		columns: 2;
		column-gap: var(--wp--preset--spacing--96);
	}

	.page-intro__body > p {
		margin-block-start: 0;
		break-inside: avoid;
	}
}

/* The About intro leads straight into the story section. */
.page-intro-short {
	padding-block-end: 0;
}

/* Page h1 set like the home page "Cultivated Imagery" heading (.about-feature__head h2):
   uppercase display serif, the label and heading a left-aligned block centred in the
   content, and the same space below it before the next content (64px, 96px from 1024px). */
.page-intro-display .page-intro__inner {
	width: fit-content;
	margin-inline: auto;
	text-align: start;
}

.page-intro-display + .section {
	padding-block-start: var(--wp--preset--spacing--64);
}

@media (min-width: 1024px) {
	.page-intro-display + .section {
		padding-block-start: var(--wp--preset--spacing--96);
	}
}

/* Same size as "Cultivated Imagery" from tablet up (90% of the display size). Its cap is
   set for that long line, so on phones these short one-word headings fit their own width
   instead ("EXPERIENCE" is 5.63em, the longest). */
.page-intro-display h1,
.credentials-list h2 {
	font-size: min(calc(0.9 * var(--wp--preset--font-size--title)), calc((100vw - 2 * var(--wp--preset--spacing--24)) / 6.2));
}

/* ---------- Hero, single (inner pages) ---------- */

.hero-single {
	display: grid;
}

.hero-single > * {
	margin-block-start: 0;
}

.hero-single__image,
.hero-single__title {
	grid-area: 1 / 1;
}

.hero-single__image img {
	height: 85vh;
	height: 85svh;
	object-fit: cover;
}

.hero-single__title {
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--24);
	background: var(--wp--custom--scrim-page-top), var(--wp--custom--scrim-page-bottom);
}

.hero-single__title h1 {
	margin: 0;
	line-height: 1;
}

@media (min-width: 768px) {
	.hero-single__title {
		padding: var(--wp--preset--spacing--48);
	}
}

/* ---------- Overview ---------- */

.overview__grid {
	display: grid;
	gap: var(--wp--preset--spacing--24);
}

.overview__grid > *,
.overview__head > :first-child,
.overview__body > :first-child {
	margin-block-start: 0;
}

@media (min-width: 1024px) {
	.overview__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--wp--preset--spacing--96);
	}
}

/* ---------- Gallery, masonry (block style on core/gallery) ---------- */

/* CSS columns: 2 on mobile, 3 from 768px, 16px gap; images keep their own ratio.
   The doubled class outranks core's per-column widths without !important. */
.wp-block-gallery.has-nested-images.is-style-masonry.is-style-masonry {
	display: block;
	columns: 2;
	column-gap: var(--wp--preset--spacing--16);
	margin-block-start: var(--wp--preset--spacing--48);
}

.wp-block-gallery.has-nested-images.is-style-masonry.is-style-masonry figure.wp-block-image:not(#individual-image) {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--16);
	break-inside: avoid;
}

.wp-block-gallery.is-style-masonry.is-style-masonry img {
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.wp-block-gallery.has-nested-images.is-style-masonry.is-style-masonry {
		columns: 3;
	}
}

.gallery-masonry__inner > :first-child {
	margin-block-start: 0;
}

/* ---------- Statement split ---------- */

.statement-split__grid {
	display: grid;
	gap: var(--wp--preset--spacing--48);
	align-items: center;
}

.statement-split__text > :first-child {
	margin-block-start: 0;
}

.statement-split__image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.statement-split__grid {
		grid-template-columns: 7fr 5fr;
		gap: var(--wp--preset--spacing--96);
	}
}

/* ---------- Offering detail (pricing) ---------- */

.offering-detail__grid {
	display: grid;
	gap: var(--wp--preset--spacing--48);
}

.offering-detail__grid > *,
.offering-detail__text > :first-child {
	margin-block-start: 0;
}

.offering-detail__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Consecutive offerings share one band, separated by space only (no section hairlines). */
.offering-detail + .offering-detail {
	padding-block-start: 0;
}

.offering-detail + .offering-detail .offering-detail__grid {
	padding-block-start: var(--wp--preset--spacing--96);
}

.offering-detail__prices {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding-block-start: var(--wp--preset--spacing--24);
}

.offering-detail__prices p {
	margin-block: 0 var(--wp--preset--spacing--16);
}

.offering-detail__prices strong {
	font-weight: 500;
}

.offering-detail__note {
	color: var(--wp--preset--color--muted);
}

@media (min-width: 1024px) {
	.offering-detail__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--wp--preset--spacing--96);
		align-items: start;
	}

	.offering-detail + .offering-detail .offering-detail__grid {
		padding-block-start: var(--wp--preset--spacing--160);
	}

	/* Alternate the image side from one offering to the next. */
	.offering-detail-flip .offering-detail__grid {
		grid-template-columns: 7fr 5fr;
	}

	.offering-detail-flip .offering-detail__media {
		order: 2;
	}
}

/* ---------- Testimonial, single ---------- */

.testimonial-single .is-style-statement {
	max-width: 32ch;
}

/* ---------- Session types and deliverables ---------- */

.sessions__inner > :first-child,
.sessions__col > :first-child {
	margin-block-start: 0;
}

.sessions__grid {
	display: grid;
	gap: var(--wp--preset--spacing--48);
	margin-block-start: var(--wp--preset--spacing--48);
}

@media (min-width: 768px) {
	.sessions__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Process steps ---------- */

.process__inner > :first-child {
	margin-block-start: 0;
}

.process__steps {
	display: grid;
	gap: var(--wp--preset--spacing--48);
	margin-block-start: var(--wp--preset--spacing--48);
}

.process__step {
	padding-block-start: var(--wp--preset--spacing--24);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.process__step > :first-child {
	margin-block-start: 0;
}

.process__numeral {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numeral);
	font-weight: 300;
	line-height: 1;
}

@media (min-width: 768px) {
	.process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.process__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- About split ---------- */

.about-split__media > * {
	margin-block-start: 0;
}

/* Stacked below 1024px: cap the portrait so the 1373px file stays sharp at 2x. */
.about-split__media {
	max-width: 640px;
}

.about-split__text > :first-child {
	margin-block-start: 0;
}

/* ---------- Credentials list ---------- */

/* Credentials, editorial: centred display heading like the home page "Cultivated Imagery",
   then rows of large olive years, the role in the display serif and the organisation as a label.
   Years use accent-deep: the lighter olive is 2.84:1 on Surface, accent-deep 3.77:1 (large text). */
.credentials-list__inner > :first-child {
	margin-block-start: 0;
}

.credentials-list__label {
	margin-inline: auto;
	text-align: center;
}

.credentials-list h2 {
	text-align: center;
}

.credentials-list ul {
	list-style: none;
	padding-left: 0;
	margin-block-start: var(--wp--preset--spacing--64);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.credentials-list li {
	display: grid;
	row-gap: var(--wp--preset--spacing--8);
	padding-block: var(--wp--preset--spacing--32);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.credentials-list__years {
	color: var(--wp--preset--color--accent-deep);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numeral);
	font-weight: 300;
	line-height: 1;
}

.credentials-list__role {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--statement);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--subhead);
}

.credentials-list__org {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.5;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.credentials-list ul {
		margin-block-start: var(--wp--preset--spacing--96);
	}

	.credentials-list li {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--16);
		align-items: baseline;
		padding-block: var(--wp--preset--spacing--48);
	}

	.credentials-list__years {
		grid-column: 1 / 4;
	}

	.credentials-list__role {
		grid-column: 4 / 10;
	}

	.credentials-list__org {
		grid-column: 10 / 13;
		text-align: end;
	}
}

/* Plain lists with hairlines: sessions, deliverables, Featured In. */
.sessions ul,
.featured-in ul {
	list-style: none;
	padding-left: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.sessions li,
.featured-in li {
	padding-block: var(--wp--preset--spacing--16);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.featured-in__inner > :first-child {
	margin-block-start: 0;
}

/* ---------- Notable clients strip ---------- */

/* Still, wrapping list by default (and under reduced motion). With motion
   allowed, one line scrolls slowly; functions.php adds an aria-hidden copy of
   the list so the loop is seamless. Hover pauses it. CSS only, no JavaScript. */
/* Half the standard section padding (Daniel, 2026-11-07): 48px, 80px from 1024px. */
.client-strip.section {
	padding-block: var(--wp--preset--spacing--48);
}

@media (min-width: 1024px) {
	.client-strip.section {
		padding-block: var(--wp--preset--spacing--80);
	}
}

.client-strip__head > :first-child {
	margin-block-start: 0;
}

.client-strip > .client-strip__viewport {
	max-width: none;
	overflow: hidden;
	margin-block-start: var(--wp--preset--spacing--32);
}

.client-strip__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--subhead);
}

.client-strip__list li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--32);
}

.client-strip__list li::after {
	content: "·";
	color: var(--wp--preset--color--line);
}

.client-strip__list[aria-hidden="true"] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.client-strip__track {
		display: flex;
		width: max-content;
		animation: es-marquee 300s linear infinite;
	}

	.client-strip__viewport:hover .client-strip__track {
		animation-play-state: paused;
	}

	.client-strip__list,
	.client-strip__list[aria-hidden="true"] {
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		padding-inline-end: var(--wp--preset--spacing--32);
	}
}

@keyframes es-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Offerings summary ---------- */

/* Offerings summary, parallax (About): the statement band with an even dark overlay
   at every width (the list needs it), a label, the offerings as large display lines,
   and a button. */
.offerings-parallax .statement-parallax__image img {
	object-position: 50% 50%;
}

.offerings-parallax .statement-parallax__content {
	justify-content: center;
}

.offerings-parallax__list {
	margin-block-start: var(--wp--preset--spacing--32);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
}

.offerings-parallax__list > .contents-row {
	margin-block-start: 0;
	border-block-end-color: color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
}

/* Fixed numeral width so the names line up. */
.offerings-parallax__list .feature__numeral {
	flex: 0 0 1.4em;
}

/* Offering names set like the About h1 (uppercase display serif). Below 1024px long
   names wrap and the longest word ("Engagements") fits beside its numeral; from 1024px
   the longest name ("Luxury and Business Branding", 15.7em) stays on one line in the
   text column (10 of 12 columns, less the numeral). */
.offerings-parallax__list h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: calc(0.9 * min(calc(0.9 * var(--wp--preset--font-size--title)), calc((100vw - 2 * var(--wp--preset--spacing--24) - var(--wp--preset--spacing--64)) / 7)));
	font-weight: 300;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--letter-spacing--title);
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.offerings-parallax__list h3 {
		font-size: min(calc(0.9 * var(--wp--preset--font-size--title)), calc((100vw - 2 * var(--wp--preset--spacing--24) - var(--wp--preset--spacing--64)) / 7));
	}
}

.offerings-parallax__list + .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--48);
}

@media (min-width: 1024px) {
	.offerings-parallax .statement-parallax__content {
		background: var(--wp--custom--overlay-dark);
	}

	.offerings-parallax .statement-parallax__text {
		grid-column: 2 / 12;
	}

	.offerings-parallax__list h3 {
		font-size: min(calc(0.9 * var(--wp--preset--font-size--title)), calc((0.829 * min(var(--wp--style--global--wide-size), 100vw - 2 * var(--wp--preset--spacing--24)) - var(--wp--preset--spacing--64)) / 16.4));
	}
}

/* ---------- Questions (core Details) ---------- */

.faq__list {
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.faq__list > .wp-block-details {
	margin-block-start: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.faq summary {
	min-height: 48px;
	padding-block: var(--wp--preset--spacing--24);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	line-height: var(--wp--custom--line-height--subhead);
}

.faq details > p {
	margin-block: 0 var(--wp--preset--spacing--24);
}

/* ---------- Inquiry ---------- */

.inquiry__inner > *,
.inquiry__head > :first-child,
.inquiry__contact > :first-child,
.inquiry__grid > * {
	margin-block-start: 0;
}

.inquiry__grid {
	display: grid;
	gap: var(--wp--preset--spacing--48);
	margin-block-start: var(--wp--preset--spacing--64);
	padding-block-start: var(--wp--preset--spacing--48);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.inquiry__form iframe {
	display: block;
	width: 100%;
	border: 0;
}

@media (min-width: 1024px) {
	.inquiry__grid {
		grid-template-columns: 4fr 8fr;
		gap: var(--wp--preset--spacing--96);
		align-items: start;
	}
}

/* ---------- Footer ---------- */

.site-footer {
	padding-block: var(--wp--preset--spacing--96);
}

.site-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--48);
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: auto 1fr 1fr 1fr;
		align-items: start;
	}
}

.site-footer__logo img {
	width: 160px;
}

.site-footer .wp-block-navigation {
	gap: var(--wp--preset--spacing--16);
}

.site-footer .wp-block-social-links .wp-social-link {
	color: var(--wp--preset--color--base);
}