/* =====================================================================
   BLAK Theme — global styles
   Tokens are defined in style.css (:root). This file styles the chrome.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	color: var(--color-ink);
	background: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--fw-semibold); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }

.sr-only, .blak-skip-link {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.blak-skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; width: auto; height: auto;
	clip: auto; z-index: 999; background: #fff; padding: .6rem 1rem; border-radius: 6px;
}

.blak-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.blak-section { padding-block: clamp(3rem, 7vw, 6rem); }
.blak-section__head { text-align: center; max-width: 60ch; margin-inline: auto; margin-bottom: 2.5rem; }
.blak-section__lead { color: var(--color-secondary); font-size: 1.125rem; }

/* ---- Buttons --------------------------------------------------------- */
.blak-btn {
	display: inline-block; font-family: var(--font-head); font-weight: var(--fw-medium);
	padding: .85rem 1.6rem; border-radius: var(--radius); border: 2px solid transparent;
	cursor: pointer; transition: transform .15s var(--ease), background .2s var(--ease);
	text-decoration: none;
}
.blak-btn:hover { text-decoration: none; transform: translateY(-1px); }
.blak-btn--accent { background: var(--color-accent); color: #fff; }
.blak-btn--accent:hover { background: var(--blak-green-75); }
.blak-btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.blak-btn--ghost:hover { background: var(--color-ink); color: #fff; }

/* ---- Header ---------------------------------------------------------- */
.blak-header {
	position: sticky; top: 0; z-index: 100; background: var(--blak-black);
	box-shadow: var(--shadow-sm);
}
.blak-header__inner {
	max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter);
	height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.blak-header__logo { height: 42px; width: auto; background: #fff; border-radius: 50%; }
.blak-nav__list { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.blak-nav__list a {
	color: #fff; font-family: var(--font-head); font-weight: var(--fw-medium);
	font-size: .95rem; letter-spacing: .02em; padding: .25rem 0;
	border-bottom: 2px solid transparent;
}
.blak-nav__list a:hover { color: var(--blak-green-50); text-decoration: none; border-color: var(--color-accent); }

.blak-nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; position: relative; }
.blak-nav-toggle__bar, .blak-nav-toggle__bar::before, .blak-nav-toggle__bar::after {
	content: ''; position: absolute; left: 8px; right: 8px; height: 2px; background: #fff; transition: .2s var(--ease);
}
.blak-nav-toggle__bar { top: 19px; }
.blak-nav-toggle__bar::before { top: -7px; } .blak-nav-toggle__bar::after { top: 7px; }

@media (max-width: 860px) {
	.blak-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--blak-black);
		transform: translateY(-120%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s linear .25s; padding: 1rem var(--gutter) 1.5rem; }
	.blak-nav.is-open { transform: translateY(0); visibility: visible; transition: transform .25s var(--ease), visibility 0s; }
	.blak-nav__list { flex-direction: column; gap: 1rem; }
	.blak-nav-toggle { display: block; }
}

/* ---- Hero ------------------------------------------------------------ */
.blak-hero { position: relative; min-height: clamp(420px, 70vh, 720px); display: flex; align-items: flex-end; overflow: hidden; }
.blak-hero__media { position: absolute; inset: 0; }
.blak-hero__video, .blak-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blak-hero__video { z-index: 1; }
.blak-hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(26,26,26,.15), rgba(26,26,26,.75)); }
.blak-hero__content { position: relative; z-index: 3; color: #fff; padding-block: clamp(2rem, 6vw, 4.5rem); }
.blak-hero__title { color: #fff; }
.blak-hero__subtitle { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 40ch; color: var(--blak-grey-25); }
.blak-hero__content .blak-btn { margin-top: 1.5rem; }

/* Hero video plays on mobile too (muted + playsinline); poster shows until it's ready. */
@media (max-width: 768px) { .blak-hero__video { display: block; } }

/* No flash-cut from still to footage: the video stays invisible (poster image
   underneath) until it is genuinely playing (.is-playing set by main.js), then
   crossfades in. Kills the "image for a split second, then the video pops" jump. */
.blak-hero__video, .blak-pagehead__video { opacity: 0; transition: opacity 1s var(--ease); }
.blak-hero__video.is-playing, .blak-pagehead__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.blak-hero__video, .blak-pagehead__video { transition: none; }
}

/* ---- Cards / prose --------------------------------------------------- */
.blak-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; }
.blak-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.blak-card__body { padding: 1.1rem 1.25rem 1.4rem; }
.blak-prose { max-width: 72ch; }
.blak-prose img { border-radius: var(--radius); margin-block: 1.5rem; }

/* ---- Project single -------------------------------------------------- */
/* Full first screen (viewport minus the sticky header), matching the page
   headers. At 52vh a 16:10 site aerial lost roughly half its frame to the
   crop, so the parcel being shown was cut off. */
.blak-project__hero { position: relative; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; align-items: flex-end; overflow: hidden; }
@media (max-width: 768px) { .blak-project__hero { min-height: 58svh; } }
.blak-project__heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blak-project__heading { position: relative; z-index: 3; color: #fff; padding-block: 2.5rem; }
.blak-project__title { color: #fff; }
.blak-project__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .blak-project__grid { grid-template-columns: 2fr 1fr; } }
.blak-stats { background: var(--color-bg-alt); border-radius: var(--radius); padding: 1.5rem; margin: 0 0 1.5rem; }
.blak-stats__row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--blak-grey-25); }
.blak-stats__row:last-child { border-bottom: 0; }
.blak-stats dt { color: var(--color-secondary); font-weight: var(--fw-medium); }
.blak-stats dd { margin: 0; font-weight: var(--fw-semibold); text-align: right; overflow-wrap: anywhere; }
.blak-embed { position: relative; padding-top: 56.25%; margin: 1.5rem 0; border-radius: var(--radius); overflow: hidden; }
.blak-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.blak-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.blak-gallery__item img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ---- Asset-type badges ---------------------------------------------- */
.blak-pcard__badge { display: inline-block; font-family: var(--font-head); font-size: .72rem; font-weight: var(--fw-semibold);
	text-transform: uppercase; letter-spacing: .05em; color: #fff; padding: .25rem .6rem; border-radius: 999px; }
.blak-badge--retail      { background: var(--type-retail); }
.blak-badge--multifamily { background: var(--type-multifamily); }
.blak-badge--industrial  { background: var(--type-industrial); }
.blak-badge--office      { background: var(--type-office); }
.blak-badge--hospitality { background: var(--type-hospitality); }

/* ---- Footer ---------------------------------------------------------- */
.blak-footer { background: var(--blak-black); color: var(--blak-grey-25); margin-top: 0; }
.blak-footer__inner { max-width: var(--maxw); margin-inline: auto; padding: clamp(2.5rem,5vw,4rem) var(--gutter);
	display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .blak-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; } }
.blak-footer__tag { color: var(--blak-grey-50); }
.blak-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.blak-footer__list a, .blak-footer__contact a { color: #fff; }
/* Footer interactive polish (entrance handled by the [data-reveal] system) */
.blak-footer__brand img { height: 56px; width: auto; background: #fff; border-radius: 50%; transition: transform .5s var(--ease); }
.blak-footer__brand:hover img { transform: translateY(-3px) scale(1.03); }
.blak-footer__list a { position: relative; display: inline-block; transition: color .25s var(--ease), transform .25s var(--ease); }
.blak-footer__list a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--blak-green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.blak-footer__list a:hover { color: var(--blak-green-50); transform: translateX(4px); }
.blak-footer__list a:hover::after { transform: scaleX(1); }
.blak-footer__contact a { transition: color .25s var(--ease); }
.blak-footer__contact a:hover { color: var(--blak-green-50); }

/* 404 */
.blak-404__inner { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); max-width: 40rem; margin-inline: auto; }
.blak-404__code { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--color-primary); margin: 0; opacity: .9; }
.blak-404__title { margin: .25rem 0 .5rem; }
.blak-404__lead { color: var(--color-secondary); margin-bottom: 1.75rem; }
.blak-404__links { margin-top: 1.5rem; font-size: .95rem; }
.blak-404__links a { color: var(--color-primary); }
.blak-footer__legal { border-top: 1px solid rgba(255,255,255,.12); text-align: center; padding: 1.25rem; font-size: .85rem; color: var(--blak-grey-50); }

/* =====================================================================
   About / Team / Contact / Forms
   ===================================================================== */

.blak-about__lead { font-size: 1.2rem; color: var(--color-secondary); }

/* By-the-numbers band */
.blak-facts { background: var(--color-primary); color: #fff; }
.blak-facts__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding-block: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 760px) { .blak-facts__grid { grid-template-columns: repeat(4, 1fr); } }
.blak-facts__item { text-align: center; }
.blak-facts__value { display: block; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.1; }
.blak-facts__label { display: block; margin-top: .35rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blak-green-25); }

/* Leadership — dark to blend with the baked-in portrait backgrounds */
.blak-team { background: #3a3a3a; color: #fff; padding-block: clamp(3rem, 7vw, 6rem); }
.blak-team__title { color: #fff; }
.blak-team__lead { color: var(--blak-grey-25); }
.blak-team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 820px) { .blak-team__grid { grid-template-columns: repeat(4, 1fr); } }
.blak-member { text-align: center; }
.blak-member__photo { aspect-ratio: 4/5; overflow: hidden; }
.blak-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.blak-member__name { font-size: 1.15rem; margin: .9rem 0 .1rem; color: #fff; }
.blak-member__role { margin: 0; color: var(--blak-green-50); font-size: .9rem; letter-spacing: .03em; }

/* Closing CTA */
.blak-cta { text-align: center; }
.blak-cta__inner h2 { margin-bottom: 1.25rem; }
/*
 * Optional subtext (Pages → About/Services → Closing CTA Band). Absent unless
 * an editor fills it in, so the band's default two-element rhythm is unchanged;
 * when present it tightens the heading gap and sits between heading and button.
 */
.blak-cta__inner h2:has(+ .blak-cta__lead) { margin-bottom: .6rem; }
.blak-cta__lead {
	max-width: 46rem; margin: 0 auto 1.5rem;
	color: var(--color-secondary); font-size: 1.075rem; line-height: 1.6;
}

/* Contact */
.blak-contact__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) { .blak-contact__grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; } }
.blak-contact__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.blak-contact__label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-secondary); margin-bottom: .15rem; }
.blak-contact__list a { font-size: 1.05rem; color: var(--color-ink); }
.blak-contact__list a:hover { color: var(--color-primary); }

/* Forms */
.blak-form { background: var(--color-bg-alt); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.blak-form__heading { font-size: 1.4rem; margin-bottom: 1.25rem; }
.blak-form__row { margin-bottom: 1.1rem; }
.blak-form__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .blak-form__grid2 { grid-template-columns: 1fr; } }
.blak-form label { display: block; font-family: var(--font-head); font-weight: var(--fw-medium); font-size: .9rem; margin-bottom: .35rem; }
.blak-form input, .blak-form textarea {
	width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--blak-grey-25); border-radius: 8px;
	font: inherit; background: #fff; color: var(--color-ink); transition: border-color .15s var(--ease);
}
.blak-form input:focus, .blak-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(95,102,56,.15); }
.blak-form__submit { margin-top: .25rem; border: 0; }
.blak-form__submit:disabled { opacity: .6; cursor: progress; }
.blak-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.blak-form__status { margin: .9rem 0 0; font-size: .92rem; min-height: 1.2em; }
.blak-form__status.is-success { color: var(--color-primary); font-weight: var(--fw-medium); }
.blak-form__status.is-error { color: #9b2c2c; }

/* Project-page inquiry form sits tighter in the aside */
.blak-project__inquiry { margin-top: 1.5rem; }
.blak-project__inquiry .blak-form { background: var(--color-bg-alt); }

/* =====================================================================
   Services & Markets
   ===================================================================== */

/* Services grid */
.blak-services__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 700px)  { .blak-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .blak-services__grid { grid-template-columns: repeat(3, 1fr); } }
.blak-service {
	background: #fff; border: 1px solid var(--blak-grey-25); border-radius: var(--radius);
	padding: 1.75rem 1.6rem; transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.blak-service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blak-service__mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 1rem;
	border-radius: 50%; background: var(--blak-green-25); }
.blak-service__num { font-family: var(--font-head); font-weight: var(--fw-bold); color: var(--color-primary); }
.blak-service__title { font-size: 1.2rem; margin: 0 0 .5rem; }
.blak-service__summary { margin: 0; color: var(--color-secondary); font-size: .96rem; }

/* Regions */
.blak-regions__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 760px) { .blak-regions__grid { grid-template-columns: repeat(2, 1fr); } }
.blak-region { background: var(--color-bg-alt); border-radius: var(--radius); padding: 2rem 1.75rem; border-left: 4px solid var(--color-primary); }
.blak-region__name { font-size: 1.5rem; margin: 0 0 .5rem; }
.blak-region__copy { margin: 0; color: var(--color-secondary); }

/* Sectors */
.blak-sectors__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .blak-sectors__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blak-sectors__grid { grid-template-columns: 1fr; } }
.blak-sector {
	position: relative; display: flex; flex-direction: column; gap: .25rem;
	padding: 1.5rem 1.4rem; border-radius: var(--radius); color: #fff; text-decoration: none;
	min-height: 120px; justify-content: flex-end; transition: transform .15s var(--ease);
}
.blak-sector:hover { transform: translateY(-3px); text-decoration: none; }
.blak-sector__icon { width: 40px; height: 40px; object-fit: contain; margin-bottom: .5rem; }
.blak-sector__label { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 1.25rem; }
.blak-sector__count { font-size: .85rem; opacity: .85; }
.blak-sector__arrow { position: absolute; top: 1.2rem; right: 1.3rem; font-size: 1.2rem; opacity: .9; }
.blak-sector--industrial  { background: var(--type-industrial); }
.blak-sector--office       { background: var(--type-office); }
.blak-sector--retail       { background: var(--type-retail); }
.blak-sector--multifamily  { background: var(--type-multifamily); }
.blak-sector--hospitality  { background: var(--type-hospitality); }

/* =====================================================================
   News & Insights — page heads, grid, article, pagination
   ===================================================================== */

/* Reusable page header band */
.blak-pagehead { background: var(--blak-black); color: #fff; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.blak-pagehead__title { color: #fff; margin: 0; }
.blak-pagehead__lead { color: var(--blak-grey-25); font-size: 1.1rem; max-width: 60ch; margin-top: .75rem; }

/* News grid */
/* Category filter chips above the News & Insights grid. */
.blak-catfilter { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.blak-catfilter__chip { display: inline-block; padding: .4rem 1rem; border: 1px solid var(--blak-grey-25); border-radius: 999px; font-size: .9rem; font-weight: var(--fw-medium); color: var(--color-ink); text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.blak-catfilter__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blak-catfilter__chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .blak-catfilter__chip { color: var(--color-ink); border-color: var(--blak-grey-25); }
[data-theme="dark"] .blak-catfilter__chip.is-active { color: #fff; }
.blak-news__grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 640px)  { .blak-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blak-news__grid { grid-template-columns: repeat(3, 1fr); } }
.blak-news__empty { color: var(--color-secondary); }

.blak-ncard { display: flex; flex-direction: column; }
.blak-ncard__media { position: relative; display: block; aspect-ratio: 16/10; background: var(--blak-grey-25); overflow: hidden; }
.blak-ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.blak-ncard:hover .blak-ncard__media img { transform: scale(1.04); }
.blak-ncard__body { display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.blak-ncard__cat { font-family: var(--font-head); font-size: .72rem; font-weight: var(--fw-semibold);
	text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); }
.blak-ncard__title { font-size: 1.2rem; margin: 0; }
.blak-ncard__meta { margin: 0; font-size: .82rem; color: var(--color-secondary); }
.blak-ncard__excerpt { color: var(--color-secondary); font-size: .94rem; }
.blak-ncard .blak-pcard__link { margin-top: auto; }

/* Single article */
.blak-article__head { padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
.blak-article__headinner { max-width: 72ch; margin-inline: auto; text-align: center; }
.blak-article__cat { font-family: var(--font-head); font-size: .78rem; font-weight: var(--fw-semibold);
	text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); }
.blak-article__title { margin: .6rem 0 .75rem; }
.blak-article__meta { color: var(--color-secondary); font-size: .9rem; margin: 0; }

/* Full-screen featured-image hero (single post) — image fills the viewport
   below the sticky header, title overlaid bottom-left over a gradient. */
.blak-article__hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
	display: flex; align-items: flex-end;
	background-size: cover; background-position: center; background-color: var(--blak-black);
	color: #fff;
}
.blak-article__hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(20,21,16,.10) 0%, rgba(20,21,16,.20) 45%, rgba(20,21,16,.86) 100%);
}
.blak-article__hero-inner { position: relative; padding-block: clamp(2.25rem, 6vw, 5rem); }
.blak-article__hero .blak-article__cat { color: #fff; opacity: .92; }
.blak-article__hero .blak-article__title {
	color: #fff; max-width: 22ch; margin: .55rem 0 .7rem;
	font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.08; text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.blak-article__hero .blak-article__meta { color: rgba(255,255,255,.86); font-size: .95rem; }
.blak-article__scroll {
	position: absolute; left: 50%; bottom: 1.1rem; margin-left: -11px;
	width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.55); border-radius: 12px; z-index: 1;
}
.blak-article__scroll::before {
	content: ""; position: absolute; left: 50%; top: 6px; margin-left: -1.5px;
	width: 3px; height: 7px; background: rgba(255,255,255,.85); border-radius: 2px;
	animation: blakScrollDot 1.6s ease-in-out infinite;
}
@keyframes blakScrollDot { 0%,100% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 70% { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .blak-article__scroll::before { animation: none; } }

/* Contained fallback image (used if an older post still wraps one) */
.blak-article__hero img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius); }
/* Wider, left-aligned article column (was a narrow 72ch centered block). */
.blak-article__body { max-width: 62rem; margin-inline: 0; padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.blak-article--hero .blak-article__body { padding-top: clamp(2.5rem, 6vw, 4rem); }
.blak-article__body p, .blak-article__body li { font-size: 1.075rem; }
/* Default article text colour follows the theme (--color-ink flips automatically
   in dark mode). Any element the editor gave an explicit colour to gets the class
   .has-text-color — those are excluded here so hand-picked colours always win. */
.blak-article__body { color: var(--color-ink); }
.blak-article__body :where(p, li, h1, h2, h3, h4, h5, h6):not(.has-text-color) { color: inherit; }
/* Headline dropdowns — each H2 becomes a click-to-expand section (article-accordion.js).
   Only active once JS wraps the heading in .blak-acc, so no-JS readers see the full
   article. Content stays visible/indexable when open. */
.blak-article__body .blak-acc { border-bottom: 1px solid var(--blak-grey-25); }
.blak-article__body .blak-acc:first-child { border-top: 1px solid var(--blak-grey-25); }
/* Every dropdown headline uses one accent colour, always, in both light and dark
   mode — !important so it stays uniform even if a headline was given a different
   colour swatch in the editor. --blak-headline-accent is printed in <head> from
   BLAK Settings → Brand Colors (inc/setup.php), so this is editable from
   wp-admin, not hard-coded — the var() fallback only covers the split second
   before that inline <style> parses. */
.blak-article__body .blak-acc__head { cursor: pointer; position: relative; padding: 1.1rem 3rem 1.1rem 0; margin: 0; user-select: none; color: var(--blak-headline-accent, var(--color-primary)) !important; transition: color .15s var(--ease); }
.blak-article__body .blak-acc__head:hover { opacity: .8; }
/* The real toggle is a <button> nested inside the H2 (see article-accordion.js) —
   strip its native chrome so the heading looks unchanged, and give it the full
   row as its hit area. */
.blak-article__body .blak-acc__btn {
	all: unset; display: block; width: 100%; cursor: pointer;
	font: inherit; color: inherit; text-align: inherit; letter-spacing: inherit;
}
.blak-article__body .blak-acc__btn:focus-visible { outline: 2px solid var(--blak-headline-accent, var(--color-primary)); outline-offset: 3px; }
.blak-article__body .blak-acc__head:focus-visible { outline: 2px solid var(--blak-headline-accent, var(--color-primary)); outline-offset: 3px; }
.blak-article__body .blak-acc__head::after { content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); font-size: 1.7rem; line-height: 1; font-weight: var(--fw-regular); color: var(--blak-headline-accent, var(--color-primary)); transition: transform .2s var(--ease); }
.blak-article__body .blak-acc.is-open .blak-acc__head::after { content: "\2013"; }
.blak-article__body .blak-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.blak-article__body .blak-acc.is-open .blak-acc__panel { grid-template-rows: 1fr; }
/* visibility:hidden removes collapsed content from the accessibility tree and
   the tab order — a 0fr grid row still leaves links inside it focusable, so
   keyboard users tabbed into invisible text and screen readers announced hidden
   sections. It still animates because visibility is transitioned discretely
   alongside the row size. */
.blak-article__body .blak-acc__inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility .3s var(--ease); }
.blak-article__body .blak-acc.is-open .blak-acc__inner { visibility: visible; padding-bottom: 1.2rem; }
[data-theme="dark"] .blak-article__body .blak-acc,
[data-theme="dark"] .blak-article__body .blak-acc:first-child { border-color: #3a3b33; }
/* Dark mode: text the editor set to the Black swatch would be black-on-dark
   (invisible). Flip it to the light ink so it stays readable. Light mode keeps
   the chosen black. !important beats WordPress's own !important preset colour.
   :not(.blak-acc__head) — dropdown headlines are excluded so they always follow
   the single accent colour above, never a manually-applied black/grey swatch,
   in light OR dark mode (this rule's higher specificity was overriding it). */
[data-theme="dark"] .blak-article__body :is(.has-blak-black-color, .has-black-color, .has-blak-grey-color):not(.blak-acc__head) { color: var(--color-ink) !important; }
/* Belt-and-suspenders: explicitly re-assert the headline accent colour in dark
   mode at higher specificity, so NO dark-mode rule (theme or a colour swatch the
   editor applied to the heading) can change these headings. Identical colour to
   light mode, sourced from the same admin setting (--blak-headline-accent). */
[data-theme="dark"] .blak-article__body .blak-acc__head { color: var(--blak-headline-accent, var(--color-primary)) !important; }
[data-theme="dark"] .blak-article__body .blak-acc__head::after { color: var(--blak-headline-accent, var(--color-primary)) !important; }

/* Collapsible sections — the WordPress "Details" block styled as a dropdown. */
.blak-article__body .wp-block-details { border: 1px solid var(--blak-grey-25); border-radius: var(--radius); margin: 1.4rem 0; overflow: hidden; background: var(--color-bg-alt); }
.blak-article__body .wp-block-details summary { cursor: pointer; list-style: none; position: relative; padding: 1rem 3rem 1rem 1.25rem; font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--color-ink); }
.blak-article__body .wp-block-details summary::-webkit-details-marker { display: none; }
.blak-article__body .wp-block-details summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; line-height: 1; color: var(--color-primary); }
.blak-article__body .wp-block-details[open] summary::after { content: "\2013"; }
.blak-article__body .wp-block-details > *:not(summary) { padding: 0 1.25rem 1.1rem; margin-block: 0; }
[data-theme="dark"] .blak-article__body .wp-block-details { background: #20211a; }
.blak-article__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.blak-article__tags a { font-size: .85rem; background: var(--color-bg-alt); padding: .3rem .7rem; border-radius: 999px; color: var(--color-secondary); }
.blak-article__foot { padding-block: 2rem 4rem; text-align: center; }

/* Author byline (always the team) */
.blak-byline { display: flex; align-items: center; gap: .9rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--blak-grey-25); }
.blak-byline__avatar { width: 48px; height: 48px; flex: none; object-fit: contain; }
.blak-byline__name { font-family: var(--font-head); font-weight: var(--fw-semibold); margin: 0; }
.blak-byline__bio { margin: .15rem 0 0; color: var(--color-secondary); font-size: .9rem; }

/* Share row (BLAK post URL) */
.blak-share { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.blak-share__label { font-family: var(--font-head); font-weight: var(--fw-medium); font-size: .85rem; color: var(--color-secondary); margin-right: .2rem; }
.blak-share__btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 40px; min-width: 40px; padding: 0 .7rem;
	border: 1px solid var(--blak-grey-25); border-radius: 999px; background: var(--color-bg); color: var(--color-ink); cursor: pointer;
	font: inherit; line-height: 1; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.blak-share__btn:hover, .blak-share__btn:focus-visible { background: var(--blak-green); color: #fff; border-color: var(--blak-green); text-decoration: none; }
.blak-share__btn svg { width: 18px; height: 18px; display: block; }
.blak-share__copytext { font-size: .85rem; }
.blak-share__btn.is-copied { background: var(--blak-green); color: #fff; border-color: var(--blak-green); }
[data-theme="dark"] .blak-share__btn { background: #20211a; }
[data-theme="dark"] .blak-byline { border-color: rgba(124,129,89,.35); }

/* Pagination */
.blak-pagination { margin-top: 3rem; }
.blak-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; }
.blak-pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .6rem;
	border-radius: 8px; border: 1.5px solid var(--blak-grey-25); color: var(--color-ink);
	font-family: var(--font-head); font-weight: var(--fw-medium); text-decoration: none;
}
.blak-pagination .page-numbers:hover { border-color: var(--color-ink); }
.blak-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* =====================================================================
   Motion & polish  (scroll reveal, hero cinematics, hover)
   All gated behind .blak-motion (added by JS) so no-JS shows everything,
   and disabled entirely for prefers-reduced-motion.
   ===================================================================== */
.blak-motion [data-reveal] {
	opacity: 0; transform: translateY(26px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	will-change: opacity, transform;
}
.blak-motion [data-reveal].is-visible { opacity: 1; transform: none; }

/* Header solidifies on scroll */
.blak-header { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.blak-header.is-scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.28); }

/* Section title accent underline */
.blak-section__title { position: relative; }
.blak-section__head .blak-section__title::after {
	content: ""; display: block; width: 54px; height: 3px; margin: .85rem auto 0;
	background: var(--color-accent); border-radius: 2px; transform: scaleX(.4); transform-origin: center;
	transition: transform .6s var(--ease); opacity: .9;
}
.blak-motion .blak-section__head[data-reveal].is-visible .blak-section__title::after { transform: scaleX(1); }

/* Image hover-zoom for project cards (news cards already zoom) */
.blak-pcard__media { overflow: hidden; }
.blak-pcard__media img { transition: transform .4s var(--ease); }
.blak-pcard:hover .blak-pcard__media img { transform: scale(1.05); }
.blak-card__media, .blak-ncard__media { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
	/* Cinematic slow zoom on the hero still (until a video asset is supplied) */
	.blak-hero__poster { animation: blakKenBurns 20s ease-in-out infinite alternate; transform-origin: 60% 40%; }
	@keyframes blakKenBurns { from { transform: scale(1.06); } to { transform: scale(1.16); } }
}

/* Respect reduced motion: kill all of the above */
@media (prefers-reduced-motion: reduce) {
	.blak-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
	.blak-hero__poster { animation: none !important; }
}

/* Parallax headroom: oversize the hero media so it never reveals an edge. */
.blak-hero__media { top: -15%; bottom: auto; height: 130%; }

/* =====================================================================
   CINEMATIC — hero slideshow, parallax bands, counters, feature rows
   ===================================================================== */

/* ---- Hero slideshow (feels like video, built from stills) ---------- */
.blak-hero--cinematic { min-height: 100vh; min-height: 100svh; }
.blak-hero__slides { position: absolute; inset: 0; z-index: 0; }
.blak-hero__slide {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.4s var(--ease);
	transform: scale(1.08);
}
.blak-hero__slide.is-active { opacity: 1; animation: blakKenBurns 8s ease-out forwards; }
@keyframes blakKenBurns { from { transform: scale(1.08); } to { transform: scale(1.18); } }
.blak-hero--cinematic .blak-hero__scrim {
	background: linear-gradient(180deg, rgba(26,26,26,.45) 0%, rgba(26,26,26,.25) 40%, rgba(26,26,26,.85) 100%);
}
.blak-hero__eyebrow {
	display: inline-block; font-family: var(--font-head); font-weight: var(--fw-semibold);
	font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blak-green-50);
	margin-bottom: 1rem;
}
.blak-hero--cinematic .blak-hero__title { font-size: clamp(2.6rem, 7vw, 5.5rem); letter-spacing: -.01em; line-height: 1.02; }
.blak-hero__scroll {
	position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 4;
	color: #fff; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85;
}
.blak-hero__scroll::after { content: ""; display: block; width: 1px; height: 38px; margin: .6rem auto 0; background: #fff; animation: blakScroll 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes blakScroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---- Full-bleed parallax statement band ---------------------------- */
.blak-band { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.blak-band__bg { position: absolute; inset: -12% 0; background-size: cover; background-position: center; z-index: -2; }
.blak-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(26,26,26,.62); }
.blak-band__inner { max-width: 980px; margin-inline: auto; padding: clamp(4rem, 12vw, 9rem) var(--gutter); text-align: center; }
.blak-band__title { color: #fff; font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: 1.12; }
.blak-band__text { color: var(--blak-grey-25); font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 60ch; margin-inline: auto; }

/* ---- Animated counters --------------------------------------------- */
.blak-facts__value[data-count] { font-variant-numeric: tabular-nums; }

/* ---- Big alternating feature rows ---------------------------------- */
.blak-features { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 5rem); }
.blak-feature { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) {
	.blak-feature { grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); }
	.blak-feature--flip .blak-feature__media { order: 2; }
}
.blak-feature__media { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16/10; }
.blak-feature__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .6s var(--ease), filter .45s ease; }
.blak-feature:hover .blak-feature__media img { transform: scale(1.06); }
.blak-feature:hover .blak-feature__media img, .blak-feature:focus-within .blak-feature__media img, .blak-feature:active .blak-feature__media img { filter: grayscale(0); }
.blak-feature__badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.blak-feature__eyebrow { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); }
.blak-feature__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: .4rem 0 .6rem; }
.blak-feature__text { color: var(--color-secondary); margin: 0 0 1.1rem; }

/* Clip-reveal for feature images */
.blak-motion .blak-feature__media[data-reveal] { opacity: 1; transform: none; }
.blak-motion .blak-feature__media[data-reveal] img { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease), transform .6s var(--ease); }
.blak-motion .blak-feature__media[data-reveal].is-visible img { clip-path: inset(0 0 0 0); }

/* ---- Footprint band (map graphic) ---------------------------------- */
.blak-footprint { background: #3a3a3a; color: #fff; padding-block: clamp(3rem, 7vw, 6rem); }
.blak-footprint__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) { .blak-footprint__grid { grid-template-columns: 1fr 1fr; } }
.blak-footprint h2 { color: #fff; }
.blak-footprint p { color: var(--blak-grey-25); }
/* Our Footprint: single map graphic */
.blak-footprint__map { position: relative; overflow: hidden; border-radius: 10px; }
.blak-footprint__img { display: block; width: 100%; height: auto; }

/* ===== Get in Touch — floating connect button + slide-in form ===== */
.blak-connect { position: fixed; top: 118px; right: 0; z-index: 1100; }
.blak-connect__tab {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
	width: 128px; height: 128px; padding: 10px;
	background: var(--blak-green); color: #fff; border: 0; cursor: pointer;
	box-shadow: -6px 10px 26px rgba(0, 0, 0, .28);
	transition: width .35s ease, height .35s ease, background .25s ease;
	font-family: 'Poppins', system-ui, sans-serif;
}
.blak-connect__tab:hover { background: #4c5230; }
.blak-connect__logo { width: 46px; height: 46px; object-fit: contain; transition: width .35s ease, height .35s ease; }
.blak-connect__label { font-weight: 700; font-size: .82rem; line-height: 1.08; letter-spacing: .06em; text-transform: uppercase; max-height: 3em; transition: opacity .3s ease, max-height .3s ease, margin .3s ease; }
.blak-connect.is-compact .blak-connect__tab { width: 66px; height: 66px; gap: 0; }
.blak-connect.is-compact .blak-connect__logo { width: 34px; height: 34px; }
.blak-connect.is-compact .blak-connect__label { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }

.blak-connect__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1190; opacity: 0; transition: opacity .35s ease; }
.blak-connect__backdrop.is-open { opacity: 1; }

.blak-connect__panel {
	position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw;
	background: #fff; color: #1a1a1a; box-shadow: -16px 0 44px rgba(0, 0, 0, .32);
	padding: 2.6rem 1.8rem 2rem; overflow-y: auto; z-index: 1200;
	transform: translateX(100%); transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.blak-connect__panel.is-open { transform: translateX(0); }
.blak-connect__close { position: absolute; top: .7rem; right: 1rem; width: 40px; height: 40px; border: 0; background: none; font-size: 2rem; line-height: 1; color: #1a1a1a; cursor: pointer; }
@media (max-width: 768px) {
	.blak-connect { top: 72px; }
	.blak-connect__tab { width: 86px; height: 86px; }
	.blak-connect.is-compact .blak-connect__tab { width: 62px; height: 62px; }
	.blak-connect__panel { width: 100%; max-width: 100%; }
}

/* Footer legal disclaimer — very small print */
.blak-footer__disclaimer { max-width: none; margin: 1.4rem 0 0; padding: 1.3rem clamp(1rem, 4vw, 3rem) .3rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.blak-footer__disclaimer p { font-size: 10px; line-height: 1.5; color: rgba(255, 255, 255, .42); margin: 0 0 .5rem; }

/* Dark mode: keep forms + the Get in Touch panel readable (light fields, dark text) */
/* Dark mode: dark panel with WHITE labels/heading; white input boxes so typed text stays readable. */
[data-theme="dark"] #blak-connect-panel { background: #1c1d17 !important; color: #fff !important; }
[data-theme="dark"] #blak-connect-panel .blak-form__heading,
[data-theme="dark"] #blak-connect-panel .blak-form label,
[data-theme="dark"] #blak-connect-panel p,
[data-theme="dark"] #blak-connect-panel .blak-connect__close { color: #fff !important; }
[data-theme="dark"] #blak-connect-panel .blak-form input,
[data-theme="dark"] #blak-connect-panel .blak-form textarea { background: #fff !important; color: #1a1a1a !important; border-color: #c9cabf !important; }
[data-theme="dark"] #blak-connect-panel .blak-form input::placeholder { color: #8a8d86 !important; }
[data-theme="dark"] #blak-connect-panel .blak-btn--accent { color: #fff !important; }

/* Atlas: Clear chat button in the panel header */
.blakey__clear { background: none; border: 0; color: inherit; font: 600 .68rem/1 'Poppins', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; opacity: .7; margin-left: auto; margin-right: .5rem; }
.blakey__clear:hover { opacity: 1; }

/* Dark mode: give the Get in Touch button a faint edge so it never merges in */
[data-theme="dark"] .blak-connect__tab { box-shadow: -6px 10px 26px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .22); }

/* Gallery: cinematic hover zoom + click-to-zoom floating lightbox */
.blak-gallery__item { overflow: hidden; border-radius: var(--radius); cursor: zoom-in; }
.blak-gallery__item img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); display: block; }
.blak-gallery__item:hover img, .blak-gallery__item:focus-visible img { transform: scale(1.06); }
.blak-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(8, 9, 7, .93); }
.blak-lightbox.is-open { display: flex; }
.blak-lightbox__img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 80px rgba(0, 0, 0, .6); animation: blakLightboxIn .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes blakLightboxIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.blak-lightbox__close { position: absolute; top: 16px; right: 22px; width: 48px; height: 48px; font-size: 2.2rem; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; opacity: .85; }
.blak-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2.2rem; line-height: 1; background: rgba(255, 255, 255, .1); border: 0; color: #fff; cursor: pointer; border-radius: 50%; }
.blak-lightbox__prev { left: 2.5vw; }
.blak-lightbox__next { right: 2.5vw; }
.blak-lightbox__nav:hover, .blak-lightbox__close:hover { background: rgba(255, 255, 255, .2); opacity: 1; }
@media (max-width: 600px) { .blak-lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; } }

/* =====================================================================
   Image page-header band (parallax). Watermark already cropped from source.
   ===================================================================== */
/* Full first screen (viewport minus the sticky header), matching the video
   headers: at the old 46vh a 16:9 photo lost ~half its frame to the crop.
   Phones stay shorter — see the mobile override below. */
.blak-pagehead--img { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; align-items: flex-end; background: var(--blak-black); }
@media (max-width: 768px) { .blak-pagehead--img { min-height: 58svh; } }
.blak-pagehead--img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26,26,26,.30), rgba(26,26,26,.45) 55%, rgba(26,26,26,.85)); }
.blak-pagehead--img .blak-container { position: relative; padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.blak-pagehead--img .blak-pagehead__title { margin: 0; }

/* =====================================================================
   Language toggle (EN / ES) — Google Translate driven
   ===================================================================== */
.blak-lang { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 2px; }
.blak-lang button { background: none; border: 0; color: #fff; font-family: var(--font-head); font-weight: var(--fw-semibold);
	font-size: .78rem; letter-spacing: .04em; line-height: 1; padding: .22rem .55rem; border-radius: 999px; cursor: pointer; }
.blak-lang button:hover { color: var(--blak-green-50); }
.blak-lang button.is-active { background: var(--color-accent); color: #fff; }
.blak-lang button.is-active:hover { color: #fff; }

/* Hide all Google Translate chrome (we drive it with our own buttons) */
#google_translate_element { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Language toggle — globe icon + full English/Español labels.
   flex:none + nowrap: the pill must never wrap or squash out of the header row
   ("breaking out" on phones). Small screens swap to compact EN/ES labels. */
.blak-lang { flex: none; white-space: nowrap; }
.blak-lang button { white-space: nowrap; }
.blak-lang__globe { font-size: .95rem; line-height: 1; margin: 0 .1rem 0 .4rem; }
.blak-lang button { font-size: .74rem; padding: .22rem .5rem; }
.blak-lang__abbr { display: none; }
@media (max-width: 920px) { .blak-lang button { font-size: .7rem; padding: .2rem .42rem; } }
@media (max-width: 700px) {
	.blak-lang__full { display: none; }
	.blak-lang__abbr { display: inline; }
	.blak-lang button { font-size: .74rem; padding: .3rem .55rem; }
}

/* Force-hide the Google Translate top banner (all markup variants) */
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; visibility: hidden !important; }
body { top: 0 !important; position: static !important; }

/* =====================================================================
   Services — cinematic numbered list
   ===================================================================== */
.blak-svclist { display: flex; flex-direction: column; }
.blak-svc-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
	padding: clamp(1.8rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--blak-grey-25); }
.blak-svc-row:first-child { padding-top: 0; }
.blak-svc-row:last-child { border-bottom: 0; }
@media (min-width: 900px) { .blak-svc-row { grid-template-columns: 130px 1fr; } }
.blak-svc-row__num { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: clamp(2.4rem, 6vw, 4.5rem);
	line-height: .9; color: var(--blak-green-25); transition: color .35s var(--ease); }
.blak-svc-row:hover .blak-svc-row__num { color: var(--color-accent); }
.blak-svc-row__title { font-size: clamp(1.4rem, 3vw, 2.05rem); margin: 0 0 .5rem; }
.blak-svc-row__title::after { content: ""; display: block; width: 48px; height: 3px; margin-top: .85rem;
	background: var(--color-accent); border-radius: 2px; transform: scaleX(.35); transform-origin: left; transition: transform .5s var(--ease); }
.blak-svc-row:hover .blak-svc-row__title::after, .blak-svc-row.is-visible .blak-svc-row__title::after { transform: scaleX(1); }
.blak-svc-row__body { color: var(--color-secondary); max-width: 70ch; font-size: 1.05rem; margin: 0; }

/* =====================================================================
   Project showcase + status filter (Our Team page)
   ===================================================================== */
/* Status filter — brand pills (replaced the clumsy native dropdown). */
.blak-projshow__filter { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.blak-statuspill {
	font-family: var(--font-head); font-weight: var(--fw-medium); font-size: .92rem;
	padding: .55rem 1.2rem; border-radius: 999px; border: 1.5px solid var(--blak-grey-25);
	background: transparent; color: var(--color-ink); cursor: pointer;
	transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.blak-statuspill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blak-statuspill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.blak-statuspill__count { opacity: .7; font-size: .82em; margin-left: .25rem; }
.blak-projshow__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 1.5rem; margin-top: 2.25rem; justify-content: center; }
.blak-pshow { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease); }
.blak-pshow:hover { transform: translateY(-3px); }
.blak-pshow__media { position: relative; display: block; aspect-ratio: 16/10; background: var(--blak-grey-25); overflow: hidden; }
.blak-pshow__media img { width: 100%; height: 100%; object-fit: cover; }
.blak-pshow__status { position: absolute; top: .6rem; left: .6rem; font-family: var(--font-head); font-weight: var(--fw-semibold);
	font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; padding: .25rem .6rem; border-radius: 999px; }
.blak-status--current { background: var(--type-office); }
.blak-status--completed { background: var(--color-primary); }
.blak-status--coming_soon { background: var(--type-industrial); }
.blak-pshow__body { padding: .9rem 1rem 1.1rem; }
.blak-pshow__title { font-size: 1.05rem; margin: 0 0 .2rem; }
.blak-pshow__meta { margin: 0; color: var(--color-secondary); font-size: .85rem; }
.blak-pshow__maplink { display: inline-block; margin-top: .6rem; font-family: var(--font-head); font-weight: var(--fw-semibold);
	font-size: .8rem; color: var(--blak-green); text-decoration: none; }
.blak-pshow__maplink:hover { text-decoration: underline; }
/* Card highlighted while its map marker is hovered (and vice-versa). */
.blak-pshow.is-active { outline: 2px solid var(--blak-green); outline-offset: 2px; box-shadow: var(--shadow-md); }

/* =====================================================================
   Mobile refinements
   ===================================================================== */
@media (max-width: 600px) {
	.blak-header__inner { gap: .55rem; }
	.blak-header__logo { height: 32px; }
	.blak-lang { padding: 1px; }
	.blak-lang button { font-size: .66rem; padding: .2rem .4rem; }
	.blak-lang__globe { font-size: .85rem; margin: 0 .05rem 0 .25rem; }

	/* Services rows stack (number above text) */
	.blak-svc-row { grid-template-columns: 1fr; gap: .35rem; }
	.blak-svc-row__num { font-size: 2.2rem; }

	/* Tighter section rhythm on phones */
	.blak-section { padding-block: clamp(2.4rem, 9vw, 3.6rem); }

	/* Project detail: stack main + aside cleanly */
	.blak-project__grid { gap: 1.75rem; }
}

@media (max-width: 400px) {
	.blak-lang__globe { display: none; }
	.blak-lang button { font-size: .62rem; padding: .18rem .34rem; }
	.blak-header__logo { height: 28px; }
}

/* Never allow a stray element to cause horizontal scroll */
html, body { overflow-x: hidden; }

/* =====================================================================
   Video page headers (Markets / Services / Our Team)
   ===================================================================== */
/* Full first screen (viewport minus the sticky header): the 16:9 drone footage
   shows essentially uncropped on a standard monitor and the hero owns the
   opening view — no leftover band below it. */
.blak-pagehead--video { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.blak-pagehead__video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
}
/* The bg image sits behind the video as poster/fallback. */
.blak-pagehead--video .blak-band__bg { z-index: -2; }
@media (max-width: 768px) {
	/* Phones are portrait — a 16:9 clip always crops sides there; ~60svh keeps
	   it impactful without a huge letterboxed block. */
	.blak-pagehead--video { min-height: 60svh; }
}

/* =====================================================================
   Project story sections (Highlights / Challenges / Schedule)
   ===================================================================== */
.blak-pstory { margin-top: 2.25rem; }
.blak-pstory__title { font-size: 1.35rem; }
.blak-pstory__title::after { content: ""; display: block; width: 44px; height: 3px; margin-top: .5rem;
	background: var(--color-accent); border-radius: 2px; }
.blak-pstory__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.blak-pstory__list li { position: relative; padding-left: 1.7rem; }
.blak-pstory__list li::before { content: "✓"; position: absolute; left: 0; top: 0;
	color: var(--color-accent); font-weight: var(--fw-bold); }

/* =====================================================================
   DARK MODE — toggled via <html data-theme="dark"> (🌙 button, persisted)
   ===================================================================== */
:root[data-theme="dark"] {
	--color-bg: #151612;
	--color-bg-alt: #1d1e18;
	--color-ink: #edece4;
	--color-secondary: #b6b7ab;
	--blak-black: #0e0f0c;
	--blak-grey-25: #34352c;
	--blak-grey-50: #6f7064;
	--blak-green-25: #39402a;
	--blak-off-white: #1d1e18;
	--shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
	--shadow-md: 0 8px 24px rgba(0,0,0,.55);
}
[data-theme="dark"] .blak-card,
[data-theme="dark"] .blak-pcard,
[data-theme="dark"] .blak-service,
[data-theme="dark"] .blak-pshow,
[data-theme="dark"] .blak-portfolio__bar { background: #20211a; }
[data-theme="dark"] .blak-form input,
[data-theme="dark"] .blak-form textarea,
[data-theme="dark"] .blak-projshow__filter select,
[data-theme="dark"] .blak-chip { background: #262720; color: var(--color-ink); border-color: var(--blak-grey-25); }
[data-theme="dark"] .blak-pcard__value,
[data-theme="dark"] .blak-pagination .page-numbers { color: var(--color-ink); }
[data-theme="dark"] .blak-btn--ghost { color: var(--color-ink); border-color: var(--color-ink); }
[data-theme="dark"] .blak-btn--ghost:hover { background: var(--color-ink); color: #151612; }
[data-theme="dark"] .blak-skip-link:focus { background: #262720; color: var(--color-ink); }
[data-theme="dark"] .blak-svc-row__num { color: #4a523360; color: rgba(124,129,89,.45); }
[data-theme="dark"] .blak-prose a, [data-theme="dark"] a { color: var(--blak-green-50); }
[data-theme="dark"] .blak-btn--accent { color: #fff; }

/* Mode toggle button */
.blak-mode {
	background: none; border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
	width: 32px; height: 32px; line-height: 1; font-size: .95rem; cursor: pointer;
	color: #fff; flex: none; padding: 0;
}
.blak-mode:hover { border-color: var(--blak-green-50); }
@media (max-width: 600px) { .blak-mode { width: 28px; height: 28px; font-size: .85rem; } }

/* =====================================================================
   DARK MODE — contrast fixes (light text on dark bands was inheriting the
   darkened grey token; restore readable tones + fix inverted chips/sheet)
   ===================================================================== */
[data-theme="dark"] .blak-hero__subtitle,
[data-theme="dark"] .blak-pagehead__lead,
[data-theme="dark"] .blak-band__text,
[data-theme="dark"] .blak-team__lead,
[data-theme="dark"] .blak-footprint p,
[data-theme="dark"] .blak-footer,
[data-theme="dark"] .blak-mapsection .blak-section__lead { color: #cdcec3; }
[data-theme="dark"] .blak-facts__label { color: #dfe1d2; }
[data-theme="dark"] .blak-footer__tag,
[data-theme="dark"] .blak-footer__legal { color: #9b9c90; }
[data-theme="dark"] .blak-chip.is-active { color: #151612; }
[data-theme="dark"] .blak-chip--retail.is-active,
[data-theme="dark"] .blak-chip--multifamily.is-active,
[data-theme="dark"] .blak-chip--industrial.is-active,
[data-theme="dark"] .blak-chip--office.is-active,
[data-theme="dark"] .blak-chip--hospitality.is-active { color: #fff; }
[data-theme="dark"] .blak-sheet { background: #20211a; color: var(--color-ink); }
[data-theme="dark"] .blak-popup__title { color: #fff; }
[data-theme="dark"] .blak-popup__meta { color: #c9cabf; }
[data-theme="dark"] .blak-hero__scroll { color: #e7e8df; }
[data-theme="dark"] .blak-ncard__media,
[data-theme="dark"] .blak-pshow__media,
[data-theme="dark"] .blak-pcard__media { background: #2a2b23; }

/* =====================================================================
   BLAKEY — the BLAK crab tour guide 🦀
   ===================================================================== */
.blakey { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 95; font-family: var(--font-body); }
.blakey__btn { position: relative; width: 64px; height: 58px; background: none; border: 0; padding: 0; cursor: pointer; }
.blakey__svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); animation: blakeyBob 2.6s ease-in-out infinite; }
.blakey__btn:hover .blakey__svg { animation-duration: 1.1s; }
@keyframes blakeyBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.blakey__claw { transform-origin: 50% 70%; animation: blakeyClaw 3.2s ease-in-out infinite; }
.blakey__claw--r { animation-delay: .5s; }
@keyframes blakeyClaw { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
.blakey__eye { animation: blakeyBlink 4.5s infinite; transform-origin: center 27px; }
@keyframes blakeyBlink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.blakey__hint {
	position: absolute; left: 70px; bottom: 16px; white-space: nowrap;
	background: var(--color-accent); color: #fff; font-family: var(--font-head);
	font-size: .76rem; font-weight: var(--fw-semibold); padding: .35rem .7rem; border-radius: 999px;
	opacity: 0; transform: translateX(-6px); transition: .3s var(--ease); pointer-events: none;
	box-shadow: var(--shadow-md);
}
.blakey__hint.is-on { opacity: 1; transform: none; }
.blakey__hint::before { content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
	border: 5px solid transparent; border-right-color: var(--color-accent); border-left: 0; }

.blakey__panel {
	position: absolute; left: 0; bottom: 70px; width: 320px; max-width: calc(100vw - 2rem);
	background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35);
	overflow: hidden; border: 1px solid var(--blak-grey-25);
}
.blakey__head { background: var(--blak-black); color: #fff; font-family: var(--font-head);
	font-size: .85rem; padding: .6rem .9rem; display: flex; align-items: center; gap: .3rem; }
.blakey__head strong { color: var(--blak-green-50); }
.blakey__close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.blakey__msgs { max-height: 250px; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .55rem; }
.blakey__msg { background: var(--color-bg-alt); border-radius: 10px 10px 10px 3px; padding: .55rem .75rem;
	font-size: .86rem; line-height: 1.45; max-width: 92%; align-self: flex-start; color: var(--color-ink); }
.blakey__msg--me { background: var(--color-accent); color: #fff; border-radius: 10px 10px 3px 10px; align-self: flex-end; }
.blakey__msg a { color: var(--color-primary); font-weight: var(--fw-semibold); }
.blakey__msg--me a { color: #fff; }
.blakey__chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .8rem .6rem; }
.blakey__chips button { font-family: var(--font-head); font-size: .72rem; font-weight: var(--fw-medium);
	padding: .28rem .6rem; border-radius: 999px; border: 1px solid var(--blak-grey-25);
	background: none; color: var(--color-ink); cursor: pointer; }
.blakey__chips button:hover { border-color: var(--color-accent); color: var(--color-primary); }
.blakey__chips button.is-here { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.blakey__form { display: flex; gap: .4rem; padding: .6rem .8rem .8rem; border-top: 1px solid var(--blak-grey-25); }
.blakey__form input { flex: 1; font: inherit; font-size: .84rem; padding: .5rem .7rem;
	border: 1.5px solid var(--blak-grey-25); border-radius: 8px; background: #fff; color: var(--color-ink); }
.blakey__form input:focus { outline: none; border-color: var(--color-accent); }
.blakey__form button { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: .8rem;
	background: var(--color-accent); color: #fff; border: 0; border-radius: 8px; padding: 0 .9rem; cursor: pointer; }

[data-theme="dark"] .blakey__panel { background: #20211a; }
[data-theme="dark"] .blakey__form input { background: #262720; }

@media (max-width: 600px) {
	.blakey { left: .65rem; bottom: .75rem; }
	.blakey__btn { width: 52px; height: 47px; }
	.blakey__hint { left: 58px; font-size: .7rem; }
	.blakey__panel { bottom: 58px; width: 290px; }
}
@media (prefers-reduced-motion: reduce) {
	.blakey__svg, .blakey__claw, .blakey__eye { animation: none !important; }
}

/* Blakey v2 — bottom-right + wandering walk */
.blakey--right { left: auto; right: 1.1rem; transition: transform 1s linear; will-change: transform; }
.blakey--right .blakey__hint { left: auto; right: 70px; transform: translateX(6px); }
.blakey--right .blakey__hint.is-on { transform: none; }
.blakey--right .blakey__hint::before { left: auto; right: -5px; border-right: 0; border-left: 5px solid var(--color-accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.blakey--right .blakey__panel { left: auto; right: 0; }
.blakey.is-flipped .blakey__svg { transform: scaleX(-1); }
.blakey.is-walking .blakey__svg { animation-duration: .5s; }
.blakey.is-walking .blakey__legs { animation: blakeyScuttle .22s linear infinite; transform-origin: 60px 75px; }
@keyframes blakeyScuttle { 0%,100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
@media (max-width: 600px) {
	.blakey--right { right: .65rem; }
	.blakey--right .blakey__hint { right: 58px; }
}

/* Blakey v3 — pick-up-and-drag happy state + face swap */
.blakey__btn { cursor: grab; }
.blakey__face--happy { display: none; }
.blakey.is-held { z-index: 99; }
.blakey.is-held .blakey__btn { cursor: grabbing; }
.blakey.is-held .blakey__face--calm { display: none; }
.blakey.is-held .blakey__face--happy { display: block; }
.blakey.is-held .blakey__svg { animation: blakeyWee .5s ease-in-out infinite; filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); }
@keyframes blakeyWee { 0%,100% { transform: scale(1.18) rotate(-5deg); } 50% { transform: scale(1.18) rotate(5deg); } }
.blakey.is-held .blakey__claw--l { transform: rotate(28deg); }
.blakey.is-held .blakey__claw--r { transform: rotate(-28deg); }
.blakey.is-held .blakey__btn::after {
	content: "✨"; position: absolute; top: -14px; right: -6px; font-size: 1rem;
	animation: blakeySparkle 0.9s ease-in-out infinite;
}
@keyframes blakeySparkle { 0%,100% { opacity: .4; transform: translateY(0) scale(.9); } 50% { opacity: 1; transform: translateY(-5px) scale(1.15); } }
.blakey.is-held .blakey__hint { display: none; }

/* Project showcase cards: photo turns black & white on hover / touch */
.blak-pshow__media img { transition: filter .45s var(--ease), transform .45s var(--ease); }
.blak-pshow:hover .blak-pshow__media img,
.blak-pshow:focus-within .blak-pshow__media img,
.blak-pshow:active .blak-pshow__media img { filter: grayscale(1); }

/* Final production polish */
/* Project cards: black & white at rest, full color on hover/touch (all statuses) */
.blak-pshow__media img { filter: grayscale(1); }
.blak-pshow:hover .blak-pshow__media img,
.blak-pshow:focus-within .blak-pshow__media img,
.blak-pshow:active .blak-pshow__media img { filter: grayscale(0); }

/* Leadership: the whole team on ONE centred row on desktop, whatever the count.
   Flex (not a fixed column count) so adding or removing a member re-balances
   automatically — equal widths, capped so a small team never looks stretched,
   and it wraps into a tidy centred second row only if the roster gets large. */
@media (min-width: 820px) {
	.blak-team__grid {
		display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
		gap: clamp(1.25rem, 2.2vw, 2rem); max-width: 1240px; margin-inline: auto;
	}
	.blak-team__grid > * { flex: 1 1 0; min-width: 150px; max-width: 240px; }
}
.blak-member__name { font-size: 1.3rem; margin-top: 1.1rem; }
.blak-member__role { font-size: 1rem; }

/* Cinematic leadership portraits — soft frame, smooth hover lift + slow zoom */
.blak-member__photo {
	border-radius: 16px;
	background: #14150f;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
	transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease;
	will-change: transform;
}
.blak-member__photo img {
	transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.blak-member:hover .blak-member__photo,
.blak-member:focus-within .blak-member__photo {
	transform: translateY(-7px);
	box-shadow: 0 22px 48px rgba(0, 0, 0, .42), 0 0 0 2px var(--blak-green-50);
}
.blak-member:hover .blak-member__photo img,
.blak-member:focus-within .blak-member__photo img {
	transform: scale(1.06);
}
.blak-member__name { transition: color .3s ease; }
.blak-member:hover .blak-member__name { color: var(--blak-green-50); }

/* Contact: social icon links (LinkedIn / Facebook) */
.blak-contact__social { display: inline-flex; gap: .55rem; align-items: center; }
.blak-social {
	display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
	border: 1px solid var(--blak-green); border-radius: 50%; color: var(--blak-green);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.blak-social svg { width: 18px; height: 18px; fill: currentColor; }
.blak-social:hover, .blak-social:focus-visible { background: var(--blak-green); color: #fff; transform: translateY(-2px); }

/* =====================================================================
   MOBILE UX PASS (v1.17.0) — phone-first polish. Desktop untouched.
   ===================================================================== */

/* Nothing may ever cause sideways scroll on a phone. */
html, body { overflow-x: clip; }

/* Touch screens: hover-lift effects otherwise "stick" after a tap. */
@media (hover: none) {
	.blak-pcard:hover, .blak-sector:hover, .blak-card:hover,
	.blak-social:hover, .blak-btn:hover { transform: none; }
}

@media (max-width: 600px) {
	/* Comfortable thumb targets (≥44px) in the mobile menu + small controls. */
	.blak-nav__list a { display: block; padding: .7rem 0; font-size: 1.05rem; }
	.blak-catfilter__chip { padding: .62rem 1.15rem; }
	.blak-share__btn { height: 44px; min-width: 44px; }
	.blak-mode { width: 36px; height: 36px; }

	/* 16px inputs: stops iOS Safari's auto-zoom jump when a field is focused. */
	.blak-form input, .blak-form textarea, .blak-form select { font-size: max(16px, 1rem); }

	/* Shorter hero on phones; svh so mobile URL bars don't cause height jumps. */
	.blak-hero { min-height: clamp(380px, 62svh, 560px); }

	/* Tighter shadows = smoother scrolling on low-power devices. */
	.blak-card, .blak-pcard { box-shadow: 0 1px 4px rgba(26,26,26,.10); }
}

/* Notch / home-indicator safe areas for fixed bottom UI. */
.blakey { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
.blak-sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* =====================================================================
   INVESTOR PORTAL (v1.18.0) — institutional deal desk
   ===================================================================== */
.blak-portal-note { padding: .85rem 1.1rem; border-radius: var(--radius); margin: 0 0 1.5rem; font-size: .95rem; background: var(--color-bg-alt); border: 1px solid var(--blak-grey-25); }
.blak-portal-note--ok { border-color: var(--color-primary); color: var(--color-primary); }
.blak-portal-note--error { border-color: #9b2c2c; color: #9b2c2c; }

/* Invest (public) */
.blak-invest__intro { max-width: 60rem; }
.blak-invest__pillars { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 2.5rem 0; }
@media (min-width: 760px) { .blak-invest__pillars { grid-template-columns: repeat(3, 1fr); } }
.blak-invest__pillar { padding: 1.6rem 1.4rem; background: var(--color-bg-alt); border-radius: var(--radius); border-top: 3px solid var(--color-primary); }
.blak-invest__pillar h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.blak-invest__pillar p { margin: 0; color: var(--color-secondary); font-size: .95rem; }
.blak-invest__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; }
.blak-invest__form { max-width: 46rem; margin: 3rem auto 0; padding: 2rem clamp(1.2rem,4vw,2.4rem); background: var(--color-bg-alt); border-radius: 14px; border: 1px solid var(--blak-grey-25); }
.blak-invest__formlead { color: var(--color-secondary); margin: 0 0 1.5rem; }
.blak-invest__assets legend { font-family: var(--font-head); font-weight: var(--fw-medium); font-size: .9rem; margin-bottom: .5rem; }
.blak-invest__check { display: inline-flex; align-items: center; gap: .4rem; margin: 0 1rem .5rem 0; font-size: .92rem; }
.blak-invest__legal, .blak-form__hint { font-size: .8rem; color: var(--color-secondary); }
.blak-invest__legal { margin-top: 1rem; }
.blak-form select { width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--blak-grey-25); border-radius: 8px; font: inherit; background: #fff; color: var(--color-ink); }

/* Portal gate / NDA */
.blak-portal__gate, .blak-portal__nda { max-width: 48rem; margin: 0 auto; }
.blak-portal__lead { color: var(--color-secondary); font-size: 1.1rem; }
.blak-portal__ndabox { max-height: 340px; overflow-y: auto; padding: 1.4rem 1.6rem; margin: 1.5rem 0; background: var(--color-bg-alt); border: 1px solid var(--blak-grey-25); border-radius: var(--radius); font-size: .92rem; line-height: 1.6; }
.blak-portal__ndabox p { margin: 0 0 1rem; }

/* Portal dashboard */
.blak-portal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; border-bottom: 1px solid var(--blak-grey-25); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.blak-portal__welcome { color: var(--color-secondary); margin: .35rem 0 0; max-width: 55ch; }
.blak-portal__signout { font-size: .9rem; font-weight: var(--fw-medium); white-space: nowrap; }
.blak-portal__sectiontitle { font-size: 1.4rem; margin: 2.5rem 0 1.25rem; }
.blak-portal__empty { color: var(--color-secondary); }
.blak-portal__recent { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--blak-grey-25); }
.blak-portal__recent li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--blak-grey-25); }
.blak-portal__recentdate { color: var(--color-secondary); font-size: .85rem; white-space: nowrap; }
.blak-portal__profile dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
@media (min-width: 640px) { .blak-portal__profile dl { grid-template-columns: 1fr 1fr; } }
.blak-portal__profile dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--blak-grey-25); }
.blak-portal__profile dt { color: var(--color-secondary); font-size: .9rem; }
.blak-portal__profile dd { margin: 0; font-weight: var(--fw-medium); text-align: right; }

/* Deal cards */
.blak-deal__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .blak-deal__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blak-deal__grid { grid-template-columns: repeat(3, 1fr); } }
.blak-deal-card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--blak-grey-25); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--color-ink); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.blak-deal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.blak-deal-card__media { position: relative; aspect-ratio: 16/10; background: var(--blak-grey-25) center/cover no-repeat; display: grid; place-items: center; }
.blak-deal-card__ph { font-family: var(--font-head); font-weight: var(--fw-bold); color: var(--blak-grey-50); letter-spacing: .12em; }
.blak-deal-card__status { position: absolute; top: .7rem; left: .7rem; background: rgba(26,26,26,.82); color: #fff; font-size: .72rem; font-weight: var(--fw-semibold); padding: .3rem .6rem; border-radius: 6px; }
.blak-deal-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.blak-deal-card__title { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 1.15rem; }
.blak-deal-card__loc { color: var(--color-secondary); font-size: .9rem; }
.blak-deal-card__link { margin-top: .4rem; color: var(--color-primary); font-weight: var(--fw-medium); font-size: .9rem; }

/* Single deal */
.blak-deal__hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; background: var(--blak-black) center/cover no-repeat; color: #fff; }
.blak-deal__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,.2), rgba(26,26,26,.85)); }
.blak-deal__heroinner { position: relative; z-index: 2; padding-block: clamp(2rem, 5vw, 3.5rem); }
.blak-deal__back { color: #fff; opacity: .85; font-size: .9rem; display: inline-block; margin-bottom: 1rem; }
.blak-deal__status { display: inline-block; background: var(--color-primary); color: #fff; font-size: .78rem; font-weight: var(--fw-semibold); padding: .3rem .7rem; border-radius: 6px; margin-bottom: .8rem; }
.blak-deal__title { color: #fff; margin: 0; }
.blak-deal__loc { color: rgba(255,255,255,.85); margin: .4rem 0 0; }
.blak-deal__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 900px) { .blak-deal__layout { grid-template-columns: 1.7fr 1fr; align-items: start; } }
.blak-deal__block { margin-bottom: 2.5rem; }
.blak-deal__block h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.blak-deal__summary { color: var(--color-secondary); line-height: 1.7; }
.blak-deal__highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.blak-deal__highlights li { position: relative; padding-left: 1.8rem; }
.blak-deal__highlights li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: var(--fw-bold); }
.blak-deal__timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--blak-grey-25); }
.blak-deal__timeline li { position: relative; padding: 0 0 1.2rem 1.4rem; }
.blak-deal__timeline li::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); }
.blak-deal__tldate { display: block; font-weight: var(--fw-semibold); color: var(--color-primary); font-size: .85rem; }
.blak-deal__ddnote { color: var(--color-secondary); font-size: .88rem; margin-top: -.5rem; }
.blak-deal__folder { border: 1px solid var(--blak-grey-25); border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden; background: var(--color-bg-alt); }
.blak-deal__folder summary { cursor: pointer; padding: .9rem 1.1rem; font-family: var(--font-head); font-weight: var(--fw-semibold); display: flex; justify-content: space-between; align-items: center; }
.blak-deal__folgcount { background: var(--blak-grey-25); border-radius: 999px; font-size: .78rem; padding: .1rem .55rem; }
.blak-deal__folder ul { list-style: none; margin: 0; padding: 0 1.1rem 1rem; }
.blak-deal__folder li a { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--blak-grey-25); font-size: .95rem; }
.blak-deal__docicon { color: var(--color-primary); font-weight: var(--fw-bold); }
.blak-deal__aside > div { background: var(--color-bg-alt); border: 1px solid var(--blak-grey-25); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; }
.blak-deal__interest h2, .blak-deal__team h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
.blak-deal__interest p { color: var(--color-secondary); font-size: .9rem; margin: 0 0 1rem; }
.blak-deal__team ul { list-style: none; padding: 0; margin: 0; }
.blak-deal__team li { padding: .6rem 0; border-bottom: 1px solid var(--blak-grey-25); display: flex; flex-direction: column; }
.blak-deal__team li span { color: var(--color-secondary); font-size: .88rem; }
[data-theme="dark"] .blak-form select { background: #262720; color: var(--color-ink); border-color: var(--blak-grey-25); }
[data-theme="dark"] .blak-deal-card { background: #20211a; }

/* =====================================================================
   Services intro — magazine statement treatment (v1.19.5).
   Applies to whatever is typed in the Services page body: the first
   paragraph becomes the big statement, BOLD words render in brand green,
   and the block fades up on scroll via [data-reveal].
   ===================================================================== */
.blak-services__intro .blak-prose { max-width: 56rem; margin-inline: auto; text-align: center; }
.blak-services__intro .blak-prose p { font-size: 1.15rem; line-height: 1.7; color: var(--color-secondary); }
.blak-services__intro .blak-prose > p:first-child {
	font-family: var(--font-head); font-weight: var(--fw-semibold);
	font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.22;
	color: var(--color-ink); margin-bottom: 1.1rem;
}
.blak-services__intro .blak-prose strong { color: var(--color-primary); }

/* =====================================================================
   News cards — monochrome-to-colour hover (v1.19.6).
   Card photos rest in black & white and bloom to full colour when the
   card is hovered (or keyboard-focused). Scoped to hover-capable devices
   only — phones/tablets have no hover, so they always show full colour.
   ===================================================================== */
@media (hover: hover) {
	.blak-ncard__media img { filter: grayscale(1); transition: filter .5s var(--ease), transform .5s var(--ease); }
	.blak-ncard:hover .blak-ncard__media img,
	.blak-ncard:focus-within .blak-ncard__media img { filter: grayscale(0); }
}
@media (prefers-reduced-motion: reduce) {
	.blak-ncard__media img { transition: none; }
}

/* =====================================================================
   MOBILE COMPACTNESS PASS (v1.21.2)
   Everything added after the v1.17 mobile pass — portal, deals, invest,
   filter pills, article dropdowns, statement intros — tightened for
   phones. Layout/stacking was already mobile-first; this is about
   spacing, type scale and reach so pages don't feel endless.
   ===================================================================== */
@media (max-width: 600px) {
	/* --- Global rhythm: tighter sections, shorter heroes --------------- */
	.blak-section { padding-block: clamp(2rem, 7vw, 2.8rem); }
	.blak-pagehead--img { min-height: 52svh; }
	.blak-pagehead--video { min-height: 54svh; }
	.blak-pagehead--img .blak-container { padding-block: clamp(1.5rem, 5vw, 2.25rem); }
	.blak-section__head { margin-bottom: 1.25rem; }
	.blak-section__lead { font-size: 1rem; }

	/* --- Statement intros (Services / Markets / About) ----------------- */
	.blak-services__intro .blak-prose > p:first-child { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
	.blak-services__intro .blak-prose p { font-size: 1.02rem; }
	.blak-about__lead { font-size: 1.08rem; }

	/* --- Filter pills: full-width rows, thumb-sized -------------------- */
	.blak-projshow__filter, .blak-catfilter { gap: .5rem; }
	.blak-statuspill { font-size: .88rem; padding: .55rem 1rem; }
	.blak-projshow__grid { gap: 1.1rem; margin-top: 1.5rem; }

	/* --- Article dropdowns: less padding, tighter heads ---------------- */
	.blak-article__body .blak-acc__head { padding: .9rem 2.4rem .9rem 0; font-size: 1.15rem; }
	.blak-article__body .blak-acc__head::after { right: .1rem; font-size: 1.45rem; }
	.blak-article__body .blak-acc.is-open .blak-acc__inner { padding-bottom: .9rem; }
	.blak-article__body { padding-block: 2rem 0; }

	/* --- Invest page --------------------------------------------------- */
	.blak-invest__pillars { gap: .9rem; margin: 1.75rem 0; }
	.blak-invest__pillar { padding: 1.15rem 1.1rem; }
	.blak-invest__cta { gap: .7rem; }
	.blak-invest__cta .blak-btn { width: 100%; text-align: center; }
	.blak-invest__form { padding: 1.4rem 1.1rem; margin-top: 2rem; }
	.blak-invest__check { margin: 0 .75rem .55rem 0; }

	/* --- Investor portal ----------------------------------------------- */
	.blak-portal__head { padding-bottom: 1.1rem; margin-bottom: 1.5rem; }
	.blak-portal__sectiontitle { font-size: 1.2rem; margin: 1.9rem 0 1rem; }
	.blak-portal__ndabox { max-height: 45svh; padding: 1rem 1.1rem; font-size: .9rem; }
	.blak-portal__gate .blak-btn, .blak-portal__nda .blak-btn { width: 100%; text-align: center; }
	/* Profile: label above value reads better than a squeezed two-column row */
	.blak-portal__profile dl > div { flex-direction: column; gap: .15rem; padding: .6rem 0; }
	.blak-portal__profile dd { text-align: left; }
	.blak-portal__recent li { flex-direction: column; gap: .2rem; }

	/* --- Deal cards + deal page ---------------------------------------- */
	.blak-deal__grid { gap: 1.1rem; }
	.blak-deal__hero { min-height: 42svh; }
	.blak-deal__layout { gap: 1.75rem; padding-block: 2rem; }
	.blak-deal__block { margin-bottom: 1.75rem; }
	.blak-deal__block h2 { font-size: 1.2rem; }
	.blak-deal__aside > div { padding: 1.15rem; margin-bottom: 1.1rem; }
	.blak-deal__folder summary { padding: .8rem .9rem; }
	.blak-deal__folder ul { padding: 0 .9rem .8rem; }
	.blak-deal__folder li a { padding: .7rem 0; } /* ≥44px tap row */
	.blak-deal__timeline li { padding-bottom: 1rem; }
}

/* =====================================================================
   LEADERSHIP BIO POP-UP (v1.22.0)
   The portrait sits INSIDE the dialog next to the text, so a biography
   never covers the person's face. Editable in wp-admin → Team → Biography.
   ===================================================================== */
/* Clickable portrait */
.blak-member__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.blak-member__open .blak-member__photo { position: relative; display: block; }
.blak-member__cue {
	position: absolute; left: 50%; bottom: .75rem; transform: translate(-50%, .4rem);
	background: rgba(26,26,26,.82); color: #fff; font-family: var(--font-head); font-weight: var(--fw-medium);
	font-size: .78rem; letter-spacing: .02em; padding: .32rem .8rem; border-radius: 999px;
	opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none;
}
.blak-member--has-bio:hover .blak-member__cue,
.blak-member__open:focus-visible .blak-member__cue { opacity: 1; transform: translate(-50%, 0); }
.blak-member__open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 16px; }
@media (hover: none) { .blak-member__cue { opacity: 1; transform: translate(-50%, 0); } }

/* Dialog */
.blak-biomodal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); opacity: 0; transition: opacity .28s var(--ease); }
.blak-biomodal.is-open { opacity: 1; }
.blak-biomodal[hidden] { display: none; }
.blak-biomodal__backdrop { position: absolute; inset: 0; background: rgba(10,11,9,.78); backdrop-filter: blur(3px); }
.blak-biomodal__panel {
	position: relative; width: min(980px, 100%); max-height: 88svh; overflow-y: auto;
	background: var(--color-bg); color: var(--color-ink); border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: translateY(14px) scale(.985);
	transition: transform .28s var(--ease);
}
.blak-biomodal.is-open .blak-biomodal__panel { transform: none; }
.blak-biomodal__close {
	position: absolute; top: .5rem; right: .7rem; z-index: 2; width: 44px; height: 44px;
	border: 0; background: none; font-size: 2rem; line-height: 1; color: var(--color-secondary); cursor: pointer;
}
.blak-biomodal__close:hover { color: var(--color-primary); }
.blak-biomodal__inner { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); padding: clamp(1.5rem, 3.5vw, 2.5rem); }
@media (min-width: 780px) { .blak-biomodal__inner { grid-template-columns: 320px 1fr; align-items: start; } }
.blak-biomodal__portrait { margin: 0; }
.blak-biomodal__portrait img { width: 100%; height: auto; border-radius: 14px; display: block; background: var(--color-bg-alt); }
@media (min-width: 780px) { .blak-biomodal__portrait { position: sticky; top: 0; } }
.blak-biomodal__name { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .2rem; }
.blak-biomodal__role { color: var(--color-primary); font-family: var(--font-head); font-weight: var(--fw-medium); margin: 0 0 1.1rem; }
.blak-biomodal__text p { margin: 0 0 1rem; line-height: 1.75; color: var(--color-secondary); }
.blak-biomodal__text p:last-child { margin-bottom: 0; }
[data-theme="dark"] .blak-biomodal__panel { background: #1c1d17; }
@media (max-width: 600px) {
	/* Photo above the text: a portrait beside 3 paragraphs is unreadable at 360px. */
	.blak-biomodal__panel { max-height: 90svh; border-radius: 14px; }
	.blak-biomodal__portrait img { max-width: 190px; margin-inline: auto; }
	.blak-biomodal__text p { font-size: .97rem; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
	.blak-biomodal, .blak-biomodal__panel, .blak-member__cue { transition: none; }
}

/* =====================================================================
   About / Our Team intro (v1.22.4) — bigger type, far less dead space.
   The section was using the full site rhythm (up to 6rem top AND bottom)
   around a single short paragraph, leaving a tall empty band.
   ===================================================================== */
.blak-about__intro { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.blak-about__intro .blak-prose { max-width: 64rem; }
.blak-about__intro .blak-prose p,
.blak-about__lead {
	font-size: clamp(1.25rem, 2vw, 1.55rem);
	line-height: 1.6;
	margin-block: 0 1rem;
}
.blak-about__intro .blak-prose p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
	.blak-about__intro { padding-block: 1.5rem; }
	.blak-about__intro .blak-prose p,
	.blak-about__lead { font-size: 1.15rem; line-height: 1.55; }
}

/* =====================================================================
   Form status messages in dark mode (v1.23.0)
   #9b2c2c on #151612 fails contrast badly (~2.4:1) and the success green was
   the same dark brand green as the background band, so a visitor in dark mode
   could not read whether their message sent or failed.
   ===================================================================== */
[data-theme="dark"] .blak-form__status.is-error { color: #f08a8a; }
[data-theme="dark"] .blak-form__status.is-success { color: #b9c48f; }
/* The Get in Touch slide-out panel is always light, so keep the light values
   there regardless of the site theme. */
[data-theme="dark"] #blak-connect-panel .blak-form__status.is-error { color: #9b2c2c !important; }
[data-theme="dark"] #blak-connect-panel .blak-form__status.is-success { color: var(--blak-green) !important; }

/* =====================================================================
   Project card hover image (v1.24.0)
   An optional second image (Projects → project → "Hover Image") crossfades
   in over the Featured Image on hover — used for aerials where the site
   boundary is highlighted in brand green. A CSS filter can't produce that,
   hence two real images.
   ===================================================================== */
.blak-pshow__media.has-hover-img,
.blak-pcard__media.has-hover-img { position: relative; overflow: hidden; }
.blak-card__hover {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
@media (hover: hover) {
	.blak-pshow:hover .blak-card__hover,
	.blak-pshow__media:focus-visible .blak-card__hover,
	.blak-pcard:hover .blak-card__hover,
	.blak-pcard:focus-within .blak-card__hover { opacity: 1; }
}
/* Touch devices have no hover, and the highlighted version is the more
   informative image (it shows the actual site), so show it there by default. */
@media (hover: none) {
	.blak-card__hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.blak-card__hover { transition: none; }
}