/* ==========================================================================
   About Us — page-specific Elementor adapter (loads after about-careers.css).
   Only patches where the Elementor container DOM differs from the PHP
   markup the original selectors expected.
   ========================================================================== */

/* Grid sections on containers must beat the .e-con flex default regardless
   of stylesheet load order. Column counts / gaps / breakpoint changes still
   come from the original about-careers.css + velocity.css rules (they only
   change grid-template-columns, never display, so no media mirrors needed). */
/* .e-flex is required: Elementor's frontend.min.css declares
   `.e-con.e-flex{display:flex}` at the same 0-2-0 specificity as
   `.e-con.CLASS` and loads AFTER this file, so an equal-specificity grid rule
   loses on source order — the container stays flex, the columns size to
   content instead of the 1fr tracks, and grid properties on children go
   inert. 0-3-0 wins regardless of load order. */
.e-con.e-flex.velp-ab-mission-grid,
.e-con.e-flex.velp-ab-timeline,
.e-con.e-flex.velp-ab-values-grid,
.e-con.e-flex.vel-stats-grid,
.e-con.e-flex.velp-ab-team-grid,
.e-con.e-flex.velp-ab-awards-grid,
.e-con.e-flex.velp-ab-community-grid,
.e-con.velp-ab-mission-grid,
.e-con.velp-ab-timeline,
.e-con.velp-ab-values-grid,
.e-con.vel-stats-grid,
.e-con.velp-ab-team-grid,
.e-con.velp-ab-awards-grid,
.e-con.velp-ab-community-grid { display: grid; }

/* Badge spans now sit inside widget wrappers; as inline spans they collapse
   to zero size (width/height/margin:auto need a block box). */
.elementor-widget .velp-ab-avatar { display: block; }

/* keydesign gives .elementor-widget-text-editor line-height 1.75
   (--line-height-paragraph); elements that set no line-height of their
   own inherited ~normal from body in the original flow (+6-18px each).
   Restore them. */
.elementor-widget .vel-eyebrow,
.velp-ab-value h3,
.velp-ab-award h3,
.velp-ab-comm-card h3,
.velp-ab-band-card h2 { line-height: normal; }

/* keydesign-framework forces text-editor <p> to inherit font metrics
   (higher specificity than the page classes); restore the originals on
   the widget wrapper for descendant-styled paragraphs. For classed root
   <p>s the class also sits on the wrapper, but keydesign's own wrapper
   rule (line-height 1.75) ties with it and wins on load order — so the
   class metrics are re-asserted here at wrapper specificity. */
.elementor-widget-text-editor.velp-ab-hero-sub { font-size: 16.5px; line-height: 1.65; }
.elementor-widget-text-editor.vel-section-sub { font-size: 17px; line-height: 1.6; }
.velp-ab-mission-copy .elementor-widget-text-editor:has(p) { font-size: 15.5px; line-height: 1.7; }
.velp-ab-value .elementor-widget-text-editor:has(p) { font-size: 13.5px; line-height: 1.6; }
.velp-ab-award .elementor-widget-text-editor:has(p) { font-size: 13px; line-height: 1.55; }
.velp-ab-comm-card .elementor-widget-text-editor:has(p) { font-size: 13.5px; line-height: 1.6; }

/* .vel-section-sub sits on both the wrapper and the inner <p>; keep the
   44px bottom margin (and awards/community auto-centering) on the wrapper
   only so it isn't applied twice. */
.elementor-widget .vel-section-sub { margin: 0; }

/* Flex containers don't collapse margins: the preceding text widget's
   trailing margin (h2 14px / section-sub 44px) now stacks on top of the
   grid's own margin-top. Make each gap deterministic: zero the sub
   wrapper's restored margin and give the grid the original collapsed gap
   (h2+grid seams: 34 → 20, 40 → 26; sub+grid seams: 44 exactly). */
.elementor-widget.vel-section-sub { margin-bottom: 0; }
.e-con.velp-ab-values-grid { margin-top: 20px; }
.e-con.velp-ab-team-grid { margin-top: 26px; }
.e-con.velp-ab-awards-grid,
.e-con.velp-ab-community-grid { margin-top: 44px; }

/* ==========================================================================
   Design-audit corrections, 2026-08-07 (page-specific; about-careers.css is
   shared with Careers so the overrides live here and load after it).
   ========================================================================== */

/* about-careers.css pins the 3rd value card to column 1 — that was for the
   old five-card 2+3 layout. The design is six cards in a plain 3x2 grid. */
.e-con.velp-ab-values-grid .velp-ab-value:nth-child(3) { grid-column-start: auto; }

/* Timeline: four nodes on a solid hairline (about-careers.css draws three
   columns on a dashed rail). The dot is a plain navy disc on the line. */
.e-con.e-flex.velp-ab-timeline,
.e-con.velp-ab-timeline { grid-template-columns: repeat(4, 1fr); column-gap: 20px; }

/* Reference: a solid navy disc sitting ON the rail, no ring. */
.velp-ab-tl-dot {
	width: 13px;
	height: 13px;
	border: 0;
	box-shadow: none;
	z-index: 1;
	background: var(--vel-navy);
   outline:2px solid #fff;
}

/* The shared dashed rail is one absolute bar inset by a percentage of the grid;
   its containing block measures wider than the grid here, so the ends never
   land on the outer dots. Draw the rail per node instead: each node carries the
   segment to its neighbour, so the geometry follows the dots at any column
   count (+20px = the grid gap). */
.velp-ab-timeline::before { display: none; }
.velp-ab-tl-node::after {
	content: '';
	position: absolute;
	/* centre of the 13px dot, which sits at top:0 of the node */
	top: 6px;
	left: 50%;
	/* dot centre to the next dot centre: one column + the 20px gap */
	width: calc(100% + 20px);
	border-top: 1px solid #dbe3ec;
	z-index: 0;
}
/* every node is the only child of its own widget wrapper, so :last-child on
   the node itself matches all four — walk the wrapper instead. */
.e-con.velp-ab-timeline > *:last-child .velp-ab-tl-node::after { display: none; }

/* Team cards: Figma drop shadow — X 0, Y 14, blur 34, spread 0, #0E2037 @ 8%.
   .e-flex is on the selector because the member card is itself an .e-con
   container (Elementor's .e-con.e-flex would otherwise not matter for
   box-shadow, but keeping the 0-3-0 form guards against Elementor's own
   container styling winning on load order). */
.e-con.e-flex.velp-ab-member,
.e-con.velp-ab-member,
.velp-ab-member {
	box-shadow: 0 14px 34px rgba(14, 32, 55, 0.08);
}

/* Award badge artwork is a pending client asset; the placeholder square
   carries the badge name so the card reads as designed instead of empty. */
.velp-ab-award-badge {
	display: flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: 54px;
	max-width: 136px;
	padding-block: 10px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--vel-navy);
}

/* Community: the design puts a small partner mark inline above the heading,
   not a full-width photo block. Logo files are a pending client asset. */
.elementor-widget.velp-ab-comm-logo {
	display: block;
	border-radius: 9px;
	margin-bottom: 16px;
   text-align: left;
}
.velp-ab-comm-logo img {
    padding-bottom: 14px;
}

@media (max-width: 900px) {
	.velp-ab-tl-dot { top: 4px; }
	.velp-ab-tl-node::after { display: none; }
   .e-con.e-flex.velp-ab-timeline,
.e-con.velp-ab-timeline { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
}
@media (max-width: 600px) {
   .e-con.e-flex.velp-ab-timeline,
.e-con.velp-ab-timeline { grid-template-columns: repeat(1, 1fr); column-gap: 20px; }
.velp-ab-tl-node span {
    font-size: 14px;
    max-width: 280px;
}
}