/*
 * Trellis Digital: component styles.
 *
 * Design tokens (colors, fonts, sizes) live in theme.json. This file holds the
 * layout and component styling that theme.json cannot express. It is loaded on
 * the front end and inside the block editor.
 *
 * Rules scoped to `.trellis-js` only apply on the live site once scripting is
 * available, so interactive sections stay fully open and editable in the editor.
 */

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
:root {
	--t-navy: #233243;
	--t-navy-600: #2e3e52;
	--t-navy-500: #3e5068;
	--t-sage: #8b9e7e;
	--t-sage-light: #a9b89f;
	--t-sage-pale: #c7d2be;
	--t-sage-tint: #e0e7da;
	--t-sage-text: #56664c;
	--t-sage-deep: #3e4a37;
	--t-paper: #f4f3ef;
	--t-off-white: #fbfaf7;
	--t-chrome: #ecebe5;
	--t-ink: #1e2731;
	--t-mist: #d8dee6;
	--t-slate: #8798ac;
	--t-hairline: rgba(30, 39, 49, 0.16);
	--t-gutter: clamp(24px, 5vw, 64px);
	--t-section: clamp(72px, 9vw, 120px);
	--t-serif: "Young Serif", Georgia, serif;
	--t-mono: "JetBrains Mono", ui-monospace, monospace;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

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

[class*="trellis-"],
[class*="trellis-"]::before,
[class*="trellis-"]::after {
	box-sizing: border-box;
}

a {
	text-decoration-color: var(--t-sage);
	text-underline-offset: 3px;
}

::selection {
	background: rgba(139, 158, 126, 0.4);
}

:focus-visible {
	outline: 2px solid var(--t-sage);
	outline-offset: 2px;
}

/* Layout containers manage their own spacing with `gap`, so the default
   block-to-block margin is switched off inside them. */
body :where(.trellis-page, .trellis-site-header, .trellis-site-footer, .trellis-dialog, .is-root-container) [class*="trellis-"]:where(:not([class*="trellis-phone"], [class*="trellis-preview"], [class*="trellis-form"])) > *,
.wp-site-blocks > *,
.trellis-site-header > *,
.trellis-site-footer > *,
.trellis-page > *,
.trellis-page > .wp-block-post-content > *,
.is-root-container > [class*="trellis-"] {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
   Shared pieces
--------------------------------------------------------------------------- */
.trellis-container {
	max-width: 1312px;
	margin-inline: auto;
	padding-inline: var(--t-gutter);
}

.trellis-section {
	padding-block: var(--t-section);
}

.trellis-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.trellis-split-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 40px;
}

/* Eyebrow labels */
.is-style-eyebrow,
.is-style-eyebrow-mark {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--t-sage-text);
}

.is-style-eyebrow a,
.is-style-eyebrow-mark a {
	color: inherit;
	text-decoration: none;
}

.is-style-eyebrow-mark {
	display: flex;
	align-items: center;
	gap: 10px;
}

.is-style-eyebrow-mark::before {
	content: "";
	flex: none;
	width: 46px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='12'%3E%3Crect width='12' height='12' rx='2' fill='%238B9E7E'/%3E%3Crect x='17' width='12' height='12' rx='2' fill='%238B9E7E'/%3E%3Crect x='34' width='12' height='12' rx='2' fill='%23233243'/%3E%3C/svg%3E") no-repeat;
}

:is(.has-navy-background-color, .has-ink-background-color, .trellis-page-hero__card) :is(.is-style-eyebrow, .is-style-eyebrow-mark) {
	color: var(--t-sage-light);
}

:is(.has-navy-background-color, .has-ink-background-color, .trellis-page-hero__card) .is-style-eyebrow-mark::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='12'%3E%3Crect width='12' height='12' rx='2' fill='%238B9E7E'/%3E%3Crect x='17' width='12' height='12' rx='2' fill='%238B9E7E'/%3E%3Crect x='34' width='12' height='12' rx='2' fill='%23F4F3EF'/%3E%3C/svg%3E");
}

/* Tags */
.is-style-tag,
.is-style-tag-outline {
	align-self: flex-start;
	width: fit-content;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 10px;
}

.is-style-tag {
	background: var(--t-navy);
	color: var(--t-paper);
}

.is-style-tag-outline {
	border: 1px solid var(--t-hairline);
	color: var(--t-navy);
}

/* Underlined arrow link */
.is-style-arrow-link a {
	font-weight: 600;
	font-size: 17px;
	color: var(--t-navy);
	text-decoration: underline;
	text-decoration-color: var(--t-sage);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* The 3×3 trellis mark */
.has-trellis-mark::before {
	content: "";
	position: relative;
	z-index: 1;
	flex: none;
	width: 50px;
	height: 50px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cg fill='%238B9E7E'%3E%3Crect width='14' height='14' rx='2.5'/%3E%3Crect x='18' width='14' height='14' rx='2.5'/%3E%3Crect x='36' width='14' height='14' rx='2.5'/%3E%3Crect x='18' y='18' width='14' height='14' rx='2.5'/%3E%3Crect x='18' y='36' width='14' height='14' rx='2.5'/%3E%3C/g%3E%3Cg fill='%23F4F3EF'%3E%3Crect y='18' width='14' height='14' rx='2.5'/%3E%3Crect x='36' y='18' width='14' height='14' rx='2.5'/%3E%3Crect y='36' width='14' height='14' rx='2.5'/%3E%3Crect x='36' y='36' width='14' height='14' rx='2.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button.is-style-sage .wp-block-button__link {
	background: var(--t-sage);
	color: var(--t-ink);
}

.wp-block-button.is-style-sage .wp-block-button__link:hover {
	background: var(--t-sage-light);
	color: var(--t-ink);
}

.wp-block-button.is-style-paper .wp-block-button__link {
	background: var(--t-paper);
	color: var(--t-navy);
}

.wp-block-button.is-style-paper .wp-block-button__link:hover {
	background: #fff;
	color: var(--t-navy);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--t-navy);
	border: 1px solid rgba(30, 39, 49, 0.24);
	padding: 17px 27px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--t-sage-tint);
	color: var(--t-navy);
}

.wp-block-button.is-style-pill .wp-block-button__link {
	background: var(--t-sage-tint);
	color: var(--t-navy);
	font-size: 15px;
	padding: 8px 16px;
}

.wp-block-button.is-style-pill .wp-block-button__link:hover {
	background: var(--t-paper);
	color: var(--t-navy);
}

.wp-block-button.trellis-lift .wp-block-button__link {
	padding: 17px 28px;
	box-shadow: 0 12px 26px rgba(30, 39, 49, 0.18);
}

.wp-block-button.trellis-lift .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px rgba(30, 39, 49, 0.24);
}

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */
.trellis-site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(244, 243, 239, 0.95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.admin-bar .trellis-site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .trellis-site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .trellis-site-header {
		top: 0;
	}
}

.trellis-header {
	max-width: 1312px;
	margin: 0 auto;
	padding: 16px clamp(20px, 5vw, 64px);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0 24px;
}

.trellis-header__logo,
.trellis-header__logo a {
	display: flex;
}

.trellis-header__logo img {
	height: 36px;
	width: auto;
}

.trellis-header__menu {
	display: contents;
}

.trellis-header__nav .wp-block-navigation__container {
	gap: 28px;
}

.trellis-header__nav .wp-block-navigation-item__content {
	padding: 6px 0;
	color: var(--t-navy);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.trellis-header__nav .wp-block-navigation-item__content:hover {
	color: var(--t-sage-text);
}

.trellis-header__nav .current-menu-item > .wp-block-navigation-item__content,
.trellis-header__nav .current-menu-ancestor > .wp-block-navigation-item__content,
.trellis-header__nav .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--t-sage);
}

.trellis-header__cta {
	gap: 10px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.trellis-header__cta .wp-block-button .wp-block-button__link {
	padding: 11px 18px;
	font-size: 14px;
}

.trellis-header__toggle {
	display: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 8px;
	border: 1px solid var(--t-hairline);
	background: transparent;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
}

.trellis-header__toggle span {
	width: 20px;
	height: 2px;
	background: var(--t-navy);
	transition: transform 200ms ease, opacity 200ms ease;
}

.trellis-header.is-open .trellis-header__toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.trellis-header.is-open .trellis-header__toggle span:nth-child(2) {
	opacity: 0;
}

.trellis-header.is-open .trellis-header__toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 979px) {
	.trellis-header__menu {
		display: flex;
		flex-direction: column;
		flex-basis: 100%;
		gap: 4px;
		margin: 16px calc(clamp(20px, 5vw, 64px) * -1) -16px;
		padding: 8px 20px 24px;
		border-top: 1px solid rgba(30, 39, 49, 0.1);
	}

	.trellis-js .trellis-header__toggle {
		display: flex;
	}

	.trellis-js .trellis-header:not(.is-open) .trellis-header__menu {
		display: none;
	}

	.trellis-header__nav,
	.trellis-header__nav .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		width: 100%;
	}

	.trellis-header__nav .wp-block-navigation-item {
		display: block;
	}

	.trellis-header__nav .wp-block-navigation-item__content {
		display: block;
		font-family: var(--t-serif);
		font-size: 24px;
		font-weight: 400;
		padding: 12px 0;
		border-bottom: 1px solid rgba(30, 39, 49, 0.1);
	}

	.trellis-header__nav .current-menu-item > .wp-block-navigation-item__content,
.trellis-header__nav .current-menu-ancestor > .wp-block-navigation-item__content,
	.trellis-header__nav .wp-block-navigation-item__content[aria-current="page"] {
		border-bottom-color: var(--t-sage);
	}

	.trellis-header__cta {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 16px !important;
	}

	.trellis-header__cta .wp-block-button {
		width: 100%;
	}

	.trellis-header__cta .wp-block-button .wp-block-button__link {
		display: block;
		padding: 16px;
		font-size: 16px;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.trellis-footer__inner {
	max-width: 1312px;
	margin: 0 auto;
	padding: 80px clamp(20px, 5vw, 64px) 40px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.trellis-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 48px;
}

.trellis-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.trellis-footer__brand p {
	font-size: 16px;
	line-height: 1.6;
	max-width: 34ch;
}

.trellis-footer__logo img {
	height: 44px;
	width: auto;
}

.trellis-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 16px;
	line-height: 1.6;
}

.trellis-footer__col .is-style-eyebrow {
	font-size: 13px;
}

.trellis-footer__col a {
	color: var(--t-paper);
	text-decoration: none;
}

.trellis-footer__col a:hover {
	color: var(--t-sage-light);
}

.trellis-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--t-navy-600);
	font-size: 14px;
	color: var(--t-slate);
}

.trellis-footer__bar a {
	color: var(--t-slate);
}

.trellis-footer__bar a:hover {
	color: var(--t-paper);
}

/* ---------------------------------------------------------------------------
   Homepage hero
--------------------------------------------------------------------------- */
/*
 * The hero fills the screen below the sticky header: 100vh minus the header
 * (72px on desktop, 80px with the mobile menu button) and minus the WordPress
 * toolbar when you are logged in.
 */
.trellis-hero {
	--t-header-h: 72px;
	--t-hero-h: calc(100vh - var(--t-header-h) - var(--wp-admin--admin-bar--height, 0px));
	position: relative;
	overflow: hidden;
	min-height: var(--t-hero-h);
	display: flex;
	align-items: center;
}

@supports (height: 100svh) {
	.trellis-hero {
		--t-hero-h: calc(100svh - var(--t-header-h) - var(--wp-admin--admin-bar--height, 0px));
	}
}

@media (max-width: 979px) {
	.trellis-hero {
		--t-header-h: 80px;
	}
}

/*
 * Side-by-side layout: lock the hero to exactly that height and size the
 * headline and the preview from the available height so everything fits.
 * On narrower or very short screens the content stacks and the hero grows.
 */
@media (min-width: 1100px) and (min-height: 600px) {
	.trellis-hero {
		--t-hero-pad: clamp(20px, 4.5vh, 72px);
		height: var(--t-hero-h);
	}

	.trellis-hero .trellis-hero__inner {
		flex-wrap: nowrap;
		padding-block: var(--t-hero-pad);
	}

	.trellis-hero .trellis-hero__copy h1 {
		font-size: max(44px, min(clamp(60px, 7.6vw, 112px), calc((var(--t-hero-h) - 2 * var(--t-hero-pad) - 330px) / 3.8)));
	}

	.trellis-hero .trellis-preview {
		max-width: max(380px, calc((var(--t-hero-h) - 2 * var(--t-hero-pad) - 220px) * 1.6));
		margin-left: auto;
	}
}

.trellis-hero::before {
	content: "";
	position: absolute;
	right: -120px;
	top: -140px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(139, 158, 126, 0.38) 0%, rgba(139, 158, 126, 0) 65%);
	pointer-events: none;
}

.trellis-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1760px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 72px);
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: center;
}

.trellis-hero__copy {
	position: relative;
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.trellis-hero .is-style-eyebrow {
	letter-spacing: 0.16em;
}

.trellis-hero h1 {
	font-size: clamp(60px, 7.6vw, 112px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--t-paper);
}

.trellis-hero h1 mark {
	position: relative;
	white-space: nowrap;
}

.trellis-hero h1 mark::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C 80 4, 200 4, 296 12' fill='none' stroke='%238B9E7E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.trellis-hero .trellis-hero__lead {
	margin-top: 40px;
	font-size: 21px;
	line-height: 1.55;
	max-width: 34ch;
}

.trellis-hero__copy .wp-block-buttons {
	gap: 14px;
}

.trellis-hero__copy .wp-block-button .wp-block-button__link {
	padding: 19px 30px;
}

/* Live site preview block */
.trellis-preview {
	position: relative;
	flex: 1.5 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: var(--t-paper);
}

.trellis-preview__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
}

.trellis-preview__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.trellis-ping {
	position: relative;
	display: inline-flex;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--t-sage-light);
}

.trellis-ping span {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--t-sage);
	animation: trellis-ping 1.8s ease-out infinite;
}

.trellis-preview__live {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--t-sage-light);
}

.trellis-preview__name {
	font-family: var(--t-serif);
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.3;
}

.trellis-preview__hint {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -2px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--t-sage-pale);
}

.trellis-preview__hint svg {
	flex: none;
	color: var(--t-sage-light);
}

.trellis-preview__hint strong {
	color: var(--t-paper);
	font-weight: 600;
}

/*
 * The 3D context (perspective, preserve-3d, hidden backfaces) is only switched
 * on while the card is flipping or flipped. At rest the live site sits in a
 * flat layer, because browsers do not reliably pass wheel and click events to
 * an embedded site that is inside a 3D-transformed element.
 */
.trellis-preview__stage {
	transform-origin: 50% 100%;
}

.trellis-preview.is-3d .trellis-preview__stage {
	perspective: 2200px;
}

.trellis-js .trellis-preview:not(.is-settled) .trellis-preview__stage {
	animation: trellis-open 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.trellis-preview__card {
	position: relative;
	transition: transform 0.9s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.trellis-preview.is-3d .trellis-preview__card {
	transform-style: preserve-3d;
}

.trellis-preview.is-flipped .trellis-preview__card {
	transform: rotateY(180deg);
}

.trellis-preview__face {
	border-radius: 16px;
	overflow: hidden;
	background: var(--t-off-white);
	box-shadow: 0 50px 90px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.trellis-preview.is-3d .trellis-preview__face {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.trellis-preview__face--back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	visibility: hidden;
}

/*
 * The faces swap at the moment the card is edge-on (0.3s into the turn with
 * this easing). Hidden backfaces alone are not enough: the embedded site is
 * drawn in its own layer and would show through, mirrored, until the turn ends.
 */
.trellis-preview__face--front,
.trellis-preview__face--back {
	transition: visibility 0s 0.3s;
}

.trellis-preview.is-flipped .trellis-preview__face--front {
	visibility: hidden;
}

.trellis-preview.is-flipped .trellis-preview__face--back {
	visibility: visible;
}

.trellis-browserbar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 14px;
	background: var(--t-chrome);
}

.trellis-browserbar i {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--t-sage-pale);
}

.trellis-browserbar span {
	flex: 1;
	min-width: 0;
	margin-left: 8px;
	padding: 5px 10px;
	border-radius: 6px;
	background: var(--t-paper);
	font-family: var(--t-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--t-sage-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.trellis-preview__frame {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--t-off-white);
}

.trellis-preview__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.trellis-preview__frame iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 1440px;
	height: 900px;
	max-width: none;
	border: 0;
	background: var(--t-off-white);
	transform-origin: 0 0;
	transform: scale(0.5);
}

.trellis-preview__old {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.trellis-preview__old img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.trellis-preview__badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 7px 11px;
	border-radius: 7px;
	background: rgba(30, 39, 49, 0.85);
	color: var(--t-paper);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.trellis-preview__foot {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.trellis-preview__flip {
	font: inherit;
	background: none;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--t-paper);
	text-align: left;
	transition: color 0.2s ease;
}

.trellis-preview__flip:hover {
	color: var(--t-sage-pale);
}

.trellis-preview__flip-icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--t-sage);
	color: var(--t-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: trellis-pulse 2.2s ease-out infinite;
}

.trellis-preview__flip-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.trellis-preview__flip-label {
	font-family: var(--t-serif);
	font-size: 21px;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-color: var(--t-sage);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.trellis-preview__flip-sub {
	font-size: 14px;
	color: var(--t-sage-pale);
}

.trellis-preview a.trellis-preview__visit {
	font-size: 15px;
	font-weight: 600;
	color: var(--t-sage-pale);
	text-decoration: underline;
	text-decoration-color: var(--t-sage);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.trellis-preview a.trellis-preview__visit:hover {
	color: var(--t-paper);
}

@keyframes trellis-ping {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(2.6); opacity: 0; }
}

@keyframes trellis-open {
	0% { opacity: 0; transform: perspective(1600px) rotateX(38deg) translateY(80px) scale(0.9); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: perspective(1600px) rotateX(0) translateY(0) scale(1); }
}

@keyframes trellis-pulse {
	0% { box-shadow: 0 0 0 0 rgba(139, 158, 126, 0.7), 0 8px 22px rgba(0, 0, 0, 0.35); }
	70% { box-shadow: 0 0 0 18px rgba(139, 158, 126, 0), 0 8px 22px rgba(0, 0, 0, 0.35); }
	100% { box-shadow: 0 0 0 0 rgba(139, 158, 126, 0), 0 8px 22px rgba(0, 0, 0, 0.35); }
}

/* ---------------------------------------------------------------------------
   Visitor questions + phone mock-up
--------------------------------------------------------------------------- */
.trellis-questions__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(48px, 7vw, 96px);
	align-items: center;
}

.trellis-questions__copy {
	flex: 1 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.trellis-questions__copy h2 {
	max-width: 20ch;
	text-wrap: balance;
}

.trellis-questions__copy .trellis-stack > p:not(.is-style-eyebrow-mark) {
	font-size: 19px;
	max-width: 46ch;
}

.trellis-switcher {
	display: flex;
	flex-direction: column;
	counter-reset: trellis-step;
}

.trellis-switcher__item {
	counter-increment: trellis-step;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 10px 24px;
	padding: 26px 24px;
	border-top: 1px solid var(--t-hairline);
	transition: background 240ms ease;
}

.trellis-switcher__item::before {
	content: counter(trellis-step);
	grid-row: 1 / span 2;
	width: 56px;
	height: 56px;
	border-radius: 18%;
	display: grid;
	place-items: center;
	font-family: var(--t-serif);
	font-size: 24px;
	background: var(--t-sage-tint);
	color: var(--t-navy);
	transition: background 240ms ease, color 240ms ease;
}

.trellis-switcher__item > * {
	grid-column: 2;
}

.trellis-switcher__item h3 {
	font-size: 28px;
	line-height: 1.2;
}

.trellis-switcher__item p {
	font-size: 18px;
	line-height: 1.6;
	max-width: 52ch;
}

.trellis-js .trellis-switcher__item {
	cursor: pointer;
}

.trellis-js .trellis-switcher__item:hover {
	background: var(--t-chrome);
}

.trellis-js .trellis-switcher__item.is-active {
	background: var(--t-sage-tint);
}

.trellis-js .trellis-switcher__item.is-active::before {
	background: var(--t-navy);
	color: var(--t-paper);
}

.trellis-js .trellis-switcher__item:not(.is-active) > :not(:first-child) {
	display: none;
}

.trellis-js .trellis-switcher__item.is-active p {
	min-height: 6.4em;
}

.trellis-phone {
	flex: none;
	width: 340px;
	max-width: 100%;
	height: 700px;
	margin: 0 auto;
	padding: 12px;
	border-radius: 48px;
	background: var(--t-ink);
	box-shadow: 0 30px 60px rgba(30, 39, 49, 0.28);
}

.trellis-phone__screen {
	width: 100%;
	height: 100%;
	border-radius: 38px;
	overflow: hidden;
	background: var(--t-off-white);
	color: var(--t-ink);
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.trellis-phone__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px 12px;
	font-family: var(--t-serif);
	font-size: 15px;
	color: var(--t-navy);
}

.trellis-phone__burger {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.trellis-phone__burger i {
	width: 18px;
	height: 2px;
	background: var(--t-navy);
}

.trellis-phone [data-part] {
	outline: 3px solid transparent;
	outline-offset: 3px;
	transition: outline-color 300ms ease, opacity 300ms ease;
}

.trellis-phone__photo {
	margin: 4px 14px;
	height: 150px;
	border-radius: 14px;
	background: var(--t-sage-pale) no-repeat 58% 40% / cover;
}

.trellis-phone__times {
	margin: 14px 14px 0;
	padding: 16px;
	border-radius: 14px;
	background: var(--t-navy);
	color: var(--t-paper);
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.trellis-phone__times div {
	display: flex;
	justify-content: space-between;
}

.trellis-phone__times strong {
	font-weight: 600;
}

.trellis-phone__times hr {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--t-navy-500);
}

.trellis-phone__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--t-sage-light);
}

.trellis-phone__address {
	font-size: 13px;
	color: var(--t-mist);
}

.trellis-phone__about {
	margin: 14px 14px 0;
	padding: 4px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.trellis-phone__tagline {
	font-family: var(--t-serif);
	font-size: 17px;
	color: var(--t-navy);
}

.trellis-phone__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.trellis-phone__tags span {
	font-size: 11px;
	padding: 4px 8px;
	background: var(--t-sage-tint);
	color: var(--t-sage-deep);
}

.trellis-phone__cta {
	margin: auto 14px 18px;
	padding: 15px;
	border-radius: 12px;
	background: var(--t-sage);
	color: var(--t-ink);
	text-align: center;
	font-weight: 600;
	font-size: 15px;
}

.trellis-switcher-scope[data-active] .trellis-phone [data-part] {
	opacity: 0.45;
}

.trellis-switcher-scope[data-active="1"] .trellis-phone [data-part="1"],
.trellis-switcher-scope[data-active="2"] .trellis-phone [data-part="2"],
.trellis-switcher-scope[data-active="3"] .trellis-phone [data-part="3"] {
	opacity: 1;
	outline-color: var(--t-sage);
}

/* ---------------------------------------------------------------------------
   Photo card ("Pastor, you're not called to web design")
--------------------------------------------------------------------------- */
.trellis-pastor {
	padding-bottom: var(--t-section);
}

.trellis-photo-card {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
	padding: clamp(56px, 8vw, 112px) clamp(24px, 6vw, 96px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 28px;
	box-shadow: 0 30px 60px rgba(30, 39, 49, 0.18);
}

.trellis-photo-card > * {
	position: relative;
	z-index: 1;
}

.trellis-photo-card > .trellis-photo-card__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.trellis-photo-card__backdrop img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Solid navy card with a soft sage glow at the top. */
.trellis-photo-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(360px 260px at 50% 0, rgba(139, 158, 126, 0.32) 0%, rgba(139, 158, 126, 0) 100%);
}

/* With a backdrop photo, darken it so the text stays readable. */
.trellis-photo-card:has(> .trellis-photo-card__backdrop)::after {
	background:
		radial-gradient(360px 260px at 50% 0, rgba(139, 158, 126, 0.32) 0%, rgba(139, 158, 126, 0) 100%),
		radial-gradient(ellipse 62% 58% at 50% 46%, rgba(24, 34, 46, 0.82) 0%, rgba(24, 34, 46, 0.55) 55%, rgba(24, 34, 46, 0) 100%),
		linear-gradient(180deg, rgba(30, 39, 49, 0.55) 0%, rgba(30, 39, 49, 0.45) 100%);
}

.trellis-photo-card:not(:has(> .trellis-photo-card__backdrop)) :is(h2, .trellis-photo-card__lead) {
	text-shadow: none;
}

.trellis-photo-card h2 {
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.08;
	max-width: 20ch;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(10, 16, 24, 0.7), 0 1px 3px rgba(10, 16, 24, 0.6);
}

.trellis-photo-card__lead {
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.6;
	max-width: 50ch;
	text-wrap: pretty;
	color: #eef1f4;
	text-shadow: 0 1px 12px rgba(10, 16, 24, 0.8), 0 1px 2px rgba(10, 16, 24, 0.6);
}

.trellis-photo-card .trellis-photo-card__actions {
	display: grid;
	justify-items: stretch;
	gap: 48px;
	width: fit-content;
	max-width: 100%;
	margin-top: 12px;
}

.trellis-photo-card__actions > .wp-block-buttons:first-child .wp-block-button {
	width: 100%;
}

.trellis-photo-card__actions > .wp-block-buttons:first-child .wp-block-button__link {
	display: block;
	font-size: 18px;
	padding: 19px 30px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.trellis-photo-card__actions > .wp-block-buttons:first-child .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 38px rgba(30, 39, 49, 0.24);
}

.trellis-pills {
	justify-content: center;
	gap: 8px 10px;
}

/* ---------------------------------------------------------------------------
   Founder + fun facts
--------------------------------------------------------------------------- */
.trellis-founder__inner {
	max-width: 1520px;
	margin: 0 auto;
	padding-inline: clamp(20px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.trellis-founder__top {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 72px;
	align-items: flex-end;
	justify-content: space-between;
}

.trellis-founder__headline {
	flex: 1.3 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.trellis-founder__headline h2 {
	font-size: clamp(36px, 4.4vw, 54px);
	line-height: 1.08;
	max-width: 22ch;
	text-wrap: balance;
}

.trellis-founder__aside {
	flex: 1 1 340px;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.trellis-founder__aside p {
	font-size: 19px;
	max-width: 48ch;
}

.trellis-facts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.trellis-facts__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--t-serif);
	font-size: 20px;
	line-height: 1.3;
	color: var(--t-navy);
}

.trellis-facts__title::before {
	content: "";
	flex: none;
	width: 30px;
	height: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='8'%3E%3Crect width='8' height='8' rx='2' fill='%23233243'/%3E%3Crect x='11' width='8' height='8' rx='2' fill='%238B9E7E'/%3E%3Crect x='22' width='8' height='8' rx='2' fill='%23233243'/%3E%3C/svg%3E") no-repeat;
}

.trellis-facts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
	gap: 12px;
	align-items: start;
}

.trellis-facts__grid .wp-block-image {
	margin: 0;
}

.trellis-facts__grid .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: 20px;
}

.trellis-facts__grid .wp-block-image:first-child img {
	object-position: 50% 30%;
}

.trellis-js .trellis-facts__grid .wp-block-image {
	position: relative;
	aspect-ratio: 1;
	border-radius: 20px;
	overflow: hidden;
	background: var(--t-sage-pale);
	cursor: pointer;
	outline: 3px solid transparent;
	outline-offset: 3px;
	transition: outline-color 250ms ease;
}

.trellis-js .trellis-facts__grid .wp-block-image img {
	position: absolute;
	inset: 0;
	height: 100%;
	border-radius: 0;
	transition: transform 500ms ease;
}

.trellis-js .trellis-facts__grid figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 28px 14px 12px;
	background: linear-gradient(transparent, rgba(24, 34, 46, 0.85));
	color: var(--t-paper);
	text-align: left;
	font-size: 0;
	line-height: 0;
	opacity: 0;
	transition: opacity 250ms ease;
}

.trellis-js .trellis-facts__grid figcaption strong {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.trellis-js .trellis-facts__grid .wp-block-image::after {
	content: "+";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--t-paper);
	color: var(--t-navy);
	display: grid;
	place-items: center;
	font-size: 17px;
	line-height: 1;
	transition: transform 250ms ease;
}

.trellis-js .trellis-facts__grid .wp-block-image.is-active {
	outline-color: var(--t-navy);
}

.trellis-js .trellis-facts__grid .wp-block-image.is-active img {
	transform: scale(1.06);
}

.trellis-js .trellis-facts__grid .wp-block-image.is-active figcaption {
	opacity: 1;
}

.trellis-js .trellis-facts__grid .wp-block-image.is-active::after {
	transform: rotate(45deg);
}

.trellis-facts__caption {
	min-height: 108px;
	padding: 18px 22px;
	border-radius: 16px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}

.trellis-facts__caption::before {
	content: attr(data-num);
	width: 40px;
	height: 40px;
	border-radius: 18%;
	display: grid;
	place-items: center;
	font-family: var(--t-serif);
	font-size: 17px;
	background: var(--t-sage-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23233243' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.1 12 6'/%3E%3Cpath d='m5.1 8-2.9-.8'/%3E%3Cpath d='m6 12-1.9 2'/%3E%3Cpath d='M7.2 2.2 8 5.1'/%3E%3Cpath d='M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z'/%3E%3C/svg%3E") no-repeat center;
	color: var(--t-navy);
	transition: background-color 250ms ease, color 250ms ease;
}

.trellis-facts__caption[data-num]:not([data-num=""])::before {
	background: var(--t-navy);
	color: var(--t-paper);
}

.trellis-facts__caption p {
	font-size: 16px;
	line-height: 1.5;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Work
--------------------------------------------------------------------------- */
.trellis-work__inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.trellis-work .trellis-split-head h2 {
	max-width: 18ch;
}

/* Image styles: browser and phone frames */
.wp-block-image.is-style-browser {
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--t-off-white);
	box-shadow: 0 8px 20px rgba(30, 39, 49, 0.12);
	transition: transform 350ms ease, box-shadow 350ms ease;
}

.wp-block-image.is-style-browser img {
	display: block;
	width: 100%;
	aspect-ratio: 1080 / 566;
	object-fit: cover;
	object-position: top;
}

.wp-block-image.is-style-browser figcaption {
	order: -1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 11px 14px;
	background: var(--t-chrome);
	font-family: var(--t-mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--t-sage-text);
	text-align: left;
}

.wp-block-image.is-style-browser figcaption::before {
	content: "";
	flex: none;
	width: 42px;
	height: 10px;
	background: radial-gradient(circle 5px at 5px 5px, var(--t-sage-pale) 96%, transparent 100%) 0 0 / 16px 10px repeat-x;
}

.wp-block-image.is-style-phone {
	width: 150px;
	aspect-ratio: 9 / 19;
	margin: 0;
	border: 7px solid var(--t-ink);
	border-radius: 22px;
	overflow: hidden;
	background: var(--t-off-white);
	box-shadow: 0 18px 36px rgba(30, 39, 49, 0.25);
	transition: transform 450ms ease;
}

.wp-block-image.is-style-phone img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.trellis-work-feature {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	align-items: center;
	padding: clamp(24px, 3vw, 40px);
	border-radius: 28px;
}

.trellis-work-feature__media {
	position: relative;
	flex: 1 1 440px;
	min-width: 0;
}

.trellis-work-feature__media .is-style-phone {
	position: absolute;
	right: -20px;
	bottom: -28px;
	width: clamp(110px, 24%, 150px);
}

.trellis-work-feature:hover .is-style-browser {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(30, 39, 49, 0.22);
}

.trellis-work-feature:hover .is-style-phone {
	transform: translateY(-18px);
}

.trellis-work-feature__body {
	flex: 1 1 300px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.trellis-work-feature__body h3 {
	font-size: clamp(30px, 3.4vw, 40px);
	line-height: 1.1;
}

.trellis-work-feature__body p {
	font-size: 19px;
}

.trellis-work-feature__body .is-style-tag {
	font-size: 12px;
}

/* Make the whole card one link target. */
.trellis-work-feature .is-style-arrow-link a::after,
.trellis-work-card h3 a::after,
.trellis-banner .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.trellis-work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 24px;
}

.trellis-work-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.trellis-work-card .wp-block-image {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(30, 39, 49, 0.12);
	transition: transform 350ms ease, box-shadow 350ms ease;
}

.trellis-work-card .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1080 / 566;
	object-fit: cover;
}

.trellis-work-card:hover .wp-block-image {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(30, 39, 49, 0.22);
}

.trellis-work-card h3 {
	font-size: 24px;
	line-height: 1.3;
}

.trellis-work-card h3 a {
	color: inherit;
	text-decoration: none;
}

.trellis-work-card p:not([class*="is-style-tag"]) {
	font-size: 16px;
	line-height: 1.55;
}

.trellis-work .trellis-banner {
	margin-top: 56px;
}

.trellis-banner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 24px;
	padding: 32px 40px;
	border-radius: 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.trellis-banner:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px rgba(30, 39, 49, 0.22);
}

.trellis-banner__copy {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.trellis-banner__copy h3 {
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.15;
}

.trellis-banner__copy p {
	font-size: 17px;
	line-height: 1.5;
	color: #c9d1db;
}

.trellis-banner .wp-block-buttons {
	margin-left: 16px;
}

.trellis-banner .wp-block-button .wp-block-button__link {
	padding: 16px 26px;
}

@media (max-width: 600px) {
	.trellis-banner {
		padding: 28px 24px;
	}

	.trellis-banner .wp-block-buttons {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
   Free review section + form
--------------------------------------------------------------------------- */
.trellis-review__inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(48px, 7vw, 96px);
	align-items: flex-start;
}

.trellis-review__copy {
	flex: 1 1 300px;
	max-width: 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.trellis-review__copy h2 {
	max-width: 14ch;
}

.trellis-review__copy > p:not(.is-style-eyebrow-mark) {
	font-size: 19px;
	max-width: 44ch;
}

.trellis-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 12px;
	max-width: 560px;
	counter-reset: trellis-check;
}

.trellis-checklist > p {
	counter-increment: trellis-check;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: 14px;
	background: var(--t-sage-tint);
	font-size: 15px;
	line-height: 1.4;
}

.trellis-checklist > p::before {
	content: counter(trellis-check);
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 18%;
	display: grid;
	place-items: center;
	background: var(--t-navy);
	color: var(--t-paper);
	font-family: var(--t-serif);
	font-size: 15px;
}

.trellis-checklist > p.is-check::before {
	content: "✓";
	background: var(--t-sage);
	color: var(--t-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
}

.trellis-form-card {
	flex: 1 1 420px;
	max-width: 560px;
	min-width: 0;
	padding: clamp(24px, 4vw, 40px);
	border-radius: 24px;
	background: var(--t-off-white);
}

.trellis-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.trellis-form[hidden],
.trellis-form__success[hidden],
.trellis-form__error[hidden] {
	display: none;
}

.trellis-form__title,
.trellis-form__success-title {
	margin: 0;
	font-family: var(--t-serif);
	font-size: 26px;
	line-height: 1.2;
	color: var(--t-navy);
}

.trellis-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 18px;
}

.trellis-form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--t-navy);
}

.trellis-form label em {
	font-style: normal;
	font-weight: 400;
	color: var(--t-sage-text);
}

.trellis-form input,
.trellis-form textarea {
	width: 100%;
	font: inherit;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	color: var(--t-ink);
	padding: 14px 16px;
	border: 1px solid rgba(30, 39, 49, 0.24);
	border-radius: 0;
	background: #fff;
	outline: none;
	box-sizing: border-box;
}

.trellis-form textarea {
	resize: vertical;
}

.trellis-form input::placeholder,
.trellis-form textarea::placeholder {
	color: var(--t-slate);
}

.trellis-form input:focus,
.trellis-form textarea:focus {
	border-color: var(--t-navy);
	box-shadow: 0 0 0 3px var(--t-sage-pale);
}

.trellis-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.trellis-form__error {
	margin: 0;
	font-size: 15px;
	color: #9b2c2c;
}

.trellis-form__submit {
	font: inherit;
	font-weight: 600;
	font-size: 17px;
	padding: 18px 28px;
	border: 0;
	border-radius: 8px;
	background: var(--t-navy);
	color: var(--t-paper);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.trellis-form__submit:hover {
	background: var(--t-navy-600);
}

.trellis-form__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.trellis-form__success {
	display: flex;
	flex-direction: column;
	gap: 16px;
	outline: none;
}

.trellis-form__success-title {
	font-size: 32px;
}

.trellis-form__success p:last-child {
	margin: 0;
	font-size: 18px;
}

/* ---------------------------------------------------------------------------
   CTA band
--------------------------------------------------------------------------- */
.trellis-cta {
	padding: 0 var(--t-gutter) var(--t-section);
}

.trellis-cta__band {
	position: relative;
	overflow: hidden;
	max-width: 1184px;
	margin: 0 auto;
	padding: clamp(32px, 6vw, 80px);
	border-radius: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 56px;
	align-items: center;
}

.trellis-cta__band::before {
	content: "";
	position: absolute;
	right: 300px;
	top: -30px;
	width: 200px;
	height: 130px;
	opacity: 0.25;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='130' fill='%23F4F3EF'%3E%3Crect width='60' height='60' rx='11'/%3E%3Crect x='70' width='60' height='60' rx='11'/%3E%3Crect x='140' width='60' height='60' rx='11'/%3E%3Crect x='70' y='70' width='60' height='60' rx='11'/%3E%3C/svg%3E") no-repeat;
}

.trellis-cta__copy {
	position: relative;
	flex: 1 1 380px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.trellis-cta__copy h2 {
	font-size: clamp(34px, 4.2vw, 52px);
	line-height: 1.06;
	color: var(--t-ink);
	max-width: 16ch;
}

.trellis-cta__copy p {
	font-size: 19px;
	line-height: 1.55;
	max-width: 44ch;
}

.trellis-cta__buttons {
	position: relative;
	flex: none;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.trellis-cta__buttons .wp-block-button,
.trellis-cta__buttons .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}

.trellis-cta__buttons .wp-block-button.is-style-paper .wp-block-button__link:hover {
	background: var(--t-off-white);
}

@media (max-width: 480px) {
	.trellis-cta__buttons {
		flex: 1 1 100%;
	}

	.trellis-cta__buttons .wp-block-button__link {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
   Pop-up dialog (bio)
--------------------------------------------------------------------------- */
.trellis-dialog {
	position: relative;
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
	max-height: 88vh;
	overflow: auto;
	background: var(--t-paper);
	border-radius: 28px;
	display: flex;
	flex-wrap: wrap;
	box-shadow: 0 30px 80px rgba(24, 34, 46, 0.4);
}

/* In the editor the pop-up sits inline, so give it room. */
.is-root-container > .trellis-dialog {
	max-height: none;
	margin-block: 40px;
}

.trellis-js .trellis-dialog {
	display: none;
}

.trellis-js dialog[open] .trellis-dialog {
	display: flex;
}

dialog.trellis-modal {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 24px;
	border: 0;
	background: transparent;
	color: var(--t-ink);
}

dialog.trellis-modal[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

dialog.trellis-modal::backdrop {
	background: rgba(24, 34, 46, 0.62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.trellis-dialog__photo {
	position: relative;
	flex: 1 1 280px;
	min-height: 320px;
	margin: 0;
	background: var(--t-sage-pale);
}

.trellis-dialog__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 45% 30%;
}

.trellis-dialog__body {
	flex: 1.4 1 380px;
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.trellis-dialog__body .is-style-eyebrow {
	font-size: 13px;
}

.trellis-dialog__body h3 {
	font-size: 34px;
	line-height: 1.12;
}

.trellis-dialog__body p:not(.is-style-eyebrow) {
	font-size: 17px;
	line-height: 1.65;
}

.trellis-dialog__body .wp-block-buttons {
	gap: 12px;
	padding-top: 8px;
}

.trellis-dialog__body .wp-block-button .wp-block-button__link {
	padding: 16px 24px;
	font-size: 16px;
}

.trellis-dialog__body .wp-block-button.is-style-outline .wp-block-button__link {
	padding: 15px 23px;
}

.trellis-dialog__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--t-paper);
	color: var(--t-navy);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(30, 39, 49, 0.15);
}

.trellis-dialog__close:hover {
	background: var(--t-sage-tint);
}

/* ---------------------------------------------------------------------------
   Default pages and blog
--------------------------------------------------------------------------- */
.trellis-page-hero {
	padding: 16px clamp(12px, 2vw, 24px) 0;
}

.trellis-page-hero__card {
	max-width: 1392px;
	margin: 0 auto;
	padding: clamp(56px, 7vw, 96px) max(var(--t-gutter), calc((100% - 1312px) / 2 + var(--t-gutter)));
	border-radius: 32px;
	background: var(--t-navy);
	color: var(--t-mist);
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.trellis-page-hero__card :is(h1, h2) {
	color: var(--t-paper);
	max-width: 20ch;
	text-wrap: balance;
}

.trellis-page-hero__card p {
	font-size: 20px;
	line-height: 1.55;
	max-width: 46ch;
}

.trellis-page-hero__card a {
	color: var(--t-sage-light);
}

.trellis-post-meta {
	gap: 8px 20px;
	font-size: 15px;
	color: var(--t-sage-pale);
}

.trellis-prose {
	padding-block: clamp(56px, 7vw, 96px);
}

.trellis-prose h2 {
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.15;
	margin-top: 1.6em;
}

.trellis-prose h3 {
	font-size: 26px;
	margin-top: 1.4em;
}

.trellis-prose a {
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.trellis-prose :is(ul, ol) {
	padding-left: 1.2em;
}

.trellis-prose li + li {
	margin-top: 0.4em;
}

.trellis-prose .wp-block-image img,
.trellis-post-image img {
	border-radius: 16px;
}

.trellis-post-nav {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--t-hairline);
	font-weight: 600;
	font-size: 17px;
	gap: 16px 40px;
}

.trellis-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trellis-post-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 24px;
	overflow: hidden;
	background: var(--t-off-white);
	box-shadow: 0 1px 2px rgba(30, 39, 49, 0.06);
	transition: box-shadow 0.25s ease;
}

.trellis-post-card:hover {
	box-shadow: 0 18px 40px rgba(30, 39, 49, 0.14);
}

.trellis-post-card .wp-block-post-featured-image {
	margin: 0;
}

.trellis-post-card__body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.trellis-post-card__body .wp-block-post-title a {
	text-decoration: none;
}

.trellis-post-card__body .wp-block-post-excerpt {
	font-size: 17px;
}

.trellis-post-card__body .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 12px;
	font-weight: 600;
	font-size: 16px;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.wp-block-query-pagination {
	margin-top: 56px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Icons (used as masks, so they take the color of the element)
--------------------------------------------------------------------------- */
.is-icon-eye {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Cpath d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}

.is-icon-tools {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13'/%3E%3Cpath d='m8 6 2-2'/%3E%3Cpath d='m18 16 2-2'/%3E%3Cpath d='m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17'/%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
}

.is-icon-expand {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
}

.is-icon-pen {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z'/%3E%3C/svg%3E");
}

.is-icon-camera {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Cpath d='M15 13a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}

.is-icon-handshake {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
}

.is-icon-cloud {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E");
}

.is-icon-shield {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.is-icon-backup {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
}

.is-icon-pulse {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E");
}

.is-icon-phone {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
}

.is-icon-clock {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.is-icon-pin {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Cpath d='M15 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}

.is-icon-baby {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h.01'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/%3E%3Cpath d='M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1'/%3E%3C/svg%3E");
}

.is-icon-users {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.is-icon-tap {
	--t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.1 12 6'/%3E%3Cpath d='m5.1 8-2.9-.8'/%3E%3Cpath d='m6 12-1.9 2'/%3E%3Cpath d='M7.2 2.2 8 5.1'/%3E%3Cpath d='M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Motion preferences
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.trellis-ping span,
	.trellis-preview__flip-icon,
	.trellis-js .trellis-preview:not(.is-settled) .trellis-preview__stage {
		animation: none;
	}

	[class*="trellis-"],
	.wp-block-button__link,
	.wp-block-image {
		transition-duration: 0.01ms !important;
	}

	.trellis-preview__face--front,
	.trellis-preview__face--back {
		transition-delay: 0s;
	}
}

/* ---------------------------------------------------------------------------
   Editor only: let full-width sections span the canvas like the live page.
--------------------------------------------------------------------------- */
.is-root-container > section[class*="trellis-"] {
	max-width: none;
	margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1);
}