/* =========================================================
   Tsipiras — Bonhomme-style homepage
   White bg, black type, no other colour
   ========================================================= */

:root{
	--ink:#000;
	--paper:#fff;
	--rule:#000;
	--muted:#666;
	--gutter:clamp(20px, 4vw, 56px);
}

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

html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);}

body{
	font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	font-weight:400;
	font-size:18px;
	line-height:1.4;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none}

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

/* ============== ACCESSIBILITY (WCAG 2.1 AA) ============== */
:focus{outline:none}
:focus-visible{
	outline:2px solid var(--ink);
	outline-offset:3px;
	border-radius:2px;
}
.bh-project-bar-btn:focus-visible,
.bh-sectors-modal-close:focus-visible,
.bh-sectors-pill:focus-visible{outline-offset:2px}

.bh-skip-link{
	position:absolute;
	left:-9999px;
	top:8px;
	z-index:1000;
	background:var(--ink);
	color:var(--paper);
	padding:10px 16px;
	font-size:13px;
	text-decoration:none;
}
.bh-skip-link:focus{left:8px}

.bh-visually-hidden{
	position:absolute;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

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

/* ============== NAV (menu only, top-right) ============== */
.bh-nav{
	position:absolute;
	top:24px;
	right:var(--gutter);
	z-index:100;
	display:flex;
	align-items:center;
	gap:24px;
}
.bh-nav-links{
	display:flex;
	gap:24px;
	font-size:13px;
	font-weight:400;
	letter-spacing:0;
}
.bh-nav-links a{position:relative;padding:2px 0}
.bh-nav-links a:hover::before,
.bh-nav-links a[aria-current]::before{
	content:"\2022";
	position:absolute;
	left:-12px;
	top:50%;
	transform:translateY(-50%);
	font-size:14px;
}

/* ============== STICKY NAV (reveals on scroll-up) ============== */
.bh-sticky-nav{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:210;
	background:var(--paper);
	padding:14px var(--gutter);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	transform:translateY(-100%);
	transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
	border-bottom:1px solid #ececec;
}
.bh-sticky-nav.is-visible{transform:translateY(0)}
.bh-sticky-logo{display:block;font-family:"Inter",sans-serif;font-weight:900;font-size:20px;letter-spacing:-0.02em;color:#111;text-decoration:none;white-space:nowrap}
.bh-sticky-logo img{height:72px;width:auto;display:block}
.bh-sticky-links{
	display:flex;
	gap:24px;
	font-size:13px;
	font-weight:400;
}
.bh-sticky-links a{color:var(--ink);position:relative;padding:2px 0}
.bh-sticky-links a:hover::before,
.bh-sticky-links a[aria-current]::before{
	content:"\2022";
	position:absolute;
	left:-12px;
	top:50%;
	transform:translateY(-50%);
	font-size:14px;
}

/* ============== LOGO HERO (the brand mark as a hero element) ============== */
.bh-logo-hero{
	width:100%;
	padding:clamp(48px, 7vh, 96px) var(--gutter) 0;
	display:flex;
	align-items:flex-start;
}
.bh-logo-hero img{
	display:block;
	width:clamp(240px, 34vw, 440px);
	max-width:100%;
	max-height:40vh;
	height:auto;
	object-fit:contain;
	object-position:left center;
}
.bh-name{
	display:block;
	font-family:"Inter", sans-serif;
	font-weight:900;
	font-size:clamp(40px, 8vw, 128px);
	line-height:0.95;
	letter-spacing:-0.02em;
	color:#111;
	text-decoration:none;
}


/* ============== TWO-COL ROW (label + content) ============== */
.bh-row{
	display:grid;
	grid-template-columns:repeat(12,1fr);
	column-gap:var(--gutter);
	padding:clamp(64px, 10vh, 160px) var(--gutter);
}

.bh-row + .bh-row{padding-top:0}

/* spacer no longer needed — logo-hero provides the gap */
.bh-spacer{padding-top:0}

.bh-label{
	grid-column:1 / span 2;
	font-size:13px;
	font-weight:400;
	color:var(--ink);
	padding-top:6px;
}

.bh-body{
	margin:0;
	font-size:clamp(20px, 1.6vw, 28px);
	line-height:1.35;
	font-weight:400;
	letter-spacing:-0.015em;
	max-width:80ch;
	grid-column:7 / span 6;
}

/* ============== CLIENTS ============== */
.bh-clients{padding-bottom:clamp(80px, 10vh, 140px);}
.bh-clients-strip{
	grid-column:7 / span 6;
	max-width:980px;
}
.bh-clients-strip img{
	width:100%;
	height:auto;
	display:block;
}

/* ============== VIDEO HERO (edge-to-edge) ============== */
.bh-video-hero{
	width:100%;
	padding:0 0 clamp(80px, 14vh, 200px);
}
.bh-video-frame{
	width:100%;
	aspect-ratio:16 / 9;
	background:#000;
	position:relative;
	overflow:hidden;
}
.bh-video-frame video,
.bh-video-frame img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.bh-video-frame .bh-video-placeholder{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:13px;
	letter-spacing:0.18em;
	text-transform:uppercase;
	opacity:0.4;
}

/* ---- Hero slideshow: 23 slides, ~1s each = 23s loop, crossfade + Ken Burns ---- */
.bh-slideshow .bh-slide{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0;
	transition:opacity 1s ease;   /* crossfade in/out */
	will-change:opacity, transform;
}
/* safety net: if JS is off, at least show the first photo (frame is never blank) */
.bh-slideshow .bh-slide:first-child{opacity:1}
/* JS adds .is-playing to the frame and toggles .is-active on one slide at a time */
.bh-slideshow.is-playing .bh-slide{opacity:0}
/* the active slide fades in and slowly zooms + pans (Ken Burns) */
.bh-slideshow.is-playing .bh-slide.is-active{opacity:1;animation:bhKenA 6s ease-out both}
/* alternate the pan direction on every second slide */
.bh-slideshow.is-playing .bh-slide:nth-child(even).is-active{animation-name:bhKenB}

/* zoom in while panning left -> right */
@keyframes bhKenA{
	from{transform:scale(1.04) translateX(-2%)}
	to  {transform:scale(1.13) translateX(2%)}
}
/* zoom in while panning right -> left */
@keyframes bhKenB{
	from{transform:scale(1.04) translateX(2%)}
	to  {transform:scale(1.13) translateX(-2%)}
}

/* reduced motion: keep the crossfade, drop the zoom/pan */
@media (prefers-reduced-motion: reduce){
	.bh-slideshow.is-playing .bh-slide.is-active{animation:none;transform:none}
}

/* ============== SECTORS (categories) ============== */
.bh-sectors-list{
	grid-column:7 / span 6;
}
.bh-sectors-list a{
	display:block;
	padding:20px 0;
	font-size:clamp(28px, 3vw, 44px);
	font-weight:300;
	letter-spacing:-0.02em;
	position:relative;
	transition:padding-left 240ms ease;
}
.bh-sectors-list a::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:1px;
	background:var(--ink);
	transform-origin:right center;
	transition:transform 480ms cubic-bezier(0.65, 0, 0.35, 1);
}
.bh-sectors-list a:hover{padding-left:16px}
.bh-sectors-list a:hover::after{transform:scaleX(0)}

/* ============== SERVICES (pill tags, 3 columns) ============== */
.bh-services-grid{
	grid-column:7 / span 6;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:clamp(20px, 2.5vw, 40px);
}
.bh-services-col-h{
	font-size:13px;
	font-weight:500;
	margin-bottom:22px;
}
.bh-services-col ul{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:7px;
	align-items:flex-start;
}
.bh-services-col li{display:block}
.bh-services-col a{
	display:inline-block;
	border:1px solid #c8c8c8;
	border-radius:999px;
	padding:6px 14px;
	font-size:12px;
	font-weight:400;
	line-height:1.2;
	letter-spacing:0;
	color:var(--ink);
	background:transparent;
	transition:border-color 160ms ease, background 160ms ease, color 160ms ease;
	white-space:nowrap;
}
.bh-services-col a:hover{
	border-color:var(--ink);
	background:var(--ink);
	color:var(--paper);
}

/* ============== RECENT WORKS ============== */
.bh-recent .bh-label{position:sticky;top:24px}
.bh-recent-stack{
	grid-column:7 / span 6;
	display:flex;
	flex-direction:column;
	gap:clamp(80px, 12vh, 140px);
}
.bh-project{display:block}
.bh-project-img{
	width:100%;
	aspect-ratio:16 / 10;
	overflow:hidden;
	background:#eee;
}
.bh-project-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform 600ms ease;
}
.bh-project:hover .bh-project-img img{transform:scale(1.02)}
.bh-project-meta{
	margin-top:14px;
	display:flex;
	flex-direction:column;
	gap:2px;
}
.bh-project-name{
	font-size:15px;
	font-weight:500;
}
.bh-project-tag{
	font-size:14px;
	color:var(--muted);
}

/* ============== STUDIO TEASER ============== */
.bh-studio-body{
	grid-column:7 / span 6;
	max-width:80ch;
}
.bh-studio-body p{
	margin:0 0 28px;
	font-size:clamp(20px, 1.6vw, 28px);
	line-height:1.35;
	letter-spacing:-0.015em;
}
.bh-studio-link{
	display:inline-block;
	font-size:14px;
	border-bottom:1px solid var(--ink);
	padding-bottom:1px;
}

/* ============== PROJECTS INDEX (3-col edge-to-edge tiles) ============== */
.bh-projects-grid{
	width:100%;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:0;
	row-gap:clamp(40px, 6vh, 80px);
}
.bh-cat-tile{display:block;position:relative}
.bh-cat-tile.is-hidden{display:none}
.bh-cat-img{
	width:100%;
	aspect-ratio:4 / 3;
	overflow:hidden;
	background:#eee;
}
.bh-cat-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform 700ms ease;
}
.bh-cat-tile:hover .bh-cat-img img{transform:scale(1.03)}
.bh-cat-meta{
	margin-top:14px;
	padding:0 var(--gutter);
	display:flex;
	flex-direction:column;
	gap:2px;
}
.bh-cat-name{
	font-size:15px;
	font-weight:500;
}
.bh-cat-tag{
	font-size:14px;
	color:var(--muted);
}

/* ============== FILTER BAR (above projects grid) ============== */
.bh-filter-bar{
	position:sticky;
	top:0;
	z-index:50;
	background:var(--paper);
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:20px var(--gutter);
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	font-size:13px;
}
.bh-filter-tabs{display:flex;gap:24px}
.bh-filter-tabs a{
	position:relative;
	padding:2px 0;
	color:var(--ink);
}
.bh-filter-tabs a sup{
	font-size:10px;
	margin-left:3px;
	color:var(--muted);
	font-weight:400;
}
.bh-filter-tabs a[data-active]::before{
	content:"\2022";
	position:absolute;
	left:-12px;
	top:50%;
	transform:translateY(-50%);
	font-size:14px;
}
.bh-sectors-trigger{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:none;
	border:none;
	font:inherit;
	color:inherit;
	cursor:pointer;
	padding:2px 0;
}
.bh-sectors-trigger:hover{text-decoration:underline;text-underline-offset:3px}

/* ============== SECTORS MODAL (full-page taxonomy) ============== */
.bh-sectors-modal{
	position:fixed;
	inset:0;
	background:var(--paper);
	z-index:300;
	display:none;
	flex-direction:column;
	padding:24px var(--gutter);
}
.bh-sectors-modal.is-open{display:flex}
.bh-sectors-modal-close{
	position:absolute;
	top:24px;
	right:var(--gutter);
	width:38px;
	height:38px;
	border-radius:50%;
	border:1px solid #c8c8c8;
	background:var(--paper);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	font-size:14px;
	color:var(--ink);
	transition:border-color 160ms ease;
}
.bh-sectors-modal-close:hover{border-color:var(--ink)}
.bh-sectors-modal-content{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
}
.bh-sectors-pills{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:center;
	align-items:center;
	max-width:880px;
}
.bh-sectors-pill{
	border:1px solid #c8c8c8;
	border-radius:999px;
	padding:9px 20px;
	font-size:13px;
	color:var(--ink);
	background:transparent;
	cursor:pointer;
	transition:border-color 160ms ease;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:inherit;
}
.bh-sectors-pill:hover{border-color:var(--ink)}
.bh-sectors-pill.is-selected{border-color:var(--ink);font-weight:500}
.bh-sectors-pill.is-selected::after{content:"\00d7";font-size:14px}

/* ============== PROJECT PAGE FLOATING BAR ============== */
.bh-project-bar{
	position:fixed;
	top:20px;
	left:var(--gutter);
	right:var(--gutter);
	z-index:200;
	display:flex;
	justify-content:space-between;
	align-items:center;
	pointer-events:none;
	transition:opacity 280ms ease, visibility 280ms ease;
}
.bh-project-bar.is-hidden{
	opacity:0;
	visibility:hidden;
}
.bh-project-bar > *{pointer-events:auto}
.bh-project-bar-left{
	display:flex;
	align-items:center;
	gap:14px;
}
.bh-project-bar-logo{display:block;font-family:"Inter",sans-serif;font-weight:900;font-size:20px;letter-spacing:-0.02em;color:#111;text-decoration:none;white-space:nowrap;line-height:1}
.bh-project-bar-logo img{
	height:96px;
	width:auto;
	display:block;
}
.bh-project-bar-meta{
	display:flex;
	flex-direction:column;
	font-size:16px;
	line-height:1.3;
	gap:2px;
}
.bh-project-bar-name{font-weight:500;font-size:18px}
.bh-project-bar-type{color:var(--muted);font-size:14px}
.bh-project-bar-controls{display:flex;gap:8px}
.bh-project-bar-btn{
	width:38px;
	height:38px;
	border-radius:50%;
	border:1px solid #c8c8c8;
	background:var(--paper);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	color:var(--ink);
	font-size:14px;
	font-family:inherit;
	transition:border-color 160ms ease, background 160ms ease;
	text-decoration:none;
}
.bh-project-bar-btn:hover{border-color:var(--ink)}

/* ============== PROJECT BODY (image rows + text sections) ============== */
.bh-project-hero{
	padding:clamp(150px, 18vh, 200px) var(--gutter) 60px;
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	column-gap:var(--gutter);
}
.bh-project-hero .bh-project-intro{
	grid-column:7 / span 6;
	font-size:clamp(18px, 1.5vw, 26px);
	line-height:1.4;
	margin:0;
	max-width:80ch;
}

.bh-row-image{width:100%;display:block}
.bh-row-image img{width:100%;height:auto;display:block}

/* Portrait/vertical hero — centered, capped width so source pixels are never upscaled */
.bh-row-image.is-portrait{
	display:flex;
	justify-content:center;
	padding:clamp(40px, 6vh, 80px) var(--gutter);
}
.bh-row-image.is-portrait img{
	width:auto;
	max-width:min(720px, 100%);
	max-height:88vh;
	height:auto;
}

/* Landscape hero with smaller source — cap so it doesn't upscale past natural width */
.bh-row-image.is-contained{
	display:flex;
	justify-content:center;
}
.bh-row-image.is-contained img{
	width:auto;
	max-width:100%;
	height:auto;
}

.bh-row-multi{
	width:100%;
	display:grid;
	gap:0;
	align-items:stretch;
}
.bh-row-multi.cols-2{grid-template-columns:1fr 1fr}
.bh-row-multi.cols-3{grid-template-columns:repeat(3,1fr)}
.bh-row-multi.cols-5{grid-template-columns:repeat(5,1fr)}

/* Direct <img> children (legacy templates): natural heights, no equalisation */
.bh-row-multi > img{
	width:100%;
	height:auto;
	display:block;
	align-self:start;
}

/* Cell-wrapped images (gallery pages): cells stretch to tallest cell's height,
   image sits centered with white space above/below so the row reads as equal-height */
.bh-row-multi > .bh-row-cell{
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	min-width:0;
	overflow:hidden;
}
.bh-row-multi > .bh-row-cell img{
	width:100%;
	height:auto;
	display:block;
}

.bh-section-text{
	padding:clamp(56px, 9vh, 120px) var(--gutter);
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	column-gap:var(--gutter);
}
.bh-section-text .bh-label{grid-column:1 / span 2;padding-top:6px}
.bh-section-text-body{
	grid-column:7 / span 6;
	margin:0;
	font-size:clamp(15px, 1.1vw, 18px);
	line-height:1.55;
	max-width:80ch;
}

.bh-info-block{
	padding:clamp(56px, 9vh, 120px) var(--gutter);
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	column-gap:var(--gutter);
	border-top:1px solid #eee;
}
.bh-info-block .bh-label{grid-column:1 / span 2;padding-top:6px}
.bh-info-grid{
	grid-column:7 / span 6;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:32px;
	font-size:13px;
}
.bh-info-h{font-weight:500;margin-bottom:8px}
.bh-info-tags{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bh-info-tag{
	display:inline-block;
	border:1px solid #c8c8c8;
	border-radius:999px;
	padding:6px 14px;
	font-size:12px;
}

/* ============== PROJECT (single category — masonry) ============== */
.bh-project-head{
	width:100%;
	padding:clamp(40px, 6vh, 80px) var(--gutter) clamp(56px, 9vh, 140px);
	display:grid;
	grid-template-columns:repeat(12,1fr);
	column-gap:var(--gutter);
}
.bh-project-head h1{
	grid-column:1 / -1;
	margin:0 0 32px;
	font-weight:300;
	font-size:clamp(56px, 9vw, 160px);
	line-height:0.95;
	letter-spacing:-0.04em;
}
.bh-project-head .bh-label{grid-column:1 / span 2;padding-top:6px}
.bh-project-head .bh-project-intro{
	grid-column:7 / span 6;
	font-size:clamp(18px, 1.4vw, 24px);
	line-height:1.4;
	margin:0;
	max-width:80ch;
}

.bh-masonry{
	width:100%;
	padding:0 var(--gutter) clamp(80px, 12vh, 160px);
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:clamp(12px, 1.6vw, 24px);
}
.bh-masonry .bh-mason-item{
	margin:0;
	display:block;
	width:100%;
}
.bh-masonry img{
	width:100%;
	height:100%;
	aspect-ratio:4 / 5;
	object-fit:cover;
	display:block;
}

.bh-discover{
	width:100%;
	padding:clamp(40px, 6vh, 80px) var(--gutter) clamp(80px, 12vh, 160px);
	display:grid;
	grid-template-columns:repeat(12,1fr);
	column-gap:var(--gutter);
}
.bh-discover .bh-label{grid-column:1 / span 2;padding-top:6px}
.bh-discover-grid{
	grid-column:3 / -1;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(20px, 2.5vw, 40px);
}

/* ============== CONTACT CARDS (2x2 grid on desktop) ============== */
.bh-contact-grid{
	grid-column:7 / span 6;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(16px, 2vw, 32px);
}
.bh-contact-card{
	display:flex;
	flex-direction:column;
	gap:6px;
	padding:24px;
	border:1px solid #c8c8c8;
	border-radius:4px;
	background:var(--paper);
	transition:border-color 200ms ease, transform 200ms ease;
}
.bh-contact-card:hover{
	border-color:var(--ink);
	transform:translateY(-2px);
}
.bh-contact-card-h{
	font-size:12px;
	font-weight:500;
	letter-spacing:0.04em;
	text-transform:uppercase;
	color:var(--muted);
}
.bh-contact-card-v{
	font-size:clamp(18px, 1.5vw, 22px);
	font-weight:400;
	letter-spacing:-0.015em;
	color:var(--ink);
	word-break:break-word;
}
.bh-contact-card-meta{
	font-size:12px;
	color:var(--muted);
	margin-top:4px;
}
@media (max-width:760px){
	.bh-contact-grid{grid-template-columns:1fr;gap:14px}
	.bh-contact-card{padding:18px}
}

/* ============== INSTAGRAM STRIP ============== */
.bh-insta{
	width:100%;
	padding:clamp(64px, 10vh, 140px) 0 clamp(40px, 6vh, 72px);
}
.bh-insta-grid{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	gap:0;
}
.bh-insta-tile{
	position:relative;
	aspect-ratio:1 / 1;
	overflow:hidden;
	display:block;
}
.bh-insta-tile img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform 600ms ease, filter 320ms ease;
	filter:grayscale(1);
}
.bh-insta-tile:hover img{
	transform:scale(1.05);
	filter:grayscale(0);
}
.bh-insta-cta{
	display:flex;
	justify-content:center;
	padding:clamp(28px, 4vh, 56px) var(--gutter) 0;
}
.bh-insta-cta a{
	display:inline-flex;
	align-items:center;
	gap:10px;
	background:var(--ink);
	color:var(--paper);
	padding:14px 28px;
	font-size:13px;
	font-weight:500;
	letter-spacing:0.04em;
	border-radius:999px;
	transition:background 160ms ease;
}
.bh-insta-cta a:hover{background:#222}
.bh-insta-cta svg{width:16px;height:16px;flex-shrink:0}

/* Optional: LightWidget iframe wrapper if user goes that route */
.bh-insta-iframe iframe{width:100%;border:0;display:block}

/* ============== FOOTER ============== */
.bh-footer{
	display:grid;
	grid-template-columns:repeat(12,1fr);
	column-gap:var(--gutter);
	padding:0 var(--gutter) clamp(40px, 5vh, 72px);
	align-items:end;
	row-gap:clamp(48px, 8vh, 96px);
}

.bh-footer-mark{
	grid-column:1 / span 4;
	display:block;
}
.bh-footer-mark img{
	display:block;
	width:clamp(180px, 22vw, 360px);
	height:auto;
}

.bh-footer-links,
.bh-footer-office,
.bh-footer-phone,
.bh-footer-email{
	font-size:14px;
	line-height:1.55;
}

.bh-footer-links{grid-column:5 / span 2;display:flex;flex-direction:column;gap:4px}
.bh-footer-office{grid-column:7 / span 2}
.bh-footer-phone{grid-column:9 / span 2}
.bh-footer-email{grid-column:11 / span 2}

.bh-footer-h{
	font-weight:500;
	margin-bottom:4px;
}

.bh-footer a:hover{text-decoration:underline;text-underline-offset:3px}

/* Footer social icons — full-width row under the footer columns */
.bh-footer-social{
	grid-column:1 / -1;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:18px;
	margin-top:28px;
	padding-top:24px;
	border-top:1px solid rgba(0,0,0,0.1);
}
.bh-footer-social a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:var(--ink);
	opacity:0.55;
	transition:opacity .2s ease;
}
.bh-footer-social a:hover{opacity:1;text-decoration:none}
.bh-footer-social svg{width:20px;height:20px;fill:currentColor;display:block}

/* Studio — "behind the lens" portrait photos (3-up) */
.bh-portraits-grid{
	grid-column:3 / -1;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:var(--gutter);
}
.bh-portraits-grid img{
	width:100%;
	aspect-ratio:4 / 5;
	object-fit:cover;
	display:block;
}
@media (max-width:760px){
	.bh-portraits-grid{grid-column:1 / -1;grid-template-columns:1fr 1fr;gap:12px}
	.bh-footer-social{gap:14px;margin-top:20px;padding-top:18px}
}

/* ============== GALLERY PAGE WRAPPER ==============
   Text sections capped to 1400px for comfortable reading width.
   Images (heroes, multi-rows, masonry) AND the discover-other-projects footer
   stay FULL-BLEED for visual impact.
   Scoped to body.bh-gallery-page so other pages are untouched. */
.bh-gallery-page .bh-project-hero,
.bh-gallery-page .bh-section-text,
.bh-gallery-page .bh-info-block{
	max-width:1400px;
	margin-left:auto;
	margin-right:auto;
}

/* ============== BREADCRUMB (inline in project-hero) ============== */
.bh-breadcrumb-inline{
	grid-column:1 / span 5;
	font-size:12px;
	color:var(--muted);
	padding-top:6px;
	margin:0;
}
.bh-breadcrumb-inline ol{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}
.bh-breadcrumb-inline li{display:flex;align-items:center;gap:6px}
.bh-breadcrumb-inline li + li::before{content:"/"}
.bh-breadcrumb-inline a{color:var(--ink)}
.bh-breadcrumb-inline a:hover{text-decoration:underline;text-underline-offset:2px}
.bh-breadcrumb-inline [aria-current="page"]{color:var(--muted)}

/* ============== GALLERY PAGE (single subfolder, masonry) ============== */
.bh-gallery-head{
	width:100%;
	padding:clamp(140px, 18vh, 200px) var(--gutter) clamp(56px, 9vh, 120px);
	display:grid;
	grid-template-columns:repeat(12,1fr);
	column-gap:var(--gutter);
	row-gap:32px;
}
.bh-gallery-head .bh-breadcrumb{
	grid-column:1 / -1;
	font-size:13px;
	color:var(--muted);
	margin:0;
}
.bh-gallery-head .bh-breadcrumb ol{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}
.bh-gallery-head .bh-breadcrumb li{display:flex;align-items:center;gap:6px}
.bh-gallery-head .bh-breadcrumb li + li::before{content:"/";color:var(--muted)}
.bh-gallery-head .bh-breadcrumb a{color:var(--ink)}
.bh-gallery-head .bh-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.bh-gallery-head .bh-breadcrumb [aria-current="page"]{color:var(--muted)}

.bh-gallery-head h1{
	grid-column:1 / -1;
	margin:0;
	font-weight:300;
	font-size:clamp(40px, 6.5vw, 104px);
	line-height:1.0;
	letter-spacing:-0.035em;
	max-width:18ch;
}
.bh-gallery-head .bh-label{grid-column:1 / span 2;padding-top:6px}
.bh-gallery-head .bh-gallery-intro{
	grid-column:7 / span 6;
	font-size:clamp(18px, 1.4vw, 24px);
	line-height:1.4;
	margin:0;
	max-width:80ch;
	color:var(--ink);
}
.bh-gallery-head .bh-gallery-body{
	grid-column:7 / span 6;
	font-size:clamp(15px, 1.05vw, 17px);
	line-height:1.6;
	margin:0;
	max-width:75ch;
	color:#333;
}

/* ============== TABLET ============== */
@media (min-width:761px) and (max-width:1024px){
	:root{--gutter:clamp(20px, 3vw, 40px)}

	.bh-masonry{grid-template-columns:repeat(2,1fr)}
	.bh-projects-grid{grid-template-columns:repeat(2,1fr)}
	.bh-services-grid{grid-template-columns:1fr 1fr}
	.bh-insta-grid{grid-template-columns:repeat(4, 1fr)}

	.bh-row{grid-template-columns:repeat(12,1fr)}
	.bh-body,
	.bh-clients-strip,
	.bh-sectors-list,
	.bh-services-grid,
	.bh-recent-stack,
	.bh-studio-body,
	.bh-project-hero .bh-project-intro,
	.bh-section-text-body,
	.bh-info-grid,
	.bh-gallery-head .bh-gallery-intro,
	.bh-gallery-head .bh-gallery-body{
		grid-column:5 / span 8;
	}

	.bh-project-bar-logo{font-size:18px}
	.bh-project-bar-logo img{height:72px}

	.bh-footer{
		grid-template-columns:repeat(6,1fr);
		row-gap:40px;
	}
	.bh-footer-mark{grid-column:1 / -1}
	.bh-footer-mark img{width:clamp(180px, 28vw, 320px)}
	.bh-footer-links{grid-column:1 / span 3}
	.bh-footer-office{grid-column:4 / span 3}
	.bh-footer-phone{grid-column:1 / span 3}
	.bh-footer-email{grid-column:4 / span 3}
}

/* ============== MOBILE ============== */
@media (max-width:760px){
	:root{--gutter:18px}

	.bh-nav{
		top:14px;
		right:var(--gutter);
		gap:16px;
	}
	.bh-nav-links{gap:14px;font-size:12px}

	.bh-logo-hero{
		padding:64px var(--gutter) 0;
	}
	.bh-logo-hero img{width:min(80vw, 320px);max-height:40vh}

	.bh-sticky-nav{padding:10px var(--gutter)}
	.bh-sticky-logo img{height:48px}
	.bh-sticky-links{gap:14px;font-size:12px}

	.bh-insta-grid{grid-template-columns:repeat(3, 1fr)}
	.bh-insta{padding:48px 0 32px}

	.bh-projects-grid{
		grid-template-columns:1fr;
		row-gap:32px;
		padding:0;
	}
	.bh-masonry{grid-template-columns:repeat(2,1fr);padding:0 var(--gutter) 64px}
	.bh-project-head{padding:32px var(--gutter) 48px}
	.bh-project-head .bh-label{grid-column:1 / -1;padding-top:0}
	.bh-project-head .bh-project-intro{grid-column:1 / -1}
	.bh-discover{padding:32px var(--gutter) 64px;grid-template-columns:1fr}
	.bh-discover .bh-label{grid-column:1 / -1}
	.bh-discover-grid{grid-column:1 / -1;grid-template-columns:1fr;gap:32px}

	.bh-filter-bar{padding:14px var(--gutter);font-size:12px}
	.bh-filter-tabs{gap:14px}

	.bh-project-bar{top:14px}
	.bh-project-bar-logo{font-size:16px}
	.bh-project-bar-logo img{height:56px}
	.bh-project-bar-meta{font-size:13px;gap:1px}
	.bh-project-bar-name{font-size:14px}
	.bh-project-bar-type{font-size:11px}
	.bh-project-bar-btn{width:32px;height:32px;font-size:12px}

	.bh-project-hero{padding:80px var(--gutter) 40px}
	.bh-project-hero .bh-project-intro{grid-column:1 / -1;font-size:18px}

	.bh-gallery-head{padding:80px var(--gutter) 40px;row-gap:20px}
	.bh-gallery-head h1{font-size:36px;letter-spacing:-0.02em;max-width:none}
	.bh-gallery-head .bh-label{grid-column:1 / -1;padding-top:0}
	.bh-gallery-head .bh-gallery-intro,
	.bh-gallery-head .bh-gallery-body{grid-column:1 / -1;font-size:16px}

	.bh-breadcrumb-inline{grid-column:1 / -1;font-size:11px;padding-top:0}

	.bh-row-multi.cols-2,
	.bh-row-multi.cols-3,
	.bh-row-multi.cols-5{grid-template-columns:1fr 1fr}

	.bh-section-text{padding:48px var(--gutter)}
	.bh-section-text .bh-label,
	.bh-section-text-body{grid-column:1 / -1}

	.bh-info-block{padding:48px var(--gutter)}
	.bh-info-block .bh-label{grid-column:1 / -1}
	.bh-info-grid{grid-column:1 / -1;grid-template-columns:1fr;gap:24px}

	.bh-wordmark{
		font-size:24vw;
		letter-spacing:-0.05em;
	}

	.bh-hero{
		padding:80px var(--gutter) 60px;
	}

	.bh-row{
		grid-template-columns:1fr;
		row-gap:18px;
		padding:48px var(--gutter);
	}
	.bh-label,
	.bh-body,
	.bh-clients-strip,
	.bh-sectors-list,
	.bh-services-grid,
	.bh-recent-stack,
	.bh-studio-body{grid-column:1 / -1}

	.bh-label{padding-top:0}

	.bh-body{font-size:18px}

	.bh-recent .bh-label{position:static}

	.bh-services-grid{grid-template-columns:1fr;gap:32px}

	.bh-sectors-list a{font-size:24px;padding:14px 0}
	.bh-sectors-list a:hover{padding-left:8px}

	.bh-recent-stack{gap:48px}
	.bh-studio-body p{font-size:18px}

	.bh-video-hero{padding:0 0 80px}

	.bh-footer{
		grid-template-columns:1fr 1fr;
		row-gap:32px;
		padding:0 var(--gutter) 32px;
	}
	.bh-footer-mark{grid-column:1 / -1}
	.bh-footer-mark img{width:60vw;max-width:320px}
	.bh-footer-links{grid-column:1 / -1}
	.bh-footer-office{grid-column:1 / span 1}
	.bh-footer-phone{grid-column:2 / span 1}
	.bh-footer-email{grid-column:1 / -1}
}