/**
 * About page (slug: about) corrections over the carried Webflow baseline.
 *
 * The About markup reuses the live Webflow classes verbatim, so webflow.css
 * already styles it pixel-for-pixel. This file only holds the few deltas the WP
 * context introduces:
 *   1. The interior-page header clearance (#main padding-top:120px) is redundant
 *      here — the About hero (.div-block-58) carries its own 240px top padding
 *      that already clears the fixed header. Zero it so the hero starts flush
 *      like the live site (kills a 120px gap at the top).
 *   2. Self-host the LinkedIn icon used as the .linkedin-button background
 *      (carried CSS still points it at the Webflow CDN).
 *
 * Loaded only on the About page, after home-figma.css, so it wins.
 */

/* 1. Hero self-clears the fixed header — drop the interior-page top padding.
   Must out-specify home-figma's `body:not(.home) #main` (1,1,1) rule. */
body:not(.home) #main.main-wrapper {
	padding-top: 0;
}

/* 2. Localise the LinkedIn button icon (was a website-files.com CDN url). */
.linkedin-button {
	background-image: url("../images/about/linkedin.svg");
}

/* The H1 carries the design type via .text-block-34; neutralise the UA heading
   margin so it stacks exactly like the live <div> it replaces. */
.text-block-34 {
	margin: 0;
}

/* ─── (Anastasiia Design Audit 4 — /team hero) — the hero violet boxes (hero-bg.svg
   = .image-30) carry z-index:3, but the global pinstripe overlay (.pinstripes,
   position:fixed z-index:4) sits ABOVE them, so the vertical rails draw ON TOP of the
   boxes. Anastasiia: the lines should pass UNDER the boxes. Lift the boxes above the
   pinstripe (z-index 5 > 4) so the violet shapes cover the rails where they overlap. */
.image-30 {
	z-index: 5;
}

/* Same z-order issue one section down — the employment-numbers violet band
   (200+/10+/100+/9+ stat cards) is position:static with z-index:3, so the static
   z-index is IGNORED and the pinstripe rails (z:4) draw over the band. Give it a
   stacking context above the pinstripe so the violet band covers the rails. */
.section-employment-numbers {
	position: relative;
	z-index: 5;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Leadership drawer (slide-out bio panel).
 * Reproduces the live /team custom `ld-drawer` component: clicking a leadership
 * card slides a 640px panel in from the right over a blurred backdrop. The full
 * bio + key-focus content is server-rendered (hidden) inside each card's
 * .ld-member-detail; assets/js/team-drawer.js lifts it into the panel. Default
 * (no-JS) state keeps the panel off-screen and the backdrop invisible, so the
 * roster degrades to the always-visible cards. Fonts (Archivo / DM Mono / Geist)
 * come from the theme's fonts.css.
 * ───────────────────────────────────────────────────────────────────────── */
.ld-member-detail { display: none; }

.ld-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	z-index: 9998; opacity: 0; visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease; cursor: pointer;
}
.ld-overlay.is-open { opacity: 1; visibility: visible; }

.ld-drawer {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: 640px; max-width: 100vw; background: #fff; z-index: 9999;
	transform: translateX(100%); visibility: hidden;
	transition: transform .35s cubic-bezier(.4,0,.2,1), visibility .35s;
	overflow-y: auto; box-shadow: -4px 0 16px rgba(0,0,0,0.08);
}
.ld-drawer.is-open { transform: translateX(0); visibility: visible; }

/* Clip horizontal bleed on /team so it never adds a sub-pixel scroll on mobile
   (live /team = 0 overflow; dev had a 0.6px bleed from a flush-right hero image
   plus the off-canvas drawer). Use `clip`, NOT `hidden`: `overflow-x: hidden`
   forces the OTHER axis to `auto`, so html AND body both became scroll
   containers → nested scrollers that fight and make the page scroll stutter.
   `overflow-x: clip` clips the x-bleed WITHOUT establishing a scroll container,
   so vertical scrolling stays on the single (html) scroller. */
html, body { overflow-x: clip; }

.ld-drawer-close { position: sticky; top: 0; display: flex; justify-content: flex-start; padding: 16px 24px; background: #fff; z-index: 1; }
.ld-drawer-close button { background: none; border: none; padding: 8px 0; font-family: 'DM Mono', monospace; font-weight: 500; font-size: 14px; text-transform: uppercase; color: #686868; cursor: pointer; transition: color .2s; }
.ld-drawer-close button:hover { color: #1a1a1a; }
.ld-drawer-photo { width: 100%; height: 420px; object-fit: cover; display: block; border-radius: 4px; padding: 0 40px; box-sizing: border-box; }
.ld-drawer-content { padding: 32px 40px 48px; }
.ld-drawer-name { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 28px; color: #1a1a1a; margin: 0 0 4px; }
.ld-drawer-title { font-family: 'DM Mono', monospace; font-size: 14px; color: #5d4af5; text-transform: uppercase; margin: 0 0 8px; }
.ld-drawer-location { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; font-family: 'Geist', sans-serif; font-size: 14px; color: #686868; }
.ld-drawer-location svg { width: 16px; height: 16px; flex-shrink: 0; }
.ld-drawer-head-row { display: flex; align-items: flex-start; justify-content: space-between; }
.ld-drawer-head-info { flex: 1; }
.ld-drawer-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid rgba(230,233,238,0.5); border-radius: 4px; color: #0077b5; text-decoration: none; flex-shrink: 0; }
.ld-drawer-linkedin:hover { border-color: #0077b5; }
.ld-drawer-linkedin svg { width: 20px; height: 20px; }
.ld-drawer-divider { border: none; border-top: 1px solid #e6e9ee; margin: 0 0 24px; }
.ld-drawer-bio, .ld-drawer-bio-wrap p { font-family: 'Geist', sans-serif; font-size: 16px; line-height: 24px; color: #1a1a1a; margin: 0 0 16px; }
.ld-drawer-bio-wrap p:last-child { margin-bottom: 0; }
.ld-drawer-focus-title { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 18px; color: #1a1a1a; margin: 24px 0 12px; }
.ld-drawer-focus-list { list-style: none; padding: 0; margin: 0; }
.ld-drawer-focus-list li { font-family: 'Geist', sans-serif; font-size: 15px; line-height: 28px; color: #1a1a1a; padding-left: 20px; position: relative; }
.ld-drawer-focus-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #5d4af5; }

/* The leadership cards become interactive triggers. */
.leadership-grid .collection-item[data-ld-member] { cursor: pointer; }
.leadership-grid .collection-item[data-ld-member]:focus-visible { outline: 2px solid #5d4af5; outline-offset: 2px; }

@media (max-width: 768px) {
	.ld-drawer { width: 100vw; }
	.ld-drawer-photo { padding: 0 20px; }
	.ld-drawer-content { padding: 24px 20px 40px; }
	.ld-drawer-name { font-size: 24px; }
}

/* ─── r5 (Anastasiia Design Audit 4, re-fix after QA-fail) — make the /team
   "Ready to strengthen…" form inputs identical to the /contact page input component
   (the cv2s field), per Figma 5726-11135. Match cv2s exactly: DM Mono 14/20 field
   text on a #FDFDFC fill with a 1px #E6E9EE border, 4px radius and 10px 12px padding;
   DM Mono 500 12/16 uppercase #1A1A1A label with an 8px gap to the field; 24px gap
   between fields; textarea 124px. (My earlier pass only matched the 4px radius, so
   the font/fill/padding still read inconsistent vs /contact → QA-failed.) */
.text-field-2 {
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 14px;
	line-height: 20px;
	color: #1a1a1a;
	height: auto;
	padding: 10px 12px;
	background-color: #fdfdfc;
	border: 1px solid #e6e9ee;
	border-radius: 4px;
	margin-bottom: 24px;
}
textarea.text-field-2 { height: 124px; min-height: 124px; }
.text-field-2::placeholder { color: #686868; }
.field-label-3 {
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #1a1a1a;
	margin-bottom: 8px;
	display: block;
}

/* Partner logos on the dark section — render every logo at full brightness
   (Sandro 2026-06-19: "all of them should be brighter, not just some — all").
   The carried webflow.css ships opacity .5; raise to 1 so the `brightness(0)
   invert()` marks read as bright white uniformly across the whole strip. */
.partners-section .partner-logo { opacity: 1; }

/* ─── C1 (Anastasiia row16) — "WHY US / Our Values" section padding ──────────
   Figma 5676:22365 gives the section 80px top/bottom padding; the carried
   .padding-vertical utility renders 64px here. Bump to 80px, scoped via the
   unique values heading so the global .padding-vertical utility is untouched. */
.padding-vertical:has(> .values-heading-wrapper) {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* ─── A3 (Anastasiia row15) — dark "Trusted by" partners strip: side rails too
   bright. The global .pinstripes overlay (z-index:4) draws the rails at full
   #e6e9ee (230,233,238) over the #1a1a1a strip; Figma wants them faint-white
   rgba(253,253,252,0.2) (like the footer). Lift the opaque dark strip above the
   overlay so the bright rails are hidden in its region, then redraw faint rails
   at the container-large edges. Desktop only (global rails hide < 992px).
   (Logo brightness — "all the same" — already handled via .partner-logo opacity:1.) */
.partners-section {
	position: relative;
	z-index: 5;
}
@media (min-width: 992px) {
	.partners-section::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		bottom: 0;
		left: calc(50% - 640px);
		right: calc(50% - 640px);
		border-left: 1px solid rgba(253, 253, 252, 0.2);
		border-right: 1px solid rgba(253, 253, 252, 0.2);
		pointer-events: none;
	}
}

/* ─── C2 (Anastasiia row17) — /team "Ready to strengthen…" contact section ───
   Figma 5674:20588 gives this section 80px top/bottom padding; dev renders the
   carried .padding-vertical 64px. Bump to 80px, scoped via the unique contact
   heading wrapper so the global utility stays 64px elsewhere. */
.padding-vertical:has(> .contact-section-heading) {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* ─── A3 cont. (Anastasiia row15) — logo brightness uniformity ───────────────
   Under the `brightness(0) invert(1)` white-out, the 3 line-art SVG marks render
   at peak luma ~83, but brown.avif (raster, solid fill) glows at ~172 and
   prodege.svg (fuller mark) at ~118. Anastasiia: "make the brightness of the
   logos the same." Scale the two bright outliers down to the SVG-family level. */
.partners-section .partner-logo[src*="brown"] {
	filter: brightness(0) invert(1) brightness(0.48);
}
.partners-section .partner-logo[src*="prodege"] {
	filter: brightness(0) invert(1) brightness(0.70);
}

/* ─── R12a (Anastasiia Design Audit / Sandro) — partner logos = an auto-scrolling
   marquee IDENTICAL to the home logo band (page-team.php now renders two identical
   .partners-logo-track rows inside .partners-marquee for a seamless loop). Same
   mask edge-fade, gap and 38s linear timing as .hero-pp__marquee. ────────────── */
.partners-marquee {
	display: flex;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.partners-logo-track {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 48px;
	padding: 0 48px 0 0;
	margin: 0;
	animation: partners-logo-marquee 45s linear infinite;
}
.partners-logo-track .partner-logo { flex: 0 0 auto; }
@keyframes partners-logo-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .partners-logo-track { animation: none; } }

/* ─── R13 + R14 (Anastasiia Design Audit) — /team "Ready to strengthen…" contact
   section to the UI-kit (Figma 5726-11135). Heading centred on mobile; the submit
   becomes the UI-kit Primary button — 48px tall, 16/32 padding, 4px radius, DM Mono
   14 uppercase, centred (it was a fixed 176px pill); full-width on mobile. Inputs
   pick up the 4px UI-kit radius so the field set reads consistently. */
.submit-button-2 {
	min-height: 48px;
	padding: 16px 32px;
	border-radius: 4px;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 14px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.text-field-2 { border-radius: 4px; }
@media (max-width: 767px) {
	.contact-section-heading { text-align: center; }
	.submit-button-2 { width: 100%; }
	/* r5 — card 24px on all sides (Figma 5726-11139); the mobile baseline was 24px 16px. */
	.contact-card { padding: 24px; }
}