/* ==========================================================================
   BRICKWISE — Component layer (v1.2)
   Loaded after brickwise.css. Everything added in the site upgrade.
   ========================================================================== */

/* ------------------------------------------------------------ Accessibility */

.bw-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	background: var(--bw-navy);
	color: #fff;
	padding: 14px 22px;
	border-radius: 0 0 var(--bw-radius-sm) 0;
	font-weight: 600;
	text-decoration: none;
}

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

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

.bw-req { color: #DC2626; }

/* -------------------------------------------------------------------- Logo */

.bw-logo__img {
	display: block;
	width: auto;
	height: 46px;
	max-width: 260px;
}

.bw-logo--footer .bw-logo__img { height: 50px; }

.bw-logo__fallback {
	font-family: var(--bw-font-head);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.06em;
	color: var(--bw-navy);
}

/* ------------------------------------------------------------ Hero w/ image */

.bw-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.bw-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bw-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(13, 21, 42, 0.94) 0%, rgba(13, 21, 42, 0.82) 45%, rgba(13, 21, 42, 0.62) 100%);
}

.bw-hero--photo::before { z-index: 1; }
.bw-hero--photo .bw-hero__inner { z-index: 3; }

/* Page hero with a photo behind (projects) */
.bw-phero { position: relative; }

.bw-phero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

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

.bw-phero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(13, 21, 42, 0.93) 0%, rgba(13, 21, 42, 0.78) 100%);
}

.bw-phero--project .bw-phero__inner,
.bw-phero--article .bw-phero__inner { position: relative; z-index: 3; }

.bw-phero__sub svg { vertical-align: -3px; margin-right: 4px; color: #E9A97F; }

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

.bw-pcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	overflow: hidden;
	text-decoration: none !important;
	color: inherit;
	box-shadow: var(--bw-shadow-sm);
	transition: transform 0.25s var(--bw-ease), box-shadow 0.25s var(--bw-ease), border-color 0.25s var(--bw-ease);
	height: 100%;
}

.bw-pcard:hover {
	transform: translateY(-5px);
	box-shadow: var(--bw-shadow-lg);
	border-color: #C8CDD4;
}

.bw-pcard__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--bw-muted);
	overflow: hidden;
	flex-shrink: 0;
}

.bw-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--bw-ease);
}

.bw-pcard:hover .bw-pcard__media img { transform: scale(1.05); }

.bw-pcard__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9AA3AE;
	background: repeating-linear-gradient(45deg, #EDEAE3 0 12px, #EDEAE3 12px 24px);
}

.bw-pcard__status {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(13, 21, 42, 0.9);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 6px 12px;
	border-radius: 20px;
	backdrop-filter: blur(4px);
}

.bw-pcard__body {
	padding: 26px 26px 28px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.bw-pcard__tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bw-accent-ink);
	margin-bottom: 10px;
}

.bw-pcard__title {
	font-family: var(--bw-font-head);
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--bw-navy);
	line-height: 1.32;
	margin: 0 0 10px;
}

.bw-pcard__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	color: #646E7C;
	margin: 0 0 12px;
}

.bw-pcard__meta svg { color: var(--bw-accent); flex-shrink: 0; }

/* Country · Sector. The sector half picks up the accent ink the old standalone
   tag used, so moving it inline costs nothing in hierarchy. */
.bw-pcard__where { display: inline; }
.bw-pcard__country { color: #646E7C; }
.bw-pcard__sep { margin: 0 6px; color: #A8B0BA; }

.bw-pcard__sector {
	font-weight: 600;
	color: var(--bw-accent-ink);
}

/* --------------------------------------------------------- Project filter */

.bw-pfilter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 42px;
}

.bw-pfilter__btn {
	font-family: var(--bw-font-head);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--bw-navy);
	background: #fff;
	border: 1px solid var(--bw-border);
	border-radius: 999px;
	padding: 9px 20px;
	cursor: pointer;
	transition: background-color 0.22s var(--bw-ease), border-color 0.22s var(--bw-ease), color 0.22s var(--bw-ease);
}

.bw-pfilter__btn:hover { border-color: var(--bw-accent); color: var(--bw-accent-ink); }

.bw-pfilter__btn.is-active {
	background: var(--bw-navy);
	border-color: var(--bw-navy);
	color: #fff;
}

.bw-pfilter__btn:focus-visible {
	outline: 2px solid var(--bw-accent);
	outline-offset: 2px;
}

.bw-pfilter__empty {
	text-align: center;
	color: #646E7C;
	margin: 26px 0 0;
}

/* Cards are hidden via the hidden attribute; the grid is display:grid, whose
   items would otherwise ignore it. */
.bw-pcard[hidden] { display: none !important; }

.bw-pcard__text {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--bw-body);
	margin: 0 0 16px;
	flex-grow: 1;
}

.bw-pcard .bw-card__link { margin-top: auto; }

/* ------------------------------------------------------------- Testimonials */

.bw-quote {
	background: #fff;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	padding: 34px 30px;
	margin: 0;
	box-shadow: var(--bw-shadow-sm);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.25s var(--bw-ease), box-shadow 0.25s var(--bw-ease);
}

.bw-quote:hover { transform: translateY(-4px); box-shadow: var(--bw-shadow-md); }

.bw-quote__mark { color: var(--bw-accent); margin-bottom: 16px; display: block; }

.bw-quote blockquote {
	margin: 0 0 22px;
	font-size: 16.5px;
	line-height: 1.66;
	color: var(--bw-slate);
	flex-grow: 1;
}

.bw-quote blockquote p { margin: 0 0 0.9em; }
.bw-quote blockquote p:last-child { margin-bottom: 0; }

.bw-quote figcaption {
	border-top: 1px solid var(--bw-border);
	padding-top: 18px;
}

.bw-quote__name {
	display: block;
	font-family: var(--bw-font-head);
	font-weight: 600;
	color: var(--bw-navy);
	font-size: 16px;
}

.bw-quote__role {
	display: block;
	font-size: 14.5px;
	color: #646E7C;
	margin-top: 3px;
}

.bw-ph-tag {
	display: inline-block;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	color: #92400E;
	background: #FEF3C7;
	border: 1px solid #FDE68A;
	padding: 5px 10px;
	border-radius: 5px;
	line-height: 1.35;
}

/* ------------------------------------------------------------------ Clients */

/* The label sits between two short hairlines so the strip reads as a
   deliberate band rather than a stray line of grey text above some boxes. */
.bw-clients__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-family: var(--bw-font-head);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bw-slate-light);
	margin: 0 0 34px;
}

.bw-clients__label::before,
.bw-clients__label::after {
	content: '';
	height: 1px;
	width: 46px;
	background: var(--bw-border);
	flex: 0 0 auto;
}

.bw-clients {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 8px;
}

/* -------------------------------------------------------- Clients: marquee */

/* Full-bleed band. The strip is wider than .bw-wrap on purpose so tiles enter
   and leave beyond the content column rather than popping in at its edge. */
.bw-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Fade both ends rather than painting a gradient over them: a mask works on
	   whatever the section background happens to be, an overlay does not. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.bw-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: bw-marquee-scroll var(--bw-marquee-duration, 60s) linear infinite;
}

/* Two identical sets; translating the track by exactly one set width lands the
   second where the first began, so the seam never shows. */
@keyframes bw-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.bw-marquee__set {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
}

/* Fixed tile width inside the marquee. The wrapping strip lets tiles shrink to
   share a row; here they must not, or the two sets would measure differently
   and the -50% translate would drift out of register. */
.bw-marquee .bw-clients__item {
	flex: 0 0 auto;
	width: 210px;
	height: 84px;
	box-shadow: -1px 0 0 0 var(--bw-border);
}

.bw-marquee .bw-clients__item img { max-height: 46px; }

/* Pause on hover, and on keyboard focus anywhere inside, so a logo can be read
   or a link reached without chasing it across the screen. */
.bw-marquee:hover .bw-marquee__track,
.bw-marquee:focus-within .bw-marquee__track {
	animation-play-state: paused;
}

/* The reduced-motion fallback for this component lives in the consolidated
   prefers-reduced-motion block at the foot of this file. It has to sit after
   the max-width breakpoints, which re-assert the tile width and edge mask. */

/* Tiles are now transparent and borderless. The dashed 1px box was a
   build-time placeholder: on a finished strip it reads as an empty slot
   waiting for an image, which undercut the logos actually sitting in it. */
.bw-clients__item {
	flex: 0 1 190px;
	height: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 12px 20px;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.3s var(--bw-ease), opacity 0.3s var(--bw-ease);
}

.bw-clients__item:hover { filter: grayscale(0); opacity: 1; }

.bw-clients__item img { max-height: 52px; width: auto; object-fit: contain; }

.bw-clients__ph {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bw-slate-light);
	text-align: center;
}

/* Name-only entries: a deliberate wordmark, not a logo that failed to load.
   Greyscale/opacity are dropped here — they exist to calm competing logo
   colours, and applied to plain type they just look faded. */
.bw-clients__item--text {
	filter: none;
	opacity: 1;
}

.bw-clients__item--text .bw-clients__ph {
	font-family: var(--bw-font-head);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bw-navy);
	white-space: nowrap;
	transition: color 0.25s var(--bw-ease);
}

.bw-clients__item--text:hover .bw-clients__ph { color: var(--bw-accent-ink); }

/* Hairline between neighbours, so names read as one considered row instead of
   floating words. Suppressed on the first item of each wrapped row would need
   JS to detect; instead the rule is dropped entirely at the breakpoint where
   wrapping starts, below. */
.bw-clients__item + .bw-clients__item {
	box-shadow: -1px 0 0 0 var(--bw-border);
}

.bw-clients__note {
	text-align: center;
	font-size: 13.5px;
	color: #9AA3AE;
	margin: 22px 0 0;
}

/* ------------------------------------------------------------ Form controls */

/* Every control is border-box. Without this, width:100% plus horizontal
   padding and a border renders WIDER than the container — and because several
   bands set overflow-x: clip, the excess is cropped silently rather than
   spilling visibly. That is what made the newsletter email field look cut off
   on phones: 100% + 32px padding + 2px border. */
.bw-site input,
.bw-site select,
.bw-site textarea,
.bw-site button {
	box-sizing: border-box;
	max-width: 100%;
}

/* --------------------------------------------------------------- Newsletter */

.bw-news-signup {
	background: var(--bw-navy);
	padding: 62px 0;
}

.bw-news-signup__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 34px;
	align-items: center;
}

.bw-news-signup__inner > * { min-width: 0; }

.bw-news-signup h2 {
	color: #fff;
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
	margin: 0 0 10px;
}

.bw-news-signup p {
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	font-size: 16px;
	max-width: 560px;
}

.bw-news-signup__form {
	display: flex;
	gap: 10px;
	align-items: stretch;
	min-width: 0;
	max-width: 100%;
}

.bw-news-signup__form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 300px;
	padding: 13px 16px;
	border-radius: var(--bw-radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-family: var(--bw-font-body);
	font-size: 16px;
	min-height: 50px;
}

.bw-news-signup__form input::placeholder { color: rgba(255, 255, 255, 0.5); }

.bw-news-signup__form input:focus {
	outline: none;
	border-color: #E9A97F;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 0 0 3px rgba(233, 169, 127, 0.22);
}

.bw-news-signup__msg {
	margin: 18px 0 0;
	color: #86EFAC;
	font-weight: 600;
}

.bw-news-signup__msg--err { color: #FCA5A5; }

/* ----------------------------------------------------------------- Alerts */

.bw-alert {
	border-radius: var(--bw-radius-sm);
	padding: 16px 20px;
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.55;
	border-left: 4px solid;
}

.bw-alert--ok  { background: #F0FDF4; border-color: #16A34A; color: #14532D; }
.bw-alert--err { background: #FEF2F2; border-color: #DC2626; color: #7F1D1D; }

/* Placeholder banner on sample content */
.bw-ph-banner {
	background: #FEF3C7;
	border-top: 1px solid #FDE68A;
	border-bottom: 1px solid #FDE68A;
	padding: 15px 0;
	font-size: 15px;
	color: #78350F;
}

.bw-ph-banner .bw-wrap {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.bw-ph-banner svg { color: #B45309; flex-shrink: 0; margin-top: 2px; }

/* ------------------------------------------------------------------- Forms */

.bw-form__title { font-size: 1.3125rem; margin: 0 0 8px; }

.bw-form__intro {
	font-size: 15.5px;
	color: #646E7C;
	margin: 0 0 26px;
}

.bw-btn--block { width: 100%; }

/* --------------------------------------------------------------------- Map */

.bw-map {
	border-radius: var(--bw-radius);
	overflow: hidden;
	border: 1px solid var(--bw-border);
	background: var(--bw-muted);
	margin-top: 30px;
}

.bw-map iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}

.bw-map__ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	height: 300px;
	padding: 30px;
	color: #646E7C;
	background: repeating-linear-gradient(45deg, #EDEAE3 0 14px, #EDEAE3 14px 28px);
}

.bw-map__ph svg { color: var(--bw-accent); }
.bw-map__ph strong { color: var(--bw-navy); font-family: var(--bw-font-head); font-size: 17px; }
.bw-map__ph span { font-size: 14.5px; max-width: 380px; }

/* -------------------------------------------------------- Project detail */

.bw-project {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 52px;
	align-items: start;
}

.bw-factbox {
	background: var(--bw-bg);
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	padding: 30px 28px;
	position: sticky;
	top: calc(var(--bw-header-h) + 24px);
}

.bw-factbox__title {
	font-size: 1.0625rem;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bw-border);
}

.bw-factbox dl { margin: 0 0 24px; }

.bw-factbox dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9AA3AE;
	margin-bottom: 3px;
}

.bw-factbox dd {
	margin: 0 0 16px;
	font-size: 16px;
	color: var(--bw-navy);
	font-weight: 500;
}

/* ----------------------------------------------------------------- Article */

.bw-article__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 15px;
	margin: 14px 0 0;
}

.bw-article__meta svg { color: #E9A97F; }
.bw-dot { opacity: 0.5; }

.bw-article__hero {
	margin-top: -46px;
	position: relative;
	z-index: 5;
}

.bw-article__hero img {
	width: 100%;
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-lg);
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bw-article { max-width: 780px; margin: 0 auto; }

.bw-article h2 { margin-top: 46px; }
.bw-article h3 { margin-top: 34px; }

.bw-article blockquote {
	border-left: 4px solid var(--bw-accent);
	background: var(--bw-bg);
	margin: 30px 0;
	padding: 22px 26px;
	border-radius: 0 var(--bw-radius-sm) var(--bw-radius-sm) 0;
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--bw-navy);
}

.bw-article blockquote p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Pagination */

.bw-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 52px;
	flex-wrap: wrap;
}

.bw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-sm);
	background: #fff;
	color: var(--bw-navy);
	text-decoration: none;
	font-weight: 600;
	font-size: 15.5px;
	transition: all 0.2s var(--bw-ease);
}

.bw-pagination .page-numbers:hover { border-color: var(--bw-accent); color: var(--bw-accent-ink); }
.bw-pagination .page-numbers.current { background: var(--bw-navy); border-color: var(--bw-navy); color: #fff; }

/* ------------------------------------------------------------------ Social */

.bw-social { display: flex; gap: 10px; margin-top: 22px; }

.bw-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.8);
	transition: background-color 0.2s var(--bw-ease), color 0.2s var(--bw-ease), transform 0.2s var(--bw-ease);
}

.bw-social a:hover {
	background: var(--bw-accent);
	color: #fff;
	transform: translateY(-2px);
}

.bw-social__empty {
	display: block;
	margin-top: 18px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.42);
}

.bw-footer__dl { margin-top: 22px; }

/* ---------------------------------------------------------------- WhatsApp */

.bw-whatsapp {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 998;
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: #25D366;
	color: #fff;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42);
	text-decoration: none !important;
	transition: width 0.3s var(--bw-ease), gap 0.3s var(--bw-ease), background-color 0.2s;
	overflow: hidden;
	white-space: nowrap;
}

.bw-whatsapp svg { flex-shrink: 0; }

.bw-whatsapp__label {
	max-width: 0;
	opacity: 0;
	font-weight: 600;
	font-size: 15px;
	transition: max-width 0.3s var(--bw-ease), opacity 0.2s var(--bw-ease);
}

.bw-whatsapp:hover,
.bw-whatsapp:focus-visible {
	width: 232px;
	gap: 10px;
	color: #fff;
}

.bw-whatsapp:hover .bw-whatsapp__label,
.bw-whatsapp:focus-visible .bw-whatsapp__label {
	max-width: 170px;
	opacity: 1;
}

.bw-whatsapp--setup {
	background: #646E7C;
	box-shadow: 0 6px 20px rgba(100, 110, 124, 0.4);
}

.bw-whatsapp--setup:hover { width: 244px; }

/* ------------------------------------------------------------ Cookie notice */

.bw-cookie {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 1200;
	background: #fff;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	box-shadow: 0 18px 44px rgba(13, 21, 42, 0.22);
	padding: 20px 24px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.3s var(--bw-ease), transform 0.3s var(--bw-ease);
	max-width: 1000px;
	margin: 0 auto;
}

.bw-cookie.is-in { opacity: 1; transform: none; }

.bw-cookie__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	justify-content: space-between;
	flex-wrap: wrap;
}

.bw-cookie__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bw-slate);
	flex: 1 1 420px;
}

.bw-cookie__actions { display: flex; gap: 10px; flex-shrink: 0; }
.bw-cookie__actions .bw-btn { padding: 11px 22px; font-size: 15px; }

/* ------------------------------------------------------- Why choose us grid */

.bw-why {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.bw-why__item {
	background: #fff;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	padding: 32px 28px;
	box-shadow: var(--bw-shadow-sm);
	transition: transform 0.25s var(--bw-ease), box-shadow 0.25s var(--bw-ease), border-color 0.25s var(--bw-ease);
}

.bw-why__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--bw-shadow-md);
	border-color: #C8CDD4;
}

.bw-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: rgba(193, 90, 43, 0.09);
	color: var(--bw-accent);
	margin-bottom: 20px;
}

.bw-why__title {
	font-family: var(--bw-font-head);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--bw-navy);
	margin: 0 0 10px;
}

.bw-why__text { font-size: 15.5px; line-height: 1.62; margin: 0; color: var(--bw-body); }

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1080px) {
	.bw-project { grid-template-columns: 1fr; gap: 34px; }
	.bw-factbox { position: static; }
	.bw-why { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.bw-news-signup__inner { grid-template-columns: 1fr; }
	.bw-news-signup__form { flex-direction: column; align-items: stretch; }
	.bw-news-signup__form input[type="email"] { min-width: 0; width: 100%; }
	.bw-news-signup__form .bw-btn { width: 100%; }
	.bw-whatsapp { bottom: 82px; right: 16px; }
	.bw-cookie { bottom: 82px; }
}

@media (max-width: 640px) {
	.bw-why { grid-template-columns: 1fr; }
	.bw-logo__img { height: 40px; max-width: 200px; }
	.bw-logo--footer .bw-logo__img { height: 44px; }
	.bw-article__hero { margin-top: -26px; }
	.bw-pcard__body { padding: 22px 20px 24px; }
	.bw-factbox { padding: 24px 22px; }
	.bw-cookie { left: 10px; right: 10px; padding: 18px; }
	.bw-cookie__actions { width: 100%; }
	.bw-cookie__actions .bw-btn { flex: 1; }
	/* Two per row from here down, so the divider between columns would land in
	   arbitrary places once items wrap. Drop it and let the gap do the work. */
	.bw-clients { gap: 4px 0; }
	.bw-clients__item { flex: 0 1 50%; height: 64px; padding: 10px 12px; }
	.bw-clients__item + .bw-clients__item { box-shadow: none; }
	.bw-clients__item--text .bw-clients__ph { font-size: 0.9375rem; letter-spacing: 0.08em; }
	/* Narrower tiles and a shorter fade, so more than two logos are on screen at
	   once. The hairline is restored: in the marquee the row never wraps, so the
	   divider always lands between neighbours rather than at a row start. */
	.bw-marquee .bw-clients__item {
		width: 148px;
		height: 66px;
		padding: 10px 14px;
		box-shadow: -1px 0 0 0 var(--bw-border);
	}
	.bw-marquee .bw-clients__item img { max-height: 34px; }
	.bw-marquee .bw-clients__item--text .bw-clients__ph { font-size: 0.8125rem; letter-spacing: 0.06em; }
	.bw-marquee {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
		        mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	}
	.bw-pfilter { gap: 8px; margin-bottom: 30px; }
	.bw-pfilter__btn { font-size: 12.5px; padding: 8px 15px; }
	.bw-clients__label { gap: 12px; margin-bottom: 26px; }
	.bw-clients__label::before, .bw-clients__label::after { width: 28px; }
	.bw-map iframe, .bw-map__ph { height: 260px; }
}

@media (max-width: 420px) {
	.bw-logo__img { height: 36px; max-width: 172px; }
}

@media (prefers-reduced-motion: reduce) {
	.bw-pcard:hover .bw-pcard__media img { transform: none; }
	.bw-whatsapp { transition: none; }

	/* Client marquee: the scroll is decoration, so it goes entirely rather than
	   being slowed. The duplicate set is removed from the layout and the
	   remaining one falls back to the centred wrapping strip. Placed here, after
	   the breakpoints above, because those re-assert the fixed tile width and
	   the edge mask — both of which only make sense while the track is moving. */
	.bw-marquee {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.bw-marquee__track { animation: none; width: 100%; }
	.bw-marquee__set + .bw-marquee__set { display: none; }
	.bw-marquee__set {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		gap: 20px 8px;
	}
	.bw-marquee .bw-clients__item {
		box-shadow: none;
		flex: 0 1 190px;
		width: auto;
	}
}

/* ==========================================================================
   FIXED HEADER + HORIZONTAL-OVERFLOW FIX  (v1.3)

   Two linked defects are corrected here.

   1. The off-canvas mobile menu was `position: fixed` with
      `transform: translateX(100%)`. A fixed element's containing block is the
      viewport, so `overflow` on <body> can never clip it — the closed menu sat
      at 100vw–200vw and created genuine horizontal scroll on phones.
      It is now hidden with visibility/opacity and no large transform, so it
      occupies no space off-screen at all.

   2. The header was `position: sticky` inside `body { overflow-x: clip }`,
      which made <body> its containing block and let it drift out of view.
      It is now `position: fixed`, with the page padded to compensate.
   ========================================================================== */

html {
	/* Guard rail lives on the scroll container itself, where it cannot
	   interfere with sticky or fixed descendants. */
	overflow-x: hidden;
	scroll-padding-top: calc(var(--bw-header-h) + 12px);
}

body.bw-site {
	overflow-x: visible;
	padding-top: var(--bw-header-h);
}

.bw-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	background: #fff;
	box-sizing: border-box;
}

/* WordPress admin bar offset for logged-in users. */
.admin-bar .bw-header { top: 32px; }

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

/* --- Mobile off-canvas menu: no transform, therefore no overflow ---------

   This breakpoint MUST match the one in brickwise.css that shows .bw-burger
   and turns .bw-nav into a fixed panel. If the panel is created at one width
   but only hidden at a narrower one, every viewport in between renders the
   menu as an opaque full-screen sheet covering the whole page — which is
   exactly what happened when the burger moved to 1280px and this rule was
   left at 900px. Change one, change the other. */

@media (max-width: 1199px) {
	.bw-nav {
		position: fixed;
		top: var(--bw-header-h);
		right: 0;
		bottom: 0;
		left: auto;
		width: min(360px, 86vw);
		max-width: none;
		transform: none;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s var(--bw-ease), visibility 0.25s var(--bw-ease);
		box-sizing: border-box;
		overscroll-behavior: contain;
	}

	.admin-bar .bw-nav { top: calc(var(--bw-header-h) + 46px); }

	.bw-nav.is-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}
}

/* --- Belt and braces against any other horizontal overflow -------------- */

.bw-site img,
.bw-site svg,
.bw-site iframe,
.bw-site video {
	max-width: 100%;
}

.bw-site .bw-sec,
.bw-site .bw-hero,
.bw-site .bw-phero,
.bw-site .bw-cta,
.bw-site .bw-stats,
.bw-site .bw-strip,
.bw-site .bw-news-signup,
.bw-site .bw-footer {
	max-width: 100vw;
	overflow-x: clip;
}

.bw-wrap { box-sizing: border-box; max-width: min(var(--bw-max), 100%); }

/* Sticky sidebar must clear the now-fixed header. */
.bw-factbox { top: calc(var(--bw-header-h) + 20px); }