), so it must be free to shift on X */
body.voy-d3-system .voy-testimonials2 .controls .control-wrap { overflow: hidden; }
body.voy-d3-system .voy-testimonials2 .testimonial_slider .testimonial-next-prev a { cursor: pointer; }
body.voy-d3-system .voy-testimonials2 .controls {
position: absolute;
left: 0;
right: auto;
bottom: 137px; /* lands the counter on Figma's y6464 baseline */
top: auto;
width: auto;
margin: 0;
font-family: var(--voy-font-body);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.31;
color: #FFFFFF;
text-align: left;
}
/* Figma renders the counter tight ("1/4"); Salient spaces the parts out. */
body.voy-d3-system .voy-testimonials2 .controls .out-of,
body.voy-d3-system .voy-testimonials2 .controls .total {
color: #FFFFFF;
margin: 0;
padding: 0;
}
body.voy-d3-system .voy-testimonials2 .controls .control-wrap { margin-right: 0; }
/* Salient styles these through `.testimonial_slider[data-style="minimal"] ... .prev`
— four class/attribute selectors — so the page scope needs the slider class too
or it loses the cascade and the arrows stay 40px and absolutely stacked. */
body.voy-d3-system .voy-testimonials2 .testimonial_slider .testimonial-next-prev {
position: absolute;
left: 373px; /* half of the 746px quote column */
bottom: 128px;
/* The active blockquote overlaps this line and Salient stacks it at z-index 20
inline (for its fade transition), so anything lower here gets covered and
swallows every click — elementFromPoint at the arrow centre returned the
blockquote, not the arrow. */
z-index: 30;
transform: translateX(-50%);
display: flex;
gap: 7px;
width: auto;
height: auto;
margin: 0;
}
body.voy-d3-system .voy-testimonials2 .testimonial_slider .testimonial-next-prev a {
/* relative + z-index so each arrow stacks above the absolutely-positioned
blockquote (z-index 1) that shares this line — otherwise the quote body sits
on top and swallows the clicks. */
position: relative;
z-index: 1;
transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin: 0;
opacity: 1;
border: 1.5px solid #FFFFFF !important;
border-radius: 50% !important;
background: transparent !important;
color: #FFFFFF !important;
font-size: 18px;
line-height: 1;
transition: background-color 0.2s ease, color 0.2s ease;
}
body.voy-d3-system .voy-testimonials2 .testimonial_slider .testimonial-next-prev a:hover,
body.voy-d3-system .voy-testimonials2 .testimonial_slider .testimonial-next-prev a:focus-visible {
background: #FFFFFF !important;
color: var(--voy-navy) !important;
}
/* --- CTA ------------------------------------------------------------------ */
body.voy-d3-system .voy-cta__title {
font-size: var(--voy-h2-sm);
max-width: 708px;
}
/* --- Footer / contact ----------------------------------------------------- */
/* Column labels are 18px semibold #858585 in Figma, not 13px muted caps. */
body.voy-d3-system .voy-contactc__label {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.13;
letter-spacing: normal;
text-transform: none;
color: var(--voy-muted);
}
body.voy-d3-system .voy-contactc__link {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.13;
color: var(--voy-text);
}
/* D3's footer has no "Get In Touch" heading / blurb / "Let's Connect" link — the
frame goes straight from the CTA band (node 2031:171 + its button) to the
Contact/Socials/Address rule-separated columns (nodes 2031:178-190). */
body.voy-d3-system .voy-contactc__top { display: none; }
body.voy-d3-system .voy-contactc__addr,
body.voy-d3-system .voy-contactc__legal {
font-size: 0.9375rem;
line-height: 1.31;
color: var(--voy-muted);
}
body.voy-d3-system .voy-contactc__addr { max-width: 121px; } /* Figma node 2031:178 */
/* Figma sets a small arrow after each contact link (nodes 2031:187 / 2031:188). */
body.voy-d3-system .voy-contactc__link::after {
content: "";
display: inline-block;
width: 16px;
height: 14px;
margin-left: 10px;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h13M9 2l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h13M9 2l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* =============================================================================
Header logo — sitewide Figma alignment
=============================================================================
Audited across all 11 frames. Two facts drive this block:
1. The logo geometry is NOT the same in every frame. Eight of them (home, v1,
v1-b, v2-a/b/c/d, desktop-6) draw it at x30 y30, 260 x 27.23. The other
three (desktop-3/4/5) draw it 2.31% larger and 6px higher: x30 y24,
266 x 27.86. Both share the same 9.548 aspect, so it is a pure scale.
2. `assets/logo-header.svg` has a `0 0 260 28` viewBox whose INK measures
260 x 27.30 (verified by rendering it at 10x and reading the pixel bounds)
— i.e. ~0.7 units of empty space at the bottom of the box, not a stretched
logo. So the rendered 260x28 element already puts the artwork at Figma's
260x27.23 within a rounding hair; only the box's top edge needs moving, and
only the three larger frames need a width change.
Salient centres the logo in its 84px header, landing the ink at y28 on every
page — 2px high for the eight, 4px low for the three.
-------------------------------------------------------------------------- */
#logo { position: relative; top: 2px; }
body.voy-logo-lg #logo { top: -3.7px; }
/* Salient sizes the logo from `#header-outer #logo img` (height) and
`#top #logo img` (width: auto) — both two-ID selectors, so the page scope has
to carry an id of its own to outrank them. */
/* `:not(.small-nav)` keeps this to the at-rest header. Salient shrinks the logo
proportionally once the header goes sticky, and a hard size here would pin
these three pages at full size while the other eight shrank — Figma has no
scrolled state, so its own behaviour is left to run. */
body.voy-logo-lg #header-outer:not(.small-nav) #logo img {
width: 266px;
height: 28.65px; /* 266/260 of the 28-unit viewBox -> 27.86 of ink, per Figma */
}
body.voy-logo-lg #header-outer.small-nav #logo { top: 2px; }
/* Salient scales the logo down proportionally when the header goes sticky; Figma
has no scrolled state to match, so that behaviour is left alone. */
/* =============================================================================
Desktop-3 (Slider) — page-id-159
=============================================================================
Same design system as page 35 (see the Desktop-3 block above), with the hero
swapped from the custom `voy_hero` block to Salient's OWN Nectar Slider
(`[nectar_slider location="VOY Hero"]`), so every slide — background photo,
heading, caption, button + link, overlay colour — is editable from the WP
dashboard under Slides, with no code change.
Everything below only re-skins Salient's native slide markup to the Figma hero
spec (frame 2031:58): 85px Inter Medium headline at x30/y250, 18px white
caption, and the split white button. The slider chrome itself (arrows + "1 → 6"
counter) is Salient's own and is intentionally beyond Figma, which has no
hero slider of any kind in any of its 11 frames.
-------------------------------------------------------------------------- */
/* --- Nectar Slider hero --------------------------------------------------- */
/* Salient puts `opacity: .6` on its slide overlay on top of whatever colour the
slide sets, so the rgba(0,0,0,0.76) from Figma node 2031:78 was landing at an
effective 0.46 and the photo read about twice as bright as the design. The
alpha is already in the colour — drop the extra multiplier. */
body.page-id-159 .nectar-slider-wrap .slide-bg-overlay { opacity: 1; }
/* Salient centres the slide content in a 1245px box at x98; the page grid is a
1440 container with a 30px gutter, so the slide container is re-gridded to
match and the content pinned to the same x=30 line as the logo. */
body.page-id-159 .nectar-slider-wrap .swiper-slide .container {
max-width: 1440px;
width: 100%;
margin-inline: auto;
padding-inline: 30px;
box-sizing: border-box;
}
/* Salient's `.content` is absolutely positioned and carries its own 90px inline
padding, which pushed the headline to x90 and squeezed it to 627px. Zero the
padding so the container's 30px gutter alone sets x, and pin the top to Figma's
h1 y=250 instead of Salient's vertical centring. */
body.page-id-159 .nectar-slider-wrap .swiper-slide .content {
max-width: 807px;
width: 807px;
margin: 0;
padding: 0 !important;
top: 250px !important;
left: 30px !important; /* absolute box resolves against the container's border box */
bottom: auto !important;
transform: none !important;
text-align: left;
}
body.page-id-159 .nectar-slider-wrap .swiper-slide h1,
body.page-id-159 .nectar-slider-wrap .swiper-slide .ns-heading-el {
font-family: var(--voy-font-body) !important;
font-weight: 500 !important;
font-size: var(--voy-h1) !important;
line-height: 1.01 !important;
letter-spacing: -0.02em !important;
color: #FFFFFF !important;
margin: 0 0 41px !important;
max-width: 807px;
text-transform: none !important;
}
body.page-id-159 .nectar-slider-wrap .swiper-slide p {
font-family: var(--voy-font-body) !important;
font-weight: 400 !important;
font-size: 1.125rem !important;
line-height: 1.31 !important;
color: #FFFFFF !important;
max-width: 447px;
margin: 0 0 29px !important;
opacity: 1 !important;
}
/* Button: same split white pair as the rest of D3 (Figma nodes 2031:123/124) —
a 120x39 label box, a 2px gap, then a 39x39 square holding the arrow. */
body.page-id-159 .nectar-slider-wrap .swiper-slide .buttons { margin: 0; }
body.page-id-159 .nectar-slider-wrap .swiper-slide .buttons a {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
width: 120px;
height: 39px;
min-width: 0;
padding: 0 0 0 14px !important;
margin: 0 41px 0 0 !important;
border: 0 !important;
border-radius: 2px !important;
background: #FFFFFF !important;
color: #000000 !important;
font-family: var(--voy-font-body) !important;
font-size: 0.875rem !important;
font-weight: 400 !important;
line-height: 1.31 !important;
letter-spacing: normal !important;
text-transform: none !important;
white-space: nowrap;
}
body.page-id-159 .nectar-slider-wrap .swiper-slide .buttons a::after {
content: "";
position: absolute;
left: calc(100% + 2px);
top: 0;
width: 39px;
height: 39px;
border-radius: 2px;
background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h13M9 2l5 5-5 5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 14px;
}
/* Salient appends a hover-fill span inside its buttons — it would paint over the
flat white box. */
body.page-id-159 .nectar-slider-wrap .swiper-slide .buttons a > .button-bg,
body.page-id-159 .nectar-slider-wrap .swiper-slide .buttons a::before { display: none !important; }
/* Below ~900px the fixed 250px top would crowd the shorter slide, so let it flow. */
@media (max-width: 900px) {
body.page-id-159 .nectar-slider-wrap .swiper-slide .content {
width: 100%;
top: 140px !important;
}
}
/* -----------------------------------------------------------------------------
Hero headline wrap width (sitewide)
-------------------------------------------------------------------------- */
/* Figma sets the hero H1 text box to 923px on the eight standard frames — the
`8.6em` here resolved to 731px, so the headline broke onto different lines than
the design everywhere except Desktop-3 (which sets its own 807px). Expressed in
em so it tracks the clamped font size instead of pinning a desktop pixel value.
923 / 85 = 10.86em. */
.voy-hero__title { max-width: 10.86em; }
/* =============================================================================
DESKTOP-4 / DESKTOP-5 type scale (body.voy-d45-system)
=============================================================================
A third scale, distinct from both the sitewide one and Desktop-3's. Verified
against Figma frames 79:338 and 142:680, which are identical to each other:
hero H1 90px / lh 90.9 / box 891 (sitewide renders 85px)
statement body 36px / lh 40.7 / box 949 (was 38.4px)
"Markets We Serve" 50px / lh 56.5 / box 563 (was 60px)
imagery band text 40px / lh 45.2 / box 733 (was 34px)
expertise heading 40px / lh 45.2 / box 476 (was 60px)
card titles 40px / lh 45.2 (already correct)
"Get In Touch" 40px / lh 45.2 / box 476 (was 48px)
"Let's Connect" 30px / lh 39.3
All line heights are 1.13 apart from the hero (1.01) and the CTA link (1.31).
-------------------------------------------------------------------------- */
body.voy-d45-system {
--voy-h1: clamp(2.75rem, 6.25vw, 5.625rem); /* 90px @1440 */
--voy-h2: clamp(2rem, 3.4722vw, 3.125rem); /* 50px @1440 */
--voy-h3: clamp(1.75rem, 2.7778vw, 2.5rem); /* 40px @1440 */
/* Colour, and it is its own system exactly like Desktop-3's. Every text fill
in both frames is pure #000000 or #858585 — never the sitewide #1A1A1A /
#6B6B6B — and the fills on the navy statement band are pure #FFFFFF, not
the cream used elsewhere. Read straight off frames 79:338 / 142:680. */
--voy-text: #000000;
--voy-muted: #858585;
--voy-eyebrow-color: #000000;
--voy-text-invert: #FFFFFF;
--voy-muted-invert: #FFFFFF;
}
/* Headings sitewide carry a small negative tracking; these two frames carry
none at all (letterSpacing 0 on every heading node). */
body.voy-d45-system h1,
body.voy-d45-system h2,
body.voy-d45-system h3,
body.voy-d45-system h4,
body.voy-d45-system .voy-hero__title,
body.voy-d45-system .voy-statement__body,
body.voy-d45-system .voy-band__text,
body.voy-d45-system .voy-exp3__title,
body.voy-d45-system .voy-exp3__panel-title,
body.voy-d45-system .voy-contactc__title {
letter-spacing: 0;
}
/* The one node in either frame with deliberate tracking: the 30px "Let's
Connect" link, at -1.2px (-0.04em). */
body.voy-d45-system .voy-contactc__link { letter-spacing: -1.2px; }
/* Eyebrows: 1.2px tracking (0.1em at 12px), not the sitewide 0.14em. The marker
is the same rotated triangle as everywhere else, drawn at its natural 10.53 x
8.43 — Figma reports the ROTATED bounding box as 13x13, which is what that
glyph measures once the 32deg is applied. Gap 10px puts the text at x50.5;
Figma itself lands it at 52 on the statement and 49 on the expertise head, so
this splits the difference and sits within tolerance of both. */
body.voy-d45-system .voy-eyebrow {
/* Block-level, not the sitewide inline-flex. As an inline box it sits on its
parent's baseline, and the parent's strut was adding ~7px of leading above
it — enough to push both eyebrows off their Figma y on their own. */
display: flex;
letter-spacing: 1.2px;
gap: 10px;
}
body.voy-d45-system .voy-eyebrow::before { width: 10.53px; height: 8.43px; }
body.voy-d45-system .voy-hero__title { max-width: 9.9em; } /* 891 / 90 */
body.voy-d45-system .voy-statement__body {
font-size: clamp(1.5rem, 2.5vw, 2.25rem); /* 36px */
line-height: 1.13;
}
body.voy-d45-system .voy-markets__head--tall h2 {
font-size: var(--voy-h2);
line-height: 1.13;
}
body.voy-d45-system .voy-band__text {
font-size: var(--voy-h3);
line-height: 1.13;
}
body.voy-d45-system .voy-exp3__title,
body.voy-d45-system .voy-contactc__title {
font-size: var(--voy-h3);
line-height: 1.13;
}
body.voy-d45-system .voy-contactc__cta {
font-size: clamp(1.25rem, 2.0833vw, 1.875rem); /* 30px */
line-height: 1.31;
}
/* =============================================================================
DESKTOP-6 — stacked-card expertise accordion (body.voy-d6-stack)
=============================================================================
Figma frame 154:1009, groups 169:2038 / 169:2019 / 169:2000 / 169:1999.
Identical in both the client's VOY file and our VOY Dev copy (382 nodes each,
byte-for-byte — verified by diff, so the dev copy is safe to build from).
Each panel is a full 1380x446 WHITE card with a hairline along its top edge.
The four cards are pitched 78px apart, so a closed card is clipped to 78px and
shows its title plus the top slice of its own photograph; the open card reveals
the whole 446px. That "stacking" look is simply an accordion with a fixed 78px
collapsed height and overflow:hidden — Salient's native [toggles] supplies the
behaviour, and everything below is presentation only.
Card-relative geometry (card x30, width 1380):
photo 642x381 at x30, y32
title 32px serif #000 at x708, y37
"Learn More" 130x45 r27 at x708, y99 — navy closed / lime #E8F988 open
"Key Focus Areas" 25px #000 at x708, y210
hairline 645 wide at x708, y267
bullets 13x13 marker at x708, text at x747, #858585, 33px pitch
-------------------------------------------------------------------------- */
body.voy-d6-stack .toggles .toggle {
position: relative;
background: #FFFFFF;
border-top: 1px solid var(--voy-border);
border-bottom: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Closed cards clip to the 78px pitch; the open one shows the full card. */
body.voy-d6-stack .toggles .toggle:not(.open) { max-height: 78px; }
body.voy-d6-stack .toggles .toggle .toggle-title,
body.voy-d6-stack .toggles .toggle h3.toggle-title { margin: 0; }
body.voy-d6-stack .toggles .toggle .toggle-title a {
position: relative;
display: block;
padding: 37px 60px 0 708px; /* title baseline at card y37, right column at x708 */
min-height: 78px;
font-family: var(--voy-font-heading);
font-weight: 400;
font-size: 2rem; /* Figma 32px (was 28px) */
line-height: 1;
color: #000000; /* Figma node fill is pure black, not the navy default */
background: none;
border: 0;
}
/* Salient's "+" glyph is not the design — Figma uses a small diagonal arrow at
the card's right edge (node 169:1981, 23x23 at x1353). */
body.voy-d6-stack .toggles .toggle .toggle-title a i.fa { display: none !important; }
body.voy-d6-stack .toggles .toggle .toggle-title a::after {
content: "";
position: absolute;
right: 27px; /* 1380 - 1323 - 23 -> card x1323 */
top: 214px;
width: 23px;
height: 23px;
background-color: var(--voy-text);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M7 7v10h10'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17M7 7v10h10'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0;
}
body.voy-d6-stack .toggles .toggle.open .toggle-title a::after { opacity: 1; }
/* The photo is positioned against the CARD, not the toggle body, so it stays put
as the card opens and simply gets revealed. */
body.voy-d6-stack .toggles .toggle .inner-toggle-wrap { padding: 0; margin: 0; }
body.voy-d6-stack .toggles .toggle .voy-expertise-panel {
display: block;
padding: 0;
gap: 0;
}
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__photo {
position: absolute;
left: 30px;
top: 32px;
width: 642px;
height: 381px;
flex: none;
border-radius: 0;
aspect-ratio: auto;
}
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__body {
/* The 78px title row is in normal flow above this, so the top padding is the
REMAINDER to Figma's pill position (99 - 78), not 99 itself. */
padding: 21px 60px 0 708px;
}
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__title { display: none; } /* the toggle heading is the title */
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__cta {
width: 130px;
height: 45px;
padding: 0;
border-radius: 27px;
background: var(--voy-accent); /* Figma: the OPEN card's pill is lime */
color: var(--voy-accent-ink);
font-size: 0.875rem;
margin: 0 0 66px; /* pill bottom y144 -> "Key Focus Areas" y210 */
}
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__subhead {
font-family: var(--voy-font-body);
font-weight: 500;
font-size: 1.5625rem; /* 25px */
color: var(--voy-text);
margin: 0 0 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--voy-border); /* hairline at y267, 645 wide */
max-width: 645px;
}
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__list li {
padding: 0 0 13px 39px; /* marker x708, text x747 -> 39px indent */
font-size: 0.9375rem;
line-height: 20px;
color: #858585; /* Figma's muted here, not the sitewide #6B6B6B */
border: 0;
}
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__list li:last-child { padding-bottom: 0; }
/* Figma's markers here are the small right-pointing triangle used sitewide for
eyebrows (nodes 169:1987-1990, 13x13), not the checkmark the other six pages
share. Same vector, so reuse the eyebrow mask rather than a new asset. */
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__list li::before {
width: 9px;
height: 7px;
top: 7px;
left: 0;
background-color: #858585;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.53 8.43'%3E%3Cpath d='M5.20475 8.43083 10.5297 0 0 0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.53 8.43'%3E%3Cpath d='M5.20475 8.43083 10.5297 0 0 0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
transform: rotate(32deg);
}
@media (max-width: 1000px) {
body.voy-d6-stack .toggles .toggle:not(.open) { max-height: 64px; }
body.voy-d6-stack .toggles .toggle .toggle-title a { padding: 20px 50px 20px 0; min-height: 64px; font-size: 1.5rem; }
body.voy-d6-stack .toggles .toggle .toggle-title a::after { top: 20px; }
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__photo { position: static; width: 100%; height: auto; aspect-ratio: 642 / 381; }
body.voy-d6-stack .toggles .toggle .voy-expertise-panel__body { padding: 24px 0 32px; }
}
/* -----------------------------------------------------------------------------
DESKTOP-6 — contact form (Figma frame 154:1009, y6103-6630)
-----------------------------------------------------------------------------
Two 658px columns at x30 / x752 — a 64px gutter, which on the existing 1fr 1fr
grid falls out of the gap alone. All-white type on the navy panel:
labels Inter 500 22px/24.9, values Inter 500 16px/21, 1px SOLID white rules,
103px field height + 48px row gap (Figma's 151px pitch), and a 1380x45 lime
submit at radius 27 with black 16px/500 text.
The shared `.voy-contact` rules above set colour, border, width and padding with
!important, so these need matching weight — plain overrides silently lost.
-------------------------------------------------------------------------- */
body.voy-contact-std .voy-contact .wpforms-field-container {
column-gap: 64px;
row-gap: 48px;
}
body.voy-contact-std .voy-contact .wpforms-field-label {
font-family: var(--voy-font-body);
font-weight: 500;
font-size: 1.375rem; /* 22px */
line-height: 1.13;
color: #FFFFFF !important;
margin: 0 0 36px !important; /* label top y6103 -> value top y6164 */
text-transform: none;
letter-spacing: normal;
}
body.voy-contact-std .voy-contact .wpforms-form input.wpforms-field-medium,
body.voy-contact-std .voy-contact .wpforms-form input[type="text"],
body.voy-contact-std .voy-contact .wpforms-form input[type="email"],
body.voy-contact-std .voy-contact .wpforms-form input[type="tel"],
body.voy-contact-std .voy-contact .wpforms-form select,
body.voy-contact-std .voy-contact .wpforms-form textarea {
font-weight: 500;
font-size: 1rem; /* 16px */
line-height: 21px;
color: #FFFFFF !important;
/* Figma rules (Line 20-24) are white at 54% opacity, matching the placeholder
type — typed input stays full white so it reads against the navy. */
border-bottom: 1px solid rgba(255, 255, 255, 0.56) !important;
padding: 0 0 21px !important; /* underline lands at field y103 */
}
body.voy-contact-std .voy-contact .wpforms-form input::placeholder,
body.voy-contact-std .voy-contact .wpforms-form textarea::placeholder {
color: rgba(255, 255, 255, 0.56);
opacity: 1;
}
/* Service dropdown: Figma draws its own 12.2x5.8 chevron (vector 172:2174,
white 56%, 1.5 stroke) at the right edge of the column, so suppress the UA
control and paint that one. */
/* `background: transparent !important` on the shared rule expands to
`background-image: initial !important`, so the chevron needs !important too. */
body.voy-contact-std .voy-contact .wpforms-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.2 6.8' fill='none' stroke='rgba(255,255,255,0.56)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.75 0.75 6.6 6.05 12.45 0.75'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 1px top 6px !important; /* chevron x1396, 34px above the rule */
background-size: 12.2px 5.8px !important;
padding-right: 24px !important;
}
/* Until a real option is picked the field shows Figma's muted "Select a subject". */
body.voy-contact-std .voy-contact .wpforms-form select:invalid { color: rgba(255, 255, 255, 0.56) !important; }
body.voy-contact-std .voy-contact .wpforms-form select option { color: #1A2536; }
body.voy-contact-std .voy-contact .wpforms-form textarea {
min-height: 0;
height: 75px !important; /* Figma: message rule sits 75px under the value */
resize: none; /* Figma draws no grabber */
}
/* Figma sets the asterisk in the label's own colour, tight against the word. */
body.voy-contact-std .voy-contact .wpforms-required-label {
color: inherit !important;
margin-left: -0.26em;
font-weight: inherit;
}
/* Figma: message rule y6541 -> submit y6585. The textarea's own hairline and
the field wrapper eat 9px of that, so the declared gap is 35, not 44. */
body.voy-contact-std .voy-contact .wpforms-submit-container { padding-top: 33px; }
body.voy-contact-std .voy-contact .wpforms-form button[type="submit"],
body.voy-contact-std .voy-contact .wpforms-form .wpforms-submit {
width: 100% !important;
height: 45px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 27px !important;
background: var(--voy-accent) !important;
color: #000000 !important;
font-family: var(--voy-font-body);
font-weight: 500 !important;
font-size: 1rem !important;
line-height: 45px;
transition: background-color 0.2s ease;
}
/* Salient ships a global button lift: with data-button-style="slightly_rounded_shadow"
its `.container-wrap button[type="submit"]:hover` applies translateY(-3px) plus a
0 20px 38px shadow, so the pill jumped up and cast a halo on hover. Figma draws a
flat lime pill that doesn't move, and the lift also broke the 45px gap to the legal
row, so the geometry is pinned here and hover is a colour shift only. Salient's rule
carries no !important, so ours wins outright. */
body.voy-contact-std .voy-contact .wpforms-form button[type="submit"],
body.voy-contact-std .voy-contact .wpforms-form .wpforms-submit,
body.voy-contact-std .voy-contact .wpforms-form button[type="submit"]:hover,
body.voy-contact-std .voy-contact .wpforms-form .wpforms-submit:hover,
body.voy-contact-std .voy-contact .wpforms-form button[type="submit"]:focus,
body.voy-contact-std .voy-contact .wpforms-form .wpforms-submit:focus,
body.voy-contact-std .voy-contact .wpforms-form button[type="submit"]:active,
body.voy-contact-std .voy-contact .wpforms-form .wpforms-submit:active {
transform: none !important;
box-shadow: none !important;
top: 0 !important;
}
/* The generic :hover tint at the top of this file loses on specificity to the
contact-std background above, so restate it at this weight. */
body.voy-contact-std .voy-contact .wpforms-form button[type="submit"]:hover,
body.voy-contact-std .voy-contact .wpforms-form .wpforms-submit:hover,
body.voy-contact-std .voy-contact .wpforms-form button[type="submit"]:focus,
body.voy-contact-std .voy-contact .wpforms-form .wpforms-submit:focus {
background: #DFF275 !important;
}
@media (max-width: 900px) {
body.voy-contact-std .voy-contact .wpforms-field-container { grid-template-columns: 1fr; }
}
/* -----------------------------------------------------------------------------
DESKTOP-6 — header, hero and "Trusted by professionals"
-----------------------------------------------------------------------------
Measured against Figma frame 154:1009. The page ground is #F8F8F5.
-------------------------------------------------------------------------- */
body.voy-d6-stack { background: #F8F8F5; }
/* Header: like every other frame, Figma has NO nav menu — just the logo and one
"Contact Us" control (rect 165:1668 + text 165:1669). Here that control is a
lime 130x45 pill at radius 27 with BLACK Inter 500 16px, not the navy chip. */
/* nav hidden sitewide — see the rule near the end of this file */
body.voy-hero-841 #header-outer #top nav ul li.voy-nav-cta > a {
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 130px;
height: 45px;
padding: 0 !important;
border-radius: 27px !important;
background: var(--voy-accent) !important;
color: #000000 !important;
font-family: var(--voy-font-body);
font-weight: 500;
font-size: 1rem; /* Figma 16px, was 14px/600 */
line-height: 1.31;
letter-spacing: normal;
white-space: nowrap;
}
body.voy-hero-841 .voy-nav-cta > a .menu-title-text::after { display: none !important; }
/* Hero — Figma: h1 top y189, sub y543, button y645, all from x30, band ends 861.
The height itself comes from the block's own `min_height` param (dashboard
editable) because it is written as an inline style and would outrank any rule
here; the shortcode on this page passes 861px instead of the 88vh default.
The base `.voy-hero__inner` is space-between with a 6vh gap, so everything
under the h1 used to slide with the window height — pin it to a flow. */
body.voy-d6-stack .voy-hero { align-items: flex-start; padding-top: 189px; padding-bottom: 0; }
body.voy-d6-stack .voy-hero__inner { justify-content: flex-start; gap: 0; }
body.voy-d6-stack .voy-hero__title {
max-width: 923px;
margin-bottom: 96px; /* h1 bottom y447 -> sub top y543 */
}
body.voy-d6-stack .voy-hero__foot { margin-top: 0; align-items: flex-start; width: 100%; max-width: none; }
/* Figma's text box is 289px wide but its longest line ("Search & Talent Advisory
across") only inks ~274px; Chrome's Inter is a shade wider and broke that line
early, giving 4 lines instead of 3. Widening the invisible box to 300px
restores Figma's exact three line breaks without moving any glyph. */
body.voy-d6-stack .voy-hero__sub {
width: 300px;
max-width: 100%;
margin: 0 0 32px; /* sub bottom y613 -> button y645 */
padding-bottom: 0;
font-size: 1.125rem; /* Figma 18px, was 17px */
line-height: 23.58px; /* Figma 131% */
color: #FFFFFF; /* Figma fill is pure white, not 82% alpha */
}
body.voy-d6-stack .voy-hero .voy-hero__foot .voy-hero__actions { margin-top: 0 !important; }
/* Figma pill spans x1280-1410, i.e. flush to the 1410 content edge. */
/* The pill is 130x45 at x1280 y15 on all eight standard frames, not just this
one — Salient's own menu padding puts it at x1252/y26 otherwise. */
body.voy-hero-841 #header-outer #top nav ul.sf-menu > li.voy-nav-cta { margin-right: -40px; position: relative; top: -5px; }
/* Hero button: a 167x54 BLACK pill (rect 161:1630) with a detached 46px WHITE
circle holding the arrow (ellipse 161:1634 at x147) — the inverse of D3's. */
body.voy-d6-stack .voy-hero .voy-btn,
body.voy-d6-stack .voy-hero .voy-btn--dark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
width: 167px;
height: 54px;
padding: 0 0 0 22px;
margin-right: 25px;
border-radius: 27px;
background: #000000;
color: #FFFFFF;
font-family: var(--voy-font-body);
font-weight: 500;
font-size: 1rem;
line-height: 1.31;
}
body.voy-d6-stack .voy-hero .voy-btn__chip {
position: absolute;
left: 117px; /* circle x147 - button x30 */
top: 4px; /* circle y649 - button y645 */
width: 46px;
height: 46px;
margin: 0;
border-radius: 50%;
background: #FFFFFF;
color: #000000;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.voy-d6-stack .voy-hero .voy-btn__chip svg { width: 13px; height: 12px; }
body.voy-d6-stack .voy-hero .voy-btn:hover { background: #1A2536; }
/* "Trusted by professionals" (node 165:1671) is a CENTRED 26px serif heading in
Figma — it was rendering as a 12px uppercase eyebrow at the left gutter. */
body.voy-d6-stack .voy-logos-section .voy-eyebrow,
body.voy-d6-stack .voy-logos__title {
display: block;
width: 100%;
text-align: center;
font-family: var(--voy-font-heading);
font-weight: 400;
font-size: 1.625rem; /* 26px */
line-height: 1.13;
letter-spacing: normal;
text-transform: none;
color: #000000;
}
body.voy-d6-stack .voy-logos-section .voy-eyebrow::before { display: none; }
/* Heading y938 / logo row y1002-1062 relative to the hero band's y841 end: the
padding now lives in the shared "standard rhythm" block at the end of this
file, since all eight standard frames use exactly these numbers. */
body.voy-d6-stack .voy-logos-section .voy-container .voy-eyebrow,
body.voy-d6-stack .voy-logos-section .voy-container .voy-logos__title {
margin: 0 0 34.6px;
padding-bottom: 0; /* Salient puts padding-bottom on */
}
body.voy-d6-stack .voy-logos-section .voy-logos,
body.voy-d6-stack .voy-logos-section .voy-logos__track { height: 60px; }
/* -----------------------------------------------------------------------------
DESKTOP-6 — eyebrow glyph, page ground, About and "Get in touch"
-----------------------------------------------------------------------------
Every measurement below is the Figma value from frame 154:1009 (VOY Dev
XGzazVQLpm6SnUDtELPIVi, byte-identical to the client's VOY file for this
frame). Coordinates in comments are frame-absolute.
-------------------------------------------------------------------------- */
/* The page ground is #F8F8F5 (frame fill), not the warm sitewide cream. */
body.voy-d6-stack .voy-section--cream { background: #F8F8F5; }
/* Eyebrow marker — Figma draws an ARROW (vector 169:1676 and its twins before
every eyebrow on this frame), not the sitewide rotated triangle. Exported
path, used as a mask so it inherits the eyebrow's own colour (navy on light
sections, white on the navy contact section). */
body.voy-d6-stack .voy-eyebrow {
display: flex; /* block-level: no line-box leading, so the
eyebrow starts exactly on its Figma y */
align-items: center;
gap: 9.5px; /* arrow right edge 681.5 -> text x691 */
font-size: 14px;
font-weight: 600;
line-height: 14.7px;
letter-spacing: 1.4px; /* Figma letterSpacing 1.4 at 14px */
}
body.voy-d6-stack .voy-eyebrow::before {
width: 11px;
height: 12px;
transform: none; /* the exported path is already rotated */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath d='M0.000321901 12L10.8807 6.75808L0.065384 0C0.065384 0 4.58319 5.22549 0.000321901 12Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath d='M0.000321901 12L10.8807 6.75808L0.065384 0C0.065384 0 4.58319 5.22549 0.000321901 12Z'/%3E%3C/svg%3E");
}
/* -------- About ------------------------------------------------------------
eyebrow y1162 · h2 y1204 (805x68, ONE line) · body y1297 (682x63, 3 lines) ·
photo y1406 (1380x614). Section runs 1062 -> 2120.
------------------------------------------------------------------------- */
body.voy-d6-stack .voy-about { padding-top: 100px; padding-bottom: 0; }
body.voy-d6-stack .voy-about__intro { max-width: none; }
body.voy-d6-stack .voy-about__intro .voy-eyebrow {
justify-content: center;
color: #1A2536;
margin: 0 0 27.3px;
}
body.voy-d6-stack .voy-about__title {
max-width: 805px;
margin: 0 auto 25.2px;
font-size: 60px;
line-height: 67.8px; /* Figma 113% */
letter-spacing: 0; /* sitewide h2 tightens to -0.01em; Figma is 0 */
color: #000000;
}
body.voy-d6-stack .voy-about__body {
max-width: 682px;
margin: 0 auto;
padding-bottom: 0;
font-size: 16px;
line-height: 20.96px; /* Figma 131% */
color: #858585;
}
body.voy-d6-stack .voy-about__media { margin: 46.1px 0 0; }
/* The 1380x614 letterbox itself is shared with v1/v1-b/v2-a/v2-b/v2-c — see the
"About photo letterbox" block at the end of this file. */
/* -------- Get in touch (body.voy-contact-std) -------------------------------
Eight frames — home, desktop-6 and the six V-pages — draw this section
identically; only where it STARTS differs. Measured from the navy band's own
top edge, every one of them puts:
eyebrow +93 · h2 +129 (45px) · intro x928 +107 (388 wide) · photo +220
(1380x703) · glass cards +660 (3 x 438x235 at x64/501/938) · form labels
+987/+1138/+1289 · submit +1469 (1380x45, r27) · band height 1988
Desktop-6 is the sole 3px outlier (photo +217, 706 tall) and overrides below.
Originally written page-scoped to Desktop-6; promoted 2026-08-11 once the
other seven frames were measured and matched.
------------------------------------------------------------------------- */
body.voy-contact-std .voy-contact { padding-top: 93px; }
body.voy-contact-std .voy-contact__head {
grid-template-columns: 898px 388px; /* title col x30, intro col x928 */
column-gap: 0;
align-items: start;
margin-bottom: 40.15px; /* h2 bottom +179.85 -> photo +220 */
}
body.voy-contact-std .voy-contact .voy-eyebrow { color: #FFFFFF; margin: 0 0 21.3px; }
body.voy-contact-std .voy-contact__title {
margin: 0;
font-size: 45px;
line-height: 50.85px; /* Figma 113% */
letter-spacing: 0;
color: #FFFFFF;
}
body.voy-contact-std .voy-contact__intro {
align-self: start;
margin-top: 14px; /* intro y5223 vs eyebrow y5209 */
padding-bottom: 0;
font-size: 16px;
line-height: 20.96px;
color: #FFFFFF;
}
body.voy-contact-std .voy-contact__media {
min-height: 0;
height: 703px;
border-radius: 0;
}
/* Desktop-6 alone draws the photo 3px taller and 3px higher. */
body.voy-d6-stack .voy-contact__head { margin-bottom: 37.2px; }
body.voy-d6-stack .voy-contact__media { height: 706px; }
body.voy-contact-std .voy-contact .voy-contact__img {
height: 100%;
border-radius: 0;
/* 184:2244 shows 4.8%-80.4% of the source height => 21% of the cover overflow */
object-position: 0 21%;
filter: brightness(0.94); /* matches the fill's 12% monotone grain */
}
/* Glass cards: Figma fills them #000 at 33% over a 36.4 BACKGROUND_BLUR (CSS
blur() is half Figma's radius), hairlines them in white at 54%, square. */
body.voy-contact-std .voy-contact__cards {
/* Offsets are 1px inside Figma's so the wrapper's own hairline lands on the
card edge: content box then starts exactly at x64 / y5776 and spans 1312x235. */
left: 33px;
right: 33px;
bottom: 27px;
height: 237px;
border-radius: 0;
background: rgba(0, 0, 0, 0.33);
border: 1px solid rgba(255, 255, 255, 0.54);
-webkit-backdrop-filter: blur(18.2px);
backdrop-filter: blur(18.2px);
}
body.voy-contact-std .voy-contact-card {
gap: 0;
padding: 30px 0 0 27px; /* circle x91/y5806 inside card x64/y5776 */
border-left: 1px solid rgba(255, 255, 255, 0.54);
}
body.voy-contact-std .voy-contact-card:first-child { border-left: 0; }
body.voy-contact-std .voy-contact-card__icon {
width: 49px;
height: 49px;
margin: 0 0 42px; /* circle bottom 5855 -> label y5897 */
color: #000000;
}
body.voy-contact-std .voy-contact-card__icon svg { width: 24px; height: 24px; }
body.voy-contact-std .voy-contact-card__label {
font-size: 16px;
font-weight: 500;
line-height: 20.96px;
margin-bottom: 36px; /* label bottom 5918 -> value y5954 */
color: #FFFFFF;
}
body.voy-contact-std .voy-contact-card__value {
font-size: 24px;
font-weight: 500;
line-height: 27.12px;
color: #FFFFFF;
}
/* The address is the only value that runs to two lines, and every one of the
eight frames lifts it so the pair straddles the single-line values rather
than hanging below them: its box starts 14px under the label (y5932 on
Desktop-6) where Call Us / Email start 36 (y5954). */
body.voy-contact-std .voy-contact-card--address .voy-contact-card__label {
margin-bottom: 14px;
}
/* Form: photo bottom 6039 -> first label y6103. WPForms' own 24px block margin
escapes the wrapper and would push the footer down with it. */
body.voy-contact-std .voy-contact__form { margin-top: 64px; }
body.voy-contact-std .voy-contact .wpforms-container { margin: 0; }
/* -------- Footer -----------------------------------------------------------
Figma draws no separate footer: the navy band simply continues past the
submit button with the chrome wordmark (1378x144.3 at x30, +177 below the
button) and a legal row 155px under it — "Privacy" at x30 and
"Terms & Conditions" ending at x1408, both 15px/19.65 in #858585. There is no
rule above them, no copyright line and no social row on any of the eight
frames; the block still renders those when its params are filled in, they are
just left empty in page-content. The band ends 122.35 under the legal row.
------------------------------------------------------------------------- */
body.voy-contact-std .voy-contact { padding-bottom: 0; }
body.voy-contact-std .voy-footer { padding: 176px 0 122.35px; }
body.voy-contact-std .voy-footer__wordmark {
text-align: left;
margin-bottom: 10px;
line-height: 0;
}
body.voy-contact-std .voy-footer__wordmark-svg { width: 1378px; max-width: 100%; height: auto; }
body.voy-contact-std .voy-footer__bar {
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 0;
padding-top: 0;
border-top: 0;
}
body.voy-contact-std .voy-footer__links { gap: 20px; font-size: 15px; line-height: 19.65px; }
body.voy-contact-std .voy-footer__links a,
body.voy-contact-std .voy-footer__copy { color: #858585; }
body.voy-contact-std .voy-footer__links a:hover { color: var(--voy-text-invert); }
/* The socials column is empty on these frames, so the right-hand legal link has
to be the second grid track rather than the third. */
body.voy-contact-std .voy-footer__socials:empty { display: none; }
@media (max-width: 900px) {
body.voy-contact-std .voy-footer { padding: 64px 0 48px; }
body.voy-contact-std .voy-footer__bar { grid-template-columns: 1fr; gap: 1rem; }
}
/* -----------------------------------------------------------------------------
DESKTOP-6 — the run between About and "Get in touch"
-----------------------------------------------------------------------------
Figma section bounds on frame 154:1009, and what each padding buys:
markets 2020 -> 2511 (tiles y2088/y2299, 346x212, no heading)
expertise 2511 -> 3583 (eyebrow y2599, h2 y2686, cards y2858-3538)
imagery band 3583 -> 4370 (1440x787 full bleed)
testimonials 4370 -> 5116 (white; eyebrow y4481, h2 y4525, cards y4620)
These four were collectively 80px short, which is why the contact band used to
start at y5036 instead of Figma's y5116.
-------------------------------------------------------------------------- */
/* -------- Markets: eight tiles, no heading on this frame ------------------ */
body.voy-d6-stack .voy-markets { padding-top: 68px; padding-bottom: 0; }
body.voy-d6-stack .voy-markets__grid {
border-radius: 0;
border-color: #D9D9D9;
background: #FFFFFF;
}
body.voy-d6-stack .voy-market-card {
height: 211px; /* 210 content + its own 1px divider */
padding: 50px 8px 0;
justify-content: flex-start;
gap: 21px; /* icon bottom -> label top y2224 */
border-color: #D9D9D9;
transition: background-color .25s ease;
}
body.voy-d6-stack .voy-market-card:nth-last-child(-n+4) { height: 210px; }
body.voy-d6-stack .voy-market-card__icon { height: 64px; }
body.voy-d6-stack .voy-market-card__icon svg { width: auto; height: 64px; }
body.voy-d6-stack .voy-market-card__label {
font-size: 22px;
font-weight: 400;
line-height: 24.86px;
color: #858585;
}
/* Figma shows one tile (Portfolio Companies) washed lime with a dark circled "+"
over its icon. That is the HOVER state, drawn onto a static frame the only way
a static frame can show it — not a permanently selected tile. So it lives here
as a real :hover on every tile, and no card ships with `is-highlight` (the
markets shortcodes pass no_highlight="yes"). The is-highlight rules further
down are kept so the mockup look can be restored for a client review.
Shared by all eight frames that draw the grid, not just Desktop-6. */
body.voy-hero-841 .voy-market-card { position: relative; }
body.voy-hero-841 .voy-market-card:hover { background: rgba(232, 249, 136, 0.46); }
body.voy-hero-841 .voy-market-card__icon { position: relative; }
body.voy-hero-841 .voy-market-card__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
background: #1A2536 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M11 3v16M3 11h16'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
opacity: 0;
transform: scale(.85);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
body.voy-hero-841 .voy-market-card:hover .voy-market-card__icon::after { opacity: 1; transform: scale(1); }
/* Figma fades the tile's own icon to 16% behind the "+" rather than hiding it.
That fade used to be baked into portfolio-companies.svg (``),
which is how the icon was exported out of the hovered tile — it left that one
tile looking washed out next to its siblings once the static highlight came
off. The asset is now full-strength and the fade lives in the hover. */
body.voy-hero-841 .voy-market-card .voy-market-icon { transition: opacity .25s ease; }
body.voy-hero-841 .voy-market-card:hover .voy-market-icon,
body.voy-hero-841 .voy-market-card.is-highlight .voy-market-icon { opacity: .16; }
/* -------- Functional Expertise head --------------------------------------- */
body.voy-d6-stack .voy-expertise { padding-top: 88px; padding-bottom: 45px; }
body.voy-d6-stack .voy-expertise__head {
grid-template-columns: 788px 436px; /* h2 col x30, intro col x928 */
column-gap: 110px;
align-items: start;
margin-bottom: 36px; /* h2 bottom 2822 -> first card y2858 */
}
body.voy-d6-stack .voy-expertise .voy-eyebrow { margin: 0 0 72.3px; }
body.voy-d6-stack .voy-expertise__title {
max-width: 788px;
margin: 0;
font-size: 60px;
line-height: 67.8px;
letter-spacing: 0;
color: #000000;
}
body.voy-d6-stack .voy-expertise__intro {
margin: 126px 0 0; /* intro y2725 vs eyebrow y2599 */
padding-bottom: 0;
font-size: 16px;
line-height: 20.96px;
color: #858585;
}
/* -------- Imagery band ---------------------------------------------------- */
body.voy-d6-stack .voy-band--tall { min-height: 787px; }
/* -------- Testimonials (body.voy-testi-std) ---------------------------------
Three frames carry this section — desktop-6, v2-a, v2-b — and all three place
it identically against its own top edge: eyebrow +111, h2 +155, card rail
+250, section 746 tall. Promoted from the Desktop-6 scope 2026-08-11.
------------------------------------------------------------------------- */
body.voy-testi-std .voy-testimonials {
background: #FFFFFF; /* Figma 172:2090 — white, not the page cream */
padding: 111px 0 86px;
overflow: hidden; /* the rail runs past the right edge by design */
}
body.voy-testi-std .voy-testimonials__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 44.2px; /* h2 bottom 4575.9 -> card y4620 */
}
body.voy-testi-std .voy-testimonials .voy-eyebrow { color: #09347B; margin: 0 0 29.3px; }
body.voy-testi-std .voy-testimonials__title {
margin: 0;
font-size: 45px;
line-height: 50.85px;
letter-spacing: 0;
color: #000000;
}
/* Two 51.2px navy circles at x1292 / x1359, y4512. */
body.voy-testi-std .voy-testimonials__nav { display: flex; gap: 15.8px; margin-top: 31px; }
body.voy-testi-std .voy-tnav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 51.2px;
height: 51.2px;
padding: 0;
border: 0;
border-radius: 50%;
background: #1A2536;
color: #FFFFFF;
cursor: pointer;
transition: opacity .2s ease, background-color .2s ease;
}
body.voy-testi-std .voy-tnav:hover { background: #09347B; }
body.voy-testi-std .voy-tnav[disabled] { opacity: .35; cursor: default; }
/* Card rail: 596x410 cards on a 595px pitch, first one at x125. */
body.voy-testi-std .voy-testimonials__grid {
display: flex;
gap: 0;
margin-left: 95px; /* container x30 -> first card x125 */
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
body.voy-testi-std .voy-testimonials__grid::-webkit-scrollbar { display: none; }
body.voy-testi-std .voy-tcard {
flex: 0 0 596px;
height: 410px;
margin-right: -1px; /* neighbours share one hairline */
padding: 60px 0 0;
gap: 0;
justify-content: flex-start;
align-items: center;
text-align: center;
background: #F8F8F5;
border: 1px solid #D9D9D9;
border-radius: 0;
min-height: 0;
scroll-snap-align: start;
}
body.voy-testi-std .voy-tcard__avatar {
width: 94px;
height: 97px;
border-radius: 0;
background: transparent;
margin-bottom: 32px; /* avatar bottom 4777 -> quote y4809 */
}
body.voy-testi-std .voy-tcard__quote {
width: 371px;
margin: 0 0 37px; /* quote bottom 4884 -> name y4921 */
font-family: var(--voy-font-body);
font-weight: 500;
font-size: 22px;
line-height: 24.86px;
color: #000000;
}
body.voy-testi-std .voy-tcard__person { display: contents; }
body.voy-testi-std .voy-tcard__meta { display: contents; }
body.voy-testi-std .voy-tcard__name {
font-weight: 500;
font-size: 22px;
line-height: 24.86px;
color: #000000;
margin-bottom: 7.1px;
}
body.voy-testi-std .voy-tcard__role {
font-family: var(--voy-font-body);
font-weight: 600;
font-size: 14px;
line-height: 14.7px;
letter-spacing: 1.4px;
color: #09347B;
}
@media (max-width: 900px) {
body.voy-d6-stack .voy-expertise__head { grid-template-columns: 1fr; column-gap: 0; }
body.voy-d6-stack .voy-expertise__intro { margin-top: 24px; }
body.voy-testi-std .voy-testimonials__grid { margin-left: 0; }
body.voy-testi-std .voy-tcard { flex-basis: min(596px, 88vw); }
body.voy-d6-stack .voy-band--tall { min-height: 420px; }
}
/* The open card measured 442px against Figma's 446 — a 4px content shortfall that
propagated down the page as a 5px deficit for every later section. */
body.voy-d6-stack .toggles .toggle.open { min-height: 446px; }
/* Figma stacks the quote card as avatar -> quote -> name -> role; the block's
markup is quote-first (blockquote before figcaption), so reorder rather than
restructure the shared markup. */
body.voy-testi-std .voy-tcard__avatar { order: 1; }
body.voy-testi-std .voy-tcard__quote { order: 2; }
body.voy-testi-std .voy-tcard__name { order: 3; }
body.voy-testi-std .voy-tcard__role { order: 4; }
/* Salient's inline button skin forces `border-radius: 4px !important` on every