.site-container { width: min(100% - 5rem, var(--container-width)); margin-inline: auto; }
.site-header { position: relative; z-index: 5; background: var(--color-ivory); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 92px; }
.site-main { overflow: hidden; }
.section { padding-block: var(--space-section-desktop); }
.section--ivory { background: var(--color-ivory); }
.section--white { background: var(--color-white); }
.section--peach { background: var(--color-peach-soft); }
.section--sand { background: var(--color-sand); }
.hero { position: relative; min-height: calc(100vh - 92px); padding: 55px 0 75px; overflow: hidden; background: var(--color-ivory); }
.hero__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; min-height: calc(100vh - 230px); }
.hero__copy { position: relative; z-index: 2; }
.hero__kicker { margin-bottom: 2rem; color: var(--color-brown); font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: .14em; }
.hero h1 { margin-bottom: 1.8rem; font-size: clamp(3rem, 4.3vw, 4.2rem); white-space: nowrap; }
.hero h1 em { color: var(--color-brown); font-style: normal; }
.hero__lead { margin-bottom: 1.7rem; color: var(--color-muted); }
.tag-list { display: flex; gap: .5rem; margin-bottom: 2rem; }
.tag-list span { padding: .18rem .85rem; border: 1px solid var(--color-line); border-radius: 50px; color: var(--color-brown); font-family: var(--font-serif); font-size: .72rem; letter-spacing: .08em; }
.hero__actions { display: flex; align-items: center; gap: 1.75rem; }
.hero__visual { position: relative; min-height: 400px; }
.hero__composite { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: flex-end; }
.hero__composite-image {
	display: block;
	width: min(86%, 540px);
	height: auto;
	animation: hero-illustration-entrance 1.05s cubic-bezier(.22, .61, .36, 1) .3s both;
}
@keyframes hero-illustration-entrance {
	from { opacity: 0; transform: translateY(22px) scale(.975); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__wordmark { position: absolute; top: 2%; right: 7%; color: rgba(137,109,93,.16); font-family: var(--font-serif); font-size: 4.25rem; line-height: .85; letter-spacing: .1em; text-align: right; }
.hero__wordmark span { font-size: 1.2rem; letter-spacing: .42em; }
.hero__scroll { position: absolute; bottom: 35px; left: 50%; display: flex; flex-direction: column; gap: .5rem; align-items: center; color: var(--color-muted); font-family: var(--font-serif); font-size: .72rem; letter-spacing: .14em; }
.hero__scroll i { display: block; width: 1px; height: 42px; background: var(--color-brown); }
.message { background: var(--color-white); border-top: 1px solid rgba(73,56,43,.15); }
.message__inner { display: grid; grid-template-columns: 1fr 330px; gap: 3rem; align-items: center; min-height: 340px; }
.message__content { align-self: center; }
.message__content > .section-label { margin-bottom: .7rem; }
.message__copy { max-width: 530px; }
.message__copy h2 { margin-bottom: 1.6rem; }
.message__copy > p:not(.overline) { max-width: 450px; margin-bottom: 2rem; color: var(--color-muted); }
@media (min-width: 901px) {
	.message__inner .person--message { margin-left: -90px; }
	.about__visual { display: flex; align-items: center; justify-content: flex-end; }
	.about__visual .person--about { margin-right: 45px; }
}
.section-heading--vertical { align-self: start; padding-top: .5rem; writing-mode: vertical-rl; }
.section-heading--vertical .section-label { margin: 0 0 .7rem; }
.section-heading--vertical span { color: var(--color-muted); font-family: var(--font-serif); font-size: .8rem; letter-spacing: .1em; }
.section-heading--row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3.8rem; }
.section-heading--row h2 { margin: .6rem 0 0; }
.section-heading--row > p { margin: 0; color: var(--color-muted); }
#service .section-heading--row, #works .section-heading--row { display: block; margin-bottom: 2.5rem; }
#service .section-heading--row > p, #works .section-heading--row > p { max-width: 640px; margin-top: 1.15rem; line-height: 1.8; }
.section-label, .overline, .card-number, .article-date { color: var(--color-brown); font-family: var(--font-serif); font-size: .73rem; letter-spacing: .16em; text-transform: uppercase; }
.section-label { margin-bottom: 0; }
.service-layout { display: grid; gap: 1.25rem; }
.service-layout__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.service-card { background: var(--color-white); }
.service-card--featured { display: grid; grid-template-columns: 1.1fr 1fr; }
.service-art { position: relative; display: grid; min-height: 185px; place-items: center; overflow: hidden; color: var(--color-brown); font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; text-align: center; }
.service-art:has(.service-art__image) { min-height: 0; padding: 1.35rem; }
.service-art__image { position: relative; inset: auto; display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: auto; object-fit: contain; }
.service-layout__bottom .service-art:has(.service-art__image) { display: flex; height: 343px; min-height: 343px; align-items: center; justify-content: center; overflow: hidden; }
.service-layout__bottom .service-art:has(.service-art__image) .service-art__image { width: auto; max-width: 100%; max-height: 100%; margin: 0; }
.service-card--featured .service-art { min-height: 245px; }
.service-art--lp { background: linear-gradient(145deg,#e6c1b1 0%,#f3dfd2 48%,#d4a28b 100%); }
.service-art--lp span { position: relative; z-index: 1; color: var(--color-white); font-size: 4.5rem; letter-spacing: .15em; text-shadow: 0 3px 15px rgba(120,70,50,.15); }
.service-art--lp i { position: absolute; width: 215px; height: 130px; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.25); transform: rotate(-21deg) translate(45px, 50px); }
.service-art--site { background: linear-gradient(145deg,#ded2c4,#f5eee8); }
.service-art--design { background: linear-gradient(145deg,#edd1b8,#d79d83); }
.service-art--design i { position: absolute; bottom: 30px; width: 230px; height: 85px; border-radius: 50%; background: rgba(255,255,255,.28); transform: rotate(-12deg); }
.service-art--design span, .service-art--site span { position: relative; z-index: 1; font-size: 2.2rem; }
.service-card__body { padding: 1.6rem 1.75rem 1.8rem; }
.card-number { margin-bottom: .3rem; }
.service-card h3 { margin-bottom: .65rem; font-family: var(--font-body); font-size: 1rem; letter-spacing: .14em; }
.service-card__body p:not(.card-number) { min-height: 3.8em; margin-bottom: 1.1rem; color: var(--color-muted); font-size: .84rem; line-height: 1.75; }
.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.2rem 2rem; }
.work-card__image { position: relative; display: grid; min-height: 205px; place-items: center; color: var(--color-brown); font-family: var(--font-serif); font-size: 2.1rem; line-height: 1.1; text-align: center; }
.work-card__image:has(.work-card__image-file) { display: flex; height: 432px; min-height: 432px; align-items: center; justify-content: center; padding: 1.1rem; margin-bottom: 1.5rem; overflow: hidden; }
.work-card__image-file { position: relative; inset: auto; display: block; width: auto; max-width: 100%; max-height: 100%; height: auto; margin: 0 auto; object-fit: contain; }
.work-card:has(.work-card__image-file) .work-card__meta { margin-top: 0; }
.work-card__image em { font-size: 1.55em; }
.work-card__image--one { background: radial-gradient(circle at 50% 30%,#f6eee6 0 11%,transparent 12%), linear-gradient(135deg,#d7b6a2,#f1dfd3); }
.work-card__image--two { background: linear-gradient(135deg,#c7c6aa,#ede9d8); color: #777554; }
.work-card__image--three { background: linear-gradient(135deg,#cab0a5,#eee0d9); color: #8b6259; }
.work-card__image--four { background: linear-gradient(135deg,#d4c1a4,#f0e4cf); color: #91704d; }
.work-card__meta { display: flex; gap: 1rem; margin-top: 1rem; color: var(--color-muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.work-card h3 { margin: .35rem 0 0; font-family: var(--font-body); font-size: 1rem; }
.work-card__summary { margin: .65rem 0 0; color: var(--color-muted); font-size: .8rem; line-height: 1.7; }
.section-more { margin-top: 4.5rem; text-align: center; }
.strength__inner { display: grid; grid-template-columns: 280px 1fr; gap: 3.5rem; align-items: start; }
.strength__intro h2 { margin: .7rem 0 1.7rem; }
.strength__intro > p:last-child { color: var(--color-muted); }
.strength-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strength-item { display: block; min-height: 175px; padding: 0 1.5rem; border-left: 1px solid var(--color-line); }
.strength-item:first-child { padding-top: 0; }
.strength-item__number { color: var(--color-peach-deep); font-family: var(--font-serif); font-size: 4.2rem; font-style: italic; line-height: 1; }
.strength-item h3 { margin-bottom: .55rem; font-family: var(--font-body); font-size: 1.1rem; }
.strength-item p { margin: 0; color: var(--color-muted); font-size: .87rem; }
.about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: center; }
.about__copy { max-width: 500px; }
.about__copy h2 { margin: .7rem 0 1.7rem; }
.about__copy p:not(.section-label) { color: var(--color-muted); }
.about__copy .about__lead { color: var(--color-ink); font-size: 1.05rem; }
.flow-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.flow-item { position: relative; padding-inline: .65rem; text-align: center; }
.flow-item:not(:last-child):after { position: absolute; z-index: 0; top: 29px; left: 50%; width: 100%; height: 1px; background: var(--color-beige-dark); content: ""; opacity: .7; }
.flow-item__circle { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 1.25rem; border: 1px solid var(--color-beige-dark); border-radius: 50%; background: var(--color-peach-soft); color: var(--color-brown); font-family: var(--font-serif); }
.flow-item h3 { margin-bottom: .55rem; font-family: var(--font-body); font-size: .9rem; }
.flow-item p { margin: 0; color: var(--color-muted); font-size: .75rem; line-height: 1.7; }
.column-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 2.6rem; }
.column-card--featured { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--color-sand); }
.article-art { display: grid; place-items: center; color: var(--color-brown); font-family: var(--font-serif); line-height: 1.05; }
.column-card .article-art:has(.article-art__image) { align-self: start; height: auto; min-height: 0; }
.column-card .article-art__image { display: block; width: 100%; max-width: 100%; height: auto; }
.article-art--featured { min-height: 220px; background: linear-gradient(135deg,#d4b49e,#f0dfd4); font-size: 2rem; }
.column-card__body { padding: 1.5rem 1.7rem; }
.column-card h3 { margin-bottom: 1.4rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.column-card h3 a:hover { color: var(--color-brown); }
.article-date { margin-bottom: .65rem; }
.article-category { color: var(--color-muted); font-family: var(--font-body); font-size: .68rem; letter-spacing: .03em; text-transform: none; overflow-wrap: anywhere; }
.column-card__excerpt { display: -webkit-box; overflow: hidden; margin: -.55rem 0 1.2rem; color: var(--color-muted); font-size: .78rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.column-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.1rem; }
.column-side .column-card { display: grid; grid-template-columns: 150px 1fr; border-bottom: 1px solid var(--color-line); }
.article-art--small { min-height: 105px; background: #e7ddd3; font-size: 2rem; }
.article-art--alt { background: #d9dfd4; }
.column-side .column-card__body { padding: .8rem 1.2rem; }
.column-side .column-card h3 { margin: 0; font-size: .9rem; }
.journal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.journal-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.journal-block__head h3 { margin: 0; font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: .08em; }
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.social-art { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(140deg,#e0c6b8,#f2e5db); }
.social-art[href] { transition: transform .25s ease; }
.social-art[href]:hover, .social-art[href]:focus-visible { transform: translateY(-3px); }
.social-art__image { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: transform .25s ease; }
.social-art[href]:hover .social-art__image, .social-art[href]:focus-visible .social-art__image { transform: scale(1.015); }
.social-art--two { background: linear-gradient(140deg,#b9c1ae,#e7e8d8); }
.social-art--three { background: linear-gradient(140deg,#d9b399,#f0d9c8); }
.note-list article { padding: .9rem 0; border-bottom: 1px solid var(--color-line); }
.note-list article:first-child { padding-top: 0; }
.note-list span { color: var(--color-muted); font-family: var(--font-serif); font-size: .75rem; }
.note-list h4 { margin: .3rem 0 0; font-family: var(--font-body); font-size: .95rem; }
.note-list h4 a { transition: color .25s ease; }
.note-list h4 a:hover, .note-list h4 a:focus-visible { color: var(--color-peach); text-decoration-color: var(--color-peach); text-underline-offset: .2em; }
.cta { position: relative; overflow: hidden; background: var(--color-peach-soft); text-align: center; }
.cta__inner { position: relative; padding-block: 55px; }
.cta h2 { margin: .8rem 0 1.3rem; }
.cta p:not(.section-label) { margin-bottom: 1.7rem; color: var(--color-muted); }
.cta__actions { display: flex; justify-content: center; gap: 1rem; }

/* Keep the featured service prominent while making all three services visible on desktop. */
@media (min-width: 1200px) {
	#service {
		padding-block: 48px;
	}

	#service .section-heading--row {
		margin-bottom: 2rem;
	}

	.service-layout {
		grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
		align-items: stretch;
	}

	.service-card--featured {
		display: flex;
		grid-column: 1;
		grid-row: 1 / span 2;
		min-height: 0;
		flex-direction: column;
	}

	.service-card--featured .service-art {
		min-height: 0;
		flex: 1 1 auto;
	}

	.service-card--featured .service-card__body {
		flex: 0 0 auto;
	}

	.service-layout__bottom {
		grid-column: 2;
		grid-row: 1 / span 2;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
		min-height: 0;
	}

	.service-layout__bottom .service-card {
		display: flex;
		min-height: 0;
		flex-direction: column;
	}

	.service-layout__bottom .service-art:has(.service-art__image) {
		height: 220px;
		min-height: 220px;
		flex: 0 0 220px;
		padding: 1rem;
	}

	.service-layout__bottom .service-card__body {
		flex: 0 0 auto;
		padding: .5rem 1.5rem .625rem;
	}

	.service-layout__bottom .service-card__body .card-number { margin-bottom: .15rem; }
	.service-layout__bottom .service-card__body h3 { margin-bottom: .3rem; }
	.service-layout__bottom .service-card__body p:not(.card-number) {
		min-height: 3em;
		margin-bottom: .5rem;
		line-height: 1.5;
	}

	.hero__composite-image { width: min(91%, 575px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__composite-image, .social-art[href], .social-art__image, .note-list h4 a {
		animation: none;
		transition: none;
		opacity: 1;
		transform: none;
	}
}