/*
 * Top 2 Bottom theme stylesheet.
 *
 * Sourced from DESIGN.md. All values are token-driven via CSS custom
 * properties so the WordPress block editor and the front-end share one
 * source of truth. Tokens prefixed --wp-- are emitted automatically by
 * WordPress from theme.json; tokens prefixed --t2b-- are layered on top.
 */

/* ============================================================
   Tokens — bridge theme.json presets to authoring-friendly names.
   ============================================================ */
:root {
	--t2b-primary:           var(--wp--preset--color--primary);
	--t2b-primary-bright:    var(--wp--preset--color--primary-bright);
	--t2b-primary-deep:      var(--wp--preset--color--primary-deep);
	--t2b-primary-soft:      var(--wp--preset--color--primary-soft);
	--t2b-gold:              var(--wp--preset--color--accent-gold);
	--t2b-gold-deep:         var(--wp--preset--color--accent-gold-deep);
	--t2b-gold-soft:         var(--wp--preset--color--accent-gold-soft);
	--t2b-ink:               var(--wp--preset--color--ink);
	--t2b-ink-soft:          var(--wp--preset--color--ink-soft);
	--t2b-canvas:            var(--wp--preset--color--canvas);
	--t2b-paper:             var(--wp--preset--color--paper);
	--t2b-cloud:             var(--wp--preset--color--cloud);
	--t2b-fog:               var(--wp--preset--color--fog);
	--t2b-stone:             var(--wp--preset--color--stone);
	--t2b-charcoal:          var(--wp--preset--color--charcoal);
	--t2b-graphite:          var(--wp--preset--color--graphite);
	--t2b-star:              var(--wp--preset--color--star-gold);

	--t2b-radius-sm:         4px;
	--t2b-radius-md:         6px;
	--t2b-radius-lg:         12px;
	--t2b-radius-xl:         16px;
	--t2b-radius-xxl:        24px;
	--t2b-radius-pill:       9999px;

	--t2b-space-xxs:         4px;
	--t2b-space-xs:          8px;
	--t2b-space-sm:          12px;
	--t2b-space-md:          16px;
	--t2b-space-lg:          24px;
	--t2b-space-xl:          32px;
	--t2b-space-xxl:         48px;
	--t2b-space-xxxl:        64px;
	--t2b-space-section:     96px;

	--t2b-shadow-soft:       0 4px 16px rgba(26, 26, 26, 0.06);
	--t2b-shadow-lifted:     0 12px 32px rgba(26, 26, 26, 0.10);
	--t2b-shadow-floating:   0 24px 48px rgba(26, 26, 26, 0.18);

	--t2b-font-display:      var(--wp--preset--font-family--display);
	--t2b-font-body:         var(--wp--preset--font-family--body);

	--t2b-container:         1280px;
	--t2b-container-narrow:  780px;

	--t2b-transition-fast:   150ms ease;
	--t2b-transition-medium: 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--t2b-canvas);
	color: var(--t2b-ink);
	font-family: var(--t2b-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }

a { color: var(--t2b-primary); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--t2b-primary-deep); }

:focus-visible {
	outline: 2px solid var(--t2b-primary);
	outline-offset: 2px;
	border-radius: var(--t2b-radius-sm);
}

/* Dark surface focus ring — marine blue on near-black fails AA, so swap to
   brass gold which hits ≥ 3:1 against both --t2b-ink and the deep navy CTA. */
.site-footer :focus-visible,
.utility-strip :focus-visible,
.cta-band :focus-visible,
.is-style-t2b-cta-band-dark :focus-visible,
.t2b-hero--dark :focus-visible {
	outline-color: var(--t2b-gold);
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--t2b-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}
.container--narrow { max-width: var(--t2b-container-narrow); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important; clip-path: none;
	background-color: var(--t2b-canvas); color: var(--t2b-ink);
	padding: var(--t2b-space-sm) var(--t2b-space-md);
	width: auto; height: auto; left: var(--t2b-space-sm); top: var(--t2b-space-sm);
	z-index: 100000; box-shadow: var(--t2b-shadow-lifted);
}
.skip-link { position: absolute; top: -100px; left: var(--t2b-space-sm); z-index: 100000; }
.skip-link:focus { top: var(--t2b-space-sm); }

/* ============================================================
   Buttons
   ============================================================ */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--t2b-space-xs);
	padding: 14px 28px;
	min-height: 48px;
	border: 1.5px solid transparent;
	border-radius: var(--t2b-radius-md);
	font-family: var(--t2b-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--t2b-transition-fast),
	            border-color   var(--t2b-transition-fast),
	            color          var(--t2b-transition-fast),
	            transform      var(--t2b-transition-fast);
}
.button:hover, .button:focus-visible { transform: translateY(-1px); }

.button--primary {
	background: var(--t2b-primary);
	color: var(--t2b-canvas);
}
.button--primary:hover, .button--primary:focus-visible { background: var(--t2b-primary-deep); color: var(--t2b-canvas); }

.button--ink { background: var(--t2b-ink); color: var(--t2b-canvas); }
.button--ink:hover, .button--ink:focus-visible { background: #000; color: var(--t2b-canvas); }

.button--gold { background: var(--t2b-gold); color: var(--t2b-ink); }
.button--gold:hover, .button--gold:focus-visible { background: var(--t2b-gold-deep); color: var(--t2b-canvas); }

.button--outline { background: var(--t2b-canvas); color: var(--t2b-primary); border-color: var(--t2b-primary); }
.button--outline:hover, .button--outline:focus-visible { background: var(--t2b-primary); color: var(--t2b-canvas); }

.button--outline-ink { background: var(--t2b-canvas); color: var(--t2b-ink); border-color: var(--t2b-ink); }
.button--outline-ink:hover, .button--outline-ink:focus-visible { background: var(--t2b-ink); color: var(--t2b-canvas); }

.button--text-link {
	background: transparent;
	color: var(--t2b-primary);
	border: 0;
	text-transform: none;
	letter-spacing: 0;
	padding-inline: 0;
	min-height: auto;
}
.button--text-link strong { color: inherit; }

/* ============================================================
   Utility strip
   ============================================================ */
.utility-strip {
	background: var(--t2b-ink);
	color: var(--t2b-canvas);
	font-size: 13px;
}
.utility-strip__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--t2b-space-lg);
	align-items: center;
	min-height: 40px;
	padding-block: var(--t2b-space-xs);
}
.utility-strip__item {
	display: inline-flex;
	align-items: center;
	gap: var(--t2b-space-xs);
	color: inherit;
	text-decoration: none;
	min-height: 32px;
}
.utility-strip__item:hover, .utility-strip__item:focus-visible { color: var(--t2b-gold); }
.utility-strip__icon { opacity: 0.7; }
.utility-strip__social {
	margin-left: auto;
	width: 32px; height: 32px;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--t2b-radius-pill);
}
@media (max-width: 767px) { .utility-strip { display: none; } }

/* ============================================================
   Site header
   ============================================================ */
.site-header {
	background: var(--t2b-canvas);
	border-bottom: 1px solid var(--t2b-fog);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--t2b-space-lg);
	min-height: 80px;
}
.site-header__brand { text-decoration: none; color: var(--t2b-ink); display: inline-flex; align-items: center; }
.site-header__logo { display: inline-flex; line-height: 0; color: inherit; }
.site-header__logo svg { display: block; width: auto; height: 56px; max-width: 100%; }
@media (max-width: 767px) {
	.site-header__logo svg { height: 44px; }
}
.site-header__wordmark {
	font-family: var(--t2b-font-display);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.1;
	max-width: 220px;
}
@media (max-width: 480px) {
	.site-header__wordmark {
		font-size: 18px;
		max-width: 180px;
	}
}
/* Footer logo recolour. */
.site-footer .site-header__logo,
.cta-band-dark .site-header__logo { color: #fff; }
.site-nav { margin-inline: auto; }
.site-nav__menu {
	display: flex;
	gap: var(--t2b-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__menu a {
	display: inline-block;
	padding: var(--t2b-space-xs) var(--t2b-space-sm);
	color: var(--t2b-ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.site-nav__menu a:hover,
.site-nav__menu a:focus-visible,
.site-nav__menu a[aria-current="page"],
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-menu-ancestor > a { border-bottom-color: var(--t2b-primary); color: var(--t2b-primary); }
.site-header__actions { display: flex; align-items: center; gap: var(--t2b-space-md); }
.site-header__menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	width: 44px; height: 44px;
	padding: 0;
}
.site-header__menu-toggle-bar {
	display: block; width: 24px; height: 2px;
	background: var(--t2b-ink); margin: 5px auto;
}
@media (max-width: 1023px) {
	.site-nav {
		position: absolute;
		inset: 80px 0 auto 0;
		background: var(--t2b-canvas);
		display: none;
		box-shadow: var(--t2b-shadow-soft);
		max-height: calc(100vh - 80px);
		max-height: calc(100dvh - 80px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.site-nav.is-open { display: block; }
	.site-nav__menu { flex-direction: column; padding: var(--t2b-space-md); }
	.site-header__menu-toggle { display: block; order: 3; }
	.site-header__actions { order: 2; margin-left: auto; }
	.site-header__cta { display: none; }
}

/* Rating pill */
.rating-pill {
	display: inline-flex; align-items: center; gap: var(--t2b-space-xs);
	padding: 8px 14px;
	background: var(--t2b-canvas);
	color: var(--t2b-ink);
	border: 1px solid var(--t2b-fog);
	border-radius: var(--t2b-radius-pill);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}
.rating-pill__stars { color: var(--t2b-star); letter-spacing: -0.05em; }
.rating-pill__count { color: var(--t2b-graphite); font-weight: 400; font-size: 13px; }
@media (max-width: 767px) {
	.rating-pill__count { display: none; }
	.rating-pill { padding: 6px 10px; font-size: 13px; }
}

/* ============================================================
   Trust bar
   ============================================================ */
.trust-bar {
	background: var(--t2b-paper);
	border-block: 1px solid var(--t2b-fog);
}
.trust-bar__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--t2b-space-lg);
	padding-block: var(--t2b-space-md);
}
.trust-bar__item {
	display: inline-flex; align-items: center; gap: var(--t2b-space-xs);
	font-size: 14px; font-weight: 600;
}
.trust-bar__item:nth-child(2) { justify-content: center; }
.trust-bar__item:nth-child(3) { justify-content: flex-end; }
.trust-bar__icon { color: var(--t2b-star); }
.trust-bar__item:nth-child(2) .trust-bar__icon { color: var(--t2b-gold-deep); }
.trust-bar__item:nth-child(3) .trust-bar__icon { color: var(--t2b-primary); }
@media (max-width: 767px) {
	.trust-bar__inner { grid-template-columns: 1fr; text-align: center; }
	.trust-bar__item, .trust-bar__item:nth-child(2), .trust-bar__item:nth-child(3) { justify-content: center; }
}

/* ============================================================
   Area strip
   ============================================================ */
.area-strip {
	background: var(--t2b-cloud);
	padding-block: var(--t2b-space-lg);
}
.area-strip__inner {
	display: flex; flex-wrap: wrap; gap: var(--t2b-space-md);
	align-items: center;
}
.area-strip__label { font-weight: 600; color: var(--t2b-charcoal); }
.area-strip__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--t2b-space-sm) var(--t2b-space-md);
	align-items: center;
}
.area-strip__item + .area-strip__item::before {
	content: "·"; color: var(--t2b-graphite); margin-right: var(--t2b-space-md);
}
.area-strip__item a {
	color: var(--t2b-ink);
	text-decoration: none;
	font-weight: 500;
}
.area-strip__item a:hover, .area-strip__item a:focus-visible { color: var(--t2b-primary); text-decoration: underline; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
	background: var(--t2b-ink);
	color: var(--t2b-canvas);
	padding-block: var(--t2b-space-section);
	text-align: center;
}
.cta-band__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--t2b-gold);
	margin: 0 0 var(--t2b-space-md);
}
.cta-band__heading {
	font-family: var(--t2b-font-display);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.005em;
	margin: 0 0 var(--t2b-space-md);
	color: var(--t2b-canvas);
}
.cta-band__lead {
	font-size: 18px;
	line-height: 1.55;
	max-width: 56ch;
	margin: 0 auto var(--t2b-space-xl);
	color: rgba(255, 255, 255, 0.85);
}
.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--t2b-space-lg);
}
.cta-band__actions .button--text-link { color: var(--t2b-canvas); }
.cta-band__actions .button--text-link:hover { color: var(--t2b-gold); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--t2b-ink);
	color: var(--t2b-canvas);
	padding-block: var(--t2b-space-section);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--t2b-space-xxl);
}
.site-footer__heading {
	font-family: var(--t2b-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--t2b-gold);
	margin: 0 0 var(--t2b-space-md);
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--t2b-space-xs); }
.site-footer__col a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer__col a:hover, .site-footer__col a:focus-visible { color: var(--t2b-canvas); text-decoration: underline; }
.site-footer__social {
	display: flex; gap: var(--t2b-space-sm); margin-top: var(--t2b-space-md);
}
.site-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--t2b-radius-pill);
	color: var(--t2b-canvas);
	font-weight: 700;
}
.site-footer__social a:hover, .site-footer__social a:focus-visible {
	border-color: var(--t2b-gold);
	color: var(--t2b-gold);
}
.site-footer__legal {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--t2b-space-md);
	margin-top: var(--t2b-space-xxl);
	padding-top: var(--t2b-space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	color: var(--t2b-stone);
}
.site-footer__legal-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: var(--t2b-space-md); flex-wrap: wrap;
}
.site-footer__legal-menu a { color: inherit; text-decoration: none; }
.site-footer__legal-menu a:hover { color: var(--t2b-canvas); text-decoration: underline; }
@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .site-footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Page basics + first-run notice
   ============================================================ */
.site-main { min-height: 60vh; }
.page__header { padding-block: var(--t2b-space-xxxl) var(--t2b-space-xl); }
.page__title { margin: 0; }

/* Constrain bare blocks emitted by the_content() so they don't span the
   viewport. Patterns that use align:full carry their own internal
   constrained layout, so leave alignfull/alignwide children alone. */
.page__content > *:not(.alignfull):not(.alignwide) {
	width: 100%;
	max-width: var(--t2b-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}
.page__content > .alignwide {
	width: 100%;
	max-width: var(--t2b-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}
.first-run {
	padding-block: var(--t2b-space-section);
	text-align: center;
}
.first-run .lead { font-size: 18px; color: var(--t2b-charcoal); }

/* ============================================================
   Editor — register custom block-style overrides
   ============================================================ */
/* Use :where() to keep specificity at 0 so inline pattern overrides (e.g. white-on-dark hero CTA) win without !important. */
:where(.is-style-t2b-outline    .wp-block-button__link) { background: var(--t2b-canvas); color: var(--t2b-primary); border: 1.5px solid var(--t2b-primary); }
:where(.is-style-t2b-outline-ink .wp-block-button__link) { background: var(--t2b-canvas); color: var(--t2b-ink);     border: 1.5px solid var(--t2b-ink); }
:where(.is-style-t2b-gold       .wp-block-button__link) { background: var(--t2b-gold);   color: var(--t2b-ink); }
:where(.is-style-t2b-ink        .wp-block-button__link) { background: var(--t2b-ink);    color: var(--t2b-canvas); }
/* Dark-hero variant — white outline on transparent, for over-photography CTAs */
:where(.is-style-t2b-outline-light .wp-block-button__link) { background: transparent; color: #fff; border: 1.5px solid #fff; }
.is-style-t2b-cta-band-dark { background: var(--t2b-ink); color: var(--t2b-canvas); padding-block: var(--t2b-space-section); }
.is-style-t2b-cloud-band    { background: var(--t2b-cloud); padding-block: var(--t2b-space-section); }
.is-style-t2b-paper-band    { background: var(--t2b-paper); padding-block: var(--t2b-space-section); }
.is-style-t2b-quote-lg {
	font-family: var(--t2b-font-display);
	font-size: clamp(22px, 3vw, 28px);
	font-style: italic;
	line-height: 1.35;
	border-left: 3px solid var(--t2b-gold);
	padding-left: var(--t2b-space-lg);
}
.is-style-t2b-gold-rule { background: var(--t2b-gold); height: 2px; border: 0; }

/* ============================================================
   Project / service common scaffolding
   ============================================================ */
.t2b-section { padding-block: var(--t2b-space-xxxl); }
.t2b-section--narrow { padding-block: var(--t2b-space-xl); }
.t2b-hero { padding-block: var(--t2b-space-xxxl); background: var(--t2b-paper); }
.t2b-hero__title { font-family: var(--t2b-font-display); font-size: clamp(32px, 5vw, 56px); line-height: 1.05; margin: 0 0 var(--t2b-space-md); }

/* Homepage hero — cap the inner content column at the same width as the
   site-header .container so the hero aligns horizontally with the nav bar. */
.t2b-hero-home__content { width: 100%; max-width: var(--t2b-container); margin-inline: auto; }
.t2b-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t2b-gold-deep); margin: 0 0 var(--t2b-space-sm); }
.t2b-h2 { font-family: var(--t2b-font-display); font-size: clamp(24px, 3vw, 36px); margin: 0 0 var(--t2b-space-lg); }

/* Reviews — used on /reviews/ for both the live Google grid and the
   curated testimonials archive. Mirrors the homepage reviews-grid pattern
   so cards look consistent across the site. */
.t2b-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--t2b-space-xs);
	margin: 0 0 var(--t2b-space-xl);
	padding: 10px 18px;
	background: var(--t2b-canvas);
	border: 1px solid var(--t2b-fog);
	border-radius: var(--t2b-radius-pill);
	font-weight: 500;
	font-size: 16px;
}
.t2b-trust-pill__stars { color: var(--t2b-star); letter-spacing: -0.05em; }

.t2b-reviews-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--t2b-space-lg);
}
@media (max-width: 1023px) { .t2b-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .t2b-reviews-grid { grid-template-columns: 1fr; } }
.t2b-reviews-grid__item { display: flex; }

.t2b-review {
	margin: 0;
	padding: var(--t2b-space-xl);
	background: var(--t2b-canvas);
	border: 1px solid var(--t2b-fog);
	border-radius: var(--t2b-radius-xl);
	display: flex;
	flex-direction: column;
	width: 100%;
}
.t2b-review__rating {
	margin: 0 0 var(--t2b-space-md);
	color: var(--t2b-star);
	letter-spacing: 0.05em;
	font-size: 20px;
	line-height: 1;
}
.t2b-review__text {
	margin: 0 0 var(--t2b-space-lg);
	font-size: 16px;
	line-height: 1.6;
	color: var(--t2b-ink-soft);
	flex: 1 1 auto;
}
.t2b-review__text > :first-child { margin-top: 0; }
.t2b-review__text > :last-child  { margin-bottom: 0; }
.t2b-review__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--t2b-space-xs) var(--t2b-space-sm);
	font-size: 14px;
	color: var(--t2b-graphite);
}
.t2b-review__meta cite {
	font-style: normal;
	font-weight: 600;
	color: var(--t2b-ink);
	font-size: 15px;
}
.t2b-review__loc { color: var(--t2b-graphite); }
.t2b-review__source {
	margin-left: auto;
	font-size: 13px;
	text-decoration: none;
}
.t2b-review__source:hover, .t2b-review__source:focus-visible { text-decoration: underline; }

.t2b-section--reviews-live + .t2b-section--reviews-curated { padding-top: 0; }

.t2b-prose { padding-block: var(--t2b-space-xl); }
.t2b-prose > * + * { margin-top: var(--t2b-space-md); }
.t2b-prose h2 { font-family: var(--t2b-font-display); font-size: clamp(22px, 2.4vw, 30px); margin-top: var(--t2b-space-xxl); }
.t2b-prose h3 { font-family: var(--t2b-font-display); font-size: clamp(19px, 2vw, 24px); margin-top: var(--t2b-space-xl); }
.t2b-prose ul, .t2b-prose ol { padding-left: 1.25em; }
.t2b-prose li + li { margin-top: var(--t2b-space-xs); }

.t2b-chips { list-style: none; padding: 0; margin: var(--t2b-space-md) 0 0; display: flex; flex-wrap: wrap; gap: var(--t2b-space-xs); }
.t2b-chips__item a { display: inline-block; padding: 4px 12px; border-radius: var(--t2b-radius-pill); background: var(--t2b-cloud); color: var(--t2b-ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.t2b-chips__item--area a { background: var(--t2b-primary-soft); color: var(--t2b-primary-deep); }
.t2b-chips__item a:hover, .t2b-chips__item a:focus-visible { background: var(--t2b-primary); color: #fff; }

.t2b-project-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--t2b-space-lg); }
@media (max-width: 767px) { .t2b-project-grid { grid-template-columns: 1fr; } }
.t2b-project-grid__link { text-decoration: none; color: inherit; display: block; }
.t2b-project-grid__thumb { border-radius: var(--t2b-radius-lg); aspect-ratio: 1; object-fit: cover; }
.t2b-project-grid__title { font-family: var(--t2b-font-display); font-size: 18px; margin: var(--t2b-space-sm) 0 0; }

/* ============================================================
   Page header (CPT archives) — plain band + optional hero image
   ============================================================ */
.t2b-page-header { padding-block: var(--t2b-space-xxxl) var(--t2b-space-xl); background: var(--t2b-paper); border-bottom: 1px solid var(--t2b-fog); }
.t2b-page-header__title { font-family: var(--t2b-font-display); font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 var(--t2b-space-md); }
.t2b-page-header__lead { font-size: 18px; line-height: 1.55; color: var(--t2b-graphite); margin: 0; }
.t2b-page-header__eyebrow { margin-bottom: var(--t2b-space-sm); }

.t2b-page-header--with-image { position: relative; overflow: hidden; border-bottom: 0; background: var(--t2b-ink); padding-block: clamp(96px, 14vw, 200px); }
.t2b-page-header--with-image .t2b-page-header__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.t2b-page-header--with-image .t2b-page-header__scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(15,18,24,0.78) 0%, rgba(15,18,24,0.58) 45%, rgba(15,18,24,0.36) 100%); z-index: 1; pointer-events: none; }
.t2b-page-header--with-image .t2b-page-header__inner { position: relative; z-index: 2; }
.t2b-page-header--with-image .t2b-page-header__title { color: #ffffff; text-shadow: 0 1px 24px rgba(0,0,0,0.35); }
.t2b-page-header--with-image .t2b-page-header__lead { color: rgba(255,255,255,0.92); max-width: 64ch; }
.t2b-page-header--with-image .t2b-page-header__eyebrow { color: var(--t2b-brass, #c9a35a); }

/* ============================================================
   Parallax content bands — photographic flooring backdrops
   --------------------------------------------------------------
   Apply `.t2b-parallax` plus a `--<texture>` variant on any
   alignfull `wp:group`. On desktop, background-attachment: fixed
   gives the true parallax effect; on touch devices and for users
   with reduced-motion preferences, it falls back to a static
   cover so the page remains performant and comfortable.
   ============================================================ */
.t2b-parallax { position: relative; isolation: isolate; overflow: hidden; }
.t2b-parallax::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--t2b-parallax-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	will-change: transform;
}
.t2b-parallax::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--t2b-parallax-overlay, rgba(15, 18, 24, 0.78));
	pointer-events: none;
}
.t2b-parallax > * { position: relative; z-index: 2; }

/* Variants — set the image and override the overlay if needed. */
.t2b-parallax--oak {
	--t2b-parallax-image: url("/wp-content/uploads/2026/06/parallax-oak-plank.png");
	--t2b-parallax-overlay: linear-gradient(180deg, rgba(15,18,24,0.85) 0%, rgba(15,18,24,0.72) 100%);
}
.t2b-parallax--wool {
	--t2b-parallax-image: url("/wp-content/uploads/2026/06/parallax-wool-pile.png");
	/* Subtler scrim on light-text bands so the carpet pile breathes through. */
	--t2b-parallax-overlay: linear-gradient(180deg, rgba(251,250,247,0.88) 0%, rgba(251,250,247,0.82) 100%);
}
.t2b-parallax--herringbone {
	--t2b-parallax-image: url("/wp-content/uploads/2026/06/parallax-herringbone.png");
	/* Cloud-tinted scrim — the area cards have their own paper fill, so the
	   herringbone only needs to read between cards and behind the heading. */
	--t2b-parallax-overlay: linear-gradient(180deg, rgba(233,236,240,0.90) 0%, rgba(233,236,240,0.84) 100%);
}

/* Mobile + reduced-motion fall back from fixed → scroll. iOS Safari + most
   Android browsers either ignore fixed entirely or break it for full-bleed
   sections, so this is both a performance and a correctness win. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.t2b-parallax::before { background-attachment: scroll; }
}

/* Gallery filter pills */
.t2b-section--filters { padding-block: var(--t2b-space-lg); }
.t2b-filter-buttons {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--t2b-space-sm);
	justify-content: center;
}
.t2b-filter-buttons__btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: var(--t2b-canvas);
	color: var(--t2b-ink);
	border: 1px solid var(--t2b-fog);
	border-radius: var(--t2b-radius-pill);
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.t2b-filter-buttons__btn:hover,
.t2b-filter-buttons__btn:focus-visible {
	border-color: var(--t2b-primary);
	color: var(--t2b-primary);
	outline: none;
}
.t2b-filter-buttons__btn.is-active {
	background: var(--t2b-ink);
	color: var(--t2b-canvas);
	border-color: var(--t2b-ink);
}
.t2b-project-grid__item.is-hidden { display: none; }

/* ============================================================
   Service card grid (archive)
   ============================================================ */
.t2b-service-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--t2b-space-lg);
}
@media (max-width: 1023px) { .t2b-service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .t2b-service-grid { grid-template-columns: 1fr; } }
.t2b-service-card { background: var(--t2b-canvas); border: 1px solid var(--t2b-fog); border-radius: var(--t2b-radius-lg); overflow: hidden; transition: transform var(--t2b-transition-fast), box-shadow var(--t2b-transition-fast); height: 100%; }
.t2b-service-card:hover, .t2b-service-card:focus-within { transform: translateY(-2px); box-shadow: var(--t2b-shadow-soft); }
.t2b-service-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.t2b-service-card__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.t2b-service-card__body { padding: var(--t2b-space-lg); display: grid; gap: var(--t2b-space-sm); }
.t2b-service-card__title { font-family: var(--t2b-font-display); font-size: 22px; margin: 0; }
.t2b-service-card__blurb { color: var(--t2b-graphite); margin: 0; }
.t2b-service-card__more { color: var(--t2b-primary); font-weight: 600; font-size: 14px; }

/* ============================================================
   Area card grid (archive)
   ============================================================ */
.t2b-area-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--t2b-space-lg);
}
@media (max-width: 1023px) { .t2b-area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .t2b-area-grid { grid-template-columns: 1fr; } }
.t2b-area-card { background: var(--t2b-canvas); border: 1px solid var(--t2b-fog); border-radius: var(--t2b-radius-lg); overflow: hidden; height: 100%; }
.t2b-area-card:hover, .t2b-area-card:focus-within { transform: translateY(-2px); box-shadow: var(--t2b-shadow-soft); }
.t2b-area-card__link { display: block; text-decoration: none; color: inherit; padding: var(--t2b-space-lg); height: 100%; }
.t2b-area-card__title { font-family: var(--t2b-font-display); font-size: 20px; margin: 0 0 var(--t2b-space-xs); }
.t2b-area-card__landmark { color: var(--t2b-graphite); margin: 0 0 var(--t2b-space-xs); font-size: 14px; }
.t2b-area-card__postcodes { font-family: var(--t2b-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--t2b-primary-deep); margin: 0 0 var(--t2b-space-sm); }
.t2b-area-card__more { color: var(--t2b-primary); font-weight: 600; font-size: 14px; }

/* ============================================================
   Before / after comparison slider (BP9)
   ============================================================ */
.t2b-before-after {
	position: relative;
	overflow: hidden;
	border-radius: var(--t2b-radius-lg);
	box-shadow: var(--t2b-shadow-soft);
	user-select: none;
	touch-action: pan-y;
	aspect-ratio: 16 / 10;
	background: var(--t2b-cloud);
}
.t2b-before-after__pane {
	position: absolute;
	inset: 0;
	margin: 0;
}
.t2b-before-after__pane--after {
	clip-path: inset(0 0 0 50%);
	transition: clip-path 80ms linear;
}
.t2b-before-after.is-ready .t2b-before-after__pane--after { transition: none; }
.t2b-before-after__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.t2b-before-after__label {
	position: absolute;
	top: var(--t2b-space-md);
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border-radius: var(--t2b-radius-pill);
	pointer-events: none;
}
.t2b-before-after__pane--before .t2b-before-after__label { left: var(--t2b-space-md); }
.t2b-before-after__pane--after  .t2b-before-after__label { right: var(--t2b-space-md); background: var(--t2b-gold-deep); }
.t2b-before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #fff;
	transform: translateX(-50%);
	left: 50%;
	cursor: ew-resize;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.25);
}
.t2b-before-after__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.t2b-before-after__handle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	transform: translate(-50%, -50%);
	z-index: 1;
	background-image:
		linear-gradient(45deg, transparent 45%, var(--t2b-ink) 45%, var(--t2b-ink) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--t2b-ink) 45%, var(--t2b-ink) 55%, transparent 55%);
	background-size: 100% 50%;
	background-repeat: no-repeat;
	background-position: top, bottom;
}
.t2b-before-after__handle:focus-visible {
	outline: 3px solid var(--t2b-gold);
	outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
	.t2b-before-after__pane--after { transition: none; }
}

/* ============================================================
   Fallback contact form (no WPForms)
   ============================================================ */
.t2b-contact-form { display: grid; gap: var(--t2b-space-md); }
.t2b-contact-form__field { display: grid; gap: var(--t2b-space-xs); }
.t2b-contact-form label { font-weight: 600; font-size: 14px; }
.t2b-contact-form input,
.t2b-contact-form textarea,
.t2b-contact-form select {
	font: inherit;
	padding: 12px 14px;
	border: 1px solid var(--t2b-fog);
	border-radius: var(--t2b-radius-md);
	background: var(--t2b-canvas);
	color: var(--t2b-ink);
	width: 100%;
}
.t2b-contact-form input:focus-visible,
.t2b-contact-form textarea:focus-visible,
.t2b-contact-form select:focus-visible {
	border-color: var(--t2b-primary);
	outline: 2px solid var(--t2b-primary);
	outline-offset: 0;
}
.t2b-contact-form textarea { min-height: 140px; resize: vertical; }
.t2b-contact-form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.t2b-contact-form__error,
.t2b-contact-form__success {
	padding: var(--t2b-space-md);
	border-radius: var(--t2b-radius-md);
	font-size: 14px;
}
.t2b-contact-form__error { background: #fdecea; color: #7a1d1d; border: 1px solid #f5b5af; }
.t2b-contact-form__success { background: var(--t2b-primary-soft); color: var(--t2b-primary-deep); border: 1px solid var(--t2b-primary); }

/* ============================================================
   Supplier strip
   ============================================================ */
.t2b-supplier-strip .wp-block-image img {
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter var(--t2b-transition-medium), opacity var(--t2b-transition-medium);
	max-height: 56px;
	width: auto;
}
.t2b-supplier-strip .wp-block-image:hover img,
.t2b-supplier-strip .wp-block-image:focus-within img {
	filter: grayscale(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.t2b-supplier-strip .wp-block-image img { transition: none; }
}

/* ============================================================
   Lightbox (BP10)
   ============================================================ */
.t2b-lightbox {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(10, 14, 24, 0.92);
	display: flex; align-items: center; justify-content: center;
	padding: var(--t2b-space-xl);
	opacity: 0; pointer-events: none;
	transition: opacity 200ms ease;
}
.t2b-lightbox[aria-hidden="false"] {
	opacity: 1; pointer-events: auto;
}
.t2b-lightbox__figure {
	margin: 0; max-width: 90vw; max-height: 90vh;
	display: flex; flex-direction: column; align-items: center;
}
.t2b-lightbox__img {
	max-width: 100%; max-height: 80vh;
	border-radius: var(--t2b-radius-lg);
	box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.t2b-lightbox__caption {
	color: #fff; font-size: 14px; margin-top: var(--t2b-space-md);
	max-width: 600px; text-align: center;
}
.t2b-lightbox__close,
.t2b-lightbox__prev,
.t2b-lightbox__next {
	position: absolute;
	background: rgba(255,255,255,0.1);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.25);
	width: 48px; height: 48px;
	border-radius: var(--t2b-radius-pill);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 22px; cursor: pointer;
	transition: background-color 150ms ease;
}
.t2b-lightbox__close:hover,
.t2b-lightbox__prev:hover,
.t2b-lightbox__next:hover { background: rgba(255,255,255,0.22); }
.t2b-lightbox__close { top: var(--t2b-space-md); right: var(--t2b-space-md); }
.t2b-lightbox__prev  { left:  var(--t2b-space-md); top: 50%; transform: translateY(-50%); }
.t2b-lightbox__next  { right: var(--t2b-space-md); top: 50%; transform: translateY(-50%); }
.t2b-lightbox__close:focus-visible,
.t2b-lightbox__prev:focus-visible,
.t2b-lightbox__next:focus-visible {
	outline: 3px solid var(--t2b-gold); outline-offset: 3px;
}
@media (max-width: 599px) {
	.t2b-lightbox__prev, .t2b-lightbox__next { width: 40px; height: 40px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.t2b-lightbox { transition: none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}