/* g2 revolution — site styles. Plain CSS, no frameworks. */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("/fonts/montserrat-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("/fonts/montserrat-italic-latin.woff2") format("woff2");
}
/* Brush-script display font (SIL OFL 1.1). Replaces "brightwall" from the WordPress site, which was
   the personal-use-only demo and not licensed for commercial use. */
@font-face {
	font-family: "Comforter Brush";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/comforter-brush-latin.woff2") format("woff2");
}

:root {
	--green: #55be47;
	--green-dark: #2d7e3d;
	--green-hover: #46a63a;
	--beige: #e0ddcc;
	--ink: #000;
	--muted: #666;
	--line: #d9d9d9;
	--panel: #f4f4f4;
	--white: #fff;
	--font: "Montserrat", Helvetica, Arial, sans-serif;
	--font-script: "Comforter Brush", "Brush Script MT", cursive;
	--script-scale: 1.35; /* Comforter Brush runs smaller than brightwall did at the same size */
	--container: min(80%, 1280px);
	--gap: 5.5%;
	--header-h: 88px;
	--radius: 5px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding-bottom: 10px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}
/* Heading sizes: each tag has a default, a size-* class (below) picks a step of the type scale, and
   phones scale both down. */
h1 { font-size: min(var(--size, 30px), 9vw); }
h2 { font-size: min(var(--size, 26px), 7.5vw); }
h3 { font-size: min(var(--size, 22px), 6.5vw); }
h4 { font-size: min(var(--size, 18px), 5.5vw); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
sup { font-size: 0.55em; line-height: 0; }
strong { font-weight: 700; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	padding: 8px 16px; background: var(--ink); color: var(--white);
}
.skip-link:focus { top: 8px; }

.container { width: var(--container); margin-inline: auto; }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------- buttons */
.btn {
	display: inline-block;
	padding: 6px 20px;
	border: 0;
	border-radius: var(--radius);
	background: var(--green);
	color: var(--white);
	font: 300 20px/1.7 var(--font);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s;
}
.btn:hover { background: var(--green-hover); text-decoration: none; }
.btn--block { display: block; text-align: center; }

/* ---------------------------------------------------------------- header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid #eee;
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}
.site-header__logo img { height: 62px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.menu { display: flex; list-style: none; margin: 0; padding: 0; }
.menu__item { position: relative; }
.menu__toggle {
	display: flex; align-items: center; gap: 6px;
	padding: 0 clamp(12px, 2.4vw, 40px);
	height: var(--header-h);
	border: 0; background: none; cursor: pointer;
	font: 400 16px var(--font); color: var(--ink); text-transform: uppercase;
}
.menu__toggle:hover, .menu__toggle[aria-expanded="true"] { color: var(--green); }
.menu__toggle .icon { width: 12px; height: 12px; transition: transform 0.2s; }
.menu__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.menu__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 400px;
	padding: 24px;
	background: var(--white);
	box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
	font-size: 14px;
	line-height: 1.4;
}
.menu__panel--cols-3 { min-width: 760px; left: 50%; transform: translateX(-50%); }
.menu__panel--cols-2 { min-width: 560px; left: auto; right: 0; }
.menu__item.is-open .menu__panel { display: block; }
.menu__columns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; }
.menu__panel ul { list-style: none; margin: 0; padding: 0; }
.menu__panel li a, .menu__heading {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 0;
	color: var(--ink);
}
.menu__panel li a:hover, .menu__heading:hover { color: var(--green); text-decoration: none; }
.menu__panel .icon { color: var(--ink); width: 16px; height: 16px; }
.menu__heading { font-weight: 700; text-transform: uppercase; }
.menu__panel .btn { margin-top: 16px; font-size: 14px; font-weight: 500; }
.site-nav__contact { font-size: 16px; font-weight: 400; padding: 4px 10px; white-space: nowrap; }
.nav-toggle {
	display: none;
	margin-left: auto;
	padding: 8px;
	border: 0; background: none; cursor: pointer;
	font-size: 32px; color: var(--green);
}

@media (max-width: 1100px) {
	.nav-toggle { display: block; }
	.site-nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		max-height: calc(100vh - var(--header-h)); overflow-y: auto;
		padding: 8px 10% 24px;
		background: var(--white);
		border-top: 3px solid var(--green);
		box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
	}
	.site-nav.is-open { display: flex; }
	.menu { flex-direction: column; }
	.menu__toggle { width: 100%; justify-content: space-between; height: auto; padding: 14px 0; border-bottom: 1px solid #eee; }
	.menu__panel, .menu__panel--cols-2, .menu__panel--cols-3 {
		position: static; min-width: 0; transform: none; box-shadow: none; padding: 8px 0 16px 16px;
	}
	.menu__columns { grid-auto-flow: row; gap: 8px; }
	.site-nav__contact { margin-top: 16px; text-align: center; }
}

/* ---------------------------------------------------------------- type scale
   Classes for headings in rich text: script (brush-script display font), size-xs ... size-xxl, accent. */
.size-xs { --size: 28px; }
.size-s { --size: 32px; }
.size-m { --size: 36px; }
.size-l { --size: 40px; }
.size-xl { --size: 48px; }
.size-xxl { --size: 56px; }
h1.script, h2.script, h3.script, .cta--script .cta__title {
	font-family: var(--font-script);
	font-weight: 400;
	text-transform: none;
	line-height: 1.05;
}
/* Script headings default to 38px before scaling, since the brush font runs small. */
h1.script { font-size: calc(min(var(--size, 38px), 9vw) * var(--script-scale)); }
h2.script { font-size: calc(min(var(--size, 38px), 7.5vw) * var(--script-scale)); }
h3.script { font-size: calc(min(var(--size, 38px), 6.5vw) * var(--script-scale)); }
.accent { color: var(--green); }
/* the "Do you g2?" heading on industry pages */
.why-g2__heading { --size: 47px; }

.align-center, .text-center { text-align: center; }
.align-right, .text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ---------------------------------------------------------------- page layout
   A .section is a full-width band; a .row is a centred line of .col columns; blocks inside a column are
   spaced evenly. Templates build pages from these; content files never name them. */
.section {
	--pad: clamp(40px, 4vw, 60px);
	position: relative;
	padding: var(--pad) 0;
	/* a tone's --overlay over the content's --photo (set inline from the YAML) */
	background-image: var(--overlay, none), var(--photo, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.section--contain { background-size: contain; background-position: center bottom; }
/* curved top edge (the first section after a photo band on industry and solution pages) */
.section--curve { padding-top: calc(var(--pad) + 100px); }
.section--curve::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1;
	height: 100px;
	background: url("/img/curve.svg") no-repeat;
	background-size: 100% 100px;
	pointer-events: none;
}
.section--curve-flip::before { transform: scale(-1, 1); }

.row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--gap);
	width: var(--container);
	margin-inline: auto;
	padding: clamp(14px, 2vw, 27px) 0;
}
.col { --f: 1; width: calc((100% + var(--gap)) * var(--f) - var(--gap)); min-width: 0; }
.col--full { --f: 1; }
.col--three-quarters { --f: 0.75; }
.col--two-thirds { --f: 0.6667; }
.col--three-fifths { --f: 0.6; }
.col--half { --f: 0.5; }
.col--two-fifths { --f: 0.4; }
.col--third { --f: 0.3333; }
.col--quarter { --f: 0.25; }
.col--fifth { --f: 0.2; }
.col > .block + .block { margin-top: 24px; }

@media (max-width: 980px) {
	.col { --f: 1 !important; }
	.row--4 > .col--quarter, .row--5 > .col--fifth { width: calc((100% - var(--gap)) / 2); }
	.col + .col { margin-top: 30px; }
	.row--4 > .col--quarter:nth-child(2), .row--5 > .col--fifth:nth-child(2) { margin-top: 0; }
}
@media (max-width: 767px) {
	.row--4 > .col--quarter, .row--5 > .col--fifth { width: 100%; }
	.row--4 > .col--quarter:nth-child(2), .row--5 > .col--fifth:nth-child(2) { margin-top: 30px; }
}

/* ---------------------------------------------------------------- tones (see content/Tone.java)
   Dark tones add .is-dark, which switches text to white. */
.is-dark { color: var(--white); }
.tone-sand { background-color: var(--beige); }
.tone-sand-fade { background-color: var(--beige); --overlay: linear-gradient(180deg, #e0ddcc 0%, #fff 100%); }
.tone-sand-rise { background-color: var(--beige); --overlay: linear-gradient(180deg, #fff 31%, #e0ddcc 100%); }
.tone-mint-fade {
	background-color: rgb(45 126 61 / 25%);
	--overlay: linear-gradient(180deg, rgb(45 126 61 / 0%) 0%, #fff 100%);
}
.tone-haze { --overlay: linear-gradient(rgb(255 255 255 / 50%), rgb(255 255 255 / 50%)); }
.tone-mist { --overlay: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 50%) 49%, #fff 100%); }
.tone-light-photo { --overlay: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 0%) 78%); }
.tone-green { background-color: var(--green); }
.tone-forest { background-color: var(--green-dark); }
.tone-black { background-color: #000; }
.tone-dark-photo { --overlay: linear-gradient(180deg, rgb(0 0 0 / 50%) 0%, #000 100%); }
.tone-dim-photo { --overlay: linear-gradient(rgb(0 0 0 / 70%), rgb(0 0 0 / 70%)); }
.tone-fade-photo { background-color: #000; --overlay: linear-gradient(180deg, rgb(0 0 0 / 24%) 71%, #000 100%); }
.tone-shade { --overlay: linear-gradient(rgb(0 0 0 / 26%), rgb(0 0 0 / 26%)); }
.tone-green-tint { background-color: var(--green-dark); --overlay: linear-gradient(rgb(85 190 71 / 40%), rgb(85 190 71 / 40%)); }

/* a row inside a translucent green panel */
.row--panel { background-color: rgb(85 190 71 / 75%); }
/* the box beside an intro */
.box { padding: clamp(24px, 3vw, 40px); }
.box--sand { background-color: var(--beige); }
.box--green { background-color: var(--green); }

/* ---------------------------------------------------------------- hero and call to action */
.hero {
	display: flex; align-items: center;
	min-height: clamp(260px, 32vw, 460px);
}
.hero h1 { font-size: min(67px, 9vw); text-shadow: 0 2px 12px rgb(0 0 0 / 35%); }
.hero--typed h1 { font-size: min(55px, 9vw); }
.hero--news h1 { font-size: min(26px, 9vw); }
.hero__subtitle {
	margin: 0; padding-bottom: 10px;
	font-size: min(32px, 7.5vw); font-weight: 700; line-height: 1.15; text-transform: uppercase;
}
.hero--video { min-height: clamp(380px, 42vw, 640px); }
.hero--video::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(rgb(0 0 0 / 25%), rgb(0 0 0 / 25%));
}
.hero--video > .row { z-index: 2; }
.hero--video h1 { text-shadow: 0 2px 12px rgb(0 0 0 / 40%); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cta-band { --pad: clamp(60px, 7vw, 110px); background-position: center bottom; }
.cta { text-align: center; max-width: 900px; margin-inline: auto; }
.cta__title { font-size: min(40px, 7.5vw); padding-bottom: 16px; }
.cta--script .cta__title { font-size: calc(min(38px, 7.5vw) * var(--script-scale)); }
.cta__text { margin-bottom: 24px; }
.cta-band:not(.is-dark) .cta .btn { background: #333; }
.cta-band:not(.is-dark) .cta .btn:hover { background: #111; }
.is-dark .cta .btn { background: var(--white); color: var(--green-dark); font-weight: 600; }
.is-dark .cta .btn:hover { background: var(--beige); }

.section--message { --pad: 100px; text-align: center; }

/* ---------------------------------------------------------------- blocks */
.prose a:not(.btn) { color: inherit; text-decoration: underline; text-decoration-color: var(--green); }
.prose h2 + p, .prose h3 + p { margin-top: 0.4em; }
.prose img { margin: 1em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 16px; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }

/* long-form documents (Privacy Policy) */
.row:has(> .col > .document) { max-width: 900px; }
.document h1 { font-size: min(44px, 9vw); }
.document h2 { font-size: min(22px, 6vw); margin-top: 1.6em; }
.document h3 { font-size: 18px; margin-top: 1.2em; text-transform: none; }
.document p, .document li { font-size: 17px; }
.document li { margin-bottom: 0.5em; }
.document .legal-updated { color: var(--muted); font-size: 15px; }
.document .legal-address { padding: 20px 24px; background: var(--panel); border-left: 4px solid var(--green); }
.document th { background: var(--panel); }
.document a { color: var(--green-dark); }

.button-row .btn { margin-top: 8px; }
.image { margin: 0; }
.image img { margin-inline: auto; }

/* photo tiles with a label over them */
.tile__link { position: relative; display: block; }
.tile__link:hover { text-decoration: none; }
.tile img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	filter: brightness(0.55);
	transition: filter 0.25s;
}
.tiles--round .tile img { aspect-ratio: 1; border-radius: 50%; }
.tile__link:hover img { filter: brightness(0.4); }
.tile__label {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 12%;
	text-align: center;
	color: var(--white);
	font-size: clamp(14px, 1.4vw, 20px); font-weight: 700; line-height: 1.15; text-transform: uppercase;
	pointer-events: none;
}

/* home page cards */
.card {
	padding: clamp(24px, 3vw, 40px);
	background-image: linear-gradient(180deg, rgb(224 221 204 / 0%) 0%, #e0ddcc 100%);
}

/* blurbs: icon beside the title, or image above */
.blurb--icon {
	display: grid;
	grid-template-columns: 36px 1fr;
	column-gap: 14px;
	align-items: start;
}
.blurb--icon > :not(.blurb__icon) { grid-column: 2; }
.blurb__icon { grid-row: 1 / span 2; color: var(--green); font-size: 32px; line-height: 1; padding-top: 2px; }
.blurb__title { font-size: 18px; padding-bottom: 6px; }
.blurb__title a { color: inherit; }
.blurb__image { margin: 0 auto 16px; max-width: 160px; }
.blurb--image { text-align: center; }
.blurb__text { font-size: 16px; }
.blurb__text ul { list-style: none; padding: 0; }
.blurb__text li { position: relative; padding-left: 26px; margin-bottom: 0.6em; }
.blurb__text li::before {
	content: ""; position: absolute; left: 0; top: 0.45em;
	width: 12px; height: 12px; border-radius: 50%; background: var(--green);
}
.blurb__text .benefits { margin: 0; }
.blurb__text .benefits li { margin-bottom: 1em; }

.faq { border-top: 1px solid var(--line); }
.faq__entry { border: 1px solid var(--line); border-top: 0; background: var(--panel); }
.faq__entry[open] { background: var(--white); }
.faq__entry summary {
	position: relative;
	padding: 18px 56px 18px 20px;
	font-weight: 700; font-size: 16px; text-transform: uppercase;
	color: var(--ink);
	cursor: pointer; list-style: none;
}
.faq__entry summary::-webkit-details-marker { display: none; }
.faq__entry summary::after {
	content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
	font-size: 26px; font-weight: 400; color: var(--green);
}
.faq__entry[open] summary::after { content: "\2212"; }
.faq__answer { padding: 0 20px 20px; font-size: 16px; color: var(--ink); }

.testimonial { margin: 0 auto; max-width: 900px; text-align: center; }
.testimonial blockquote { margin: 0 0 16px; font-size: 18px; font-style: italic; }
.testimonial blockquote::before {
	content: "\201C"; display: block; font: 700 72px/0.8 Georgia, serif; color: var(--green);
}
.testimonial figcaption strong { display: block; text-transform: uppercase; }
.col > .testimonial + .testimonial { margin-top: 56px; }

.counter { text-align: center; }
.counter__value { margin: 0; font-size: clamp(44px, 5vw, 72px); font-weight: 800; color: var(--green); line-height: 1.1; }
.counter__title { font-size: 18px; }

/* carousels (logos, gallery, quotes) */
.carousel { position: relative; padding: 0 44px 28px; }
.carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; }
.logos .carousel__slide { flex-basis: 20%; display: flex; align-items: center; justify-content: center; padding: 10px 20px; }
.logos .carousel__slide img { max-height: 110px; width: auto; }
@media (max-width: 980px) { .logos .carousel__slide { flex-basis: 33.333%; } }
@media (max-width: 600px) { .logos .carousel__slide { flex-basis: 50%; } }
.gallery .carousel__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.quote { margin: 0; padding: 0 5%; text-align: center; font-size: 18px; font-style: italic; }
.quote h3 { font-style: normal; font-size: 16px; padding-top: 12px; order: 2; }
.carousel__prev, .carousel__next {
	position: absolute; top: calc(50% - 14px); transform: translateY(-50%);
	width: 36px; height: 36px; padding: 0;
	border: 0; border-radius: 50%; background: rgb(0 0 0 / 8%);
	color: var(--ink); font-size: 18px; cursor: pointer;
	display: grid; place-items: center;
}
.carousel__prev { left: 0; }
.carousel__next { right: 0; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; }
.carousel__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgb(0 0 0 / 25%); }
.carousel__dots span.is-active { background: var(--green); }

/* click-to-load video */
.video { position: relative; aspect-ratio: 16 / 9; background: #111; }
.video__play { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.video__play img { width: 100%; height: 100%; object-fit: cover; }
.video__button {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 76px; height: 76px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--green); color: var(--white); font-size: 30px;
	box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
}
.video__notice { position: absolute; right: 8px; bottom: 6px; margin: 0; font-size: 12px; color: var(--white); text-shadow: 0 1px 2px #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* news */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.news-card { display: flex; flex-direction: column; background: var(--white); padding: 0 0 24px; border: 1px solid var(--line); color: var(--ink); }
.news-card__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-card > :not(.news-card__image) { margin-inline: 20px; }
.news-card__title { font-size: 18px; padding: 20px 0 4px; }
.news-card__title a { color: var(--ink); }
.news-card__date { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.news-card__excerpt { font-size: 15px; flex: 1; }
.news-card__more { font-weight: 700; margin-top: 12px; }

/* history timeline */
.timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 980px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 3px; background: var(--green); }
.timeline__event { position: relative; padding: 0 0 40px 72px; }
.timeline__marker {
	position: absolute; left: 0; top: 0;
	width: 49px; height: 49px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--green); color: var(--white); font-size: 22px;
}
.timeline__card { display: flex; gap: 24px; padding: 24px; background: var(--white); box-shadow: 0 4px 18px rgb(0 0 0 / 10%); color: var(--ink); }
.timeline__card img { width: 180px; height: 180px; object-fit: cover; flex: none; }
.timeline__body h4 { color: var(--green); font-size: 20px; }
@media (max-width: 767px) { .timeline__card { flex-direction: column; } .timeline__card img { width: 100%; height: auto; } }

/* leadership */
.person { text-align: center; }
.person__open { padding: 0; border: 0; background: none; cursor: pointer; display: block; margin: 0 auto 16px; }
.person__open img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; }
.person__name { font-size: 20px; padding-bottom: 2px; }
.person__role { font-size: 14px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.person__more { border: 0; background: none; padding: 0; cursor: pointer; color: var(--green); font: 700 15px var(--font); text-transform: uppercase; }
.person__bio {
	width: min(900px, 92vw); max-height: 88vh;
	padding: 40px; border: 0; border-radius: var(--radius);
	text-align: left; font-size: 16px; color: var(--ink);
}
.person__bio[open] { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.person__bio::backdrop { background: rgb(0 0 0 / 60%); }
.person__bio > img { width: 220px; aspect-ratio: 1; object-fit: cover; }
.person__bio form { position: absolute; top: 12px; right: 12px; margin: 0; }
.person__close { border: 0; background: none; cursor: pointer; font-size: 22px; padding: 6px; }
@media (max-width: 700px) { .person__bio[open] { grid-template-columns: 1fr; } }

/* contact form */
.contact-form { background: var(--white); padding: clamp(24px, 3vw, 40px); color: var(--ink); }
.contact-form h2 { color: var(--ink); }
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form__row--2 { grid-template-columns: 1fr; } }
.form__field { margin-bottom: 16px; }
.form label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.form .req { color: #c00; }
.form input, .form select, .form textarea {
	width: 100%; padding: 10px 12px;
	font: 500 16px var(--font);
	border: 1px solid #bbb; border-radius: 3px; background: var(--white);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 0; }
.form .error, .form [aria-invalid="true"] { border-color: #c00; }
.form__msg { color: #b00; font-size: 14px; margin: 4px 0 0; }
.form__error { padding: 12px 16px; background: #fdecea; color: #8a1c13; border-left: 4px solid #c00; }
.form__success { padding: 16px 20px; background: #eaf6e8; color: #1e5a1a; border-left: 4px solid var(--green); }
.form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__legal { font-size: 12px; color: var(--muted); margin-top: 12px; }
.grecaptcha-badge { visibility: hidden; }
[data-show-when][hidden] { display: none; }

/* ---------------------------------------------------------------- footer */
.site-footer {
	background-color: #000;
	background-repeat: no-repeat;
	background-position: right 8% center;
	background-size: auto 60%;
	color: var(--white);
	font-size: 14px;
	line-height: 1.5;
}
.site-footer a { color: var(--white); }
.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	padding: 60px 0 30px;
}
@media (max-width: 980px) { .site-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .site-footer__columns { grid-template-columns: 1fr; } }
.site-footer__heading { font-size: 14px; font-weight: 700; padding: 0 0 8px; text-transform: uppercase; }
.site-footer__group + .site-footer__group { margin-top: 20px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 2px 0; }
.site-footer__badges {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 48px;
	padding: 20px 0 40px;
}
.site-footer__badges img { height: 90px; width: auto; }
.site-footer__bottom { background: rgb(255 255 255 / 6%); padding: 14px 0; color: #bbb; }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.site-footer__bottom p { margin: 0; }
.site-footer__social { display: flex; gap: 18px; }
.site-footer__social .icon { font-size: 20px; }