/*
Theme Name:  Inland Summit
Theme URI:   https://inlandconstructionco.com
Author:      Inland Construction Company
Description: A contractor and commercial construction theme. Full-bleed hero, dark service band, project portfolio with category filtering, numbers, testimonials, and team. Built on plain WordPress with no page builder, no field plugin, and no framework, so nothing here expires or needs a licence renewal. Pairs with the Inland Core plugin, which holds the content.
Version:     1.7.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inland-summit
Tags:        custom-menu, featured-images, translation-ready, full-width-template, theme-options
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Ink and ground */
	--char: #16181a;
	--char-2: #1f2327;
	--char-3: #2b3035;
	--paper: #fff;
	--concrete: #f3f1ee;
	--concrete-2: #e7e3dd;

	/* Brand: Inland's red, carried over from the original site */
	--brand: #900;
	--brand-lift: #b31217;
	--brand-deep: #6d0000;

	/* Text */
	--ink: #16181a;
	--ink-soft: #4d5257;
	--muted: #7a807f;
	--on-dark: #f4f2ef;
	--on-dark-soft: #a8adb2;

	--line: #ddd8d1;
	--line-dark: rgba(255, 255, 255, 0.13);

	/* Type */
	--font-display: "Helvetica Neue", "Arial Black", Arial, sans-serif;
	--font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-ui: Verdana, Geneva, "DejaVu Sans", sans-serif;

	--step--1: 0.8125rem;
	--step-0: 1rem;
	--step-1: 1.0625rem;
	--step-2: 1.1875rem;
	--step-3: 1.5rem;
	--step-4: 2rem;
	--step-5: 2.5rem;
	--step-6: 3.5rem;

	/* Space */
	--pad: 1.25rem;
	--section: 2.75rem;
	--wrap: 75rem;
	--measure: 40rem;

	--header-h: 4.5rem;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--brand);
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--brand-lift);
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 0.7rem 1.1rem;
	background: var(--paper);
	color: var(--brand);
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
}

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

/* ==========================================================================
   3. Type
   ========================================================================== */

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ink);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); text-transform: none; letter-spacing: -0.01em; }
h4 { font-size: var(--step-1); text-transform: none; letter-spacing: 0; }

p + p,
p + ul,
p + ol,
ul + p {
	margin-top: 1.1rem;
}

/* The spaced-out label above a heading. Structural, not decorative:
   it says what kind of section this is. */
.eyebrow {
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--font-ui);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brand);
}

.eyebrow--light {
	color: #e08b8b;
}

.lede {
	font-size: var(--step-1);
	color: var(--ink-soft);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--pad);
}

.section {
	padding: var(--section) 0;
}

.section--dark {
	background: var(--char);
	color: var(--on-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
	color: var(--paper);
}

.section--concrete {
	background: var(--concrete);
}

.section-head {
	max-width: var(--measure);
	margin-bottom: 1.5rem;
}

/* The reference theme puts a short rule under every section heading. It is
 * the single most recognisable thing about that layout, and it gives the page
 * a steadier rhythm than headings alone. */
.section-head h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: 0.7rem;
	background: var(--brand);
}

.section-head--center h2::after {
	margin-left: auto;
	margin-right: auto;
}

.section--dark .section-head h2::after {
	background: var(--brand-lift);
}

.section-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.section-head p {
	margin-top: 0.85rem;
	color: var(--ink-soft);
}

.section--dark .section-head p {
	color: var(--on-dark-soft);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
	display: inline-block;
	padding: 0.9rem 1.9rem;
	background: var(--brand);
	border: 2px solid var(--brand);
	color: #fff;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover,
.btn:focus {
	background: var(--brand-lift);
	border-color: var(--brand-lift);
	color: #fff;
}

.btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

.btn--ghost:hover,
.btn--ghost:focus {
	background: #fff;
	border-color: #fff;
	color: var(--char);
}

.btn--outline {
	background: transparent;
	border-color: var(--brand);
	color: var(--brand);
}

.btn--outline:hover,
.btn--outline:focus {
	background: var(--brand);
	color: #fff;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 50;
	background: var(--char);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--header-h);
}

/* Over the hero the header floats transparent, the way the reference does. */
.has-hero .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.site-header.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: var(--char);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
	animation: drop 0.28s ease;
}

@keyframes drop {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

/* Wordmark. Used when no logo image has been uploaded. */
.brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: #fff;
}

.brand__mark {
	display: block;
	width: 0.3rem;
	height: 2.1rem;
	background: var(--brand);
	transform: skewX(-14deg);
}

.brand__text {
	display: block;
	line-height: 1.05;
}

.brand__name {
	display: block;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}

.brand__sub {
	display: block;
	font-family: var(--font-ui);
	font-size: 0.55rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--on-dark-soft);
}

.brand img {
	max-height: 3rem;
	width: auto;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.9rem;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	font-family: var(--font-ui);
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle:hover {
	border-color: var(--brand);
	color: #fff;
	background: var(--brand);
}

.nav-toggle__bars {
	position: relative;
	display: block;
	width: 1rem;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

.main-nav {
	display: none;
}

.main-nav.is-open {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 0.5rem var(--pad) 1.25rem;
	background: var(--char);
}

.main-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav a {
	display: block;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line-dark);
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
	color: #fff;
}

.main-nav .sub-menu {
	padding-left: 1rem;
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 36rem;
	padding: calc(var(--header-h) + 1.25rem) 0 2.5rem;
	background: var(--char);
	color: #fff;
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(12, 14, 16, 0.72) 0%,
		rgba(12, 14, 16, 0.58) 45%,
		rgba(12, 14, 16, 0.82) 100%
	);
}

/* A softening pass for low resolution source photography.
 *
 * The archive images are 2007 web exports, sized for a layout about 444px
 * wide. Upscaled into a 1920px hero they show compression artefacts and edge
 * noise. A very slight blur plus the existing scrim hides most of that: the
 * eye reads it as depth of field rather than a bad file. Remove this block
 * once real high resolution photography is in place.
 */
.hero--softsource .hero__media img {
	filter: blur(1.5px) saturate(1.05);
	transform: scale(1.04);
}

/* No photo uploaded yet: a hatched steel field rather than a broken layout. */
.hero--nomedia {
	background-color: var(--char);
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.03) 0 2px,
			transparent 2px 14px
		),
		linear-gradient(160deg, var(--char-3) 0%, var(--char) 62%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
}

.hero__eyebrow {
	color: #fff;
	opacity: 0.85;
}

.hero__heading {
	font-size: var(--step-5);
	color: #fff;
	text-wrap: balance;
}

.hero__text {
	max-width: 34rem;
	margin-top: 1.25rem;
	font-size: var(--step-1);
	color: rgba(255, 255, 255, 0.86);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* The red rule under the hero, echoing the original site's redLine motif. */
.hero::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 5px;
	background: var(--brand);
}

/* ==========================================================================
   8. Services
   ========================================================================== */

.service-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-card__icon {
	display: block;
	margin-bottom: 1rem;
	color: var(--brand);
}

.section--dark .service-card__icon {
	color: #e8735c;
}

.service-card__icon svg {
	width: 2.75rem;
	height: 2.75rem;
}

.service-card__title {
	font-size: var(--step-1);
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

.service-card__text {
	margin-top: 0.55rem;
	font-size: 0.94rem;
	color: var(--ink-soft);
}

.section--dark .service-card__text {
	color: var(--on-dark-soft);
}

.service-card__link {
	display: inline-block;
	margin-top: 0.7rem;
	font-family: var(--font-ui);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.section--dark .service-card__link {
	color: #e8735c;
}

/* ==========================================================================
   9. Intro
   ========================================================================== */

.intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

/* The offset frame: a red outline sitting behind the photo, one corner proud. */
.intro__media {
	position: relative;
	padding: 0 1rem 1rem 0;
}

.intro__media::before {
	content: "";
	position: absolute;
	top: 1rem;
	right: 0;
	bottom: 0;
	left: 1rem;
	border: 2px solid var(--brand);
}

.intro__media img {
	position: relative;
	width: 100%;
}

.intro__media--empty .intro__placeholder {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--concrete-2);
	border: 1px dashed var(--muted);
}

.intro__list {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.intro__list li {
	position: relative;
	padding: 0.3rem 0 0.3rem 1.6rem;
}

.intro__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.95em;
	width: 0.6rem;
	height: 2px;
	background: var(--brand);
}

/* ==========================================================================
   10. Numbers
   ========================================================================== */

.numbers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 1rem;
	text-align: center;
}

.number__value {
	display: block;
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--brand);
}

.section--dark .number__value {
	color: #fff;
}

.number__label {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--font-ui);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.section--dark .number__label {
	color: var(--on-dark-soft);
}

/* ==========================================================================
   11. Projects
   ========================================================================== */

.project-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-card__link {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--char);
}

.project-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--concrete-2);
	overflow: hidden;
}

.project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.project-card__link:hover .project-card__media img,
.project-card__link:focus .project-card__media img {
	transform: scale(1.05);
	opacity: 0.55;
}

.project-card__media--empty {
	display: grid;
	place-items: center;
	border: 1px dashed var(--muted);
}

.project-card__media--empty::after {
	content: "";
	width: 2rem;
	height: 2rem;
	border: 2px solid var(--muted);
	transform: rotate(45deg);
	opacity: 0.5;
}

.project-card__body {
	display: block;
	padding: 1rem 1.1rem 1.15rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 0;
}

.project-card__cat {
	display: block;
	font-family: var(--font-ui);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand);
}

.project-card__title {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.project-card__location {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	color: var(--muted);
}

/* Filter row */

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.filter-bar button,
.filter-bar a {
	display: block;
	padding: 0.55rem 1.1rem;
	background: transparent;
	border: 1px solid var(--line);
	font-family: var(--font-ui);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink-soft);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.filter-bar button:hover,
.filter-bar a:hover,
.filter-bar button:focus,
.filter-bar a:focus,
.filter-bar .is-active button,
.filter-bar .is-active a {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.project-grid li[hidden] {
	display: none;
}

/* Project detail */

.page-hero {
	position: relative;
	padding: 1.75rem 0 1.75rem;
	background: var(--char);
	color: #fff;
	overflow: hidden;
}

.page-hero--media .page-hero__bg {
	position: absolute;
	inset: 0;
}

.page-hero--media .page-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
}

.page-hero__inner {
	position: relative;
	z-index: 1;
}

.page-hero h1 {
	color: #fff;
	font-size: var(--step-4);
	text-wrap: balance;
}

.page-hero__meta {
	margin-top: 0.6rem;
	color: rgba(255, 255, 255, 0.75);
}

.page-hero::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: var(--brand);
}

.breadcrumb {
	margin-bottom: 0.9rem;
	font-family: var(--font-ui);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: #fff;
	text-decoration: underline;
}

.project-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	margin: 0 0 1.75rem;
	padding: 1.5rem;
	background: var(--concrete);
	border-left: 3px solid var(--brand);
}

.project-facts dt {
	font-family: var(--font-ui);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
}

.project-facts dd {
	margin: 0.2rem 0 0;
	font-weight: 600;
}

.project-photos {
	display: grid;
	gap: 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.project-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-size: 0.9rem;
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

.testimonial-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.testimonial {
	padding: 1.75rem;
	background: var(--paper);
	border: 1px solid var(--line);
}

.section--dark .testimonial {
	background: var(--char-2);
	border-color: var(--line-dark);
}

.testimonial__quote {
	position: relative;
	margin: 0;
	padding-top: 2rem;
	font-size: var(--step-1);
	line-height: 1.55;
	color: var(--ink-soft);
}

.section--dark .testimonial__quote {
	color: var(--on-dark);
}

.testimonial__quote::before {
	content: "\201C";
	position: absolute;
	top: -0.6rem;
	left: -0.3rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--brand);
	opacity: 0.28;
}

.testimonial__source {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
}

.section--dark .testimonial__source {
	border-color: var(--line-dark);
}

.testimonial__photo img {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial__who strong {
	display: block;
	font-family: var(--font-display);
	font-size: 0.95rem;
	letter-spacing: 0;
}

.testimonial__role,
.testimonial__project {
	display: block;
	font-size: 0.8rem;
	color: var(--muted);
}

.section--dark .testimonial__role,
.section--dark .testimonial__project {
	color: var(--on-dark-soft);
}

/* ==========================================================================
   13. Team
   ========================================================================== */

.team-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.team-member__photo {
	position: relative;
	overflow: hidden;
	background: var(--concrete-2);
	aspect-ratio: 1 / 1;
}

.team-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 0.35s ease, transform 0.5s ease;
}

.team-member:hover .team-member__photo img {
	filter: grayscale(0%);
	transform: scale(1.03);
}

.team-member__body {
	padding-top: 1rem;
}

.team-member__name {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
}

.team-member__role {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--font-ui);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand);
}

.team-member__credentials {
	margin-top: 0.4rem;
	font-size: 0.82rem;
	color: var(--muted);
}

.team-member__bio {
	margin-top: 0.75rem;
	font-size: 0.94rem;
	color: var(--ink-soft);
}

/* ==========================================================================
   14. CTA
   ========================================================================== */

.cta {
	position: relative;
	padding: 3.25rem 0;
	background: var(--brand);
	color: #fff;
	text-align: center;
}

.cta h2 {
	color: #fff;
	font-size: var(--step-3);
}

.cta p {
	max-width: 34rem;
	margin: 0.7rem auto 0;
	color: rgba(255, 255, 255, 0.88);
}

.cta .btn {
	margin-top: 1.75rem;
	background: #fff;
	border-color: #fff;
	color: var(--brand);
}

.cta .btn:hover,
.cta .btn:focus {
	background: var(--char);
	border-color: var(--char);
	color: #fff;
}

/* ==========================================================================
   15. Content
   ========================================================================== */

.entry-content {
	max-width: var(--measure);
}

.entry-content--wide {
	max-width: none;
}

.entry-content > p:first-of-type {
	font-size: var(--step-1);
	color: var(--ink-soft);
}

.entry-content h2 {
	margin-top: 1.9rem;
	margin-bottom: 0.6rem;
	font-size: var(--step-2);
}

.entry-content h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.4rem;
}

.entry-content ul,
.entry-content ol {
	margin: 0.6rem 0 1.25rem;
	padding-left: 0;
	list-style: none;
}

.entry-content ul li {
	position: relative;
	padding-left: 1.35rem;
	margin-bottom: 0.35rem;
}

.entry-content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.68em;
	width: 6px;
	height: 6px;
	background: var(--brand);
	transform: rotate(45deg);
}

.entry-content ol {
	counter-reset: steps;
}

.entry-content ol li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.35rem;
	counter-increment: steps;
}

.entry-content ol li::before {
	content: counter(steps, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: var(--font-ui);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--brand);
}

.entry-content blockquote {
	margin: 1.75rem 0;
	padding: 1.1rem 1.5rem;
	background: var(--concrete);
	border-left: 3px solid var(--brand);
	font-size: var(--step-1);
	font-style: italic;
	color: var(--ink-soft);
}

.entry-content .service-intro {
	margin-top: 0.2rem;
	color: var(--muted);
	font-style: italic;
}

.entry-content .award,
.entry-content .mission {
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--concrete);
	border-left: 3px solid var(--brand);
}

.entry-content .mission h2 {
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: var(--brand);
}

.entry-content .mission p {
	margin: 0;
	font-size: var(--step-1);
	font-style: italic;
	color: var(--ink-soft);
}

.hero-quote {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
}

.hero-quote p {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.hero-quote em {
	font-style: italic;
	color: var(--brand);
}

.alignleft { float: left; margin: 0.35rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.35rem 0 1rem 1.5rem; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: 0.82rem; color: var(--muted); }

/* Contact */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.contact-block h2 {
	margin: 0 0 0.45rem;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	color: var(--muted);
}

.contact-block p {
	margin: 0;
}

/* Gallery */

.inland-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.75rem 0;
	padding: 0;
	list-style: none;
}

/* Search and lists */

.search-form {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
	max-width: 28rem;
}

.search-form input[type="search"] {
	flex: 1 1 auto;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--line);
}

.search-form button {
	padding: 0.7rem 1.3rem;
	background: var(--brand);
	border: 0;
	color: #fff;
	font-family: var(--font-ui);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	cursor: pointer;
}

.search-form button:hover {
	background: var(--brand-lift);
}

.result-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.result-list li {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--line);
}

.result-list h2 {
	font-size: var(--step-2);
	text-transform: none;
}

.pagination {
	margin-top: 1.75rem;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--line);
	text-decoration: none;
}

.pagination .current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.site-footer {
	background: var(--char);
	color: var(--on-dark-soft);
}

.footer-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding: 2.25rem 0 1.75rem;
}

.footer-col h2 {
	margin-bottom: 0.9rem;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	color: #fff;
}

.footer-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-col li {
	margin-bottom: 0.35rem;
}

.footer-col a {
	color: var(--on-dark-soft);
	text-decoration: none;
}

.footer-col a:hover,
.footer-col a:focus {
	color: #fff;
	text-decoration: underline;
}

.footer-about p {
	margin-top: 0.9rem;
	font-size: 0.92rem;
}

.footer-services {
	padding: 1.1rem 0;
	border-top: 1px solid var(--line-dark);
	font-family: var(--font-ui);
	font-size: 0.66rem;
	line-height: 1.9;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--on-dark-soft);
}

.footer-legal {
	padding: 0 0 1.75rem;
	font-family: var(--font-ui);
	font-size: 0.6rem;
	letter-spacing: 0.05em;
	text-align: center;
	color: #6b7176;
}

/* ==========================================================================
   17. Motion
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(14px);
}

.reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

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

	.reveal,
	.reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   18. Breakpoints
   ========================================================================== */

@media (min-width: 37.5em) {
	:root {
		--section: 3.25rem;
		--pad: 2rem;
	}

	.project-grid,
	.service-grid,
	.testimonial-list,
	.team-list,
	.inland-gallery,
	.project-photos {
		grid-template-columns: repeat(2, 1fr);
	}

	.project-facts,
	.contact-grid,
	.footer-main {
		grid-template-columns: repeat(2, 1fr);
	}

	.numbers {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 56.25em) {
	:root {
		--section: 4rem;
		--header-h: 5.5rem;
		--step-5: 3rem;
	}

	.nav-toggle {
		display: none;
	}

	.main-nav {
		display: block;
	}

	.main-nav > div > ul,
	.main-nav > ul {
		display: flex;
		align-items: center;
		gap: 1.9rem;
	}

	.main-nav li {
		position: relative;
	}

	.main-nav a {
		padding: 0.4rem 0;
		border-bottom: 0;
		font-size: 0.68rem;
	}

	/* The underline grows from the left rather than fading in: it reads as a
	   rule being drawn, which suits the subject. */
	.main-nav > div > ul > li > a::after,
	.main-nav > ul > li > a::after {
		content: "";
		display: block;
		width: 0;
		height: 2px;
		margin-top: 0.35rem;
		background: var(--brand);
		transition: width 0.25s ease;
	}

	.main-nav > div > ul > li > a:hover::after,
	.main-nav > div > ul > li > a:focus::after,
	.main-nav > div > ul > li.current-menu-item > a::after,
	.main-nav > div > ul > li.current_page_item > a::after,
	.main-nav > ul > li > a:hover::after,
	.main-nav > ul > li > a:focus::after,
	.main-nav > ul > li.current-menu-item > a::after,
	.main-nav > ul > li.current_page_item > a::after {
		width: 100%;
	}

	.main-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: -1rem;
		z-index: 60;
		display: none;
		min-width: 13rem;
		padding: 0.5rem 1rem;
		background: var(--char-2);
	}

	.main-nav li:hover > .sub-menu,
	.main-nav li:focus-within > .sub-menu {
		display: block;
	}

	.hero {
		min-height: 40rem;
	}

	.service-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.service-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.project-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.testimonial-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.team-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.intro {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	.intro__media {
		padding: 0 1.75rem 1.75rem 0;
	}

	.project-facts {
		grid-template-columns: repeat(3, 1fr);
		padding: 1.75rem 2rem;
	}

	.footer-main {
		grid-template-columns: 2fr 1fr 1fr 1.4fr;
		gap: 2.5rem;
	}

	.page-hero {
		padding: 2.5rem 0 2.5rem;
	}
}

@media print {
	.site-header,
	.hero__media,
	.cta,
	.filter-bar,
	.project-nav {
		display: none !important;
	}

	body {
		color: #000;
	}
}

/* Compact roster: used on the home page, where bios would bury the CTA. */
.team-list--compact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.75rem;
}

.team-list--compact .team-member {
	display: block;
	text-align: left;
}

.team-list--compact .team-member__photo {
	width: 100%;
	max-width: 220px;
	margin-bottom: 0.9rem;
}

.team-list--compact .team-member__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.3s ease;
}

.team-list--compact .team-member:hover .team-member__photo img {
	filter: grayscale(0);
}

.team-list--compact .team-member__name {
	font-size: var(--step-2);
	margin: 0;
}

.team-list--compact .team-member__credentials {
	margin-top: 0.3rem;
	font-size: 0.85rem;
	color: var(--muted);
}

/* A quiet link under a section heading, e.g. "Read their backgrounds". */
.section-head__link {
	margin-top: 0.6rem;
}

.section-head__link a {
	font-family: var(--font-ui);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.section-head__link a:hover {
	color: var(--brand-lift);
}

/* A brand rule across the foot of the hero, echoing the reference layout and
 * the red rule from Inland's original 2007 site. */
.hero::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background: var(--brand);
	z-index: 2;
}

/* Image-led service cards. Falls back to the icon layout automatically when a
 * service has no featured image, so a half-populated set still looks right. */
.service-card--media {
	padding: 0;
	overflow: hidden;
	background: var(--paper);
	border: 1px solid var(--line);
}

.service-card--media .service-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--concrete-2);
}

.service-card--media .service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.service-card--media:hover .service-card__media img {
	transform: scale(1.05);
}

.service-card--media .service-card__icon {
	position: absolute;
	top: -1.6rem;
	left: 1.25rem;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	background: var(--brand);
	color: #fff;
	z-index: 1;
}

.service-card--media .service-card__icon svg {
	width: 1.6rem;
	height: 1.6rem;
}

.service-card--media .service-card__title,
.service-card--media .service-card__text {
	position: relative;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.service-card--media .service-card__title {
	margin-top: 1.5rem;
}

.service-card--media .service-card__text {
	padding-bottom: 1.5rem;
}

/* The icon badge is positioned against the card, so the card needs a frame. */
.service-card--media {
	position: relative;
}

.section--dark .section-head__link a {
	color: #fff;
	opacity: 0.75;
}

.section--dark .section-head__link a:hover {
	opacity: 1;
}

/* The band directly under a page hero does not need the full section rhythm
 * above it: the hero has already established separation, and the extra space
 * reads as the page failing to start. */
.page-hero + .section,
.page-hero + main > .section:first-child,
.page-hero + * > .section:first-child {
	padding-top: calc(var(--section) * 0.55);
}

/* Breadcrumb sits closer to the title it introduces. */
.page-hero__crumbs,
.page-hero .breadcrumb {
	margin-bottom: 0.35rem;
}

/* -------------------------------------------------------------------------
 * Floating header: breathing room, and clearance for the admin bar
 *
 * On the front page the header is absolutely positioned over the hero at
 * top: 0. Logged in, WordPress's own admin bar is fixed across the top of the
 * viewport and covers it, which clips the logo. Core handles this for fixed
 * headers but not for absolutely positioned ones, so it is handled here.
 * ---------------------------------------------------------------------- */
.has-hero .site-header__bar {
	padding-top: 0.9rem;
}

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

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

/* The hero content must clear the taller header. */
.has-hero .hero {
	padding-top: calc(var(--header-h) + 2.15rem);
}

/* -------------------------------------------------------------------------
 * Section head: closer together
 * ---------------------------------------------------------------------- */

/* The eyebrow sat almost a full line above its heading. */
.section-head .eyebrow,
.hero__eyebrow {
	margin-bottom: 0.5rem;
}

.section-head h2::after {
	margin-top: 0.55rem;
}

.section-head__link {
	margin-top: 0.45rem;
}