:root { /* Official Bensimon Byrne palette — see BRAND.md. These eleven values are the only colours in the site; everything else is one of them at an opacity. The -rgb triplets exist so rgba() can draw from the same source rather than restating the channels. */ --bb-white: #FFFFFF; --bb-off-white: #F4ECE1; --bb-black: #000000; --bb-orange: #D76742; --bb-red: #782715; --bb-burgundy: #3E0E0C; --bb-pink: #F0A8B9; --bb-sky: #ADD4F1; --bb-navy: #1B1D3C; --bb-forest: #163612; --bb-cream: #E9D8C1; --bb-white-rgb: 255, 255, 255; --bb-off-white-rgb: 244, 236, 225; --bb-black-rgb: 0, 0, 0; --bb-orange-rgb: 215, 103, 66; --bb-red-rgb: 120, 39, 21; --bb-burgundy-rgb: 62, 14, 12; --bb-pink-rgb: 240, 168, 185; --bb-sky-rgb: 173, 212, 241; --bb-navy-rgb: 27, 29, 60; --bb-forest-rgb: 22, 54, 18; --bb-cream-rgb: 233, 216, 193; /* Column-wipe transition pattern (see .transition__panel below) — brand navy / forest green. */ --transition-color-a: var(--bb-navy); --transition-color-b: var(--bb-forest); /* Page grid system — the shared column/gap/margin values behind every .cs-* template grid (and reused by .pillars__inner/.portfolio-grid elsewhere). New pages and sections should build their grids off these instead of hardcoding 12/8/6, 16px or 20px/16px directly, so a sitewide adjustment only has to happen once, here. --grid-cols/--page-margin are the LIVE values for the current breakpoint (redefined below at 1200px/900px — the .cs-* template's established tablet/mobile grid breakpoints) — reference these in a grid whose own column count/margin is meant to track the standard responsive steps automatically. --grid-cols-desktop stays fixed at 12 regardless of viewport — reference it instead in a grid that deliberately keeps a constant 12 tracks through tablet and changes layout some other way (full-bleed spans, switching to flex) rather than reducing its column count, which several .cs-* blocks do on purpose. --page-margin-desktop is the equivalent fixed constant for margins. --grid-gap does not change per breakpoint in this system. */ --grid-cols-desktop: 12; --grid-cols-tablet: 8; --grid-cols-mobile: 6; --grid-cols: var(--grid-cols-desktop); --grid-gap: 16px; --page-margin-desktop: 20px; --page-margin-mobile: 16px; --page-margin: var(--page-margin-desktop); } @media (max-width: 1200px) { :root { --grid-cols: var(--grid-cols-tablet); } } @media (max-width: 900px) { :root { --grid-cols: var(--grid-cols-mobile); --page-margin: var(--page-margin-mobile); } } /* WOFF2 first: the same fonts, compressed (Haas 177K -> 59K, the STIX italic 447K -> 173K). Apache doesn't gzip the .ttf files, so they were going out at full size. The .ttf stays as a fallback. The Haas file is also preloaded from each page's . */ @font-face { font-family: "Haas Recast VF"; src: url("../fonts/HaasRecastVF_TrakWght.woff2") format("woff2"), url("../fonts/HaasRecastVF_TrakWght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "STIX Two Text"; src: url("../fonts/STIX_Two_Text/STIXTwoText-VariableFont_wght.woff2") format("woff2"), url("../fonts/STIX_Two_Text/STIXTwoText-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "STIX Two Text"; src: url("../fonts/STIX_Two_Text/STIXTwoText-Italic-VariableFont_wght.woff2") format("woff2"), url("../fonts/STIX_Two_Text/STIXTwoText-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 400 700; font-style: italic; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ------------------------------------------------------------------ Vertical metric trim, site-wide. Every text block's box is trimmed to its own cap height (top) and baseline (bottom), so the leading no longer leaks out of the top and bottom of the block. What's left is an optical box: the space you set between a heading and the copy under it is the space you get. Why this is safe for our two faces — both carry a real sCapHeight in OS/2, so browsers trim to true metrics rather than guessing: Haas Recast VF upem 1000 asc 993 desc -273 cap 720 STIX Two Text upem 1000 asc 762 desc -238 cap 657 Haas Recast is the happy case: ascender - cap = 273, which is exactly the descender depth. trim-both therefore removes an identical slice off the top and the bottom, so nothing shifts optically off-centre — blocks just get shorter, symmetrically. How much comes off each side, at the line-heights used in this file: line-height 0.92-0.97 (display/headings) 0.100-0.125em per side line-height 1.19-1.30 (body/subcopy) 0.235-0.290em per side So a 120px hero heading loses ~15px top and bottom; 18px body copy loses ~5px. Anywhere that reclaimed space was doing layout work, the compensation lives in the @supports block further down, next to the rule it's correcting — not here. Applied via * deliberately. GSAP SplitText re-wraps headings into per-line
s at runtime, and text-box-trim only acts on a block that owns an inline formatting context — so a rule scoped to h1-h6/p would silently stop trimming the moment SplitText ran. Inheriting it onto the generated line wrappers keeps trimmed and untrimmed headings identical. .line-mask below re-opens the room those wrappers need for ascenders and descenders once trimmed. Chrome/Edge 133+, Safari 18.2+, Firefox 154+. Everywhere else the declaration is dropped and the page renders exactly as it did before — which is why every compensating tweak is @supports-gated rather than unconditional. */ * { text-box: trim-both cap alphabetic; } /* Opt-out. Put this on anything where the glyph box genuinely needs its full leading — e.g. a character that has to stay vertically centred inside a fixed-size box it doesn't control. */ .no-text-trim, .no-text-trim * { text-box: normal; } /* Avoid single-word widows/orphans on headings and body copy site-wide. */ h1, h2, h3, h4, h5, h6, p, li { text-wrap: pretty; } /* Paragraph break, site-wide. Trimmed, a

ends at its own baseline, so this margin is the entire gap between paragraphs rather than a top-up on the leading that used to hang below the last line. For this to survive SplitText, a prose block's

s have to be the split roots themselves. Splitting their *container* makes SplitText re-wrap every rendered line in its own clone of the source

, at which point no two

s are siblings any more, p + p matches nothing and paragraph breaks silently vanish — which is what was happening on the case-study pages. The markup now carries data-split="heading" on each

(see .cs-hero__copy / .cs-text-block__body and the footer address block); keep it there when adding prose. */ p + p { margin-top: 14px; } /* Headings that were

s until they became real headings (2026-09-25) and still take their type from their container, as the

s did: without this the browser's own h2 size and bold would win. The Tadiem card's description keeps the 14px it had as a p + p. */ .team__intro-lead, .careers__intro-lead { font-size: inherit; font-weight: inherit; } .tadiem-card__heading + .tadiem-card__desc { margin-top: 14px; } /* ...except where the parent is already a flex column spacing its own children. These are layout stacks, not running prose — a value above its label, a quote above its attribution — and a flex item's margin adds to the container's gap rather than replacing it. */ .clients__list > p + p, .cs-quote__inner > p + p, .cs-stats__card > p + p, .mobile-menu__contact > p + p, .capabilities__panel-copy > p + p, .combine__text > p + p, .team__meta > p + p, .team__intro > p + p, .careers__intro > p + p { margin-top: 0; } /* Reachable by assistive tech, invisible on screen — live regions, skip links. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Baseline focus ring for everything focusable. currentColor rather than a fixed hue because the site runs light and dark sections against each other — the ring then inherits whatever the text already contrasts against, on cream, burgundy, navy and forest alike, and .pillars__item-link set that precedent before this rule existed. :where() keeps it at zero specificity, so any block wanting a different treatment overrides it by simply existing rather than by out-specifying it. Nothing opts out: removing the ring without replacing it is the one thing this is here to prevent. tabindex="-1" is excluded because those are programmatic focus targets, not controls anyone tabs to.

is the skip link's destination, and without the exclusion Chrome matched it on :focus-visible and drew a 2px ring around a 1024x7667 box — the whole page. The slider's off-screen slides carry -1 for the same reason. */ :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* Excluding tabindex="-1" above only stops OUR ring; the browser still draws its own, so
was left ringed in Chrome's orange across the full page. This is the one place outline: none is right: a -1 element is not keyboard reachable and is not a control, so there is no focus anyone needs to see here — the skip link that sent focus in is the visible affordance, and it has its own ring. */ [tabindex="-1"]:focus { outline: none; } /* An outline is painted outside the border box, so any ancestor clipping its overflow swallows the ring of everything inside it. That hit the reveal masks hardest — they wrap tight around a CTA, so the ring had nowhere to go — and it was already breaking the bespoke focus styles that predate the rule above: .pillars__item-link draws at 6px offset and the video controls at 4px, both straight into a clip. Releasing the clip only while something inside has focus: none of these need to be clipping at that moment, and the reveal they exist for has long since finished by the time anything is tabbed to. :focus-within rather than :has(:focus-visible) — it is the older, more widely supported selector, and releasing the clip on a mouse click too costs nothing, since the ring itself is still :focus-visible only. Written out rather than wrapped in :where(): each block sets its own overflow further down the file, and at :where()'s zero specificity the later rule simply won. */ .reveal-mask:focus-within, .line-mask:focus-within, .pillars:focus-within, .capabilities:focus-within { overflow: visible; } /* The exception. .vimeo-bg cannot give up its clip — the iframe inside is deliberately oversized to cover the stage, and letting it out would spill video across the page. Its controls are inset: 0 against it, so the ring goes inward instead. */ .vimeo-bg :where(a, button):focus-visible { outline-offset: -4px; } /* First thing in the tab order on every page: the navbar is fixed and ~30 links deep, so without this a keyboard user walks the whole of it before reaching content. Off-screen until focused, then parked over the navbar (which is z-index 100). */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 12px 16px; background: var(--bb-white); color: var(--bb-black); /* The chip's own edge, separate from the focus ring outside it: white on off-white is 1.17:1, so without a border the shape has no definition of its own. 1px against the ring's 2px so the two read as edge and ring rather than a double ring. */ border: 1px solid var(--bb-black); font-family: "Haas Recast VF", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-variation-settings: 'TRAK' 0; font-size: 16px; line-height: 1; text-decoration: none; transform: translateY(calc(-100% - 16px)); } .skip-link:focus { transform: translateY(0); } /* No focus-ring override here on purpose: the baseline rule's currentColor resolves to this chip's own black, which is what makes it readable. An off-white ring was tried and is invisible — the chip is white, the page behind it is off-white, and the two are a shade apart. */ html { overflow-x: hidden; } a { color: inherit; } /* overflow-x is only set on (above), not repeated here: a mismatched overflow-x/overflow-y pair on the *same* element (hidden + the initial visible) makes that element compute overflow-y as auto too, per the CSS Overflow spec — which would make body a scroll container of its own. It isn't one (html is document.scrollingElement, body's scrollTop never moves), so that phantom container just breaks position:sticky for any descendant, matching to body's static box instead of the real viewport. html's own overflow-x:hidden already clips horizontal overflow for the whole page, so body doesn't need to repeat it. */ body { background: var(--bb-off-white); } /* Barba page transition: column wipe overlay, driven by main.js. Above .navbar and .mobile-menu (both z-index <= 100) so it covers the originating page's nav/menu instead of stacking underneath them. */ .transition { z-index: 1000; pointer-events: none; position: fixed; inset: 0; overflow: clip; } .transition__panels { width: 100%; height: 100%; display: flex; position: absolute; top: 0; left: 0; } .transition__panel { /* Brick tile from Figma (node 1:1921, "Brick - HalfMargin_ QuarterAsymetricRow"): a 20x18 unit, 2 equal-width columns x 2 rows split 2fr/1fr (12px/6px), colors swapped between columns — top- left/bottom-right one color, top-right/bottom-left the other. background-color is color B (the base); ::before paints color A through a shape-only SVG mask, so both colors stay plain CSS variables instead of being baked into the encoded SVG. background- size: 100% auto scales the tile to each panel's own width, height following automatically off the mask image's intrinsic 20:18 ratio. */ background-color: var(--transition-color-b); width: 100%; height: 100%; position: relative; top: -100%; overflow: hidden; } .transition__panel::before { content: ''; position: absolute; inset: 0; background-color: var(--transition-color-a); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18'%3E%3Crect y='12' width='10' height='6' fill='white'/%3E%3Crect x='10' width='10' height='12' fill='white'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18'%3E%3Crect y='12' width='10' height='6' fill='white'/%3E%3Crect x='10' width='10' height='12' fill='white'/%3E%3C/svg%3E"); -webkit-mask-size: 100% auto; mask-size: 100% auto; -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* Masked scroll reveal: hide [data-split="heading"] up front so there's no flash of unsplit text before SplitText/ScrollTrigger run (main.js swaps this for visibility:visible right as the split completes). [data-mask-reveal] marks an element as its own reveal mask for a child image/media element. */ [data-split="heading"] { visibility: hidden; } /* Both of these are clip wrappers, not type — exempt from the sitewide trim for the same reason the odometer is. A reveal mask is a block box whose only job is to hide its child while it translates. Trimmed, its own line box collapses to the cap height of its inherited font — around 10.6px at the card's 16px — and anything inline inside it that is taller than that gets sliced off by the overflow:hidden. That is what was cutting the padding off .tag: the pill is 27.58px of inline-flex, the generated wrapper trimmed itself down to 10.59px, and 17px of pill disappeared the moment the reveal initialised and the wrapper appeared. First paint looked right because the wrapper does not exist yet. Untrimmed, the wrapper's line box sizes to the inline content it holds, which is what a mask has to do. Nothing here sets type, so nothing is lost by opting out: the element being revealed keeps its own trim. Applies to both the hand-placed [data-mask-reveal] (today only ever on media — gallery items, card images, the footer wordmark) and the wrapper main.js generates. */ [data-mask-reveal], .reveal-mask { text-box: normal; } [data-mask-reveal] { position: relative; overflow: hidden; } /* Auto-generated by main.js around any [data-reveal-group] slot that has no [data-split]/[data-mask-reveal] of its own. It clips at the edge of what it wraps, and text on this site is text-box-trimmed to cap height and baseline, so without room to spare the mask cuts off anything past either edge: descenders (g, y, p), accents and ascenders above a capital (É). The padding buys that room and the equal negative margin cancels it, so nothing moves. This is the same idea as .line-mask's 0.2em, for the masks SplitText makes. The negative margin is only layout-neutral because every generated mask on the site sits in a flex container, where margins never collapse (checked across all pages). In ordinary block flow it would collapse with a neighbour's margin and shift spacing. */ .reveal-mask { overflow: hidden; padding: 0.3em 0; margin: -0.3em 0; } /* SplitText's own per-line mask (mask:"lines") clips at its padding edge, which otherwise flat-cuts descenders (g, y, p, q, j) on the line below. The bottom padding gives them room inside the mask; the matching negative margin cancels the padding's added height so line spacing/layout stays exactly as before. */ .line-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; } /* A split heading is ONE paragraph pulled apart, not a stack of separate blocks — so it has to trim like one. The sitewide * rule would trim every .line independently, which zeroes the leading BETWEEN lines and welds a two-line hero shut; a split heading would stop matching the unsplit markup it was built from. Scoping it to the first and last line restores the intent: leading comes off the outside of the heading only, and every interior line keeps its full line box. :first-child:last-child is not redundant — a one-line heading is both ends at once, and without it the :last-child rule would win outright and leave the top untrimmed. */ @supports (text-box: trim-both cap alphabetic) { /* text-box-edge takes BOTH edges or neither — "trim-start cap" and "trim-end alphabetic" parse as invalid and are dropped on the floor, silently leaving the line untrimmed. The edge pair always reads "cap alphabetic"; it's the trim keyword that picks which side of it actually gets cut. */ /* Each rule has to reach the mask's whole subtree, not just .line. SplitText keeps the source markup inside the wrapper, so a split

comes out as .line-mask > .line > p — and it's that inner

that owns the inline formatting context and therefore the trim. Resetting only .line leaves the

still trimmed by the * rule and every interior line collapses to cap height anyway. Matching the descendants too covers both shapes: bare text in .line, or a block nested inside it. */ .line-mask, .line-mask * { text-box: normal; } .line-mask:first-child, .line-mask:first-child * { text-box: trim-start cap alphabetic; } .line-mask:last-child, .line-mask:last-child * { text-box: trim-end cap alphabetic; } .line-mask:first-child:last-child, .line-mask:first-child:last-child * { text-box: trim-both cap alphabetic; } /* Trimmed, the outer lines' boxes stop at cap height and the baseline, so the mask now clips at the ink on both ends rather than out in the leading. Measured glyph extremes, both faces at upem 1000: cap tallest ink deepest ink Haas Recast 0.720 À 0.910 g -0.184 STIX italic 0.657 Î 0.836 f -0.227 Haas is drawn for this: b/d/h/k/l/i all top out at exactly 0.720, flush with cap, so ordinary headline text needs no top room at all — only accents and $ (0.800) reach past it. STIX italic is the one that does, its ascenders running 0.048em above its cap. 0.2em/0.25em clears the worst case in both faces including accented caps. Only the first and last mask are padded, so no two negative margins ever adjoin: CSS collapses adjoining margins to the single most negative value instead of summing them, which would otherwise leave every line an unpaid 0.2em taller than its line-height. Interior masks keep the base rule's bottom padding, which is correct for them precisely because they are not trimmed. hiddenOffset() in main.js measures the real mask/line ratio at runtime, so the reveal animation re-derives its travel from these values on its own. */ .line-mask:first-child { padding-top: 0.2em; margin-top: -0.2em; } .line-mask:last-child { padding-bottom: 0.25em; margin-bottom: -0.25em; } } /* ------------------------------------------------------------------ .bb-mark — the BB logo as a Lottie, wherever it appears. A square box (.bb-mark) with the animation's own artboard laid over it (.bb-mark__art) and grown inside it. Two elements rather than one so the artboard size fitLottieToMark() writes sits on a box of its own, leaving .bb-mark's transform free for whatever is positioning the mark. The scale is needed because the mark occupies only the middle of its 1080x1080 artboard — at the box's own size it would come out at well under half of it. main.js measures the resting frame and scales by the shortfall, so the rendered mark is exactly the box: measured rather than hardcoded, so a re-export with different padding still lands. Colour: the export paints the mark with an After Effects "Fill" effect (type 21), which Lottie renders as an feColorMatrix no stylesheet can reach — leaving the mark stuck at whatever colour the .aep was rendered in. main.js strips those effects at load, which uncovers each layer's own artwork (ordinary filled paths), and the two rules below repaint that artwork and the centre line's stroke in currentColor. So the mark inherits --nav-text in the navbar, recolouring with the section underneath exactly like the static it replaces. Scoped to `svg > g` — Lottie's live render tree — on purpose. The same export's masks and clip paths live in as black-filled shapes used for luminance, so repainting those would silently change which parts of the mark get revealed. ------------------------------------------------------------------ */ .bb-mark { position: relative; display: block; pointer-events: none; } .bb-mark__art { position: absolute; inset: 0; transform-origin: 50% 50%; } .bb-mark__art svg { display: block; width: 100%; height: 100%; } .bb-mark__art svg > g path { fill: currentColor; } .bb-mark__art svg > g path[stroke]:not([stroke="none"]) { stroke: currentColor; } .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 139px; background-color: var(--nav-bg, var(--bb-off-white)); color: var(--nav-text, var(--bb-black)); /* Three columns, the outer two equal, so the logo sits on the page's exact centre. As a centred flex row it was centred on the whole group instead, and the left links run 21px wider than the right, which pushed it ~11px off. Each link group hugs the logo from its own side, so the spacing between them is unchanged. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 5px; z-index: 100; transform: translateY(0); transition: transform 0.35s ease, height 0.35s ease, background-color 0.3s ease, color 0.3s ease; } .navbar--hidden { transform: translateY(-100%); } /* A hidden bar still holds focusable links, so keyboard focus landing in it (shift-tabbing up from the page, or from the footer, where the bar stays hidden) brings it back rather than focusing a link that is off screen. :has(:focus-visible), not :focus-within: a mouse click on a nav link also leaves focus on it, and Chrome and Firefox keep it there. Clicking Careers on Who we are scrolls the page without leaving it, so with :focus-within the bar stayed pinned on screen, hidden class and all, until something else took focus. :focus-visible matches keyboard focus and not a click, which is exactly the case this rule is for. Browsers without :has() keep :focus-within. */ .navbar--hidden:has(:focus-visible) { transform: translateY(0); } @supports not selector(:has(*)) { .navbar--hidden:focus-within { transform: translateY(0); } } .navbar__links { display: flex; align-items: center; gap: 24px; } /* Placed explicitly, so the logo keeps the middle column on phones, where both link groups are display:none and auto-placement would otherwise drop it into the first. */ .navbar__links--left { grid-column: 1; justify-self: end; } .navbar__logo { grid-column: 2; } .navbar__links--right { grid-column: 3; justify-self: start; } .navbar__link { font-family: "STIX Two Text", Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: 16px; line-height: 1; color: inherit; text-decoration: none; white-space: nowrap; opacity: 0.5; transition: opacity 0.3s ease; /* Hit area: the trimmed text box is only ~11px tall, under WCAG 2.5.8's 24px, and on Who we are the nav sits over the reel's full-frame pause control, so spacing alone can't rescue it. The padding makes each link a 25px-tall target; the equal negative margin keeps the bar's layout exactly as it was. */ display: inline-block; padding: 7px 0; margin: -7px 0; } /* Current page's link stays at full opacity. So does every link on a page that isn't one of the four nav items — the homepage, News, Privacy — since there no link can carry aria-current and dimming all four reads as though the whole nav were inactive. Such pages need no marker class of their own; the absence of a current link is the signal. The second selector tests that condition directly rather than naming those pages, so a new non-nav-item page is covered the day it's added. It lands at the same specificity as the hover rule below and comes first, so hovering still spotlights one link on those pages. */ .navbar__link[aria-current="page"], .navbar:not(:has(.navbar__link[aria-current="page"])) .navbar__link { opacity: 1; } /* Hovering any nav link spotlights it: that link goes to full opacity and every other one drops to 0.5, including whichever link is current. The 0.3s ease above carries them all back on leave. :has() keys the dimming to a link actually being hovered — .navbar:hover would fire for the logo, the burger and the bar's empty space too. Both selectors carry the :has() prefix so they out-specify the full-opacity rule above; without it on the second, the dimming would win over the hovered link itself. Hover-gated so a tap can't latch it on. */ @media (hover: hover) and (pointer: fine) { .navbar:has(.navbar__link:hover) .navbar__link { opacity: 0.5; } .navbar:has(.navbar__link:hover) .navbar__link:hover { opacity: 1; } } .navbar__logo { display: flex; align-items: center; justify-content: center; width: 139px; height: 139px; padding: 36px; flex-shrink: 0; color: inherit; position: relative; transition: height 0.35s ease, padding 0.35s ease; } /* Direct child only. These predate the Lottie and were written when the mark was the sole in here — unscoped they also reach inside the Lottie, including the mask and clip paths it keeps in , which are black-filled shapes used for luminance. Repainting those corrupts the draw-on mattes and the mark renders with a ghost of itself. */ .navbar__logo > svg { width: 67px; height: 67px; } .navbar__logo > svg path { fill: currentColor; } /* Where a .bb-mark sits when it is the navbar's logo: initNavLogoLottie() injects one on first load. The inset matches .navbar__logo's own padding, which puts this box exactly where the static renders — and that holds at both breakpoints, though not for the reason it looks like. Above 640px the logo's content box is 67px and the fills it. Below, the content box is 52px and the , still asking for 67, is flex-shrunk to 52 wide; preserveAspectRatio then draws the mark at 52. Either way the mark ends up the size of the content box, so tracking the padding tracks the mark. */ .navbar__logo-lottie { position: absolute; inset: 36px; transition: inset 0.35s ease; } /* Compact bar, once the page has scrolled past the full-height one (initPeekabooNav() adds .navbar--compact): 70px tall, the mark at 34px, about half. The logo slot keeps its full width and only loses height, so the links either side stay exactly where they were; the horizontal padding is what shrinks the mark, (139 - 34) / 2 each side. The Lottie's inset mirrors the padding, as above. Phones get a 64px bar with a 32px mark in their 96px slot. The burger menu's panel is pinned to the full 96px bar (.mobile-menu's top), so opening the menu drops the compact class first (see the burger init in main.js) and the panel always meets the bar. */ @media (min-width: 641px) { .navbar--compact { height: 70px; } .navbar--compact .navbar__logo { height: 70px; padding: 18px 52.5px; } .navbar--compact .navbar__logo-lottie { inset: 18px 52.5px; } } @media (max-width: 640px) { /* .navbar.navbar--compact: the phone .navbar height rule further down has the same weight as a lone class and would win on order. */ .navbar.navbar--compact { height: 64px; } .navbar--compact .navbar__logo { height: 64px; padding: 16px 32px; } .navbar--compact .navbar__logo-lottie { inset: 16px 32px; } } @media (prefers-reduced-motion: reduce) { .navbar { transition: transform 0.35s ease, background-color 0.3s ease, color 0.3s ease; } .navbar__logo, .navbar__logo-lottie { transition: none; } } /* The static mark is hidden, not removed, for as long as the Lottie is standing in for it — which is the rest of the visit, since the animation holds on its last frame rather than handing back. Keeping it in the DOM keeps the navbar's layout identical either way, and leaves it ready to uncover if the Lottie ever fails to load. */ .navbar__logo--lottie > svg { opacity: 0; } .navbar__burger { display: none; position: relative; width: 30px; height: 14px; flex-shrink: 0; padding: 0; background: none; border: none; color: inherit; cursor: pointer; } .navbar__burger-bar { position: absolute; left: 0; width: 100%; height: 2px; } .navbar__burger-bar--top { top: 0; transition: transform 0.25s ease 0.25s; } .navbar__burger-bar--top span, .navbar__burger-bar--bottom span { display: block; width: 100%; height: 100%; background: currentColor; transition: transform 0.25s ease 0s; } .navbar__burger-bar--mid { top: 6px; background: currentColor; transition: opacity 0.2s ease 0.2s; } .navbar__burger-bar--bottom { top: 12px; transition: transform 0.25s ease 0.25s; } /* Opening: bars converge to the middle first, then the outer two rotate into an X */ .navbar__burger--open .navbar__burger-bar--top { transform: translateY(6px); transition-delay: 0s; } .navbar__burger--open .navbar__burger-bar--top span { transform: rotate(45deg); transition-delay: 0.25s; } .navbar__burger--open .navbar__burger-bar--bottom { transform: translateY(-6px); transition-delay: 0s; } .navbar__burger--open .navbar__burger-bar--bottom span { transform: rotate(-45deg); transition-delay: 0.25s; } .navbar__burger--open .navbar__burger-bar--mid { opacity: 0; transition-delay: 0.15s; } /* Phones only: tablet keeps the desktop bar. */ @media (max-width: 640px) { .navbar { height: 96px; gap: 12px; } .navbar__links { gap: 14px; } .navbar__link { font-size: 13px; } .navbar__logo { width: 96px; height: 96px; padding: 22px; } .navbar__logo-lottie { inset: 22px; } } @media (max-width: 640px) { .navbar__links { display: none; } .navbar__burger { display: block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } } /* Mobile burger menu: the bar itself is the persistent .navbar (it just recolors via .navbar--menu-open below); only the panel underneath it slides down from behind the bar's bottom edge. */ .navbar--menu-open { --nav-bg: var(--bb-burgundy); --nav-text: var(--bb-off-white); } .mobile-menu { position: fixed; top: 96px; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-direction: column; background: var(--bb-burgundy); opacity: 0; visibility: hidden; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s; } .mobile-menu--open { opacity: 1; visibility: visible; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu__body { display: flex; flex-direction: column; align-items: center; gap: 52px; flex-shrink: 0; padding: 40px var(--page-margin) 32px; } .mobile-menu__links { display: flex; flex-direction: column; align-items: center; gap: 20px; } .mobile-menu__link { font-family: "STIX Two Text", Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: 28px; line-height: 1.3; letter-spacing: 0.28px; color: var(--bb-off-white); text-decoration: none; } .mobile-menu__contact { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .mobile-menu__contact-label, .mobile-menu__contact-email { font-family: "Haas Recast VF", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-variation-settings: 'TRAK' 0; font-size: 15px; line-height: 1.3; } .mobile-menu__contact-label { color: var(--bb-pink); } .mobile-menu__contact-email { color: var(--bb-white); } .mobile-menu__pattern { flex: 1; min-height: 0; background-repeat: repeat; } .mobile-menu__pattern--pink-orange { background-image: url("../images/menu/menu-tile-pink-orange.png"); background-size: 49px 121.5px; animation: menuPatternScroll-pinkOrange 12.5s linear infinite; } .mobile-menu__pattern--sky-navy { background-image: url("../images/menu/menu-tile-sky-navy.png"); background-size: 33.5px 111.5px; animation: menuPatternScroll-skyNavy 12.5s linear infinite; } .mobile-menu__pattern--cream-red { background-image: url("../images/menu/menu-tile-cream-red.png"); background-size: 56px 111.5px; animation: menuPatternScroll-creamRed 12.5s linear infinite; } .mobile-menu__pattern--green-navy { background-image: url("../images/menu/menu-tile-green-navy.png"); background-size: 48px 96px; animation: menuPatternScroll-greenNavy 12.5s linear infinite; } /* Each keyframe scrolls by exactly one tile width so the loop is seamless */ @keyframes menuPatternScroll-pinkOrange { from { background-position: 0 0; } to { background-position: 49px 0; } } @keyframes menuPatternScroll-skyNavy { from { background-position: 0 0; } to { background-position: 33.5px 0; } } @keyframes menuPatternScroll-creamRed { from { background-position: 0 0; } to { background-position: 56px 0; } } @keyframes menuPatternScroll-greenNavy { from { background-position: 0 0; } to { background-position: 48px 0; } } @media (prefers-reduced-motion: reduce) { .mobile-menu__pattern { animation: none; } } .hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-left: var(--page-margin); padding-right: var(--page-margin); width: 100%; /* A floor, not a fixed height, with the nav's 139px as top padding: in a short window (a 1278x640 laptop viewport put the homepage headline under the nav) the hero grows rather than letting its bottom-aligned content climb behind the navbar. */ min-height: 80vh; padding-top: 139px; } /* The comp's 52px gaps at 900px tall and up, tightening with the window's height (5.8vh is 52px at 900) to no less than 24px, the phone gap. */ .hero__content { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 5.8vh, 52px); width: 100%; padding-bottom: clamp(24px, 5.8vh, 52px); } .hero__heading { font-family: "Haas Recast VF", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-variation-settings: 'TRAK' -35; font-style: normal; /* The comp's 102px at 1440x900, scaled down by whichever of the window's width or height runs out first, but never below 72px: in a shorter window than that allows, the hero grows past its 80vh floor instead (see .hero). 7.1vw keeps the nowrap line inside the page margins. Tracking is the comp's -2.04px as a proportion, so it scales with the size. */ font-size: clamp(72px, min(7.1vw, 11.4vh), 102px); line-height: 0.93; letter-spacing: -0.02em; color: var(--bb-black); text-align: center; white-space: nowrap; text-wrap: balance; } .hero__subcopy { font-family: "Haas Recast VF", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-variation-settings: 'TRAK' 0; font-style: normal; font-size: 26px; line-height: 1.28; letter-spacing: -0.36px; color: var(--bb-black); text-align: center; max-width: 560px; } /* Phones only (see the 640px block below): the homepage subcopy's last phrase takes its own line, so it breaks before "to find out why" rather than wherever the 310px measure falls. A block span, not a
hidden on desktop: SplitText turns every
into a line break whatever its display, so a hidden one still broke the sentence on desktop. */ /* Temporary placeholder page header — swap out once real page designs land. */ .placeholder-hero { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 80vh; margin: 0 auto; padding: 139px var(--page-margin) 0; text-align: center; } .placeholder-hero__heading { font-family: "Haas Recast VF", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-variation-settings: 'TRAK' -35; font-style: normal; font-size: 102px; line-height: 0.93; letter-spacing: -2.04px; color: var(--bb-black); } @media (max-width: 768px) { .placeholder-hero__heading { font-size: 56px; } } .cta { display: flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; } .cta__label { font-family: "STIX Two Text", Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: 18px; line-height: 0.97; letter-spacing: -0.36px; color: inherit; } .cta__icon { position: relative; width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; } .cta__icon-box { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; background: var(--bb-burgundy); transform: translate(-50%, -50%) rotate(0deg); transition: transform 0.4s ease, background-color 0.3s ease; } .cta__icon-glyph { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; transform: translate(-50%, -50%); } .cta__icon-glyph svg { width: 13px; height: 10.83px; } .cta__icon-glyph svg path { stroke: var(--bb-sky); } /* Only the square turns on hover; the arrow holds still over it. */ .cta:hover .cta__icon-box { transform: translate(-50%, -50%) rotate(180deg); } /* On dark backgrounds the icon swaps to a light-blue box with a burgundy glyph */ .cta--on-dark .cta__icon-box { background: var(--bb-sky); } .cta--on-dark .cta__icon-glyph svg path { stroke: var(--bb-burgundy); } /* Download: the same CTA with its arrow pointing down. */ .cta--download .cta__icon-glyph { transform: translate(-50%, -50%) rotate(90deg); } /* External link (Figma 2384:1671, Button_ExternalIcon): the same CTA with its arrow turned 45 degrees to point up and right, for any link that leaves the site. Only the angle: each keeps the box and glyph colours of where it sits (pink and burgundy on the team's LinkedIn links, see .team__linkedin; sky on The Combine and Tadiem). */ .cta--external .cta__icon-glyph { transform: translate(-50%, -50%) rotate(-45deg); } /* Download + Share row closing the survey article (Figma 2331:4025). Both icons are the design's 48px here rather than the site CTA's 32, so the Download icon is scaled up to sit level with Share's. The container stops clipping so the square's hover turn isn't cut. */ .cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 72px; } .cs-actions .cta { gap: 23px; } .cs-actions .cta__icon { width: 48px; height: 48px; overflow: visible; } .cs-actions .cta__icon-box { width: 48px; height: 48px; } .cs-actions .cta__icon-glyph { width: 29px; height: 29px; } .cs-actions .cta__icon-glyph svg { width: 20px; height: 16.7px; } /* Share: a sky 48px box with the share glyph. Pressed, the box turns burgundy with a sky close glyph and a sky tray opens to its right holding LinkedIn and Copy link, the whole strip 151px as drawn. The tray is visibility: hidden while shut so its two controls leave the tab order, and waits for the width to finish before hiding. Closed styling applies only once initShare() has run (.share--ready); without script the tray simply stays open. */ .share { display: flex; align-items: center; } .share__toggle { display: flex; align-items: center; gap: 32px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } /* The square is the ::before, not the box itself, so it can turn on hover the way every CTA's does while the glyph above it holds still. */ .share__box { position: relative; width: 48px; height: 48px; } .share__box::before { content: ""; position: absolute; inset: 0; background: var(--bb-sky); transition: transform 0.4s ease, background-color 0.3s ease; } /* Turned on hover, and held turned while the tray is open even once the pointer has left. Closing turns it back at once, pointer or not: .share--settling (initShare) holds off the hover turn until the pointer next leaves the button. */ .share__toggle:hover .share__box::before, .share--open .share__box::before { transform: rotate(180deg); } .share--settling:not(.share--open) .share__toggle:hover .share__box::before { transform: none; } /* On close the turn back waits for the tray to finish folding away (its 0.3s width transition), so the two don't happen at once. */ .share--closing .share__box::before { transition: transform 0.4s ease 0.3s, background-color 0.3s ease; } .share__glyph { position: absolute; inset: 0; width: 48px; height: 48px; } .share__glyph--open path { fill: var(--bb-burgundy); } .share__glyph--close path { fill: var(--bb-sky); } .share__glyph--close { visibility: hidden; } .share__toggle[aria-expanded="true"] .share__box::before { background: var(--bb-burgundy); } .share__toggle[aria-expanded="true"] .share__glyph--open { visibility: hidden; } .share__toggle[aria-expanded="true"] .share__glyph--close { visibility: visible; } .share__tray { display: flex; align-items: center; height: 48px; padding: 0 7px 0 10px; background: var(--bb-sky); color: var(--bb-burgundy); overflow: hidden; white-space: nowrap; } .share--ready .share__tray { width: 0; padding: 0; visibility: hidden; transition: width 0.3s ease, padding 0.3s ease, visibility 0s linear 0.3s; } .share--open .share__tray { width: 103px; padding: 0 7px 0 10px; visibility: visible; transition: width 0.3s ease, padding 0.3s ease, visibility 0s; } /* 43 x 48 each, so the icons land where the design has them and both targets clear 24px. The ring is drawn inside, since the tray clips. */ .share__option { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 43px; height: 48px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .share__option:focus-visible { outline-offset: -4px; } /* Copy link's confirmation: the tick replaces the link glyph, and the note sits under the strip, right-aligned to it, for two seconds (initShare). Black at 60% on Off-white, 5.5:1. It is status text, not hover content, so 1.4.13 does not apply; it is aria-hidden because the role="status" line already announces it. */ .share { position: relative; } .share__copied-glyph { display: none; } .share__option--copied .share__copy-glyph { display: none; } .share__option--copied .share__copied-glyph { display: block; } .share__note { position: absolute; top: calc(100% + 8px); right: 0; font-family: "Haas Recast VF", "Helvetica Neue", Arial, sans-serif; font-variation-settings: 'TRAK' 0; font-size: 14px; line-height: 1.2; white-space: nowrap; color: rgba(var(--bb-black-rgb), 0.6); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .share--noted .share__note { opacity: 1; } .share__option svg path { fill: currentColor; } .share__option[data-share-copy] svg path { fill: none; stroke: currentColor; } @media (prefers-reduced-motion: reduce) { .share--ready .share__tray, .share--open .share__tray, .share__box::before, .share--closing .share__box::before, .share__note { transition: none; } } @media (max-width: 1200px) { .hero__heading { font-size: 64px; white-space: normal; } } @media (max-width: 640px) { .hero__heading { font-size: 36px; letter-spacing: -0.72px; } .hero__subcopy { font-size: 18px; max-width: 310px; } .hero__subcopy-tail { display: block; } .hero__content { gap: 24px; } } /* "Unlock growth." never splits; it used an inline style until the phone rule below needed to reach it. */ .hero__heading-tail { white-space: nowrap; } /* Homepage, phones: the same three lines of headline and three of subcopy on every phone. Each line is marked in the markup (the
s and the -tail spans, which go block here) and none can wrap, so the browser never chooses a break; Safari sets this type a touch wider than Chrome and was pushing the subcopy onto a fourth line on an iPhone 12. The size follows the screen width instead: the comp's 36px and 18px at 390 wide (9.23vw, 4.6vw), clamped so a very small or large phone stays readable. The longest line is about 62% of the screen at every width, which leaves Safari plenty of room. */ @media (max-width: 640px) { .hero--home .hero__heading { font-size: clamp(28px, 9.23vw, 40px); letter-spacing: -0.02em; white-space: nowrap; } .hero--home .hero__heading-tail { display: block; } .hero--home .hero__subcopy { font-size: clamp(15px, 4.6vw, 20px); max-width: none; white-space: nowrap; } } .featured { --featured-bg: var(--bb-off-white); position: relative; width: 100%; height: 120vh; overflow: hidden; background: var(--featured-bg); transition: background-color 0.6s ease; /* Grid purely to centre the copy on the section's own midline. The background image and the step wipe are both absolutely positioned, so .featured__content is the only item this lays out. Centring it here is what makes "halfway through the section" and "copy across the middle of the screen" the same moment — which is the anchor the copy's parallax is measured from (see initFeaturedParallax). */ display: grid; align-content: center; } .featured__bg { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; object-position: center top; } /* Portrait screens get the portrait cut (see the in index.html), which on a phone is still wider than the ~1:3 box. Centred, the crop took ~130px of image off each side and cut into the Audi's grille; weighted left, the front of the car stays whole and the trim comes off the door side instead. Same media query as the , so the two can't disagree. Tuned to that image: retune if the featured case changes. */ @media (orientation: portrait) { .featured__bg { object-position: 25% top; } } /* Outer layout div: full width, the site's standard side gutter. */ .featured__content { position: relative; z-index: 1; width: 100%; padding-left: var(--page-margin); padding-right: var(--page-margin); color: var(--bb-white); } /* Inner div: capped width to keep the copy a narrow, centered column within the padded layout div above. */ .featured__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 700px; margin: 0 auto; } /* Soft black halo behind the copy so the white type holds contrast over the case-study image at every breakpoint. */ .featured__inner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bb-black); opacity: 0.5; filter: blur(100px); pointer-events: none; } .featured__heading { font-family: "Haas Recast VF", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-variation-settings: 'TRAK' -35; font-style: normal; font-size: 52px; line-height: 0.93; letter-spacing: -0.52px; color: var(--bb-white); text-align: center; /* Even lines rather than a long first line and a short tail. */ text-wrap: balance; } .featured__subcopy { font-family: "Haas Recast VF", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-variation-settings: 'TRAK' 0; font-style: normal; font-size: 18px; line-height: 1.22; color: var(--bb-white); text-align: center; text-wrap: balance; } .featured__steps { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .featured__steps svg { display: block; width: 100%; height: 100%; } /* The Lottie source draws its bars in white; recolor them to match the section's (dynamic) background so they read as the section covering itself rather than a white overlay. !important beats the fill lottie-web writes inline on each shape. */ .featured__steps svg path, .featured__steps svg rect { fill: var(--featured-bg) !important; transition: fill 0.6s ease, stroke 0.6s ease; /* The bars are stretched to the section (preserveAspectRatio none), so their shared edges land on fractional pixels and anti-alias to a hairline gap that shows the photo through: vertical lines up the wipe, clearest on iPhone. A 1px stroke in the same colour, kept 1px by non-scaling-stroke whatever the stretch, overlaps each seam. */ stroke: var(--featured-bg) !important; stroke-width: 1px; vector-effect: non-scaling-stroke; } @media (max-width: 1200px) { .featured__inner { max-width: 600px; } .featured__heading { font-size: 40px; letter-spacing: -0.4px; } } @media (max-width: 640px) { .featured__inner { gap: 24px; align-items: flex-start; } .featured__heading { font-size: 32px; letter-spacing: -0.32px; text-align: left; } .featured__subcopy { font-size: 16px; text-align: left; } } /* Cascade transition: a standalone section between clients and the portfolio grid. The section's own background is the fixed burgundy/light-blue stripe image — it never moves. On top sit 9 rows, each a 900vw-wide strip of three panels: navy (matching the clients section, 100vw), transparent (a 700vw window onto the fixed image below), and cream (matching the portfolio grid, 100vw). At rest each row shows its navy panel; scrolling slides every row right-to-left (eased, scrubbed to scroll), staggered so the bottom row moves first and each row above follows — sweeping navy -> reveal -> cream in a cascading stair pattern, driven by GSAP + ScrollTrigger. */ .cascade-transition { position: relative; width: 100%; height: 401px; overflow: hidden; background-image: url("../images/burgundy-lightblue-pattern-tile.png"); background-repeat: repeat; background-size: 120px 18px; } .cascade-transition__row { position: absolute; left: 0; width: 900vw; display: flex; } .cascade-transition__rect { height: 100%; flex-shrink: 0; } .cascade-transition__rect--prev { width: 100vw; background: var(--bb-navy); } .cascade-transition__rect--transparent { width: 700vw; background: transparent; } .cascade-transition__rect--next { width: 100vw; background: var(--bb-off-white); } @media (max-width: 1200px) { .cascade-transition { height: 300px; } } @media (max-width: 640px) { .cascade-transition { height: 180px; } } /* Four pillars: sits between the featured section and the client list. Cream by default; once 40% of the section has scrolled into view it settles into a burgundy resting state (--pillars-* vars driven by JS via the .is- class on .pillars). Hovering/focusing a word re-themes the whole section to that pillar's colour and cross-fades its image. Layout is a 12-column grid: "Find your" (2 cols) | the four words + CTA (5 cols) | image (4 cols) | one blank col on the right — fixed across every state. Only colour and the "Find your" node's vertical position change: it stays in its own column and GSAP tweens its Y offset to line up with whichever word is active (initPillars() in main.js measures the target row's position each time). Below 900px the grid collapses to a single stacked column and "Find your" is simply moved inline before the active word instead. The chosen colour never reverts on mouseleave, and is handed down to the client list section (and the peekaboo nav) directly below it. */ .pillars { --pillars-bg: var(--bb-off-white); /* One token for the word/prefix type size so the hover arrow (sized in multiples of it, see .pillars__arrow) stays in proportion at every breakpoint. */ --pillars-type-size: 52px; --pillars-fg: var(--bb-black); --pillars-accent: var(--bb-burgundy); position: relative; width: 100%; background: var(--pillars-bg); color: var(--pillars-fg); transition: background-color 0.6s ease, color 0.6s ease; padding: 140px var(--page-margin); /* Pulls up 1px to overlap the featured section's bottom edge — Lenis's transform-driven scroll can leave a sub-pixel seam between adjacent sections where the featured section's own background image shows through for an instant; this section's opaque background covers it. */ margin-top: -1px; overflow: hidden; } /* Each pillar pairs its background with a contrasting brand colour for the type (orange on burgundy, pink on green, sky blue on red, off white on navy). --pillars-accent stays tied to the background: it paints the CTA arrow, which sits on a sky blue box and so reads as a knockout of the section colour. */ .pillars.is-opportunity { --pillars-bg: var(--bb-burgundy); --pillars-fg: var(--bb-orange); --pillars-accent: var(--bb-burgundy); } .pillars.is-comp-advantage { --pillars-bg: var(--bb-forest); --pillars-fg: var(--bb-pink); --pillars-accent: var(--bb-forest); } .pillars.is-expression { --pillars-bg: var(--bb-red); --pillars-fg: var(--bb-sky); --pillars-accent: var(--bb-red); } .pillars.is-presence { --pillars-bg: var(--bb-navy); --pillars-fg: var(--bb-off-white); --pillars-accent: var(--bb-navy); } /* Grid matches the rest of the site's (see .portfolio-row): 12 columns, 16px gap, no max-width — full-bleed within the section's own 20px side gutter above. */ .pillars__inner { position: relative; display: grid; grid-template-columns: repeat(var(--grid-cols-desktop), 1fr); gap: var(--grid-gap); align-items: start; width: 100%; } .pillars__prefix-col { grid-column: 1 / span 2; position: relative; } /* Position rules are scoped to whichever parent currently holds the node (see positionPrefix() in main.js): pinned top-right of its own grid column on desktop (so it reads right up against the active word), plain inline flow with a trailing gap when it's DOM-moved in front of the active word on mobile. */ .pillars__prefix-col .pillars__prefix { position: absolute; top: 0; right: 0; margin-right: -6px; text-align: right; will-change: transform; } .pillars__item-link .pillars__prefix { margin-right: 0.25em; } .pillars__prefix { white-space: nowrap; } .pillars__main { grid-column: 3 / span 5; } /* align-items, so each row shrinks to its own word rather than stretching to the width of the longest one ("competitive advantage"). The items are links now (see index.html) — a stretched row would make the dead space to the right of a short word like "presence" navigate, and would draw the focus ring around that whole empty band. */ .pillars__list { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; list-style: none; } .pillars__item { opacity: 0.3; transition: opacity 0.5s ease; } .pillars__item--opportunity { opacity: 0.4; } .pillars__item.is-active { opacity: 1; } /* An , not a