/*
Theme Name: Frontier Foundry
Theme URI: https://frontier-foundry.com
Template: twentytwentyfive
Author: Deer Camp Digital
Author URI: https://deercampdigital.com
Description: Block child theme for Frontier Foundry, an Austin, Texas holding company. Built on Twenty Twenty-Five with the Deer Camp Digital type and color system: Cormorant Garamond display, Inter body, Oswald labels, cream and charcoal with a flame accent.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frontier-foundry
Tags: custom-colors, custom-menu, full-site-editing, block-patterns, wide-blocks
*/

/* =========================================
   TOKENS
   Everything theme.json cannot express lives here. Colors, fonts and spacing
   come from the presets so the editor and front end agree.
   ========================================= */
:root {
	/* Type roles. Cormorant: display headings and numerals. Oswald: every
	   label and subhead (leads, h3-h6, meta, statuses, form labels, footer
	   headings). Inter: reading text, navigation, buttons, links. */
	--ff-label-font: var(--wp--preset--font-family--oswald);
	--ff-label-weight: 400;
	--ff-label-size: 0.8rem;
	--ff-label-tracking: 0.12em;
	--ff-radius: 14px;
	--ff-radius-sm: 8px;
	--ff-rule: 1px solid var(--wp--preset--color--warm-gray);
	--ff-flame-hover: color-mix(in srgb, var(--wp--preset--color--flame) 84%, #000);
	--ff-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings keep a tight measure and no orphan-prone widths. */
h1, h2, h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* =========================================
   STATEMENT PARAGRAPH
   The large fading paragraph from the reference: text starts charcoal and
   thins out to stone by the last line. Gradient text, nothing else.
   ========================================= */
.is-style-ff-statement {
	font-family: var(--wp--preset--font-family--system);
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.9rem);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.02em;
	margin: 0;
	background: linear-gradient(180deg, var(--wp--preset--color--charcoal) 25%, var(--wp--preset--color--stone) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.is-style-ff-statement a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--flame);
	text-underline-offset: 0.12em;
}

/* Serif variant for hero-adjacent statements. */
.is-style-ff-statement.has-cormorant-garamond-font-family {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
	font-weight: 500;
	line-height: 1.12;
}

/* =========================================
   STATS
   Big numeral, small label. Used in rows of 3 or 4.
   ========================================= */
.ff-stat {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ff-stat__number {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(2.8rem, 2rem + 3vw, 4.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--charcoal);
	margin: 0;
}

.ff-stat__number sup {
	font-size: 0.4em;
	top: -1em;
	color: var(--wp--preset--color--flame);
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.ff-stat__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--stone);
	margin: 0;
	line-height: 1.5;
}

.ff-stats.wp-block-columns {
	border-top: var(--ff-rule);
	padding-top: var(--wp--preset--spacing--50);
}

.ff-on-dark .ff-stat__number { color: var(--wp--preset--color--cream); }
.ff-on-dark .ff-stat__label { color: color-mix(in srgb, var(--wp--preset--color--cream) 70%, transparent); }
.ff-on-dark .ff-stats.wp-block-columns { border-top-color: color-mix(in srgb, var(--wp--preset--color--cream) 18%, transparent); }

/* =========================================
   CARDS
   White surface on cream, hairline border, soft radius. The featured
   variant inverts to charcoal like the highlighted card in the reference.
   ========================================= */
.is-style-ff-card {
	background: var(--wp--preset--color--white);
	border: var(--ff-rule);
	border-radius: var(--ff-radius);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
	transition: transform 0.35s var(--ff-ease), box-shadow 0.35s var(--ff-ease), border-color 0.35s var(--ff-ease);
}

.is-style-ff-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -24px rgba(16, 24, 38, 0.35);
	border-color: color-mix(in srgb, var(--wp--preset--color--stone) 40%, var(--wp--preset--color--warm-gray));
}

.is-style-ff-card-dark {
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--charcoal);
	border-radius: var(--ff-radius);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
}

.is-style-ff-card-dark :is(h1, h2, h3, h4, h5, h6, p, a) {
	color: var(--wp--preset--color--cream);
}

/* Sector line on a company card: a label. */
.ff-card__meta {
	font-family: var(--ff-label-font);
	font-size: var(--ff-label-size);
	font-weight: var(--ff-label-weight);
	letter-spacing: var(--ff-label-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* =========================================
   BRAND CARDS (portfolio page)
   Open cards: no box, no fill. Each company's own color shows in the sector
   line and the link; the logo is the company's mark on the page ground.
   ========================================= */
.ff-brand-card {
	--card-accent: var(--wp--preset--color--flame);
	--card-link: var(--card-accent);
	padding: var(--wp--preset--spacing--40) 0;
	height: 100%;
	border-top: var(--ff-rule);
}

.ff-brand-card .ff-card__meta {
	color: var(--card-accent);
}

.ff-brand-card a {
	color: var(--card-link);
	text-decoration-color: color-mix(in srgb, var(--card-link) 45%, transparent);
}

.ff-brand-card a:hover {
	color: var(--wp--preset--color--charcoal);
}

.ff-brand-dcd { --card-accent: #c2410c; }
.ff-brand-shine { --card-accent: #b52025; --card-link: #0e78b5; }
.ff-brand-austin-moms { --card-accent: #9c6a78; }
.ff-brand-ttr { --card-accent: #c86428; }
.ff-brand-txh { --card-accent: #2b5672; }

.ff-brand-dcd .ff-card__logo img { height: 52px; }
.ff-brand-shine .ff-card__logo img { height: 64px; }

/* Card titles: Oswald caps, one step below the section heading. */
.is-style-ff-card h3,
.is-style-ff-card-dark h3,
.ff-brand-card h3,
.ff-founder h3 {
	font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
}

/* Cards in a columns row should stretch to equal height. */
.ff-cards .wp-block-column {
	display: flex;
	flex-direction: column;
}

.ff-cards .wp-block-column > .wp-block-group {
	flex: 1 1 auto;
}

/* =========================================
   COMPANY ROWS (portfolio ledger)
   Name, sector, status on one hairline-separated row.
   ========================================= */
.ff-ledger {
	border-top: var(--ff-rule);
}

.ff-ledger__row {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: baseline;
	padding: 1.1rem 0;
	border-bottom: var(--ff-rule);
	margin: 0;
}

.ff-ledger__row > * {
	margin: 0;
}

.ff-ledger__name {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.ff-ledger__name a {
	text-decoration: none;
	color: inherit;
}

.ff-ledger__name a:hover {
	color: var(--wp--preset--color--flame);
}

.ff-ledger__sector {
	color: var(--wp--preset--color--stone);
	font-size: var(--wp--preset--font-size--small);
}

.ff-ledger__status {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0.75em;
	border-radius: 0;
	font-family: var(--ff-label-font);
	font-size: 0.75rem;
	font-weight: var(--ff-label-weight);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
}

.ff-ledger__status::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
}

.ff-ledger__status--exit {
	color: var(--wp--preset--color--flame);
	background: color-mix(in srgb, var(--wp--preset--color--flame) 10%, transparent);
}

.ff-ledger__status--operating {
	color: var(--wp--preset--color--stone);
	background: var(--wp--preset--color--sand);
}

@media (max-width: 640px) {
	.ff-ledger__row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.ff-ledger__sector {
		grid-column: 1 / -1;
		order: 3;
	}
}

/* =========================================
   LOGO STRIP
   Bare marks in a row, dark ink at rest, their own color on hover.
   ========================================= */
.ff-logos.wp-block-columns {
	align-items: center;
}

.ff-logos .wp-block-column {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ff-logos .wp-block-image {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88px;
}

.ff-logos .wp-block-image img {
	width: auto;
	max-width: 100%;
	height: 64px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s var(--ff-ease), opacity 0.3s var(--ff-ease);
}

.ff-logos .wp-block-image:hover img {
	filter: none;
	opacity: 1;
}

.ff-logos .ff-logo--dcd img { height: 44px; }
.ff-logos .ff-logo--shine img { height: 60px; }
.ff-logos .ff-logo--austin-moms img { height: 80px; }
.ff-logos .ff-logo--ttr img { height: 72px; }
.ff-logos .ff-logo--txh img { height: 72px; }

/* =========================================
   HERO (video background)
   Layer order: poster/video (0) < scrim (1) < content (2) < toggle (3).
   The hero is a positioned group; the video wrapper and scrim are one
   wp:html block, so the markup stays valid in the editor. See
   assets/js/hero-video.js for the deferred load and pause control.
   ========================================= */
.ff-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: max(640px, 100svh);
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--charcoal);
}

.ff-hero > .wp-block-group {
	position: relative;
	z-index: 2;
	width: 100%;
}

.ff-hero .ff-hero__bg-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	max-width: none;
	margin: 0;
	container-type: size;
	background-color: var(--wp--preset--color--charcoal);
	background-image: url("assets/images/hero-poster.jpg");
	background-image: image-set(
		url("assets/images/hero-poster.avif") type("image/avif"),
		url("assets/images/hero-poster.webp") type("image/webp"),
		url("assets/images/hero-poster.jpg") type("image/jpeg")
	);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.ff-hero .ff-hero__bg-video video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100cqw, calc(100cqh * 16 / 9));
	height: max(100cqh, calc(100cqw * 9 / 16));
	min-width: 100cqw;
	min-height: 100cqh;
	border: 0;
}

.ff-hero .ff-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	max-width: none;
	margin: 0;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(16, 24, 38, 0.6) 0%, rgba(16, 24, 38, 0.3) 45%, rgba(16, 24, 38, 0.78) 100%);
}

.ff-hero h1 {
	color: var(--wp--preset--color--cream);
	font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.4rem);
	line-height: 1;
	max-width: 24ch;
	margin-inline: auto;
}

.ff-hero .ff-hero__lede {
	color: color-mix(in srgb, var(--wp--preset--color--cream) 86%, transparent);
	max-width: 46ch;
	margin-inline: auto;
}

.ff-hero__toggle {
	display: none;
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 3;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: rgba(16, 24, 38, 0.45);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ff-hero__toggle.is-ready { display: inline-flex; }
.ff-hero__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--flame); outline-offset: 3px; }
.ff-hero__toggle .ff-hero__toggle-icon { fill: currentColor; display: block; }
.ff-hero__toggle .ff-hero__toggle-icon--play { display: none; }
.ff-hero__toggle.is-paused .ff-hero__toggle-icon--pause { display: none; }
.ff-hero__toggle.is-paused .ff-hero__toggle-icon--play { display: block; }

/* Scroll cue: thin vertical line under the buttons, like the reference. */
.ff-hero__cue {
	width: 1px;
	height: 56px;
	margin: var(--wp--preset--spacing--50) auto 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

/* Buttons over footage: light pill primary, glass secondary. */
.ff-hero .wp-block-button__link {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--cream);
}

.ff-hero .wp-block-button__link:hover {
	background: var(--wp--preset--color--flame);
	border-color: var(--wp--preset--color--flame);
	color: #fff;
}

.ff-hero .is-style-ff-outline .wp-block-button__link {
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--cream);
	border-color: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ff-hero .is-style-ff-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--cream);
}

/* Static photo hero for inner pages. */
.ff-page-hero {
	min-height: 52vh;
}

.ff-page-hero .wp-block-cover__background {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(16, 24, 38, 0.35) 0%, rgba(16, 24, 38, 0.7) 100%);
	opacity: 1 !important;
}

.ff-page-hero h1 {
	color: var(--wp--preset--color--cream);
}

/* =========================================
   BUTTONS
   Pill shape from the reference; Inter, medium weight. theme.json sets the
   defaults; these are the two named styles.
   ========================================= */
.wp-block-button__link {
	transition: background-color 0.25s var(--ff-ease), color 0.25s var(--ff-ease), border-color 0.25s var(--ff-ease);
}

.is-style-ff-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	border: 1px solid var(--wp--preset--color--charcoal);
}

.is-style-ff-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--cream);
}

.is-style-ff-flame .wp-block-button__link {
	background: var(--wp--preset--color--flame);
	color: #fff;
	border: 1px solid var(--wp--preset--color--flame);
}

.is-style-ff-flame .wp-block-button__link:hover {
	background: var(--ff-flame-hover);
	border-color: var(--ff-flame-hover);
}

/* Inline arrow link: "About Frontier Foundry ->". Plain text, medium weight,
   the arrow slides on hover. No border, so it reads as a link, not a button. */
.ff-arrow-link a,
a.ff-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--wp--preset--color--charcoal);
	padding: 0.2em 0;
	border-bottom: 1px solid transparent;
	transition: color 0.25s var(--ff-ease), border-color 0.25s var(--ff-ease);
}

.ff-arrow-link a::after,
a.ff-arrow-link::after {
	content: "\2192";
	color: var(--wp--preset--color--flame);
	transition: transform 0.25s var(--ff-ease);
}

.ff-arrow-link a:hover,
a.ff-arrow-link:hover {
	color: var(--wp--preset--color--flame);
	border-bottom-color: var(--wp--preset--color--flame);
}

.ff-arrow-link a:hover::after,
a.ff-arrow-link:hover::after {
	transform: translateX(4px);
}

/* =========================================
   HEADER
   ========================================= */
.ff-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--cream) 88%, transparent);
	border-bottom: var(--ff-rule);
}

/* The blur lives on a pseudo-element. backdrop-filter on the header itself
   would make it the containing block for the navigation's fixed overlay,
   which then renders inside the 60px bar instead of over the page. */
.ff-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
}

.ff-header .wp-block-site-logo img {
	height: 22px;
	width: auto;
	display: block;
}

.ff-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--charcoal);
	padding: 0.35rem 0;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--ff-ease);
}

.ff-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--flame);
}

.ff-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--flame);
}

.ff-header__cta .wp-block-button__link {
	padding: 0.6rem 1.3rem;
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 782px) {
	/* Beats core's .wp-block-buttons.is-layout-flex; the drawer has Contact. */
	.ff-header .wp-block-buttons.ff-header__cta { display: none; }
}

/* Over the video hero the header sits on top and starts transparent. The
   site-blocks gap that normally separates header and main is dropped so the
   footage runs to the top edge. */
.ff-hero-page .wp-site-blocks > main {
	margin-block-start: 0;
}

/* Over the video hero the header sits on top and starts transparent. */
.ff-hero-page .ff-header {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
	transition: background-color 0.3s var(--ff-ease), border-color 0.3s var(--ff-ease);
}

.ff-hero-page .ff-header::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.ff-hero-page .ff-header.is-scrolled::before {
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
}

.ff-hero-page .ff-header .wp-block-site-logo img {
	filter: brightness(0) invert(1);
	transition: filter 0.3s var(--ff-ease);
}

.ff-hero-page .ff-header .wp-block-navigation .wp-block-navigation-item__content,
.ff-hero-page .ff-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--cream);
}

.ff-hero-page .ff-header .ff-header__cta .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--cream);
}

.ff-hero-page .ff-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--cream) 92%, transparent);
	border-bottom-color: var(--wp--preset--color--warm-gray);
}

.ff-hero-page .ff-header.is-scrolled .wp-block-site-logo img {
	filter: none;
}

.ff-hero-page .ff-header.is-scrolled .wp-block-navigation .wp-block-navigation-item__content,
.ff-hero-page .ff-header.is-scrolled .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--charcoal);
}

.ff-hero-page .ff-header.is-scrolled .ff-header__cta .wp-block-button__link {
	background: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--cream);
}

/* =========================================
   MOBILE MENU OVERLAY
   Core's responsive container, full-screen on cream. Large serif links on
   hairlines, a round close button in the header's corner, and the header
   button's job ("Get in touch") covered by the Contact item.
   ========================================= */
.ff-header .wp-block-navigation__responsive-container-open {
	color: inherit;
	padding: 0.5rem;
	margin: -0.5rem;
}

.ff-header .wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: 100%;
	max-width: none;
	height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 0.75rem;
	right: var(--wp--preset--spacing--50);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--warm-gray);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
	cursor: pointer;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 22px;
	height: 22px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	overflow: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 0 0 auto; /* core stretches the list to full height; keep it centered instead */
	gap: 0;
	width: 100%;
	border-top: var(--ff-rule);
}

/* Wordmark in the overlay's corner, where the header logo sits underneath. */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 1.35rem;
	left: var(--wp--preset--spacing--50);
	width: 173px;
	height: 22px;
	background: url("assets/images/wordmark.png") left center / contain no-repeat;
	pointer-events: none;
}

.ff-header .wp-block-navigation-item__content:focus,
.ff-header .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Keyboard focus only (not the programmatic focus core gives the first link
   when the overlay opens) shifts the link to flame. */
.ff-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--flame);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--flame) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: var(--ff-rule);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.45em 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(2.5rem, 9.5vw, 3.75rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--wp--preset--color--charcoal) !important;
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "\2192";
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.45em;
	font-weight: 400;
	color: var(--wp--preset--color--flame);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s var(--ff-ease), transform 0.25s var(--ff-ease);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content::after {
	opacity: 1;
	transform: none;
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--flame) !important;
}

/* Items rise in as the overlay opens. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	animation: ff-menu-in 0.5s var(--ff-ease) both;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.05s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.1s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.15s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.2s; }

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

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		animation: none;
	}
}

/* =========================================
   FOOTER
   ========================================= */
.ff-footer .wp-block-separator {
	border-color: color-mix(in srgb, var(--wp--preset--color--cream) 12%, transparent) !important;
	background-color: transparent !important;
	opacity: 1;
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

.ff-footer .wp-block-site-logo img {
	height: 20px;
	width: auto;
	filter: brightness(0) invert(1);
}

.ff-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--cream) 78%, transparent);
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* The bottom row hugs the rule; the parent's block gap is for the columns above. */
.ff-footer .wp-block-separator + .wp-block-group {
	margin-block-start: 0;
}

.ff-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--cream);
}

.ff-footer a {
	color: inherit;
}

.ff-footer__heading {
	font-family: var(--ff-label-font);
	font-size: var(--ff-label-size);
	font-weight: var(--ff-label-weight);
	letter-spacing: var(--ff-label-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--flame);
}

/* =========================================
   SECTIONS
   One rhythm token top and bottom on every section. Backgrounds change
   between sections, so the padding has to be symmetrical or the content
   pins to whichever edge lost it.
   ========================================= */
.ff-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Page intros: same top, shorter bottom, and the section that follows an
   intro shares its background, so it opens short too. */
.ff-section--tight {
	padding-bottom: var(--wp--preset--spacing--50);
}

.ff-section--tight + .ff-section {
	padding-top: var(--wp--preset--spacing--40);
}

.ff-rule {
	border: 0;
	border-top: var(--ff-rule);
	margin: 0;
}

/* Section head: a short lead in the left 22%, the heading and copy in the
   right 78%. The lead is a bold fragment in Inter, sized to hold the column
   on its own: no rule, no label, no color. */
.ff-section-head .wp-block-column:first-child {
	padding: 0;
}

.ff-lead {
	margin: 0;
	padding-top: 0.35em;
	max-width: none;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-wrap: balance;
	/* Same fade as the statement paragraph: charcoal at the top, stone by the last line. */
	background: linear-gradient(180deg, var(--wp--preset--color--charcoal) 25%, var(--wp--preset--color--stone) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (max-width: 781px) {
	.ff-lead {
		max-width: none;
		padding-top: 0;
		font-size: 1.5rem;
	}
}

/* Dark section resets */
.ff-on-dark,
.ff-on-dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--cream);
}

.ff-on-dark p {
	color: color-mix(in srgb, var(--wp--preset--color--cream) 80%, transparent);
}

.ff-on-dark .ff-rule {
	border-top-color: color-mix(in srgb, var(--wp--preset--color--cream) 18%, transparent);
}

/* Photos: consistent radius everywhere except full-bleed covers. */
.wp-block-image:not(.alignfull) img,
.wp-block-media-text:not(.alignfull) .wp-block-media-text__media img,
.wp-block-post-featured-image img {
	border-radius: var(--ff-radius);
}

.ff-logos .wp-block-image img,
.ff-footer .wp-block-image img,
.ff-header .wp-block-image img {
	border-radius: 0;
}

/* Quote band */
.ff-quote {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-style: italic;
}

/* Quote attribution */
.ff-quote__cite {
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--cream) 75%, transparent);
	margin: 0;
}

/* Founder cards */
.ff-founder .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.ff-founder__role {
	font-family: var(--ff-label-font);
	font-size: var(--ff-label-size);
	font-weight: var(--ff-label-weight);
	letter-spacing: var(--ff-label-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--flame);
	margin: 0;
}

/* Trim Gravity's own bottom spacing so the section padding is the only
   space under the Send button. */
.gform_wrapper.gravity-theme .gform_footer {
	margin: 0;
	padding-bottom: 0;
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
	margin-bottom: 0;
}

/* =========================================
   GRAVITY FORMS
   Native GF markup (legacy "gravity-theme" output, set as the default theme
   in the plugin settings), restyled to the palette. No layout overrides.
   ========================================= */
.gform_wrapper.gravity-theme .gform_required_legend {
	display: none;
}

.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label,
.gform_wrapper.gravity-theme .gfield_required {
	font-family: var(--ff-label-font);
	font-size: var(--ff-label-size);
	letter-spacing: var(--ff-label-tracking);
	text-transform: uppercase;
	font-weight: var(--ff-label-weight);
	color: var(--wp--preset--color--charcoal);
}

.gform_wrapper.gravity-theme .gfield_required {
	color: var(--wp--preset--color--flame);
	font-size: 0.7rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.02em;
	font-style: normal !important;
}

.gform_wrapper.gravity-theme .gfield input:not([type="submit"]),
.gform_wrapper.gravity-theme .gfield textarea,
.gform_wrapper.gravity-theme .gfield select {
	font-family: var(--wp--preset--font-family--system);
	font-size: 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--warm-gray);
	border-radius: var(--ff-radius-sm);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
}

.gform_wrapper.gravity-theme .gfield input:not([type="submit"]):focus,
.gform_wrapper.gravity-theme .gfield textarea:focus,
.gform_wrapper.gravity-theme .gfield select:focus {
	outline: 2px solid var(--wp--preset--color--flame);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--flame);
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button,
.gform_wrapper.gravity-theme .gform_button {
	font-family: var(--wp--preset--font-family--system);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.9rem 1.8rem;
	border-radius: 0;
	border: 1px solid var(--wp--preset--color--flame);
	background: var(--wp--preset--color--flame);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.25s var(--ff-ease);
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_button:hover {
	background: var(--ff-flame-hover);
}

.ff-on-dark .gform_wrapper.gravity-theme .gfield_label,
.ff-on-dark .gform_wrapper.gravity-theme legend.gfield_label {
	color: var(--wp--preset--color--cream);
}

.ff-on-dark .gform_wrapper.gravity-theme .gfield input:not([type="submit"]),
.ff-on-dark .gform_wrapper.gravity-theme .gfield textarea,
.ff-on-dark .gform_wrapper.gravity-theme .gfield select {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--wp--preset--color--cream);
}

.ff-on-dark .gform_wrapper.gravity-theme .gfield select option {
	color: var(--wp--preset--color--charcoal);
}

.gform_wrapper.gravity-theme .gform_validation_errors,
.gform_wrapper.gravity-theme .gfield_validation_message {
	border-radius: var(--ff-radius-sm);
}

.gform_confirmation_message {
	font-size: var(--wp--preset--font-size--large);
}

/* =========================================
   BLOG
   ========================================= */
.ff-post-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	height: 100%;
}

.ff-post-card .wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--ff-radius);
}

.ff-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ff-ease);
}

.ff-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.ff-post-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: none;
	line-height: 1.1;
}

.ff-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
}

.ff-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--flame);
}

.ff-post-meta {
	font-family: var(--ff-label-font);
	font-size: var(--ff-label-size);
	font-weight: var(--ff-label-weight);
	letter-spacing: var(--ff-label-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}

.ff-post-meta a {
	color: inherit;
	text-decoration: none;
}

.ff-post-meta .wp-block-post-terms__separator {
	margin: 0 0.35em;
}

.wp-block-post-excerpt__more-link {
	display: none;
}

.ff-single .wp-block-post-content {
	font-size: var(--wp--preset--font-size--large);
}

.ff-single .wp-block-post-content > * + * {
	margin-block-start: 1.25em;
}

.ff-single .wp-block-post-content :is(h2, h3) {
	margin-block-start: 2em;
}

.wp-block-post-navigation-link a {
	text-decoration: none;
}

/* =========================================
   REVEAL (progressive; hidden only when JS is present)
   ========================================= */
.ff-js .ff-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s var(--ff-ease), transform 0.7s var(--ff-ease);
}

.ff-js .ff-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ff-js .ff-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.is-style-ff-card,
	.wp-block-button__link,
	.ff-post-card .wp-block-post-featured-image img {
		transition: none;
	}
}

/* =========================================
   UTILITIES
   ========================================= */
.ff-muted {
	color: var(--wp--preset--color--stone);
}

.ff-measure {
	max-width: 62rem;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* Card logos: the mark itself, no frame. Height per shape so square marks
   and horizontal wordmarks carry similar visual weight. */
.ff-card__logo {
	display: flex;
	align-items: center;
	height: 84px;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.ff-card__logo img {
	display: block;
	width: auto;
	height: 84px;
	max-width: 100%;
	object-fit: contain;
	border-radius: 0 !important;
	border: 0;
}

/* Full-width sections butt against each other; the layout's block gap is
   for content inside sections, not between them. */
.wp-block-post-content > .alignfull,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Logged-in admin bar sits over the top of the overlay; drop the wordmark
   and close button beneath it. */
.admin-bar .wp-block-navigation__responsive-container.is-menu-open::before,
.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc(1rem + 46px);
}