/* ========================================================================== Amaze Enterprises — League-style Header + Hero (light theme) Layout & aesthetic modelled on league.design. TWO PALETTES, one stylesheet. index.html and index1.html both load this file, and they run different logo lockups, so the colour lives entirely in custom properties: :root carries the blue/orange of images/logo.webp, and .brand-amaze (set on index1.html's ) swaps in the blue/cyan of images/amazelogo2.webp. Nothing below either block hardcodes an accent — translucent washes go through rgba(var(--accent-rgb), a) — so a page picks its whole scheme by carrying that one class or not. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600&display=swap"); :root { /* Default scheme — the orange out of images/logo.webp (index.html). */ --accent: #de520f; /* the same accent as a bare triplet, so translucent washes can be written rgba(var(--accent-rgb), a) rather than re-stating the channels by hand, and so they follow whichever palette the page is on */ --accent-rgb: 222, 82, 15; --accent-dark: #b8420b; /* Secondary. Only the index1 hero uses one; on the default scheme it just tracks the accent so nothing is left undefined. */ --accent-2: #de520f; --accent-2-rgb: 222, 82, 15; --ink: #0a0a0b; --muted: #55585f; --white: #ffffff; --hairline: #ececee; --hero-bg: #e2e9fb; --header-h: 94px; --container: 1400px; /* Medium cut carries every heading; Regular carries body + UI chrome. Both are declared in fonts/stylesheet.css — Md at weight 500, Rg at 400, so heading rules stay on 500 and the browser never has to fake a bold. */ --font-heading: 'Halvar Breit Md', 'Halvar Breit Rg', system-ui, sans-serif; --font-display: 'Halvar Breit Rg', system-ui, sans-serif; --font-body: 'Halvar Breit Rg', system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---- amazelogo2 scheme (index1.html) ---- Sampled straight off images/amazelogo2.webp: the "+A" mark and the word "Amaze" are the royal blue, "Enterprises" is the cyan. The page runs on those two hues and nothing else — every tint here is a wash of one of them. Set on , not :root, so it stays a per-page opt-in. */ .brand-amaze { --accent: #014bcf; --accent-rgb: 1, 75, 207; --accent-dark: #0037a0; /* Bright enough to sit on the dark banner plates and to draw hairlines, but it fails contrast as type on white — keep it off body copy. */ --accent-2: #00d8ec; --accent-2-rgb: 0, 216, 236; /* near-black, pulled toward the logo blue so headings and the accent read as one family rather than brand-colour-on-neutral */ --ink: #08132b; --muted: #55606f; --hairline: #e6eaf2; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* baseline for any heading that doesn't carry its own rule */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 500; } @keyframes wave-animation { 0%, 100%, 60% { transform: rotate(0) } 10%, 30% { transform: rotate(14deg) } 20% { transform: rotate(-8deg) } 40% { transform: rotate(-4deg) } 50% { transform: rotate(10deg) } } /* ---- Lenis smooth scroll ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip (not hidden) — hidden would force overflow-y:auto, making a scroll container that fights Lenis and breaks the sticky card stacking */ overflow-x: clip; } body.nav-open { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection { background: var(--accent); color: #fff; } .lg-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } /* ========================================================================== Header ========================================================================== */ .lg-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; /* crisp solid white bar with a permanent hairline rule underneath */ background: var(--white); border-bottom: 1px solid var(--hairline); transition: height 0.35s var(--ease), box-shadow 0.35s var(--ease); padding: 0 1rem; } .lg-header.scrolled { height: 74px; box-shadow: 0 8px 30px -22px rgba(0, 0, 0, 0.3); } .lg-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; } .lg-brand img { height: 90px; width: auto; transition: height 0.35s var(--ease); } /* the bar drops to 74px on scroll, so a 90px logo would sit taller than the header itself — shrink it in step with the same easing */ .lg-header.scrolled .lg-brand img { height: 56px; } /* amazelogo2 is a 5:1 horizontal lockup where logo.webp is 2.5:1, so matching it on height would run the mark ~450px wide and leave the nav nowhere to go. The wide lockup is driven off its width instead — the height then falls out of the ratio, and the same two steps still track the header's own collapse. */ .lg-brand img.lg-logo--wide { height: auto; width: clamp(190px, 17vw, 268px); /* the base rule only eases `height`, which is `auto` here — the shrink has to be re-declared against the property actually being driven */ transition: width 0.35s var(--ease); } /* The shrink here was commented out, which left the wide lockup being driven by `.lg-header.scrolled .lg-brand img { height: 56px }` above — that selector scores (0,3,1) against this variant's (0,2,1), so on scroll the height was forced to 56px while the width stayed clamped and the mark stretched to a 3.1:1 ratio against its natural 5:1. Restate height:auto at a weight that wins and shrink the lockup on the axis it is actually sized by, matching the eased `width` transition declared on the base rule. */ .lg-header.scrolled .lg-brand img.lg-logo--wide { height: auto; width: clamp(150px, 13vw, 202px); } /* ---- Nav ---- */ .lg-nav { margin-inline: auto; } .lg-nav-list { display: flex; align-items: center; gap: 20px; } .lg-nav-list>li { position: relative; } .lg-nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 0; font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); transition: color 0.22s var(--ease); } .lg-nav-link:hover, .lg-nav-link.active { color: var(--accent); } .lg-nav-link .caret { width: 14px; height: 14px; stroke-width: 2; transition: transform 0.3s var(--ease); } .lg-has-dropdown:hover .caret { transform: rotate(180deg); } .lg-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(10px); min-width: 264px; padding: 10px; background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s; } /* invisible bridge across the gap so the menu stays open while the cursor travels from the nav link down to the dropdown */ .lg-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .lg-has-dropdown:hover .lg-dropdown, .lg-has-dropdown:focus-within .lg-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .lg-dropdown a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; font-size: 0.96rem; color: var(--muted); border-radius: 10px; transition: color 0.2s, background 0.2s, padding-left 0.2s var(--ease); } .lg-dropdown a svg { flex: none; width: 22px; height: 22px; padding: 3px; color: var(--accent); background: rgba(var(--accent-rgb), 0.09); border-radius: 7px; } .lg-dropdown a:hover { color: var(--ink); background: #f6f6f7; padding-left: 20px; } /* ---- Header right ---- */ .lg-actions { display: flex; align-items: center; gap: 14px; } /* outlined capsule CTA on the right of the bar */ .lg-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; font-family: var(--font-display); /* font-weight: 600; */ font-size: 1rem; text-transform: uppercase; /* letter-spacing: 0.02em; */ color: var(--ink); white-space: nowrap; background: transparent; border: 1px solid var(--ink); border-radius: 999px; transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); } .lg-cta img { width: 32px; height: 32px; animation-name: wave-animation; animation-duration: 2.5s; animation-iteration-count: infinite; transform-origin: 50% 100%; transition: filter 0.25s var(--ease); } .lg-cta:hover { color: var(--white); background: var(--accent); border-color: var(--accent); } /* flatten the PNG to solid white so the hand reads on the orange fill */ .lg-cta:hover img { filter: brightness(0) invert(1); } /* ---- Hamburger ---- */ .lg-burger { display: none; width: 46px; height: 46px; border: 1.6px solid var(--hairline); border-radius: 999px; position: relative; } .lg-burger span { position: absolute; left: 50%; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); transition: transform 0.3s var(--ease), opacity 0.2s; } .lg-burger span:nth-child(1) { top: 17px; } .lg-burger span:nth-child(2) { top: 23px; } .lg-burger span:nth-child(3) { top: 29px; } .lg-burger.open span:nth-child(1) { top: 23px; transform: translateX(-50%) rotate(45deg); } .lg-burger.open span:nth-child(2) { opacity: 0; } .lg-burger.open span:nth-child(3) { top: 23px; transform: translateX(-50%) rotate(-45deg); } /* ========================================================================== Hero ========================================================================== */ .lg-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--header-h); /* dark plate under the video: it's what shows during the first frames while the mp4 is still buffering, so it has to match the footage, not --hero-bg (which still tints the About section and must stay light) */ background: #07070a; color: var(--white); overflow: hidden; isolation: isolate; } /* ---- full-bleed video plate ---- */ .lg-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .lg-hero-bgvideo { width: 100%; height: 100%; /* `cover` crops rather than letterboxes — a background plate must never leave bars, and the footage has no alpha to preserve (unlike the globe encode) */ object-fit: cover; object-position: center; display: block; } /* Scrim. Two stacked gradients, not a flat tint: the horizontal pass buys contrast under the left-hand copy column, the vertical one darkens the foot so the client wordmarks and scroll cue stay legible, and the middle-right of the frame keeps enough of the footage to still read as video. */ .lg-hero-bg::after { content: ""; position: absolute; inset: 0; background-color: #050439; opacity: 0.55; /* background: linear-gradient(90deg, rgba(5, 5, 8, 0.86) 0%, rgba(5, 5, 8, 0.62) 45%, rgba(5, 5, 8, 0.34) 100%), linear-gradient(180deg, rgba(5, 5, 8, 0.5) 0%, rgba(5, 5, 8, 0.18) 38%, rgba(5, 5, 8, 0.72) 100%); */ } /* ---- top half: copy in flow, video absolutely placed over it ---- */ .lg-hero-inner { flex: 1; position: relative; /* lifts the copy off the video plate, which is z-index 0 */ z-index: 1; display: flex; align-items: center; padding-block: clamp(14px, 2vh, 28px); } /* copy is the only thing in normal flow; the model is placed over the top */ .lg-hero-copy { position: relative; z-index: 1; /* widened from 80%/1200px: the headline's first line ("Mission-Ready Procurement for") measures ~1125px at the h1's capped size, which the old column missed by ~15px and wrapped into a third line */ max-width: min(92%, 1280px); } /* Taken out of flow and pinned to the bottom-right of the hero body, which is what the reference does — the model overlaps the copy column's horizontal band but sits below the headline, rather than reserving its own column. */ .lg-hero-media { position: absolute; right: calc(-1 * clamp(20px, 4vw, 48px)); bottom: 0; display: flex; justify-content: flex-end; /* never intercepts clicks meant for the copy underneath */ pointer-events: none; } .lg-hero-video { /* sized off the viewport, not the container: the container caps at 1400px while the viewport keeps growing, so a %-based width would clip the model on wide screens and undershoot it on narrow ones */ width: min(46vw, 900px); height: clamp(300px, 62vh, 620px); /* `contain` guarantees the model itself never crops — `cover` was slicing its edges — and the frame's wide empty margins are transparent, so the overhang past the container costs nothing visually */ object-fit: contain; /* model sits low in the hero, below the headline — not floating mid-height */ object-position: center bottom; /* keeps the alpha edges clean rather than compositing onto black */ background: transparent; } .lg-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .lg-eyebrow::before, .lg-eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--accent); opacity: 0.5; } .lg-hero h1 { margin: 0; font-family: var(--font-heading); font-weight: 500; /* natural tracking — the tightened -0.035em was squeezing the display face. Pure-vw middle term (no rem offset) so the type scales strictly in step with the column; a fixed offset would outgrow it and wrap to 3 lines. */ font-size: clamp(1.9rem, 3.7vw, 3.6rem); line-height: 1.12; letter-spacing: normal; color: var(--white); /* the headline is two hyphenated compounds ("Mission-Ready", "Mission-Critical") and browsers treat a hyphen as a break opportunity, so without this the line can split mid-compound. The
fixes where line 1 ends; this stops any other break from creeping in and making a third line. */ overflow-wrap: normal; word-break: keep-all; } /* the forced two-line split only fits down to the tablet range — below that the first half no longer fits on one line, so let it wrap on its own */ @media (max-width: 640px) { .lg-h1-break { display: none; } } /* hand-drawn ellipse scribbles itself over the word (animated GIF, alpha) */ .lg-circled { position: relative; display: inline-block; white-space: nowrap; } .lg-circled::after { content: ""; position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); width: 112%; /* intrinsic ratio of encircle.gif (762x234) keeps the ellipse undistorted */ aspect-ratio: 762 / 130; background: url("../images/encircle.gif") center / 100% 100% no-repeat; /* Recolours the whole scribble to the brand accent. The source strokes are rgb(248,79,58) — a red-orange that reads pink-ish against the video plate — and the gif's own palette can't be edited from CSS, so the standard crush- and-rebuild chain does it: brightness(0) flattens every stroke pixel to black (alpha survives, so the hand-drawn taper stays soft), then invert lifts it to a flat grey, sepia tints that grey, and saturate/hue-rotate bend the tint onto the accent hue. Measured output is rgb(217,89,13) against a --accent of #de520f = rgb(222,82,15). The shorthand filters are matrix approximations and can't read a custom property, so the chain is per-palette: the .brand-amaze override below re-solves it for the blue. */ filter: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(1250%) hue-rotate(1deg) brightness(94%) contrast(90%); /* sits behind the headline — .lg-hero is the stacking context (isolate), so this lands above the hero background but under the type. `filter` makes this pseudo its own stacking context, but that only affects what paints inside it; the -1 still resolves against .lg-hero-copy as before. */ z-index: -1; pointer-events: none; } /* Same chain re-solved against #014bcf = rgb(1,75,207); it lands on rgb(1,77,210), which is as close as the shorthand matrices get. */ .brand-amaze .lg-circled::after { filter: brightness(0) saturate(100%) invert(18%) sepia(77%) saturate(4023%) hue-rotate(217deg) brightness(87%) contrast(99%); } /* scoped past `.lg-hero p` below, which would otherwise win on specificity */ .lg-hero .lg-hero-tagline { max-width: none; margin: clamp(16px, 2vw, 26px) 0 0; font-family: var(--font-display); /* has to stay clearly above the body paragraph below it, which sits at 19.5–20.5px across the whole desktop range. The old pure-vw middle term bottomed out at its 1.1rem min until ~1260px, so the tagline was rendering *smaller* than the copy it introduces — the rem offset keeps the ratio at ~1.3x from mobile up. */ font-size: clamp(1.35rem, 0.95rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--white); } .lg-hero .lg-hero-tagline .accent { color: var(--accent); } /* rotating word slot. inline-grid with every word stacked in the same cell makes the box size itself to the WIDEST word, so "projects" never shifts as the words cycle — no hardcoded width, no measuring. */ .lg-switch { display: inline-grid; vertical-align: bottom; text-align: center; color: var(--accent); } .lg-switch>span { grid-area: 1 / 1; opacity: 0; transform: translateY(0.4em); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .lg-switch>span.active { opacity: 1; transform: none; /* hold until the outgoing word has faded — a plain crossfade leaves the two words legibly stacked on top of each other mid-swap */ transition-delay: 0.28s; } .lg-hero h1 .accent { color: var(--accent); } .lg-hero p { max-width: 680px; /* margin-inline stays 0 here: the hero copy column is left-aligned on desktop, so `auto` would centre this 680px block inside the 80%-wide column and knock it out of line with the h1, tagline and buttons. The ≤960px block re-centres it, where the whole column is centred. */ margin: clamp(24px, 3vw, 38px) 0 0; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem); line-height: 1.55; /* --muted is a dark grey tuned for white paper; on the video plate the body copy has to step down from white instead of up from black */ color: rgba(255, 255, 255, 0.76); } /* ========================================================================== Hero — banner slider (index1.html) Ported from league1.css so index1 can share this stylesheet with index.html and differ only in its hero. Everything here is either unique to the slider or scoped to .lg-hero--slider, so the video hero above is untouched. ========================================================================== */ .lg-hero--slider { /* the only thing the slider changes about the hero shell itself */ min-height: 95vh; min-height: 95svh; } /* ---- type scale, scoped to this hero only ---- Everything below is deliberately kept off the shared `.lg-hero` selectors so index.html's video hero keeps its own sizes. */ .lg-hero--slider h1 { font-size: clamp(1.5rem, 2.9vw, 2.8rem); word-break: normal; } /* two classes, so it beats `.lg-hero .lg-hero-tagline` on source order rather than by accident */ .lg-hero--slider .lg-hero-tagline { font-size: clamp(1.05rem, 0.8rem + 0.7vw, 1.4rem); /* it is the logo's own strapline, so it carries the logo's cyan rather than the flat white the rest of the copy uses — bright enough to hold against the banner artwork, and it keeps the mark and the type reading as one */ color: var(--accent-2); } .lg-hero--slider p { max-width: 640px; font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem); } .lg-hero--slider .lg-btn { gap: 11px; padding: 14px 28px; font-size: 0.85rem; } .lg-hero--slider .lg-btn svg { width: 18px; height: 18px; } /* Swiper covers the whole hero as a background plate; each slide re-applies .lg-container to its copy column only, so the type lines up with the rest of the page while the artwork bleeds edge to edge. */ .lg-hero-swiper { position: absolute; /* absolute boxes resolve against the PADDING box, so inset:0 covers the padding-top band too — the artwork bleeds up under the fixed header */ inset: 0; z-index: 0; /* distance from the viewport edge to the copy column's left edge, so any control that lines up with the type is computed rather than guessed */ --gutter: calc(max((100vw - var(--container)) / 2, 0px) + clamp(20px, 4vw, 48px)); --dots-bottom: clamp(38px, 6vh, 72px); --arrow-w: clamp(30px, 2.6vw, 44px); --arrow-inset: clamp(12px, 2vw, 40px); /* how far a banner travels on its way in or out */ --shift: clamp(40px, 5vw, 90px); /* must stay equal to `speed` in the Swiper init: Swiper drives the opacity crossfade, these rules drive the travel and blur, and the two only read as one movement if they run for the same length of time */ --slide-speed: 1.1s; } .lg-hslide { position: relative; display: flex; align-items: center; overflow: hidden; } /* Bleeds --shift past the left and right edges rather than sitting at inset:0. A slide that translates by --shift would otherwise drag a strip of the plate behind it into view at one edge; the overhang means there is always artwork under the travel, and .lg-hslide's overflow:hidden clips the excess. */ .lg-hslide-media { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--shift)); right: calc(-1 * var(--shift)); overflow: hidden; transition: transform var(--slide-speed) var(--ease), filter var(--slide-speed) var(--ease); } /* Direction comes from Swiper's prev/next classes rather than a JS hook, so it mirrors automatically. */ .swiper-slide-next .lg-hslide-media, .lg-hslide-media { transform: translateX(var(--shift)); filter: blur(5px); } .swiper-slide-prev .lg-hslide-media { transform: translateX(calc(-1 * var(--shift))); filter: blur(5px); } .swiper-slide-active .lg-hslide-media { transform: translateX(0); /* blur(0px), not none — `none` is a different value type and would step rather than interpolate */ filter: blur(0px); } .lg-hslide-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; /* Rest state deliberately holds the END of the zoom: when a slide loses .swiper-slide-active the animation is dropped and the image lands where it left off, so nothing snaps mid-crossfade. */ transform: scale(1.08); } .swiper-slide-active .lg-hslide-media img { animation: lg-hero-zoom 7.5s var(--ease) forwards; } @keyframes lg-hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } } /* Hangs off .lg-hslide, not .lg-hslide-media, so it stays pinned while the artwork travels underneath — parented to the media it would slide and blur along with the image, and the dark band the copy sits on would drift out from under the text mid-transition. */ .lg-hslide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 4, 24, 0.8) 0%, rgba(4, 4, 24, 0.5) 34%, rgba(4, 4, 24, 0.1) 62%, rgba(4, 4, 24, 0) 100%), linear-gradient(180deg, rgba(4, 4, 24, 0) 78%, rgba(4, 4, 24, 0.34) 100%); } .lg-hslide-inner { position: relative; z-index: 1; width: 100%; /* The slide spans the full hero, header band included, so a centred box would sit half a header too high. Padding the top by exactly --header-h lands the content dead centre of the strip actually visible below the header. */ padding-top: var(--header-h); padding-bottom: 0; /* Keeps the copy clear of the vertically-centred arrows; collapses back to .lg-container's own clamp once the viewport exceeds --container. */ padding-inline: max(clamp(20px, 4vw, 48px), calc(var(--arrow-inset) + var(--arrow-w) + 24px - max((100vw - var(--container)) / 2, 0px))); } .lg-hslide-copy { max-width: min(56%, 740px); } /* ---- copy is wiped in from the left as its slide becomes active ---- The padding/negative-margin pair on each item is what makes the wipe safe: the end state inset(0 0 0 0) lands exactly on the border box and Chromium clamps negative clip insets to zero, so each item is padded past its own ink and the same amount pulled back off in margin. Without it the wipe shaves the descenders off the headline and bites the button capsule's corners. */ .lg-hslide-copy>* { padding: 0.3em 0.3em 0.3em 0; opacity: 0; transform: translateX(-40px); clip-path: inset(0 100% 0 0); /* slower than the banner's own 1.1s handover on purpose: the artwork has settled while the type is still being uncovered */ transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), clip-path 1.4s var(--ease); } /* Scoped through .lg-hslide purely for specificity: `.lg-hslide-copy h1` and `.lg-hero h1` both score (0,1,1), so the plain selector would lose the tie on source order and the margin would never land. */ .lg-hslide .lg-hslide-copy h1 { margin: -0.3em -0.3em -0.3em 0; } .swiper-slide-active .lg-hslide-copy>* { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } /* Heading leads, description trails by 150ms, button by 300ms. The stagger lives only on the active rule, so an outgoing slide drops its copy in one piece instead of unwinding in sequence behind the crossfade. */ .swiper-slide-active .lg-hslide-copy>*:nth-child(2) { transition-delay: 0.15s; } .swiper-slide-active .lg-hslide-copy>*:nth-child(3) { transition-delay: 0.3s; } /* the shared copy adds a tagline, so the block is four items deep — without this the buttons would arrive before the paragraph above them */ .swiper-slide-active .lg-hslide-copy>*:nth-child(4) { transition-delay: 0.45s; } /* beats `.lg-hero p`, whose top margin would otherwise stack on the wipe's negative margins */ .lg-hslide .lg-hslide-copy p { margin: calc(clamp(16px, 2vw, 26px) - 0.3em) -0.3em -0.3em 0; max-width: 52ch; } /* the tagline sets its own rhythm on index.html; here the wipe's -0.3em has to compose with it rather than replace it */ .lg-hslide .lg-hslide-copy .lg-hero-tagline { margin: calc(clamp(16px, 2vw, 26px) - 0.3em) -0.3em -0.3em 0; max-width: none; } /* the CTA is wrapped rather than animated directly: the transition shorthand above would otherwise replace .lg-btn's own colour/background transition */ .lg-hslide-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: calc(clamp(26px, 3.4vw, 40px) - 0.3em) -0.3em -0.3em 0; } /* ---- prev / next, centred on the copy ---- `top: 50%` alone would centre them on the whole hero, header band included, which reads as half a header too high next to copy centred on the band below it. Adding --header-h / 2 puts both on the same optical line. */ .lg-hero-prev, .lg-hero-next { position: absolute; top: calc(50% + var(--header-h) / 2); z-index: 2; width: var(--arrow-w); padding: 0; color: var(--white); opacity: 0.72; transform: translateY(-50%); transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); } .lg-hero-prev svg, .lg-hero-next svg { display: block; width: 100%; height: auto; } .lg-hero-prev { left: var(--arrow-inset); } .lg-hero-next { right: var(--arrow-inset); } .lg-hero-prev:hover, .lg-hero-next:hover { opacity: 1; } .lg-hero-prev:hover { transform: translateY(-50%) translateX(-5px); } .lg-hero-next:hover { transform: translateY(-50%) translateX(5px); } /* Below this the arrows cost more than they give: holding a gutter on both sides squeezes the headline into roughly half the screen. Touch users swipe, and the dashes stay clickable. */ @media (max-width: 759px) { .lg-hero-prev, .lg-hero-next { display: none; } .lg-hslide-inner { padding-inline: clamp(20px, 4vw, 48px); } } /* ---- dash pagination, aligned to the container like the copy above it ---- Swiper pins the bullet rail from a two-class selector, so a plain `.lg-hero-dots` block loses to it whatever the stylesheet order. Everything positional lives here, three classes deep, where it wins outright. */ .lg-hero-swiper .lg-hero-dots.swiper-pagination-bullets { position: absolute; left: 0; right: 0; top: auto; bottom: var(--dots-bottom); z-index: 2; display: flex; gap: 10px; width: 100%; max-width: var(--container); /* auto margins centre an absolutely positioned box when both left and right are 0, which is what lines the dashes up with .lg-container */ margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); /* Swiper spaces bullets with this var, not a gap — zero it so the flex gap above is the single source of spacing */ --swiper-pagination-bullet-horizontal-gap: 0; } .lg-hero-dots .swiper-pagination-bullet { width: 30px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.42); opacity: 1; transition: background 0.3s var(--ease), width 0.35s var(--ease); } .lg-hero-dots .swiper-pagination-bullet-active { width: 54px; background: var(--accent-2); } @media (prefers-reduced-motion: reduce) { .swiper-slide-active .lg-hslide-media img { animation: none; } .lg-hslide-copy>* { opacity: 1; transform: none; clip-path: none; transition: none; } /* travel and blur are the parts that actually provoke motion sickness; the opacity crossfade Swiper runs is left alone */ .lg-hslide-media, .swiper-slide-next .lg-hslide-media, .swiper-slide-prev .lg-hslide-media, .swiper-slide-active .lg-hslide-media { transform: none; filter: none; transition: none; } } /* ========================================================================== Case Studies — free-scrolling strip of staggered cards Every card sets its own --w / --h / --top, so the row keeps the loose, hand-placed rhythm of the reference instead of marching in a grid. ========================================================================== */ .lg-cases { background: var(--white); padding: clamp(56px, 7vw, 96px) 0 clamp(60px, 7.5vw, 104px); overflow: hidden; } .lg-cases-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0 40px; margin-bottom: clamp(34px, 4.5vw, 70px); } .lg-cases-head h2 { grid-column: 1; margin: 0; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.1rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .lg-cases-sub { grid-column: 1; margin: clamp(12px, 1.4vw, 20px) 0 0; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem); color: #3b3e45; } .lg-cases-viewall { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--ink); transition: color 0.25s var(--ease), gap 0.25s var(--ease); } .lg-cases-viewall:hover { color: var(--accent); gap: 16px; } /* The strip runs full-bleed but its first card lines up with the container, so the last card is cut by the viewport edge exactly as in the reference. */ .lg-cases-swiper { padding-inline: calc(max((100vw - var(--container)) / 2, 0px) + clamp(20px, 4vw, 48px)); } .lg-cases-swiper .swiper-wrapper { /* offsets only read as a stagger if the cards hang from the top */ align-items: flex-start; } .lg-case { width: min(calc(var(--w) * 1px), 76vw); margin-top: calc(var(--top) * 1px); height: auto; } .lg-case-media { /* the wrapper is an anchor, so it has to be blockified before aspect-ratio and the absolute positioning below will take */ display: block; position: relative; /* height follows the card's own width, so one clamp drives both axes */ aspect-ratio: var(--w) / var(--h); background: #eef0f3; } .lg-case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); object-position: 25%; } .lg-case:hover .lg-case-media img { transform: scale(1.04); } /* vertical-rl gives the column, the 180deg flip makes it read bottom-to-top and drops the leading bullet to the foot of the label */ .lg-case-cat { position: absolute; top: 0; left: calc(100% + 9px); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } .lg-case h3 { margin: clamp(20px, 2.4vw, 34px) 0 0; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); } .lg-case-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2.2vw, 30px); } .lg-case-tags li { padding: 10px 18px; font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); border: 1px solid var(--ink); } /* lead discipline is filled, the rest read as supporting */ .lg-case-tags li:first-child { color: var(--white); background: var(--ink); } /* ---- Progress bar + arrows ---- */ .lg-cases-controls { display: flex; align-items: center; gap: clamp(28px, 8vw, 150px); margin-top: clamp(38px, 5vw, 72px); } /* Swiper pins a progressbar absolutely and stretches it over the slider; this one lives outside the strip, so it has to be unpinned and put back in flow. The extra class beats Swiper's own .swiper-pagination-progressbar rule outright rather than relying on stylesheet order. */ .lg-cases-controls .lg-cases-progress.swiper-pagination-progressbar { position: relative; top: auto; left: auto; flex: 1 1 auto; width: auto; height: 3px; background: #e4e6ea; border-radius: 2px; overflow: hidden; } .lg-cases-controls .lg-cases-progress .swiper-pagination-progressbar-fill { background: var(--ink); border-radius: 2px; } .lg-cases-nav { display: flex; flex: none; gap: 14px; } .lg-cases-nav button { display: inline-flex; align-items: center; justify-content: center; width: clamp(44px, 3.6vw, 54px); aspect-ratio: 1; color: var(--ink); background: none; border: 1px solid var(--ink); border-radius: 50%; transition: color 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease); } .lg-cases-nav svg { width: 40%; height: 40%; } .lg-cases-nav button:hover { color: var(--white); background: var(--ink); } /* Swiper flags the end of the run — dim it rather than hiding it, so the control doesn't shift position mid-scroll */ .lg-cases-nav button.swiper-button-disabled { opacity: 0.28; cursor: default; } .lg-cases-nav button.swiper-button-disabled:hover { color: var(--ink); background: none; } @media (max-width: 760px) { /* the stagger costs vertical room it can't spare once cards go near-full width */ .lg-case { margin-top: 0; } .lg-cases-head { grid-template-columns: 1fr; } .lg-cases-viewall { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 22px; } } /* ========================================================================== About Us — copy half on the left, layered media pair on the right ========================================================================== */ .lg-about { /* held in a custom property so the media column can cancel it exactly and sit flush on the section's bottom edge */ --about-pad-b: 20px; background: var(--hero-bg); padding: 50px 0 var(--about-pad-b); } .lg-about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); } /* heading → copy → CTA → stats, in that order, all inside the left half */ .lg-about-body { display: flex; flex-direction: column; } .lg-about-head h2 { margin: 0; font-size: clamp(2rem, 0.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .lg-about-copy { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(16px, 2vw, 26px); } .lg-about-copy p { margin: 0; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem); line-height: 1.6; color: var(--ink); } /* the CTA sits between the copy and the figures, matching the reading order */ .lg-about-cta { display: flex; justify-content: flex-start; margin-top: clamp(22px, 2.8vw, 36px); } /* ---- Stats row ---- Three equal cells side by side, no rules or dividers. They only have half the container to work in, so the figures are scaled down accordingly. */ .lg-about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* no rules or dividers — the gap alone separates the figures */ gap: clamp(16px, 2.2vw, 34px); margin-top: clamp(30px, 3.8vw, 52px); } .lg-stat { display: flex; flex-direction: column; gap: clamp(4px, 0.6vw, 8px); } .lg-stat-num { display: block; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.9rem, 1.1rem + 1.9vw, 2.9rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); /* the digits change width as they count; tabular figures stop the number jittering sideways on every frame */ font-variant-numeric: tabular-nums; } .lg-stat-label { display: block; font-size: clamp(0.86rem, 0.8rem + 0.22vw, 1rem); line-height: 1.35; color: var(--muted); } /* ---- Media pair ---- 5-1.gif is the backdrop, the developer cut-out overlaps it in front. Both share one grid cell so the front image stays anchored to the gif at any width — no absolute offsets to re-tune per breakpoint. */ .lg-about-media { position: relative; display: grid; place-items: end center; isolation: isolate; /* the pair rises off the section's bottom edge rather than floating in the middle of the row — the negative margin eats the section's own bottom padding so the image lands exactly on the edge, never over the footer */ align-self: end; margin-bottom: calc(var(--about-pad-b) * -1); } .lg-about-media-bg, .lg-about-media-front { grid-area: 1 / 1; display: block; max-width: 100%; height: auto; /* both stand on the same line, so the cut-out reads as standing on the backdrop instead of hovering over it */ align-self: end; } .lg-about-media-bg { width: 100%; /* the gif is decorative texture — let it fill the cell and sit back */ object-fit: cover; /* squared off at the bottom, where it meets the section edge */ border-radius: 18px 18px 0 0; z-index: 0; } .lg-about-media-front { width: 90%; justify-self: center; object-fit: contain; z-index: 1; filter: drop-shadow(0 24px 46px rgba(10, 10, 11, 0.22)); } @media (max-width: 960px) { /* media drops below the copy at tablet widths */ .lg-about-split { grid-template-columns: 1fr; } .lg-about-media { max-width: 560px; width: 100%; /* shorthand would wipe the negative bottom margin that keeps the pair flush with the section edge */ margin-left: auto; margin-right: auto; } } @media (max-width: 720px) { /* three columns get too cramped for the labels at phone widths — pair them up instead, the third figure wrapping onto its own line */ .lg-about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 6vw, 30px); } } .lg-hero-cta { display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 3.4vw, 40px); flex-wrap: wrap; } /* outlined capsule with a trailing arrow — both hero buttons share the look */ .lg-btn { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; font-family: var(--font-display); font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: transparent; border: 1px solid rgba(10, 10, 11, 0.32); border-radius: 999px; transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); } .lg-btn svg { flex: none; width: 20px; height: 20px; stroke-width: 1.8; transition: transform 0.3s var(--ease); } .lg-btn:hover { color: var(--white); background: var(--accent); border-color: var(--accent); } .lg-btn:hover svg { transform: translateX(4px); } /* Dark-hero overrides. Scoped to .lg-hero rather than edited into the base rules — .lg-btn is shared with the light sections further down the page, which still need ink type on a hairline border. Hover is untouched: the accent fill reads correctly against both plates. */ .lg-hero .lg-btn { color: var(--white); border-color: rgba(255, 255, 255, 0.42); } /* the filled variant is the primary action — solid white against the footage */ .lg-hero .lg-btn--solid { color: var(--ink); background: var(--white); border-color: var(--white); } /* ========================================================================== Hero foot — clients strip + scroll cue ========================================================================== */ .lg-hero-foot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vh, 22px); width: 100%; padding-bottom: clamp(18px, 3vh, 30px); } .lg-clients-label { font-family: var(--font-display); font-size: 0.94rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.72); } /* full-bleed strip so the wordmarks run off both edges like the reference */ .lg-clients { align-self: stretch; overflow: hidden; /* fade the marquee out at both ends */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .lg-clients-track { display: flex; align-items: center; width: max-content; animation: lg-marquee 42s linear infinite; } .lg-clients:hover .lg-clients-track { animation-play-state: paused; } /* spacing lives on each item, not as `gap` — with the two identical halves and no gaps, translateX(-50%) lands exactly on the clone's first item */ .lg-clients-track li { display: inline-flex; align-items: center; justify-content: center; padding-inline: clamp(18px, 2.6vw, 40px); } /* uniform box for every logo; `contain` fits each one inside without distorting it, so the wide short mark and the tall square ones all read at one weight */ .lg-clients-track li img { width: clamp(100px, 8.5vw, 150px); height: clamp(28px, 2.4vw, 40px); object-fit: contain; object-position: center; /* The wordmarks are navy, black and dark green on transparent grounds — invisible on the video plate, and grayscale(1) alone would leave them dark grey. brightness(0) crushes every one to pure black first, so invert(1) can only ever produce flat white; inverting without it would instead push navy to pale yellow. */ filter: brightness(0) invert(1); opacity: 0.62; transition: opacity 0.3s var(--ease); } /* no filter change on hover — un-inverting would drop the mark back to navy on a dark plate, so the lift is opacity only */ .lg-clients-track li:hover img { opacity: 1; } @keyframes lg-marquee { from { transform: translateX(0); } /* -50% lands exactly on the start of the cloned half → seamless loop */ to { transform: translateX(-50%); } } /* ---- scroll cue ---- */ .lg-scroll { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); transition: color 0.25s var(--ease); } .lg-scroll-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.4px solid rgba(255, 255, 255, 0.42); border-radius: 999px; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); } .lg-scroll-icon svg { width: 14px; height: 14px; animation: lg-nudge 1.9s var(--ease) infinite; } .lg-scroll:hover { color: var(--accent); } .lg-scroll:hover .lg-scroll-icon { color: var(--white); background: var(--accent); border-color: var(--accent); } @keyframes lg-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } } /* ========================================================================== Mobile panel ========================================================================== */ .lg-scrim { position: fixed; inset: 0; background: rgba(10, 10, 11, 0.4); backdrop-filter: blur(3px); z-index: 98; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; } .lg-scrim.show { opacity: 1; visibility: visible; } .lg-panel { position: fixed; top: 0; right: 0; height: 100dvh; width: min(380px, 88vw); z-index: 99; background: var(--white); border-left: 1px solid var(--hairline); padding: 26px 26px 40px; transform: translateX(100%); transition: transform 0.42s var(--ease); overflow-y: auto; } .lg-panel.open { transform: translateX(0); } .lg-panel-head { display: flex; justify-content: flex-end; margin-bottom: 14px; } .lg-panel-close { width: 46px; height: 46px; font-size: 26px; line-height: 1; color: var(--muted); border: 1px solid var(--hairline); border-radius: 12px; } .lg-panel-close:hover { color: var(--ink); } .lg-panel-list a, .lg-panel-list .lg-sub-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 4px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--hairline); } .lg-panel-list a:hover { color: var(--accent); } .lg-sub-toggle .caret { width: 22px; height: 22px; color: var(--muted); transition: transform 0.3s var(--ease); } .lg-sub-toggle.open .caret { transform: rotate(180deg); } .lg-subnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s var(--ease); } .lg-subnav.open { grid-template-rows: 1fr; } .lg-subnav>div { overflow: hidden; } .lg-subnav a { display: flex; align-items: center; gap: 11px; font-size: 1.02rem; color: var(--muted); padding-left: 18px; } .lg-subnav a svg { flex: none; width: 22px; height: 22px; padding: 3px; color: var(--accent); background: rgba(var(--accent-rgb), 0.09); border-radius: 7px; } .lg-panel-phone { display: block; margin-top: 22px; font-family: var(--font-display); font-weight: 600; color: var(--accent); font-size: 1.1rem; } .lg-panel-cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 16px; color: #fff; background: var(--accent); border-radius: 12px; font-family: var(--font-display); font-weight: 600; } .lg-panel-cta svg { width: 18px; height: 18px; } /* ========================================================================== Our Offerings — Swiper carousel ========================================================================== */ .lg-offerings { border-top: 1px solid #d7dade; padding-top: clamp(44px, 5vw, 72px); margin-top: clamp(48px, 6vw, 80px); text-align: left; } .lg-offerings-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px 40px; margin-bottom: clamp(30px, 4vw, 50px); } .lg-offerings-head .lg-eyebrow { grid-column: 1; margin-bottom: 0; } .lg-offerings-lead { grid-column: 1; margin: 0; max-width: 46ch; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem); line-height: 1.28; letter-spacing: -0.02em; color: var(--ink); } /* dashed pagination, top-right */ .lg-offerings-pagination { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 10px; width: auto !important; } .lg-offerings-pagination .swiper-pagination-bullet { width: 26px; height: 3px; border-radius: 2px; background: #c7cad0; opacity: 1; margin: 0 !important; transition: background 0.25s var(--ease), width 0.25s var(--ease); } .lg-offerings-pagination .swiper-pagination-bullet-active { background: var(--accent); width: 34px; } /* hide the dots when all cards already fit (Swiper locks the slider) */ .lg-offerings-pagination.swiper-pagination-lock { display: none; } .lg-offerings-swiper { overflow: visible; } .lg-offering-card { height: auto; display: flex; flex-direction: column; gap: 16px; min-height: 280px; padding: clamp(28px, 3vw, 42px); background: #fff; border: 1px solid var(--hairline); border-radius: 20px; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .lg-offering-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 26px 48px -26px rgba(10, 10, 11, 0.28); } .lg-offering-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; color: var(--accent); background: rgba(var(--accent-rgb), 0.09); border-radius: 16px; } .lg-offering-icon svg { width: 28px; height: 28px; } .lg-offering-card h4 { margin: 6px 0 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); } .lg-offering-card p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--muted); } /* ========================================================================== Services — hairline list; each row previews its image under the cursor ========================================================================== */ .lg-services { background: var(--white); padding: clamp(64px, 6vw, 118px) 0 clamp(56px, 6vw, 100px); } .lg-services-title { margin: 0 0 clamp(40px, 5.5vw, 78px); text-align: center; font-size: clamp(1.9rem, 1.1rem + 3vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); } /* the accented word plus the scribble drawn beneath it */ .lg-services-mark { position: relative; display: inline-block; color: var(--accent); } .lg-services-mark svg { position: absolute; left: -6%; top: 78%; width: 96%; height: auto; color: var(--accent); pointer-events: none; } .lg-services-mark path { stroke: currentColor; stroke-dasharray: 1; stroke-dashoffset: 1; } /* drawn once, when the heading scrolls into view (JS adds .is-drawn) */ .lg-services-mark.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) 0.15s; } .lg-services-list { border-top: 1px solid var(--hairline); } .lg-svc { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--hairline); } .lg-svc-name { position: relative; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); } /* rule wipes in under the label only — not the full row width */ .lg-svc-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.22em; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease); } .lg-svc:hover .lg-svc-name::after { transform: scaleX(1); } .lg-svc-go { display: inline-flex; align-items: center; justify-content: center; flex: none; width: clamp(36px, 3.4vw, 46px); height: clamp(36px, 3.4vw, 46px); color: var(--white); background: var(--ink); border-radius: 50%; opacity: 0; transform: scale(0.55); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.25s var(--ease); } .lg-svc-go svg { width: 45%; height: 45%; } .lg-svc:hover .lg-svc-go { opacity: 1; transform: scale(1); } /* ---- Cursor-follow preview ---- Two layers on purpose: the outer is fixed to the viewport and carries only the pointer translate (JS writes it), the inner carries the centring offset and the show/hide scale. One transform each — otherwise whichever wrote last would clobber the other. */ .lg-services-peek { position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none; will-change: transform; } .lg-services-peek-inner { width: clamp(220px, 22vw, 330px); aspect-ratio: 16 / 10; overflow: hidden; box-shadow: 0 26px 60px -24px rgba(10, 10, 11, 0.55); opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(0.86); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; } .lg-services-peek.show .lg-services-peek-inner { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .lg-services-peek img { width: 100%; height: 100%; object-fit: cover; } .lg-services-foot { display: flex; justify-content: center; margin-top: clamp(38px, 5vw, 64px); } /* outlined capsule — same language as the hero buttons, one size down */ .lg-btn-pill { display: inline-flex; align-items: center; gap: 12px; padding: 15px 38px; font-family: var(--font-display); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); border: 1px solid rgba(10, 10, 11, 0.32); border-radius: 999px; transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); } .lg-btn-pill svg { flex: none; width: 18px; height: 18px; transition: transform 0.3s var(--ease); } .lg-btn-pill:hover { color: var(--white); background: var(--accent); border-color: var(--accent); } .lg-btn-pill:hover svg { transform: translateX(4px); } /* no pointer to follow — drop the preview and keep the arrow permanently on */ @media (hover: none) { .lg-services-peek { display: none; } .lg-svc-go { opacity: 1; transform: scale(1); } } /* ========================================================================== Technologies — packed bubble cloud that zooms in on scroll The cloud is a fixed-ratio canvas and every bubble is placed on it with --x / --y (percent) and sized with --d (percent of the cloud's width), so the whole arrangement scales as one piece instead of reflowing. ========================================================================== */ .lg-tech { background: #f6f7fb; padding: clamp(56px, 3vw, 96px) 0 clamp(60px, 4.5vw, 104px); } .lg-tech h2 { margin: 0 0 clamp(24px, 3.5vw, 48px); text-align: center; font-size: clamp(1.9rem, 1.1rem + 3vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); } /* ---- Category tabs ---- Labels spread edge to edge under the heading, each sitting on its own dotted rule. The rule reads from currentColor, so it tracks the label's state colour without a second declaration per state. */ .lg-tech-tabs { display: flex; justify-content: space-between; gap: clamp(18px, 3vw, 56px); margin: 0 0 clamp(30px, 4vw, 58px); /* narrow screens scroll the row rather than shrinking the type to nothing */ overflow-x: auto; scrollbar-width: none; } .lg-tech-tabs::-webkit-scrollbar { display: none; } .lg-tech-tab { flex: 0 0 auto; appearance: none; padding: 0 0 clamp(8px, 0.9vw, 14px); background: none; border: 0; border-bottom: 2px dotted currentColor; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.15rem, 0.6rem + 1.6vw, 2.35rem); line-height: 1.1; letter-spacing: -0.01em; color: #b9bdd2; cursor: pointer; transition: color 0.28s var(--ease); } .lg-tech-tab:hover { color: #8f94b0; } .lg-tech-tab.is-active { color: var(--ink); } .lg-tech-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } /* only the open panel is in flow, so the section is as tall as the cloud on show and no taller — a shared grid cell would have pinned every tab to the height of the busiest one */ .lg-tech-cloud { /* canvas height as a share of its width; each panel sets its own to the depth its packing actually needs */ --ch: 58.9; display: none; position: relative; container-type: inline-size; aspect-ratio: 100 / var(--ch); margin: 0; } .lg-tech-cloud.is-active { display: block; } .lg-tech-bubble { position: absolute; left: calc(var(--x) * 1%); /* --y is a share of the canvas height. That height now differs per panel, so resolve it against the width instead and one set of coordinates keeps its proportions everywhere. The percentage above it is the fallback for engines without container queries. */ top: calc(var(--y) * 1%); top: calc(var(--y) * var(--ch) * 1cqw / 100); width: calc(var(--d) * 1%); aspect-ratio: 1; /* the wrapper owns the centring offset and nothing else, leaving the inner circle's transform free for GSAP's zoom */ transform: translate(-50%, -50%); } .lg-tech-dot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8%; text-align: center; font-family: var(--font-heading); font-weight: 500; line-height: 1.14; letter-spacing: -0.01em; color: var(--ink); /* the accent at ~22% over white — the rest state of a bubble that fills to solid var(--accent) on hover, so it has to be the same hue, just faint */ background: rgba(var(--accent-rgb), 0.22); border-radius: 50%; /* cqw keeps the label locked to its own circle; the first declaration is the fallback for engines without container queries */ font-size: 1rem; font-size: calc(var(--fs) * 1cqw); transition: background 0.3s var(--ease), transform 0.35s var(--ease); } .lg-tech-bubble:hover .lg-tech-dot { background: var(--accent); color: var(--white); transform: scale(1.06); } /* below the cloud's comfortable width the absolute packing gets cramped, so the bubbles drop into a plain centred wrap instead */ @media (max-width: 760px) { .lg-tech-cloud.is-active { aspect-ratio: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 18px); } .lg-tech-bubble { position: static; transform: none; width: calc(38% + var(--d) * 0.3%); } .lg-tech-dot { font-size: clamp(0.82rem, 3.1vw, 1.15rem); } } /* ========================================================================== Industries — photo cards that pick up a colour + hand-drawn mark on hover Each card carries its own --tone (set inline); the label colour, the doodle stroke and the hover accents all read from it, so a card is retoned by changing that one value. ========================================================================== */ .lg-ind { background: #fff; padding: 40px 0; } .lg-ind-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0 40px; margin-bottom: clamp(34px, 4.5vw, 62px); } .lg-ind-head h2 { grid-column: 1; margin: 0; font-family: var(--font-heading); font-weight: 500; /* kept in step with .lg-about-head h2 */ font-size: clamp(2rem, 0.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .lg-ind-sub { grid-column: 1; margin: clamp(12px, 1.4vw, 20px) 0 0; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); color: #3b3e45; } /* rides the headline's row, hard right */ .lg-ind-viewall { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--ink); transition: color 0.25s var(--ease), gap 0.25s var(--ease); } .lg-ind-viewall:hover { color: var(--accent); gap: 16px; } /* circled arrow — shared by "View all" and every "Explore" link */ .lg-arrow { flex: none; width: 26px; height: 26px; } .lg-ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 30px); } .lg-ind-card { position: relative; display: block; /* three to a row makes each cell ~415px wide; the old 2/3 portrait would stand them 620px tall, so the ratio steps back as the cells widen */ aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; background: #e9ecf1; } .lg-ind-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.45s var(--ease); } /* scrim keeps the white label legible over any photo, then deepens on hover so the toned label and the doodle read as the foreground */ .lg-ind-card::after { content: ""; position: absolute; inset: 0; /* deepened from 0.16/0.42: the product photography includes near-white plates (the stethoscope on white), where the old scrim left the white label barely legible */ background: linear-gradient(180deg, rgba(10, 10, 11, 0.3), rgba(10, 10, 11, 0.56)); transition: background 0.45s var(--ease); } .lg-ind-card:hover img { transform: scale(1.06); filter: saturate(0.72) brightness(0.78); } .lg-ind-card:hover::after { background: linear-gradient(180deg, rgba(10, 10, 11, 0.5), rgba(10, 10, 11, 0.62)); } .lg-ind-label { position: absolute; z-index: 2; inset-inline: clamp(14px, 5%, 30px); top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.15rem, 0.8rem + 1.1vw, 2.05rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--white); transition: color 0.35s var(--ease); } .lg-ind-card:hover .lg-ind-label { color: var(--tone, var(--accent)); } /* keeps a hyphenated term whole so a two-word label breaks at its space ("Retail &" / "E-commerce") instead of after the hyphen */ .lg-nowrap { white-space: nowrap; } /* ---- Hand-drawn hover marks ---- */ .lg-ind-doodle { position: absolute; z-index: 2; color: var(--tone, var(--accent)); pointer-events: none; overflow: visible; } /* every path carries pathLength="1", so one dash pair draws any of them regardless of its real length — no per-path measuring */ .lg-ind-doodle path { stroke: currentColor; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.85s var(--ease); } .lg-ind-card:hover .lg-ind-doodle path { stroke-dashoffset: 0; } /* the sparkles are three separate marks — draw them one after another */ .lg-ind-doodle--stars path:nth-child(2) { transition-delay: 0.12s; } .lg-ind-doodle--stars path:nth-child(3) { transition-delay: 0.24s; } /* placement is per-mark: `width: auto` / `height: auto` lets the viewBox keep each doodle's own proportions while the other axis drives the size */ .lg-ind-doodle--squiggle { top: 7%; left: 40%; height: 86%; width: auto; } .lg-ind-doodle--scribble { top: 55%; left: 8%; width: 84%; height: auto; } .lg-ind-doodle--circle { top: 50%; left: 50%; width: 84%; height: auto; transform: translate(-50%, -50%); } .lg-ind-doodle--stars { top: 18%; left: 9%; width: 79%; height: auto; } /* ---- Secondary domains band (full-bleed, sits outside .lg-container) ---- */ .lg-ind-extra { /* margin-top: clamp(20px, 3vw, 30px); */ padding: clamp(44px, 5.5vw, 78px) 0 clamp(48px, 6vw, 70px); background: #f6f7fb; } .lg-ind-extra h3 { margin: 0 0 clamp(30px, 4vw, 54px); font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem); letter-spacing: -0.01em; color: var(--ink); } .lg-ind-extra-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(26px, 3vw, 44px); } .lg-ind-extra-item h4 { margin: 0 0 clamp(16px, 2vw, 26px); font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.32rem); line-height: 1.25; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); } .lg-ind-explore { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1rem; color: var(--ink); transition: color 0.25s var(--ease), gap 0.25s var(--ease); } .lg-ind-explore .lg-arrow { width: 22px; height: 22px; } .lg-ind-explore:hover { color: var(--accent); gap: 14px; } /* touch devices never fire :hover — show each card's mark in its resting state instead of hiding the design behind an interaction that can't happen */ @media (hover: none) { .lg-ind-doodle path { stroke-dashoffset: 0; } .lg-ind-label { color: var(--tone, var(--accent)); } .lg-ind-card::after { background: linear-gradient(180deg, rgba(10, 10, 11, 0.45), rgba(10, 10, 11, 0.58)); } } /* ========================================================================== Why Choose Us — value cards Outlined cards on white, three to a row. Sits directly under the tinted Procurement Solutions band, so the white plate is what separates them. ========================================================================== */ .lg-why { background: #f6f7fb; padding: 50px 0 } .lg-why-head { margin-bottom: clamp(30px, 4vw, 54px); text-align: center; } .lg-why-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 500; /* kept in step with .lg-about-head h2 */ font-size: clamp(2rem, 0.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } /* Not an even 3-up grid: in the reference each box sizes to its own copy and then stretches to fill the row, so a two-line card sits visibly narrower than a four-line one beside it. flex-basis:auto gives the content-driven width; min-width stops a fourth box from ever fitting, which is what pins the rows at three. */ .lg-why-grid { --why-gap: clamp(16px, 2.2vw, 34px); display: flex; flex-direction: column; gap: var(--why-gap); } /* Each row is its own non-wrapping flex line. That is what produces the reference's uneven widths: every box starts at the width its own copy wants (flex-basis: auto = max-content) and the row then shrinks them in proportion to that size, so the box with the most text stays the widest. Wrapping the six into one grid instead makes all of them identical. */ .lg-why-row { display: flex; gap: var(--why-gap); } .lg-why-card { flex: 1 1 auto; /* lets a box shrink past its longest word rather than pushing the row wide */ min-width: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.6vw, 22px); /* side padding is deliberately generous — in the reference the text sits well inside the outline, which is most of what gives the boxes their air */ padding: 30px; text-align: center; background: var(--white); /* the reference outline is a cool blue hairline with square corners, not the warm --hairline used elsewhere on the page */ border: 1px solid #cbd9ee; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .lg-why-card:hover { border-color: rgba(var(--accent-rgb), 0.4); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10, 10, 11, 0.07); } /* light blue disc taken from the logo: the mark's dominant blue samples at rgb(48, 88, 150) — hsl(216, 52%, 39%) — so this is that same hue lifted to 91% lightness rather than an arbitrary pastel */ .lg-why-icon { display: grid; place-items: center; width: clamp(52px, 4.4vw, 64px); aspect-ratio: 1; border-radius: 50%; background: #dae5f6; color: #14141f; /* rides on top of the flex gap: the reference sets the icon further off its title than the title is off the body copy */ margin-bottom: clamp(6px, 1vw, 16px); } .lg-why-icon svg { width: 46%; height: 46%; } /* deliberately uncapped: the natural one-line width of each heading and paragraph is what feeds the row's proportional shrink, so a cap here would flatten the width differences the reference layout is built on */ .lg-why-card h3 { margin: 0; font-size: clamp(1.1rem, 0.92rem + 0.55vw, 1.45rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); } /* near-black like the reference, not the page's grey --muted: the boxes there run title and body at the same weight of colour */ .lg-why-card p { margin: 0; font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); line-height: 1.5; color: #1c1c28; } /* three abreast gets too narrow to read below this, so the rows are allowed to wrap and each box takes a half, then the full width */ @media (max-width: 860px) { .lg-why-row { flex-wrap: wrap; } .lg-why-card { min-width: calc((100% - var(--why-gap)) / 2); } } @media (max-width: 560px) { .lg-why-card { min-width: 100%; } } /* ========================================================================== Why Choose Us — split variant (index1.html) Headline alone in a left column with a drawn diagonal behind it; the reasons run three-up on the right as icon-beside-text rather than boxed cards. Everything is scoped to .lg-why--kpi: index.html shares this stylesheet and keeps the boxed version above untouched. ========================================================================== */ .lg-why--kpi { background: #f7f7f8; padding: clamp(56px, 6.5vw, 104px) 0; overflow: hidden; } /* the headline needs far less room than the six reasons beside it — a even split leaves the three columns too narrow for the longer titles */ .lg-why--kpi .lg-why-split { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.35fr); align-items: start; gap: clamp(24px, 3.6vw, 64px); } .lg-why--kpi .lg-why-head { position: relative; margin-bottom: 0; text-align: left; } /* the diagonal: one skewed box outlined in a hairline, bled off the left so only the run of it crosses behind the headline */ .lg-why--kpi .lg-why-head::before { content: ""; position: absolute; z-index: 0; left: -46%; top: -12%; width: 106%; height: 150%; border: 1px solid rgba(var(--accent-rgb), 0.55); transform: skewX(-32deg); pointer-events: none; } .lg-why--kpi .lg-why-head h2 { position: relative; z-index: 1; max-width: 11ch; font-size: clamp(1.9rem, 1rem + 2.4vw, 3rem); line-height: 1.1; } /* three-up, and the six items fill it in two rows */ .lg-why--kpi .lg-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 48px) clamp(16px, 2vw, 28px); } /* The boxes lose their outline, padding and centring — here each reason is just its icon and its words. Grid rather than a flex row: the icon, the title and the copy are three siblings, so a row would set them in three columns; this spans the icon down both text rows instead. */ .lg-why--kpi .lg-why-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: clamp(12px, 1.4vw, 20px); row-gap: 0; min-width: 0; padding: 0; text-align: left; background: none; border: 0; } .lg-why--kpi .lg-why-icon { grid-column: 1; grid-row: 1 / span 2; } .lg-why--kpi .lg-why-card h3, .lg-why--kpi .lg-why-card p { grid-column: 2; } .lg-why--kpi .lg-why-card:hover { transform: none; box-shadow: none; border: 0; } /* no disc behind it: the line art carries the accent on its own */ .lg-why--kpi .lg-why-icon { width: clamp(38px, 3.2vw, 48px); margin-bottom: 0; color: var(--accent); background: none; border-radius: 0; } .lg-why--kpi .lg-why-icon svg { width: 100%; height: 100%; stroke-width: 1.4; } .lg-why--kpi .lg-why-card h3 { font-size: clamp(1rem, 0.92rem + 0.3vw, 1.18rem); line-height: 1.25; } .lg-why--kpi .lg-why-card p { margin-top: 6px; font-size: clamp(0.9rem, 0.86rem + 0.16vw, 0.98rem); line-height: 1.5; color: var(--muted); } @media (max-width: 1080px) { .lg-why--kpi .lg-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .lg-why--kpi .lg-why-split { grid-template-columns: minmax(0, 1fr); } /* the diagonal has no column of its own to run through once stacked */ .lg-why--kpi .lg-why-head::before { display: none; } } @media (max-width: 560px) { .lg-why--kpi .lg-why-grid { grid-template-columns: minmax(0, 1fr); } .lg-why--kpi .lg-why-card { min-width: 0; } } /* ========================================================================== Insights — blog article cards ========================================================================== */ .lg-insights { background: var(--white); padding: 50px 0; } .lg-insights-head { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 0; } .lg-insights-head .lg-eyebrow { margin-bottom: 18px; } .lg-insights-head h2 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); } .lg-insights-head h2 .accent { color: var(--accent); } .lg-insights-all { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--ink); padding-bottom: 6px; border-bottom: 2px solid var(--accent); transition: color 0.25s var(--ease), gap 0.25s var(--ease); } .lg-insights-all svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); } .lg-insights-all:hover { color: var(--accent); gap: 14px; } .lg-insights-all:hover svg { transform: translateX(4px); } .lg-insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); } .lg-insight-card { display: flex; flex-direction: column; } .lg-insight-media { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11; background: #eef0f3; } .lg-insight-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .lg-insight-card:hover .lg-insight-media img { transform: scale(1.05); } .lg-insight-body { padding-top: clamp(20px, 2.4vw, 28px); } .lg-insight-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .lg-insight-cat { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); padding: 6px 12px; background: rgba(var(--accent-rgb), 0.08); border-radius: var(--radius-pill, 999px); } .lg-insight-date { font-size: 0.9rem; color: var(--muted); } .lg-insight-card h3 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; } .lg-insight-card h3 a { color: var(--ink); transition: color 0.22s var(--ease); } .lg-insight-card:hover h3 a { color: var(--accent); } .lg-insight-card p { margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--muted); } .lg-insight-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-bottom: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); border-bottom: 2px solid var(--accent); transition: color 0.25s var(--ease), gap 0.25s var(--ease); } .lg-insight-more svg { width: 17px; height: 17px; transition: transform 0.3s var(--ease); } .lg-insight-more:hover { color: var(--accent); gap: 12px; } .lg-insight-more:hover svg { transform: translate(3px, -3px); } /* ========================================================================== Technology Partners — Swiper carousel ========================================================================== */ .lg-partners { background: radial-gradient(70% 90% at 0% 100%, rgba(var(--accent-rgb), 0.07), transparent 55%), radial-gradient(60% 80% at 100% 0%, rgba(14, 66, 102, 0.08), transparent 55%), linear-gradient(140deg, #f6f7f9 0%, #eef0f4 55%, #f4eeea 100%); padding: 50px 0; overflow: hidden; } .lg-partners-head { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: clamp(36px, 5vw, 60px); } .lg-partners-head h2 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); margin: 0; } .lg-partners-head h2 .accent { color: var(--accent); } .lg-partners-sub { max-width: 62ch; margin: -20px 0 clamp(36px, 5vw, 56px); font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem); line-height: 1.6; color: var(--muted); } /* dashed progress pagination (top-right, like the reference) */ .lg-partners-pagination { display: flex; align-items: center; gap: 10px; width: auto !important; } .lg-partners-pagination .swiper-pagination-bullet { width: 26px; height: 3px; border-radius: 2px; background: #c7cad0; opacity: 1; margin: 0 !important; transition: background 0.25s var(--ease), width 0.25s var(--ease); } .lg-partners-pagination .swiper-pagination-bullet-active { background: var(--accent); width: 34px; } /* the slider spills to the viewport edges for the peek effect */ .lg-partners-swiper { padding-inline: clamp(20px, 4vw, 48px); overflow: visible; } .lg-partner-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; height: 200px; padding: 28px; background: var(--white); border: 1px solid var(--hairline); border-radius: 18px; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .lg-partner-card:hover { transform: translateY(-6px); border-color: var(--line-accent, rgba(var(--accent-rgb), 0.35)); box-shadow: 0 24px 44px -26px rgba(10, 10, 11, 0.3); } .lg-partner-card img { max-height: 52px; max-width: 70%; width: auto; object-fit: contain; /* filter: grayscale(1); */ /* opacity: 0.7; */ transition: filter 0.3s var(--ease), opacity 0.3s var(--ease); } .lg-partner-card:hover img { filter: grayscale(0); opacity: 1; } .lg-partner-card span { font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; color: var(--muted); transition: color 0.3s var(--ease); } .lg-partner-card:hover span { color: var(--ink); } /* ========================================================================== Back-to-top button ========================================================================== */ .lg-totop { position: fixed; right: clamp(18px, 3vw, 36px); bottom: clamp(18px, 3vw, 36px); z-index: 90; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--accent); border-radius: 50%; box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), 0.6); opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.9); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.25s var(--ease); } .lg-totop.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .lg-totop:hover { background: var(--accent-dark); transform: translateY(-3px) scale(1); } .lg-totop svg { width: 22px; height: 22px; transition: transform 0.25s var(--ease); } .lg-totop:hover svg { transform: translateY(-2px); } /* ========================================================================== Footer — oversized closing statement, then a single quiet bottom rail ========================================================================== */ .lg-footer { background: #fff; padding: 50px 0; } .lg-footer-cta h2 { /* max-width: 14ch; */ margin: 0; /* the headline is the whole design here — let it run genuinely large */ font-size: clamp(2.4rem, 3.6vw, 8.4rem); line-height: 0.98; letter-spacing: -0.035em; color: var(--ink); } .lg-footer-cta p { max-width: 52ch; margin: clamp(20px, 2.6vw, 34px) 0 0; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.6rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); } /* ---- Rule + button ---- */ .lg-footer-action { display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); margin-top: clamp(38px, 2.5vw, 84px); } /* the long arrow is decorative: it grows to eat whatever the button leaves */ .lg-footer-arrow { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; } .lg-footer-arrow-line { position: relative; flex: 1 1 auto; height: 1px; /* barely-there at the left, solid well before the head */ background: linear-gradient(90deg, rgba(10, 10, 11, 0.08), var(--ink) 28%); } /* The head is a square wearing two borders, rotated 45deg — not an SVG. Its strokes are then literally the same 1px as the rule, at any zoom, with no viewBox scaling to drift out of step. Rotating the square sends its top-right corner to (+6.4px, 0), so nudging it 6px in from the end lands the point exactly on the line's right edge. */ .lg-footer-arrow-line::after { content: ""; position: absolute; top: 50%; right: 6px; width: 9px; height: 9px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: translateY(-50%) rotate(45deg); } .lg-footer-btn { flex: none; display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 30px); padding: 7px 7px 7px clamp(22px, 2.4vw, 38px); font-family: var(--font-heading); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem); color: var(--ink); border: 1px solid rgba(10, 10, 11, 0.55); border-radius: 999px; transition: color 0.28s var(--ease), background 0.28s var(--ease), border-color 0.28s var(--ease); } .lg-footer-btn-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: clamp(42px, 3.6vw, 54px); aspect-ratio: 1; color: var(--white); background: var(--ink); border-radius: 50%; transition: background 0.28s var(--ease), transform 0.28s var(--ease); } .lg-footer-btn-icon svg { width: 42%; height: 42%; } .lg-footer-btn:hover { color: var(--white); background: var(--ink); border-color: var(--ink); } .lg-footer-btn:hover .lg-footer-btn-icon { background: var(--accent); transform: translateX(3px); } /* ---- Bottom rail ---- */ /* ---- Identity block ---- Company standing and registration, above the bottom row. Two columns rather than one stack: the four lines are short, so a single left-aligned column left the entire right half of the footer empty. The name and mission hold the left, the certification and registration run down the right — where the registration line is long enough to actually use the width it is given. */ .lg-footer-about { display: grid; /* grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr); */ column-gap: clamp(28px, 5vw, 80px); row-gap: 2px; align-items: start; margin-top: clamp(40px, 4vw, 72px); font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem); line-height: 1.65; color: #4a4d53; } .lg-footer-about p { margin: 0; } .lg-footer-org { grid-area: 1 / 1; } .lg-footer-mission { grid-area: 2 / 1; } .lg-footer-cert { grid-area: 1 / 2; } .lg-footer-reg { grid-area: 2 / 2; } /* the name leads the block, so it steps up in weight and ink */ .lg-footer-org { font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.28rem); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .lg-footer-mission { color: var(--ink); } /* the pipes are punctuation between fields, not content — dropped to a lighter ink so the registration numbers stay the thing being read */ .lg-footer-reg span { padding: 0 2px; color: rgba(10, 10, 11, 0.3); } .lg-footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 3vw, 40px); margin-top: clamp(46px, 4vw, 96px); } .lg-footer-brand img { height: clamp(34px, 3.4vw, 46px); width: auto; } /* same 5:1 problem as the header mark — sized on width so the footer lockup lands at roughly the optical weight the 2.5:1 one had */ .lg-footer-brand img.lg-logo--wide { height: auto; width: clamp(168px, 15vw, 224px); } .lg-footer-copy { margin: 14px 0 0; font-size: 0.95rem; color: #4a4d53; } .lg-footer-socials { display: flex; justify-content: center; gap: 14px; } .lg-footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--ink); background: #e6e7e9; border-radius: 50%; transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease); } .lg-footer-socials svg { width: 19px; height: 19px; } .lg-footer-socials a:hover { color: var(--white); background: var(--accent); transform: translateY(-3px); } .lg-footer-contact { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.6vw, 24px); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); } .lg-footer-contact a { color: var(--ink); transition: color 0.22s var(--ease); } .lg-footer-contact a:hover { color: var(--accent); } .lg-footer-sep { width: 1px; height: 18px; background: rgba(10, 10, 11, 0.28); } @media (max-width: 860px) { /* the drawn rule has nothing useful to span once the button wraps */ .lg-footer-action { flex-direction: column; align-items: stretch; gap: 26px; } .lg-footer-arrow { display: none; } .lg-footer-btn { justify-content: space-between; } /* no width left to share — the two columns fall back to one stack */ .lg-footer-about { grid-template-columns: 1fr; row-gap: 0; text-align: center; } .lg-footer-org, .lg-footer-mission, .lg-footer-cert, .lg-footer-reg { grid-area: auto; } .lg-footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 30px; } .lg-footer-socials { order: -1; } .lg-footer-contact { flex-wrap: wrap; justify-content: center; } } /* ========================================================================== Responsive ========================================================================== */ /* 1200, not 1080: the bar carries a 268px-wide logo, five nav items (two of them two-word labels) and a 250px CTA capsule. Below ~1200 they no longer fit on one line — the nav labels wrapped to two lines and the CTA capsule was clipped by the viewport edge. Hand it to the burger while it still fits rather than after it has already broken. */ @media (max-width: 1200px) { .lg-nav, .lg-cta { display: none; } .lg-burger { display: block; } } @media (max-width: 1080px) { .lg-ind-extra-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 960px) { /* hero stacks: model on top, copy below — the absolute overlay would sit on top of the text once there's no side column to occupy */ .lg-hero-inner { flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 40px); text-align: center; } .lg-hero-copy { max-width: none; } /* column is centred at this width, so the capped paragraph re-centres with it */ .lg-hero p { margin-inline: auto; } .lg-hero-cta { justify-content: center; } .lg-hero-media { position: static; order: -1; justify-content: center; width: 100%; } .lg-hero-video { width: 100%; height: clamp(200px, 30vh, 320px); } .lg-insights-grid { grid-template-columns: repeat(2, 1fr); } .lg-insights-grid .lg-insight-card:last-child { grid-column: 1 / -1; } } @media (max-width: 860px) { .lg-ind-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .lg-insights-head { flex-direction: column; align-items: flex-start; gap: 22px; } /* "View all" drops below the sub-line rather than squeezing the headline */ .lg-ind-head { grid-template-columns: 1fr; } .lg-ind-viewall { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 22px; } .lg-ind-extra-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .lg-insights-grid { grid-template-columns: 1fr; } .lg-insights-grid .lg-insight-card:last-child { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } /* the blanket .001ms above would make these loop at a strobe rate rather than stop, so kill the animation by name instead */ .lg-clients-track, .lg-scroll-icon svg { animation: none; } /* without the JS rotator the first word simply stays visible */ .lg-switch>span { transition: none; } } /* ========================================================================== Responsive refinements Appended last on purpose: every rule here has to beat an earlier one that was written desktop-first, and doing it on source order keeps the selectors as short as the originals rather than escalating specificity. ========================================================================== */ /* ---- Header: the band between "nav fits comfortably" and the burger ---- At 1440 the bar has room to spare; at 1201 it is one line away from wrapping. Tighten the three elastic parts — logo width, nav gap, CTA padding — across that band so it degrades smoothly instead of at a cliff. */ @media (max-width: 1440px) and (min-width: 1201px) { .lg-brand img.lg-logo--wide { width: clamp(178px, 15vw, 232px); } .lg-nav-list { gap: 16px; } .lg-nav-link { font-size: 0.84rem; } .lg-cta { gap: 8px; padding: 12px 22px; font-size: 0.88rem; } .lg-cta img { width: 26px; height: 26px; } } /* Once the burger takes over, the logo is the only thing left competing with it — let it run wider on tablet, then pull it back on phones so the bar doesn't eat a fifth of a 360px screen. */ @media (max-width: 1200px) { .lg-header { padding-inline: clamp(14px, 3vw, 32px); } .lg-header-inner { gap: 16px; } } @media (max-width: 560px) { :root { --header-h: 76px; } .lg-brand img.lg-logo--wide { width: clamp(146px, 44vw, 190px); } .lg-header.scrolled { height: 66px; } /* 13vw is ~50px on a phone, so the desktop scrolled clamp would floor at 150px and barely shrink at all — give the small bar its own pair */ .lg-header.scrolled .lg-brand img.lg-logo--wide { width: clamp(126px, 36vw, 158px); } .lg-burger { width: 42px; height: 42px; flex: none; } .lg-burger span:nth-child(1) { top: 15px; } .lg-burger span:nth-child(2) { top: 20px; } .lg-burger span:nth-child(3) { top: 25px; } .lg-burger.open span:nth-child(1), .lg-burger.open span:nth-child(3) { top: 20px; } } /* ---- Mobile panel ---- `.lg-panel-list a` (0,2,1) was beating `.lg-panel-cta` (0,1,0) on specificity, so the CTA inherited the list row's space-between, its 1.3rem type and its bottom hairline: the arrow sat hard left with the label pushed to the far right, underlined like a nav row. Re-state it at matching weight. */ .lg-panel-list a.lg-panel-cta { justify-content: center; gap: 10px; padding: 15px 18px; font-size: 1rem; color: #fff; border-bottom: 0; border-radius: 12px; } .lg-panel-list a.lg-panel-cta:hover { color: #fff; background: var(--accent-dark); } /* same collision, same fix: the phone row is a link inside the list */ .lg-panel-list a.lg-panel-phone { justify-content: flex-start; font-size: 1.1rem; color: var(--accent); border-bottom: 0; } .lg-panel { /* a flick that runs past the end of the drawer was chaining through to the page underneath; contain keeps the gesture in the panel */ overscroll-behavior: contain; /* iOS Safari's toolbar makes 100dvh unreliable mid-gesture — the pair means the drawer is never shorter than the visible viewport */ max-height: 100dvh; padding-bottom: max(40px, env(safe-area-inset-bottom)); } /* the sub-nav rows are secondary, so they don't need the full 1.3rem row height the top-level items carry */ .lg-panel-list .lg-subnav a { padding-block: 13px; font-size: 1rem; line-height: 1.35; } /* Rows were laid out with space-between, which is only right for a row of exactly two items where the second is a caret. On the sub-nav rows — icon then label — it shoved the label to the far right, so single-line entries ("Laboratory Products") sat right-aligned while wrapping ones sat left and the column read as ragged. Pack every row from the left and push only the caret out to the edge. */ .lg-panel-list a, .lg-panel-list .lg-sub-toggle { justify-content: flex-start; gap: 12px; text-align: left; } .lg-panel-list .lg-sub-toggle .caret { margin-left: auto; flex: none; } /* the icon stays on the label's first line rather than centring against a two-line label */ .lg-panel-list .lg-subnav a svg { align-self: flex-start; margin-top: 2px; } @media (max-width: 380px) { .lg-panel { width: min(340px, 92vw); padding-inline: 20px; } .lg-panel-list a, .lg-panel-list .lg-sub-toggle { font-size: 1.15rem; padding-block: 14px; } } /* ---- Hero slider ---- The copy column is capped at 56% so the artwork on the right stays readable. Once the arrows are gone and the banner is mostly overlay, that cap just starves the headline — hand the width back. */ @media (max-width: 1080px) { .lg-hslide-copy { max-width: min(76%, 680px); } } @media (max-width: 860px) { .lg-hslide-copy { max-width: 100%; } .lg-hero--slider h1 { font-size: clamp(1.55rem, 1.1rem + 2.2vw, 2.3rem); } } /* ---- Let the hero grow on a phone instead of clipping ---- On desktop the hero is a fixed viewport-height plate: .lg-hero--slider is pinned to 95svh and .lg-hero-swiper is absolute at inset:0, so the slide band can never be taller than the screen. .lg-hslide centres its content, so once the copy outgrows the band it overflows equally top and bottom and overflow:hidden takes the top off — the headline disappeared behind the fixed header on any short phone (360x640 put it 31px under the bar). Type that long can't be centred in a box that can't grow, so below 860 the slider goes back into normal flow and the section takes its height from the tallest slide. .lg-hslide keeps a 100svh floor, so a short slide still fills the screen exactly as before — only a slide that would have been clipped now extends the section instead. */ @media (max-width: 860px) { .lg-hero.lg-hero--slider { min-height: 0; /* the slide's own padding-top reserves the header band now, so keeping it here as well would double it */ padding-top: 0; } .lg-hero-swiper { position: relative; inset: auto; /* Swiper measures the container to size its slides. Taken out of absolute positioning it has no definite width to measure against — the slides are flex-shrink:0, so Chromium resolves the row at max-content and Swiper reads the container as 2^25px, sizing every slide to 33 million pixels and painting nothing. Pin the width back explicitly. */ width: 100%; min-width: 0; } .lg-hslide { min-height: 100svh; /* content that overruns the floor grows downward from the header rather than spreading out of both edges of a fixed box */ align-items: flex-start; } .lg-hslide-inner { /* clears the fixed header at the top and the dot rail at the foot */ padding-top: calc(var(--header-h) + clamp(18px, 5vh, 44px)); padding-bottom: calc(var(--dots-bottom) + 30px); } .lg-hslide .lg-hslide-copy p { max-width: 46ch; } } /* the floor is what a slide is measured against, so it has to come off too once the copy is genuinely taller than the screen — otherwise a phone in landscape gets a 100svh band with the copy hanging out of it */ @media (max-width: 860px) and (max-height: 560px) { .lg-hslide { min-height: 0; } } /* Two capsules of different label lengths wrapped onto separate lines at different widths, which read as a mistake. Below 560 they stack on purpose and share one width. */ @media (max-width: 560px) { .lg-hslide-actions { flex-direction: column; align-items: stretch; gap: 12px; } .lg-hero--slider .lg-btn { justify-content: center; width: 100%; padding: 15px 22px; } .lg-hero--slider h1 { font-size: clamp(1.45rem, 1rem + 3.6vw, 2rem); } } /* ---- Procurement Solutions strip ---- Each card carries its own --w/--h/--top so the row reads hand-placed. The stagger was only cancelled at 760, so from 761–1024 a 480px card still sat 150px lower than its neighbour and the section grew a dead band across the top. Cancel it as soon as the row stops being a wide desktop row, and cap the widest card so one slide can't fill a tablet on its own. */ @media (max-width: 1024px) { .lg-case { width: min(calc(var(--w) * 1px), 62vw); margin-top: 0; } } @media (max-width: 760px) { .lg-case { width: min(calc(var(--w) * 1px), 78vw); } .lg-case h3 { font-size: clamp(1.15rem, 1rem + 1.1vw, 1.6rem); } } @media (max-width: 420px) { .lg-case { width: 84vw; } /* the individual --w/--h ratios range from 4:5 to nearly 3:4; on a phone they read as inconsistent rather than deliberate, so hold one crop */ .lg-case-media { aspect-ratio: 4 / 5; } } /* ---- Back-to-top ---- Fixed bottom-right at 52px, it was landing on top of the footer's legal links on a phone. Shrink it and give the footer's bottom rail room to clear it. */ @media (max-width: 560px) { .lg-totop { right: 14px; bottom: 14px; width: 44px; height: 44px; } .lg-totop svg { width: 18px; height: 18px; } .lg-footer-bottom { padding-bottom: 62px; } } /* ---- 320px hardening ---- Not a device we design for, but it is the floor a browser can be resized to, and nothing should overflow there. */ @media (max-width: 360px) { .lg-container { padding-inline: 16px; } .lg-footer-reg, .lg-footer-mission { /* the pipe-separated registration run has no break opportunity inside "Y9EUFEMEUVY5" — let the browser break it rather than push the page */ overflow-wrap: anywhere; } } /* Inline links in the footer rail and the breadcrumb sit at their text height — 15–18px, well under a comfortable thumb. They stay inline (a padded block would break the pipe-separated rail), so the target is grown with padding and pulled back with a matching negative margin so nothing moves. */ @media (hover: none) { .lg-footer-contact a, .in-crumbs a { display: inline-block; padding-block: 9px; margin-block: -9px; } }