/*!
Theme Name: Beatbridge V2
Theme URI: http://underscores.me/
Author: Me
Author URI: http://underscores.me/
Description: Custom theme: Beatbridge V2, developed by Me
Version: 2.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: beatbridge-v2
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Beatbridge V2 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design tokens (variables)
# Reset & base
# Layout helpers (container, sections)
# Buttons & shared components
# Header / navigation
# Footer
# Contact CTA band ("Let's work together")
# Home page
# Inner page shared blocks (header hero, two-col, why-beatbridge)
# Accessibility
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
	--bb-teal: #009cc8;
	--bb-teal-dark: #0084ab;
	--bb-cyan: #5ac3e2;
	--bb-blue-band: #a0d8ef;
	--bb-bg-soft: #f6fafc;
	--bb-white: #ffffff;
	--bb-ink: #0e0e0e;
	--bb-body: #3a3a3a;
	--bb-muted: #6b7785;
	--bb-border: #e3edf3;

	--bb-container: 1740px; /* design content box: 1920 - 2*90 side margins */
	--bb-gutter: 40px;

	--bb-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*--------------------------------------------------------------
# Reset & base
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--bb-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.7;
	color: var(--bb-body);
	background: var(--bb-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--bb-teal); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--bb-teal-dark); }

h1, h2, h3, h4, h5, h6 { font-family: var(--bb-font); color: var(--bb-ink); margin: 0 0 .5em; line-height: 1.2; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.site { overflow-x: hidden; }

/*--------------------------------------------------------------
# Layout helpers
--------------------------------------------------------------*/
.container {
	width: min(var(--bb-container), calc(100% - 2 * var(--bb-gutter)));
	margin: 0 auto;
}

.section { padding: clamp(32px, 2.4vw, 46px) 0; }
.section.bg-soft { background: var(--bb-bg-soft); }
/* The band's padding is colored, so it doesn't read as white gap. Add a margin
   equal to a section's padding so the WHITE gap to neighbors is ~90px like the PDF. */
.section.bg-band { background: var(--bb-blue-band); margin: clamp(30px, 2.3vw, 44px) 0; }

/* Centered cyan section heading used across the design (#5ac4e3, Montserrat Bold 60) */
.section-title {
	text-align: center;
	color: var(--bb-cyan);
	font-size: clamp(30px, 3.13vw, 60px);
	font-weight: 700;
	margin: 0 0 clamp(34px, 3.3vw, 64px);
}

/* Bold dark lead headline used inside two-column blocks (Montserrat Bold 47, #000) */
.lead-title {
	color: var(--bb-ink);
	font-size: clamp(26px, 2.45vw, 47px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 28px;
}
/* Light-weight subheading line inside a lead-title (Montserrat Light 47, same size as the bold line) */
.lead-title .lead-sub { font-weight: 300; }

.text-body { color: var(--bb-ink); font-size: clamp(17px, 1.46vw, 28px); line-height: 1.46; }
.text-body p { margin-bottom: 24px; }

/*--------------------------------------------------------------
# Buttons & shared components
--------------------------------------------------------------*/
.btn {
	display: inline-block;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	padding: 15px 34px;
	border-radius: 6px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all .2s ease;
}
.btn-primary { background: var(--bb-teal); color: #fff; }
.btn-primary:hover { background: var(--bb-teal-dark); color: #fff; }
.btn-outline { background: transparent; color: #fff; border-color: #fff; }
.btn-outline:hover { background: #fff; color: var(--bb-teal); }
.btn-ghost-teal { background: transparent; color: var(--bb-teal); border-color: var(--bb-teal); }
.btn-ghost-teal:hover { background: var(--bb-teal); color: #fff; }

/* Circular arrow button (AI Approach / Our Projects) */
.arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--bb-cyan);
	color: #fff;
	line-height: 1;
}
.arrow-btn:hover { background: var(--bb-teal); color: #fff; }
/* White chevron (›), matching the PDF — not a full arrow. */
.arrow-btn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/*--------------------------------------------------------------
# Header / navigation
--------------------------------------------------------------*/
.site-header {
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header-container {
	width: min(var(--bb-container), calc(100% - 2 * var(--bb-gutter)));
	margin: 0 auto;
	padding: clamp(20px, 2.4vw, 45px) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.site-branding .custom-logo { height: clamp(40px, 3.1vw, 58px); width: auto; }

.main-navigation .nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(24px, 2.2vw, 42px);
}
.main-navigation .nav-menu a {
	color: #000;
	font-size: clamp(15px, 1.15vw, 21px);
	font-weight: 400;
	white-space: nowrap;
}
.main-navigation .nav-menu a:hover { color: var(--bb-teal); }
/* Active page: same as Home but a thin cyan line under the current menu item
   (text-decoration sits a fixed offset under the baseline — matches the PDF's 1px line, 3px gap) */
.main-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--bb-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.menu-toggle-bar {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	background: var(--bb-ink);
	border-radius: 3px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer { background: var(--bb-bg-soft); }
.footer-top { padding: 60px 0 56px; }
.footer-container {
	width: min(var(--bb-container), calc(100% - 2 * var(--bb-gutter)));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(30px, 3vw, 56px);
}
.footer-logo { height: clamp(40px, 3.12vw, 60px); width: auto; margin-bottom: clamp(20px, 1.9vw, 37px); }
.footer-tagline { color: var(--bb-ink); font-size: clamp(15px, 1.25vw, 24px); line-height: 1.5; max-width: none; margin-bottom: clamp(20px, 2vw, 38px); }
.footer-social a { display: inline-flex; }
.footer-social svg { width: 40px; height: 40px; fill: #0077b5; /* LinkedIn brand blue, knockout "in" */ }
.footer-social a:hover svg { fill: #005e8e; }

.footer-heading { color: var(--bb-ink); font-size: clamp(18px, 1.25vw, 24px); font-weight: 700; margin: 0 0 clamp(34px, 3.5vw, 68px); }
.footer-nav ul, .footer-projects ul {
	list-style: none; margin: 0; padding: 0;
}
.footer-nav li, .footer-projects li { margin-bottom: clamp(12px, 1.45vw, 23px); line-height: 1.3; }
.footer-nav a { color: var(--bb-ink); font-size: clamp(15px, 1.09vw, 21px); }
.footer-nav a:hover { color: var(--bb-teal); }
.footer-projects li { color: var(--bb-ink); font-size: clamp(15px, 1.09vw, 21px); }
.footer-contact address { font-style: normal; color: var(--bb-ink); font-size: clamp(15px, 1.09vw, 21px); line-height: 1.5; }
.footer-contact p { margin: 0 0 clamp(14px, 1.5vw, 25px); }
.footer-contact a { color: var(--bb-ink); }
.footer-contact a:hover { color: var(--bb-teal); }

/* thin gray dividers between footer columns (PDF samples #646667). */
.footer-nav, .footer-projects, .footer-contact { padding-left: clamp(24px, 3vw, 56px); border-left: 1px solid #646667; }
.footer-brand { border-left: 0; padding-left: 0; }

.footer-bottom { border-top: 1px solid #e1e7eb; padding: 30px 0; }
.footer-bottom .footer-container { display: block; }
.footer-copyright { text-align: center; color: var(--bb-ink); font-size: clamp(14px, 0.94vw, 18px); margin: 0; }
.footer-legal { text-align: center; margin: 10px 0 0; font-size: clamp(13px, 0.83vw, 16px); }
.footer-legal a { color: var(--bb-ink); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
.footer-legal .footer-legal-sep { color: var(--bb-ink); margin: 0 6px; opacity: 0.6; }

/*--------------------------------------------------------------
# Contact CTA band ("Let's work together")
--------------------------------------------------------------*/
.cta-band {
	position: relative;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	padding: clamp(20px, 2vw, 36px) 0;
	/* The contact photo asset is 1920x780, but the neighbouring section/footer cover its
	   top & bottom — the VISIBLE wood band is ~400px on every page (measured). Match that
	   (20.83vw = 400px at the 1920 design width); content sits centered in the band. */
	min-height: clamp(280px, 20.83vw, 400px);
}
/* CTA content is inset ~45px both sides (text at x137, button point near x1785). */
.cta-band .container { display: flex; align-items: center; gap: 40px; padding-left: clamp(0px, 2.45vw, 47px); padding-right: clamp(0px, 2.45vw, 47px); }
.cta-band-title { color: var(--bb-ink); font-size: clamp(28px, 3.13vw, 60px); font-weight: 900; line-height: 1.33; margin: 0; }
/* Short black divider between the CTA title and subtitle (like the hero rule). */
.cta-rule { width: clamp(80px, 6.8vw, 131px); height: 3px; background: #000; border: 0; margin: clamp(14px, 1.6vw, 24px) 0; }
.cta-band-sub { color: var(--bb-ink); font-size: clamp(16px, 1.72vw, 33px); font-weight: 500; line-height: 1.5; margin: 0; max-width: none; }
/* Tall thin white chevron, set ~155px to the right of the title (PDF: title ends x793,
   chevron at x948; container gap is 40px, so add ~115px). Vertically centered with title. */
.cta-band-arrow { line-height: 0; margin-left: clamp(8px, 5.99vw, 115px); }
.cta-band-arrow svg { height: clamp(72px, 7.13vw, 137px); width: auto; fill: #fff; stroke: none; }
/* Cyan hexagon banner with black text (pointed left/right ends), right-aligned. */
.cta-band-btn {
	margin-left: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bb-cyan);
	color: #000;
	font-weight: 700;
	font-size: clamp(18px, 1.82vw, 35px);
	line-height: 1;
	padding: clamp(13px, 1.1vw, 21px) clamp(16px, 1.35vw, 26px);
	clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}
.cta-band-btn:hover { background: var(--bb-teal); color: #fff; }

/*--------------------------------------------------------------
# Home page
--------------------------------------------------------------*/
/* Hero */
/* Hero has no bottom padding, so add a bottom margin equal to a section's top
   padding — otherwise the hero→first-section gap is only ~46px vs the PDF's ~90px. */
.home-hero, .page-hero { margin-bottom: clamp(32px, 2.4vw, 46px); }
.home-hero { position: relative; }
.home-hero-bg { position: relative; }
.home-hero-bg img { width: 100%; display: block; }
.home-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(8,40,66,.35) 0%, rgba(8,40,66,.08) 55%, rgba(8,40,66,0) 100%);
}
.home-hero-content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
}
.home-hero-content .container,
.page-hero-content .container { padding-left: clamp(0px, 2.45vw, 47px); }
.home-hero-content .container { width: min(var(--bb-container), calc(100% - 2 * var(--bb-gutter))); }
.home-hero-title {
	color: #fff;
	font-size: clamp(30px, 3.6vw, 60px);
	font-weight: 900; /* Montserrat Black */
	line-height: 1.3;
	max-width: 16em;
	margin: 0;
	text-shadow: 0 2px 14px rgba(0,0,0,.3);
}

/* Short white rule between hero title and subtitle (≈130px × 2px in the design).
   Margins are reduced to offset the title's line-height trailing space so the
   visual gap matches the PDF (~52px above / ~50px below at 1920). */
.hero-rule {
	width: clamp(80px, 6.8vw, 130px);
	height: 2px;
	background: #fff;
	border: 0;
	margin: clamp(14px, 1.8vw, 34px) 0;
}
.home-hero-text {
	color: #fff;
	font-size: clamp(17px, 2.1vw, 40px);
	font-weight: 500; /* Montserrat Medium */
	line-height: 1.375;
	max-width: 23em;
	margin: 0;
	text-shadow: 0 1px 10px rgba(0,0,0,.3);
}

/* What we do */
.whatwedo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.wwd-card {
	background: var(--bb-bg-soft);
	padding: 40px 26px 46px;
	border-radius: 4px;
}
.wwd-icon { height: 88px; margin-bottom: 30px; display: flex; align-items: flex-start; }
.wwd-icon img { height: 88px; width: auto; }
.wwd-card h3 { font-size: clamp(20px, 1.46vw, 28px); font-weight: 700; color: var(--bb-ink); margin: 0 0 20px; }
.wwd-card p { color: var(--bb-ink); font-size: clamp(15px, 1.09vw, 21px); line-height: 1.48; margin: 0; }

/* How we work — PDF has the photo larger than the diagram (photo ~1143, diagram ~842);
   give the photo a bit more width and enlarge the diagram. */
.howwework-row {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
}
.howwework-photo img { width: 100%; border-radius: 2px; }
.howwework-diagram img { width: 100%; max-width: 840px; margin: 0 auto; }

/* Who we are band */
.whoweare { text-align: center; }
.whoweare h2 { color: #fff; font-size: clamp(30px, 3.13vw, 60px); font-weight: 700; margin: 0 0 30px; }
.whoweare p { color: #fff; font-size: clamp(18px, 2.45vw, 47px); font-weight: 400; line-height: 1.21; margin: 0 auto 18px; max-width: 26em; }
.whoweare p + p { margin-top: 14px; }
.whoweare-link {
	display: inline-block;
	margin-top: 30px;
	color: #fff;
	font-weight: 700;
	font-size: clamp(18px, 1.5vw, 29px);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}
.whoweare-link:hover { color: #fff; opacity: .85; }

/* AI Approach + Our Projects two-column blocks */
.split-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start; /* PDF top-aligns the text with the image, not centered */
}
.split-row.media-left .split-media { order: 0; }
/* Images keep their natural aspect (the section PNGs are exported at the design's
   intended ratio — either ~1.06 tall or ~1.69 wide — matching the PDF per image). */
.split-media img { width: 100%; height: auto; display: block; border-radius: 4px; }
/* Some section photos are placed in the design at a ratio different from the exported
   PNG (e.g. IT_Support source 1.69 shown ~2.0; UiUx_Support shown ~1.5). Crop to the
   design ratio (override aspect-ratio inline per use). */
.split-media.media-wide { aspect-ratio: 851 / 418; overflow: hidden; border-radius: 4px; }
.split-media.media-wide img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.split-text p { color: var(--bb-ink); font-size: clamp(16px, 1.46vw, 28px); line-height: 1.46; margin-bottom: 24px; }
/* The design wraps body copy at a consistent ~720-740px measure (text doesn't fill
   the full half-column up to the photo). Cap the direct-child body paragraphs so line
   breaks match the PDF; feature-list paragraphs (nested deeper) keep their own width. */
.split-text > p:not(.lead-title) { max-width: 760px; }
/* lead-title must win over .split-text p (higher specificity) */
.split-text p.lead-title { font-size: clamp(26px, 2.45vw, 47px); line-height: 1.21; margin-bottom: 30px; }
.split-text .arrow-btn { margin-top: 18px; margin-left: auto; /* right-align in the text column, per PDF */ }

/*--------------------------------------------------------------
# Inner page shared blocks
--------------------------------------------------------------*/
/* Page hero header (image band with centered title) */
.page-hero { position: relative; }
.page-hero-bg img { width: 100%; display: block; }
.page-hero-overlay {
	position: absolute; inset: 0;
	/* The hero photos are already dark enough on the left (lum ~60); keep only a
	   light fade for text legibility so the image isn't darkened vs the PDF. */
	background: linear-gradient(90deg, rgba(8,40,66,.22) 0%, rgba(8,40,66,.04) 45%, rgba(8,40,66,0) 70%);
}
.page-hero-content { position: absolute; inset: 0; display: flex; align-items: center; }
.page-hero-content .container { width: min(var(--bb-container), calc(100% - 2 * var(--bb-gutter))); }
.page-hero-title {
	color: #fff;
	font-size: clamp(30px, 3.6vw, 60px);
	font-weight: 900; /* Montserrat Black */
	line-height: 1.3;
	max-width: 20em;
	margin: 0;
	text-shadow: 0 2px 14px rgba(0,0,0,.3);
}
/* Page-hero block is a touch tighter than the home hero so its total height
   matches the PDF (centered → keeps title AND subtitle aligned). */
.page-hero .hero-rule { margin: clamp(12px, 1.5vw, 24px) 0; }
.page-hero-text {
	color: #fff;
	font-size: clamp(16px, 2.1vw, 40px);
	font-weight: 500; /* Montserrat Medium */
	line-height: 1.375;
	max-width: 28em;
	margin: 0;
	text-shadow: 0 1px 10px rgba(0,0,0,.3);
}

/* Generic intro paragraph centered under a section title (large, like the design) */
.section-intro {
	text-align: center;
	color: var(--bb-ink);
	font-size: clamp(18px, 2.45vw, 47px);
	line-height: 1.21;
	max-width: 26em;
	margin: 0 auto;
}

/* Engagement-model / icon cards (icon + title + body + bullet list) on soft panels
   (PDF: #f6fafc panels ~549px wide, 47px gap, ~28px padding, 99px icons) */
.eng-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.45vw, 47px); }
.eng-card { background: var(--bb-bg-soft); padding: clamp(24px, 2vw, 32px); border-radius: 4px; }
.eng-card .eng-icon { height: clamp(64px, 5.2vw, 99px); margin-bottom: 28px; }
.eng-card .eng-icon img { height: 100%; width: auto; }
.eng-card h3 { font-size: clamp(20px, 1.46vw, 28px); font-weight: 700; color: var(--bb-ink); margin: 0 0 18px; }
.eng-card p { color: var(--bb-ink); font-size: clamp(15px, 1.09vw, 21px); line-height: 1.48; margin: 0 0 14px; }
.eng-card ul { margin: 0; padding-left: 1.3em; }
.eng-card li { color: var(--bb-ink); font-size: clamp(15px, 1.09vw, 21px); line-height: 1.5; }

/* Feature list used on the text side of a split (e.g. "Why Beatbridge") */
.feature-list { display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 28px); }
.feature-item h3 { color: var(--bb-ink); font-size: clamp(18px, 1.46vw, 28px); font-weight: 700; margin: 0 0 8px; }
.feature-item p { color: var(--bb-ink); font-size: clamp(15px, 1.46vw, 28px); line-height: 1.4; margin: 0; }

/* Tech-stack grid (4 columns of bulleted lists on soft panels) */
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 36px); }
.tech-card { background: var(--bb-bg-soft); padding: clamp(24px, 2vw, 40px) clamp(20px, 1.6vw, 32px); border-radius: 4px; }
.tech-card h4 { color: var(--bb-ink); font-size: clamp(18px, 1.25vw, 24px); font-weight: 700; margin: 0 0 16px; }
.tech-card ul { margin: 0; padding-left: 1.2em; }
.tech-card li { color: var(--bb-ink); font-size: clamp(15px, 1.25vw, 24px); line-height: 1.6; }

/* Bulleted "who we support"-style list */
.support-list { list-style: none; margin: 24px 0; padding: 0; }
.support-list li {
	position: relative; padding-left: 28px; margin-bottom: 14px;
	color: var(--bb-ink); font-size: clamp(16px, 1.46vw, 28px); font-weight: 700;
}
.support-list li::before {
	content: ""; position: absolute; left: 4px; top: .55em;
	width: 9px; height: 9px; border-radius: 50%; background: var(--bb-ink);
}

/* Standalone centered flow diagram (page-specific extracted graphic).
   PDF diagram content is ~1056px wide; the asset includes a little margin, so
   ~1100px display width renders the content at the PDF size. */
.flow-diagram { text-align: center; }
.flow-diagram img { display: inline-block; width: 100%; max-width: 1100px; }
.section-intro + .flow-diagram { margin-top: clamp(36px, 3.7vw, 70px); }

/* Centered icon above a grid (e.g. Expertise) */
.center-icon { text-align: center; margin: clamp(30px, 3.5vw, 60px) 0 clamp(30px, 3vw, 56px); }
.center-icon img { display: inline-block; height: clamp(70px, 6vw, 110px); width: auto; }

/* Expertise tech tree: icon -> connector bus -> 4 soft-panel columns.
   Rebuilt as HTML/CSS (was a baked PNG) so the tech lists stay editable.
   Cyan #5ac3e2 connectors, 24px Bold headings + 24px Regular items (measured
   from the PDF). The tree footprint is ~1072px wide, centered, per the design. */
.expertise-tree { --exp-gap: clamp(12px, 1.5vw, 28px); max-width: 1072px; margin: 0 auto; }
.section-intro + .expertise-tree { margin-top: clamp(36px, 3.7vw, 70px); }

.exp-head { display: flex; flex-direction: column; align-items: center; }
.exp-icon { display: block; height: clamp(60px, 5.2vw, 100px); width: auto; }
.exp-stem { width: 2px; height: clamp(26px, 2.3vw, 44px); background: var(--bb-cyan); }

/* Horizontal bus spans from the first column's centre to the last column's
   centre; each branch cell drops a vertical line with an arrowhead into its
   column. Grid cells align the drops to the column centres below. */
.exp-branches { position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
	column-gap: var(--exp-gap); height: clamp(26px, 2.3vw, 44px); }
.exp-branches::before { content: ""; position: absolute; top: 0; height: 2px; background: var(--bb-cyan);
	left: calc((100% - 3 * var(--exp-gap)) / 8); right: calc((100% - 3 * var(--exp-gap)) / 8); }
.exp-branch { position: relative; }
.exp-branch::after { content: ""; position: absolute; top: 0; left: calc(50% - 1px);
	width: 2px; bottom: 9px; background: var(--bb-cyan); }
.exp-branch i { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
	border-top: 9px solid var(--bb-cyan); }

.exp-cols { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--exp-gap); }
.exp-col { background: var(--bb-bg-soft); padding: clamp(16px, 1.6vw, 30px) clamp(14px, 1.4vw, 26px); }
.exp-col h3 { margin: 0 0 clamp(10px, 1vw, 18px); color: var(--bb-ink); font-weight: 700;
	font-size: clamp(16px, 1.25vw, 24px); line-height: 1.2; }
.exp-col ul { list-style: none; margin: 0; padding: 0; }
.exp-col li { position: relative; padding-left: 22px; color: var(--bb-ink); font-weight: 400;
	font-size: clamp(16px, 1.25vw, 24px); line-height: 1.7; }
.exp-col li::before { content: "\2022"; position: absolute; left: 2px; color: var(--bb-ink); }

@media (max-width: 700px) {
	.exp-branches, .exp-cols { grid-template-columns: repeat(2, 1fr); }
	.exp-branches { display: none; }
	.exp-cols { row-gap: var(--exp-gap); }
}

/* "Why Beatbridge" legacy 3-col fallback (kept for flexibility) */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.why-item h3 { color: var(--bb-teal); font-size: 21px; font-weight: 700; margin: 0 0 14px; }
.why-item p { color: var(--bb-body); font-size: 16px; line-height: 1.7; margin: 0; }

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto; width: auto;
	left: 5px; top: 5px;
	padding: 15px 23px 14px;
	z-index: 100000;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 1100px) {
	.whatwedo-grid { grid-template-columns: repeat(2, 1fr); }
	.eng-grid { grid-template-columns: 1fr; }
	.tech-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-container { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.menu-toggle { display: block; }
	.main-navigation .nav-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: #fff;
		padding: 10px var(--bb-gutter) 20px;
		box-shadow: 0 12px 18px rgba(0,0,0,.08);
	}
	.main-navigation.toggled .nav-menu { display: flex; }
	.main-navigation .nav-menu li { width: 100%; padding: 10px 0; border-bottom: 1px solid var(--bb-border); }

	.section { padding: clamp(40px, 7vw, 60px) 0; }
	.howwework-row, .split-row { grid-template-columns: 1fr; gap: 36px; }
	.split-row.media-left .split-media { order: -1; }
	/* eco-split (About Us) sets its own 2-col ratio inline; force a single column here
	   (two classes out-specifies the inline `.eco-split` override regardless of order). */
	.split-row.eco-split { grid-template-columns: 1fr; }

	/* Hero overflow fix — the header photos are wide and short (e.g. 1921x521), so they
	   collapse to ~100-250px tall below the desktop width, far shorter than the copy that
	   is absolutely overlaid on them. Give the photo enough height to hold the text
	   (cropped to fill) and deepen the gradient so white text stays legible. */
	.home-hero-bg, .page-hero-bg { height: clamp(360px, 62vw, 520px); }
	.home-hero-bg img, .page-hero-bg img { height: 100%; object-fit: cover; object-position: center; }
	.home-hero-overlay { background: linear-gradient(180deg, rgba(8,40,66,.30), rgba(8,40,66,.55)); }
	.page-hero-overlay { background: linear-gradient(180deg, rgba(8,40,66,.25), rgba(8,40,66,.50)); }
	/* The desktop copy is capped to a narrow measure (e.g. 16em/23em); let it use the full
	   width on small screens. The manual <br>s stay — removing them would merge adjacent
	   words (no surrounding whitespace in the markup) — they just wrap as needed. */
	.home-hero-title, .page-hero-title,
	.home-hero-text, .page-hero-text { max-width: 100%; }
}

@media (max-width: 640px) {
	/* Tighter side margins on phones so content isn't crushed by the 40px desktop gutter. */
	:root { --bb-gutter: 20px; }

	.whatwedo-grid { grid-template-columns: 1fr; }
	.tech-grid { grid-template-columns: 1fr; }
	.footer-container { grid-template-columns: 1fr; }
	.footer-nav, .footer-projects, .footer-contact { padding-left: 0; border-left: 0; }
	.cta-band .container { flex-direction: column; align-items: flex-start; gap: 18px; }
	.cta-band-btn { margin-left: 0; }
	/* The home CTA chevron is a 137px graphic by design; rein it in on phones. */
	.cta-band-arrow { margin-left: 0; }
	.cta-band-arrow svg { height: 56px; }
}

/*--------------------------------------------------------------
# Contact popup (CTA "Let's Talk" / "Let's work together" -> CF7 modal)
--------------------------------------------------------------*/
/* The CTA triggers are now <button> elements; reset UA chrome so they look identical. */
.cta-band-btn { border: 0; cursor: pointer; font-family: inherit; }
.cta-band-arrow { background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* The "Let's work together" title is itself a click target for the contact popup. */
.cta-band-title.js-contact-open { cursor: pointer; }

body.bb-modal-open { overflow: hidden; }

.bb-modal { position: fixed; inset: 0; z-index: 1000; }
.bb-modal[hidden] { display: none; }
.bb-modal:not([hidden]) { display: flex; align-items: center; justify-content: center; padding: 24px; }
.bb-modal__overlay { position: absolute; inset: 0; background: rgba(14, 14, 14, .6); }
.bb-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: 97vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 8px;
	border-top: 6px solid var(--bb-cyan); /* brand accent edge */
	padding: clamp(18px, 2vw, 28px) clamp(22px, 3vw, 48px) clamp(18px, 1.6vw, 22px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.bb-modal__close {
	position: absolute; top: 12px; right: 16px;
	width: 44px; height: 44px;
	border: 0; background: none; cursor: pointer;
	font-size: 34px; line-height: 1; color: var(--bb-ink);
	border-radius: 50%;
	transition: color .2s ease, background .2s ease;
}
.bb-modal__close:hover { color: var(--bb-teal); background: var(--bb-bg-soft); }
.bb-modal__title { color: var(--bb-ink); font-weight: 900; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; margin: 0 0 12px; }
/* Short cyan divider under the title — the design's hero/CTA rule motif. */
.bb-modal__title::after { content: ""; display: block; width: 60px; height: 3px; background: var(--bb-cyan); margin: 10px 0 0; }

/* CF7 form (reuses the configured form's .custom-form markup), styled for v2.
   Spacing kept compact so the popup fits without a scrollbar on normal screens. */
.bb-modal .custom-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-bottom: 6px; }
.bb-modal .custom-form label { display: block; width: 100%; font-weight: 700; color: var(--bb-ink); font-size: 13px; margin-bottom: 5px; }
.bb-modal .custom-form input[type="text"],
.bb-modal .custom-form input[type="email"],
.bb-modal .custom-form input[type="tel"],
.bb-modal .custom-form select,
.bb-modal .custom-form textarea {
	width: 100%;
	margin-top: 3px;
	padding: 7px 13px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--bb-ink);
	background: var(--bb-bg-soft); /* soft panel fill, matching the design */
	border: 1px solid var(--bb-border);
	border-radius: 4px;
	box-sizing: border-box;
}
.bb-modal .custom-form textarea { height: 64px; min-height: 48px; resize: vertical; }
.bb-modal .custom-form input:focus,
.bb-modal .custom-form select:focus,
.bb-modal .custom-form textarea:focus { outline: 0; background: #fff; border-color: var(--bb-cyan); box-shadow: 0 0 0 3px rgba(90, 195, 226, .25); }
.bb-modal .custom-form input[type="file"] { margin-top: 5px; font-size: 13px; }
/* Acceptance row: checkbox inline with its label text. */
.bb-modal .custom-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--bb-muted); margin-bottom: 10px; }
.bb-modal .custom-form .wpcf7-list-item { margin: 0; }
.bb-modal .custom-form .wpcf7-acceptance input { width: auto; margin: 2px 0 0; }
.bb-modal .custom-form a { color: var(--bb-teal); text-decoration: underline; }
/* Submit — cyan, matching the theme's CTA. */
.bb-modal .custom-form .wpcf7-submit {
	display: block; width: fit-content; margin: 2px 0 0 auto; /* right-aligned */
	background: var(--bb-cyan); color: #003; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
	border: 0; border-radius: 4px; padding: 13px 36px; font-size: 15px; cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.bb-modal .custom-form .wpcf7-submit:hover { background: var(--bb-teal); color: #fff; }
/* Disabled until all required fields are filled. */
.bb-modal .custom-form .wpcf7-submit:disabled,
.bb-modal .custom-form .wpcf7-submit[disabled] { background: #c7d2d8; color: #fff; cursor: not-allowed; }
.bb-modal .wpcf7-spinner { margin: 0 0 0 12px; }
/* Validation / response messages. */
.bb-modal .wpcf7-not-valid-tip { color: #d63638; font-size: 13px; font-weight: 600; margin-top: 4px; }
.bb-modal .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 14px; border-radius: 4px; font-size: 14px; }

@media (max-width: 640px) {
	.bb-modal .custom-form__grid { grid-template-columns: 1fr; gap: 0; }
}

/*--------------------------------------------------------------
# Cookie consent (LegalBlink / cookieconsent v2, injected via GTM-PLXWMH3R)
--------------------------------------------------------------*/
/* Third-party banner — we only patch mobile legibility; the consent controls
   (#cm_primary_btn / #cm_secondary_btn) and behaviour are left untouched. The
   long policy URLs in the notice and the Settings layer are unbreakable strings
   that overflow a phone screen (e.g. support.google.com/analytics/... ~531px),
   so allow them to wrap. IDs are stable cookieconsent v2 selectors. */
#cc_div a,
#cc_div p,
#cc_div li,
#cc_div td,
#cc_div th { overflow-wrap: anywhere; word-break: break-word; }

/* The Settings layer lists cookies in a table that forces a width wider than a
   phone; let it lay out fluidly within the modal instead of scrolling sideways. */
@media (max-width: 640px) {
	#cc_div table { width: 100%; table-layout: fixed; }
	#cc_div td, #cc_div th { white-space: normal; }
}