@keyframes slide-twinkle { 0%, 100% { opacity: 1; } 45%, 55% { opacity: 0; } } /* Liquid-chrome sweep — slides the 11-stop --chrome gradient across the text's own background-position so the highlight band drifts continuously, reading as light moving across brushed metal rather than a static gradient. Shared by every liquid-chrome text-clip usage (.hero h1 em, .about-copy h2 em, .slide-center h2 em). The backface-visibility/translateZ(0)/will-change trio on each of those rules isn't decorative -- animating background-position on a background-clip:text element runs forever (infinite alternate) and is a known trigger for a Chrome/GPU compositor bug where a stale tile from an earlier frame gets left behind at a glyph edge, showing up as a faint "ghosted" duplicate letter (most visible on the first character of "OPPORTUNITIES"). Forcing this element onto its own GPU layer via these three properties makes Chrome fully repaint it each frame instead of reusing a possibly-stale cached tile, which eliminates the ghosting. */ @keyframes chrome-sweep{ 0%{ background-position: 0% 50%; } 100%{ background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce){ } /* Pointer devices: full glow + expand on hover. */ @media (hover: hover) and (pointer: fine){ } @keyframes slide-center-grow{ 0%, 15%{ width: min(78vw, 640px); --center-x: -18vw; --center-y: -14vh; } 100%{ width: var(--slide-center, 130px); --center-x: 0; --center-y: 0; } } @media (max-width: 760px){ @media (hover: hover) and (pointer: fine){ } } /* Phones: side thumbnails shrink to slivers so the center card and its copy stay fully on-screen without any horizontal overflow. */ @media (max-width: 480px){ @media (hover: hover) and (pointer: fine){ } } @media (prefers-reduced-motion: reduce){ } @keyframes introDraw{ to{ stroke-dashoffset: 0; } } @keyframes introMarkExpand{ 0%{ opacity: 0; transform: scale(0); } 60%{ opacity: 1; transform: scale(1.25); } 100%{ opacity: 1; transform: scale(1); } } @keyframes introWordExpand{ 0%{ opacity: 0; transform: scale(0.15); letter-spacing: 0.4em; } 70%{ opacity: 1; } 100%{ opacity: 1; transform: scale(1); letter-spacing: 0.12em; } } @keyframes introSubExpand{ to{ opacity: 1; transform: scaleX(1); } } /* "BRIDGING TALENT TO BIGGER OPPORTUNITIES" headline + the CTA buttons — now inside #home (the first section again, per the client's requested section swap). .hero-title/.hero-title-mask/.hero-title-line are reused for a matching look; the per-line mask reveal is driven by the generic .hero-anim.play .hero-title-line rule below (this is the first .hero-anim in the document again), same as the 3D bridge mark used to run when IT was first. Typography (size/weight/chrome-gradient em) still needs redeclaring here, scoped to .services-intro instead of ".hero h1"/".hero h1 em", since this markup sits one level deeper than the mark section's does. */ .services-intro{ max-width: 960px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 1; } .services-intro .hero-title{ font-size: clamp(80px, 12vw, 144px); /* Client revision: the headline used to be just two lines of markup ("BRIDGING TALENT TO" / "BIGGER OPPORTUNITIES") that then wrapped on their own wherever the browser felt like breaking them, landing on 4 visual lines at most desktop widths. Client wanted exactly 3 fixed lines instead ("BRIDGING TALENT" / "TO BIGGER" / "OPPORTUNITIES") — see the extra .hero-title-3line rule right below this, which sizes down specifically for that fixed 3-line grouping so its longest line ("BRIDGING TALENT") never wraps a 4th line back in. */ /* Client revision: "the fonts in the phone is thinner" — this was asking for 1000, but Bricolage Grotesque is only loaded up to weight 800 (see the fonts.googleapis.com link in ), so the browser was silently clamping down to 800 the whole time, on every screen size. Added 900 to the font import and matched this to it, so it actually renders at real Black weight instead of a value the loaded font can't produce — most noticeable at the smaller mobile clamp() size, where the extra weight matters more for legibility/impact. */ font-weight: 900; line-height: 1.02; } /* Sized down from the base 144px/80px clamp above specifically so "BRIDGING TALENT" (the longest of the 3 fixed lines) stays on one line at both ends of that clamp — the base size was tuned for whatever the browser wrapped a single long run of words into, which no longer applies now that each line is fixed markup instead. */ .services-intro .hero-title-3line{ font-size: clamp(74px, 7.34vw, 94px); } .services-intro .hero-title em{ font-style: normal; background: var(--chrome); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: background-position; animation: chrome-sweep 10s ease-in-out infinite alternate; } .services-intro .hero-actions{ margin-top: 44px; justify-content: center; } /* Sub-headline under "BRIDGING TALENT TO BIGGER OPPORTUNITIES" — reuses the .lede class already established in the Contact section, scoped here since that class's other rule (".hero p.lede") targets a different, now-unused spot in the markup and isn't sized for this context. */ .services-intro p.lede{ margin: 22px auto 0; max-width: 620px; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--muted); } @media (max-width: 760px){ .services-intro{ margin-bottom: 24px; } .services-intro .hero-title{ font-size: clamp(40px, 10vw, 58px); } .services-intro .hero-title-3line{ font-size: clamp(27px, 9vw, 44px); } .services-intro p.lede{ font-size: 16px; margin-top: 14px; } /* Trimmed from the 44px desktop value — see the .hero padding comment above, same "buttons off the first screen" fix. */ .services-intro .hero-actions{ margin-top: 26px; } } @media (prefers-reduced-motion: reduce){ .services-intro .hero-title em{ animation: none !important; background-position: 50% 50% !important; } } @media (prefers-reduced-motion: reduce){ } /* ---------- BRIDGE CROSSING FLASH ---------- Sits above the page (below the loader, which is only ever visible on first load anyway) and stays fully transparent/inert until brand-orbit.js adds .flash-active at the peak of the click-to-cross burst — a quick bright wash that ties the bridge's expand-and-fade to the smooth-scroll happening underneath it, so the two read as one transition instead of two coincidentally-overlapping animations. */ .cross-flash{ position: fixed; inset: 0; z-index: 9990; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.95), rgba(235,238,244,0.4) 42%, transparent 74%); opacity: 0; pointer-events: none; transition: opacity 0.55s ease; } .cross-flash.flash-active{ opacity: 1; transition: opacity 0.2s ease-out; } @media (prefers-reduced-motion: reduce){ .cross-flash{ transition: none !important; opacity: 0 !important; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'Cormorant Garamond', serif; font-style:normal; font-weight:400; font-size:16.5px; letter-spacing:0.24em; text-transform:uppercase; color:var(--coral); margin-bottom:18px; } .eyebrow::before{ content:''; width:18px; height:2px; background:var(--coral); display:inline-block; } /* ---------- NAV ---------- */ .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 20px; padding: 16px 40px; background: rgba(10,10,10,0.62); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease; transform: translateY(0); opacity: 1; } @media (max-width: 860px) { } @media (min-width: 861px){ } /* The POSSIBILITIES wordmark span uses the shared .eyebrow class, which carries its own margin-bottom for use elsewhere on the page — here that stacked on top of .hero-grid's own gap, doubling the space below the bridge mark. Zeroing it out leaves gap as the single source of truth for spacing in this cluster. (A second stacked "CA" eyebrow used to sit directly under this one, pulled up via an adjacent- sibling rule — removed along with the CA text itself.) */ .hero-grid .eyebrow{ margin-bottom: 0; line-height: 1; } /* EST. / MMXXVI — flank the bridge mark directly (one word on each side) instead of sitting together as a single line above it. Positioned absolute against .hero-orbit-mark itself (position:relative, a fixed clamp()'d box), vertically centered on it via top:50%/translateY(-50%) so they track the mark's own size at every breakpoint down to where there's no longer room beside it (see the mobile override below). */ .hero-orbit-flank{ position: absolute; top: 50%; transform: translateY(-50%); font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); white-space: nowrap; z-index: 1; } .hero-orbit-flank--left{ right: calc(100% + 28px); text-align: right; } .hero-orbit-flank--right{ left: calc(100% + 28px); text-align: left; } @media (max-width: 760px){ /* Not enough room beside a mark that's already down near its 280px floor at this width — rather than crowd or truncate, drop them instead of forcing an awkward fit. */ .hero-orbit-flank{ display: none; } } /* ---------- HERO 3D BRAND MARK ---------- Sits above the headline, driven by brand-orbit.js (three.js). Ships "fallback-visible" by default — the flat SVG bridge mark shows until brand-orbit.js confirms WebGL actually works and adds .is-ready, at which point the canvas takes over and the fallback hides. That order (fallback first, canvas second) means a slow/failed script load or an unsupported browser never leaves an empty gap where the mark should be. */ .hero-orbit-mark{ position: relative; width: clamp(320px, 42vw, 640px); aspect-ratio: 2 / 1.05; margin: 0 auto; display: flex; align-items: center; justify-content: center; /* It's a