/* ==========================================================================
   Silver Builders — main stylesheet
   Brand: Navy #1A2744 · Gold #B8972B · Off-white #F7F5F0 · Dark #111827
   Most tokens come from theme.json; this file adds component polish.
   ========================================================================== */

:root {
	--sb-shadow: 0 18px 50px -28px rgba(17, 24, 39, 0.45);
	--sb-shadow-soft: 0 10px 30px -22px rgba(17, 24, 39, 0.4);
	--sb-transition: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Collapse the root block-gap WordPress inserts between the top-level header,
   main and footer sections. Each has its own background, so the hero should sit
   flush under the header rather than showing a strip of page background. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* --- Shared helpers --------------------------------------------------- */

/* Gold eyebrow / kicker label above headings */
.sb-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.75rem;
}

/* Short gold rule used as a section accent */
.sb-rule {
	width: 64px;
	height: 3px;
	background: var(--wp--preset--color--gold);
	border: 0;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
.sb-rule.is-centered {
	margin-left: auto;
	margin-right: auto;
}

.has-serif-font-family {
	font-family: var(--wp--preset--font-family--serif);
}

/* Dark sections: set a white base colour on the container so text inherits
   white, while still letting accent classes (gold numbers) win. */
.sb-section-dark {
	color: var(--wp--preset--color--white);
}
.sb-section-dark .sb-eyebrow {
	color: var(--wp--preset--color--gold-soft);
}
.sb-section-dark :is(h1, h2, h3, h4, h5, h6),
.sb-section-dark li {
	color: var(--wp--preset--color--white);
}

/* --- Buttons ---------------------------------------------------------- */

.wp-block-button__link {
	transition: transform var(--sb-transition), box-shadow var(--sb-transition), background-color var(--sb-transition), color var(--sb-transition);
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(184, 151, 43, 0.7);
}

/* Secondary button — navy outline, used via the "is-style-outline" variation */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--navy);
}
.sb-section-dark .wp-block-button.is-style-outline .wp-block-button__link,
.sb-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	box-shadow: var(--sb-shadow-soft);
}
.sb-section-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.sb-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

/* --- Site header ------------------------------------------------------ */

.sb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* NOTE: do not use backdrop-filter/filter/transform here — they make this
	   element the containing block for the mobile menu's position:fixed overlay,
	   which traps and clips it inside the header bar. Keep a solid background. */
	background: var(--wp--preset--color--off-white);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.sb-header .wp-block-site-title a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}
.sb-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
	font-weight: 500;
}
.sb-header .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}
.sb-header .wp-block-navigation a:hover,
.sb-header .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--gold);
}

/* Contact rendered as a gold pill button — only when the nav is inline
   (desktop / tablet). Inside the mobile overlay it stays a plain menu item. */
@media (min-width: 600px) {
	.sb-header .wp-block-navigation:not(.is-menu-open) .sb-nav-cta > a {
		background: var(--wp--preset--color--gold);
		color: var(--wp--preset--color--dark);
		padding: 0.65rem 1.4rem;
		border-radius: var(--wp--custom--radius);
		font-weight: 600;
		font-size: 0.8rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		transition: background-color var(--sb-transition);
	}
	.sb-header .wp-block-navigation:not(.is-menu-open) .sb-nav-cta > a:hover {
		background: var(--wp--preset--color--gold-soft);
		color: var(--wp--preset--color--dark);
	}
}

/* Mobile menu overlay (full-screen, on-brand) */
.sb-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--off-white);
	padding: 5rem 1.5rem 2.5rem;
}
.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	justify-content: center;
}
.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.4rem;
}
.sb-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.6rem;
}
.sb-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--gold);
}
.sb-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--navy);
}

/* --- Hero ------------------------------------------------------------- */

.sb-hero {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--white);
	overflow: hidden;
}
.sb-hero.has-background-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 24, 39, 0.55) 0%, rgba(26, 39, 68, 0.82) 100%);
	z-index: 1;
}
.sb-hero > .wp-block-group__inner-container,
.sb-hero > * {
	position: relative;
	z-index: 2;
}
.sb-hero :is(h1, h2, p) {
	color: var(--wp--preset--color--white);
}
.sb-hero h1 {
	max-width: 16ch;
}
.sb-hero__lead {
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--medium);
	color: rgba(255, 255, 255, 0.86) !important;
}

/* Placeholder background when no hero image has been set yet */
.sb-hero-placeholder {
	background:
		radial-gradient(1200px 500px at 70% -10%, rgba(184, 151, 43, 0.25), transparent 60%),
		linear-gradient(160deg, #1A2744 0%, #111827 100%);
}

/* --- Sections --------------------------------------------------------- */

.sb-section {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

/* --- Stats ------------------------------------------------------------ */

.sb-stats .wp-block-column {
	text-align: center;
}
.sb-stat__num {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--gold);
	margin: 0 0 0.4rem;
}
.sb-stat__label {
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	margin: 0;
}
.sb-section-dark .sb-stat__label {
	color: rgba(255, 255, 255, 0.78);
}

/* --- Project cards ---------------------------------------------------- */

.sb-card {
	position: relative;
	display: block;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	height: 100%;
	transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}
.sb-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--sb-shadow);
}
.sb-card__media {
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(135deg, #20304f 0%, #111827 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.35);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.9rem;
	letter-spacing: 0.05em;
}
.sb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sb-card__body {
	padding: 1.4rem 1.5rem 1.6rem;
}
.sb-card__tag {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 0.4rem;
}
.sb-card__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.3rem;
	line-height: 1.2;
}
.sb-card__meta {
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* --- Feature list (Why choose) --------------------------------------- */

.sb-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sb-checklist li {
	position: relative;
	padding-left: 2.1rem;
	margin-bottom: 1.1rem;
	font-size: var(--wp--preset--font-size--medium);
}
.sb-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 1px var(--wp--preset--color--gold);
}
.sb-checklist li::after {
	content: "";
	position: absolute;
	left: 0.4rem;
	top: 0.62em;
	width: 0.3rem;
	height: 0.55rem;
	border: solid var(--wp--preset--color--navy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Big "4 decades" badge */
.sb-decades {
	text-align: center;
}
.sb-decades__num {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(5rem, 12vw, 9rem);
	font-weight: 700;
	line-height: 0.9;
	color: var(--wp--preset--color--gold-soft);
}

/* --- Value / pillar cards (About, Services) -------------------------- */

.sb-pillar {
	height: 100%;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius);
	padding: 2rem 1.75rem;
	transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}
.sb-pillar:hover {
	transform: translateY(-4px);
	box-shadow: var(--sb-shadow-soft);
}
.sb-pillar h3 {
	margin-top: 0;
}

/* --- Leadership cards ------------------------------------------------- */

.sb-leader {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	height: 100%;
}
.sb-leader__photo {
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #20304f 0%, #111827 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.4);
	font-family: var(--wp--preset--font-family--serif);
}
.sb-leader__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sb-leader__body {
	padding: 1.75rem;
}
.sb-leader__role {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0.2rem 0 1rem;
}

/* --- Contact ---------------------------------------------------------- */

.sb-contact-item {
	margin-bottom: 1.75rem;
}
.sb-contact-item h4 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 0.4rem;
}
.sb-contact-item p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--navy);
}

.sb-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1.1rem;
}
.sb-form-field label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.sb-form-field input,
.sb-form-field select,
.sb-form-field textarea {
	font: inherit;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	width: 100%;
}
.sb-form-field input:focus,
.sb-form-field select:focus,
.sb-form-field textarea:focus {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--gold);
}
.sb-form button[type="submit"] {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--dark);
	border: 0;
	border-radius: var(--wp--custom--radius);
	padding: 1rem 2.25rem;
	cursor: pointer;
	transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}
.sb-form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(184, 151, 43, 0.7);
}

/* --- Site footer ------------------------------------------------------ */

.sb-footer {
	background: var(--wp--preset--color--dark);
	color: rgba(255, 255, 255, 0.72);
}
.sb-footer :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--white);
}
.sb-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}
.sb-footer a:hover {
	color: var(--wp--preset--color--gold-soft);
}
.sb-footer .wp-block-navigation {
	font-size: 0.92rem;
}
.sb-footer__brand {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--white);
}
.sb-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
}

/* --- Page intro banner ----------------------------------------------- */

.sb-page-banner {
	background: linear-gradient(160deg, #1A2744 0%, #111827 100%);
	color: var(--wp--preset--color--white);
	position: relative;
}
.sb-page-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(900px 360px at 80% -20%, rgba(184, 151, 43, 0.18), transparent 60%);
	pointer-events: none;
}
.sb-page-banner :is(h1, p) {
	color: var(--wp--preset--color--white);
	position: relative;
	z-index: 1;
}

/* --- Small screens ---------------------------------------------------- */

@media (max-width: 600px) {
	.sb-hero {
		min-height: 78vh;
	}
	.sb-section {
		padding-top: var(--wp--preset--spacing--70);
		padding-bottom: var(--wp--preset--spacing--70);
	}
}

/* ==========================================================================
   Animations
   - All motion is gated behind prefers-reduced-motion: no-preference.
   - On-load + hover animations work in every browser (time-based).
   - Scroll reveals use CSS scroll-driven animations and are additionally
     gated behind @supports (animation-timeline: view()). Browsers without
     support simply show content normally — nothing is ever left hidden.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	@keyframes sbFadeUp {
		from { opacity: 0; transform: translateY(22px); }
		to   { opacity: 1; transform: none; }
	}

	@keyframes sbFadeIn {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	@keyframes sbKenBurns {
		from { transform: scale(1.001); }
		to   { transform: scale(1.09); }
	}

	/* --- Hero entrance (staggered, on page load) --- */
	.sb-hero .sb-eyebrow,
	.sb-hero h1,
	.sb-hero__lead,
	.sb-hero .wp-block-buttons {
		animation: sbFadeUp 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.sb-hero .sb-eyebrow { animation-delay: 0.15s; }
	.sb-hero h1 { animation-delay: 0.3s; }
	.sb-hero__lead { animation-delay: 0.55s; }
	.sb-hero .wp-block-buttons { animation-delay: 0.8s; }

	/* --- Hero background slow zoom --- */
	.sb-hero img.wp-block-cover__image-background {
		animation: sbKenBurns 20s ease-out both;
	}

	/* --- Card image zoom on hover --- */
	.sb-card__media img {
		transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
		will-change: transform;
	}
	.sb-card:hover .sb-card__media img {
		transform: scale(1.06);
	}

	/* --- Animated gold rule on hover of its section heading group --- */
	.sb-rule {
		transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	/* --- Scroll-driven reveals (progressive enhancement) --- */
	@supports (animation-timeline: view()) {

		@keyframes sbReveal {
			from { opacity: 0; transform: translateY(30px); }
			to   { opacity: 1; transform: none; }
		}

		.sb-section .sb-eyebrow,
		.sb-section .wp-block-heading,
		.sb-section > .wp-block-group > .sb-rule,
		.sb-section .wp-block-image,
		.sb-card,
		.sb-pillar,
		.sb-leader,
		.sb-stats .wp-block-column,
		.sb-checklist li,
		.sb-decades__num {
			animation: sbReveal 1ms linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}

		/* Gentle cascade for items sitting side-by-side in a row */
		.wp-block-columns > .wp-block-column:nth-child(2) :is(.sb-card, .sb-pillar, .sb-leader),
		.sb-stats .wp-block-column:nth-child(2) {
			animation-range: entry 9% cover 26%;
		}
		.wp-block-columns > .wp-block-column:nth-child(3) :is(.sb-card, .sb-pillar, .sb-leader),
		.sb-stats .wp-block-column:nth-child(3) {
			animation-range: entry 13% cover 30%;
		}
		.wp-block-columns > .wp-block-column:nth-child(4) .sb-card,
		.sb-stats .wp-block-column:nth-child(4) {
			animation-range: entry 17% cover 34%;
		}
		.sb-checklist li:nth-child(2) { animation-range: entry 8% cover 24%; }
		.sb-checklist li:nth-child(3) { animation-range: entry 11% cover 26%; }
		.sb-checklist li:nth-child(4) { animation-range: entry 14% cover 28%; }
		.sb-checklist li:nth-child(5) { animation-range: entry 17% cover 30%; }
	}
}