/* ======================================================================== LAYER 00 · TOKENS — design custom properties (single :root block, verbatim) ======================================================================== */ /* --- source lines 5-39 --- */ /* ===== Custom Properties ===== */ :root { /* Palette — warm cream */ --bg: #F4F3EE; --bg-2: #EDE8DE; --surface: #E8E2D8; --border: rgba(0,0,0,0.10); --text: #1A1A18; --text-2: #5A5650; --text-3: #9A9590; /* Card outer colours (text on pill) */ --apps-out: #0d0d0d; --web-out: #0d0d0d; --brand-out: #0d0d0d; --ai-out: #ffffff; /* Card inner colours (pill background = exact card colour) */ --apps-in: #3676FF; --web-in: #FFD146; --brand-in: #ffffff; --ai-in: #0E4C4B; /* Nav */ --pill-bg: #111; --r-card: clamp(14px, 2.8vw, 32px); /* scales with viewport so corners stay proportional as cards shrink */ --r-frame: 4px; --nav-h: 56px; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ======================================================================== LAYER 01 · RESET & BASE — box model, html/body, links, images, selection, focus ======================================================================== */ /* --- source lines 40-74 --- */ /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Belt-and-braces horizontal-scroll fix for iOS Safari, which historically ignored `overflow-x: clip` on body. `hidden` on doesn't break position:fixed (that's a body-level pitfall), and clamps the document width to the viewport. */ overflow-x: hidden; width: 100%; } body { background-color: var(--bg); background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px); background-size: 28px 28px; transition: background-color 0.15s ease; color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip (not hidden) — prevents horizontal bleed without making body a scroll container, which would break position:fixed children */ width: 100%; max-width: 100vw; padding-bottom: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: rgba(245,196,64,0.35); } :focus-visible { outline: 2px solid #3676FF; outline-offset: 3px; border-radius: 3px; } /* ======================================================================== LAYER 02 · GLOBAL TYPE & MOTION PRIMITIVES — fixed wordmark, hero type, scroll-reveal split-text ======================================================================== */ /* --- source lines 75-110 --- */ /* ====================================================== LOGO ====================================================== */ .logo { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 400; letter-spacing: -0.02em; color: var(--text-2); display: block; position: fixed; top: 40px; /* Push the logo 15 vw outward (toward the viewport's left edge) from the calculated --logo-left anchor — gives the lockup more breathing room while keeping a sensible min inset on small viewports. */ left: clamp(16px, 2vw, 36px); z-index: 9100; margin-bottom: 0; transform-origin: top left; transition: transform 0.35s var(--ease-out); } .logo--scrolled { transform: scale(0.6); } /* Mobile: shrink by 30% on scroll (less aggressive than the desktop 0.6). Keeps the wordmark legible in the corner while still settling out of the way as the user scrolls. */ @media (max-width: 699px) { .logo--scrolled { transform: scale(0.7); } } /* Canvas open — logo is moved into the overlay by JS so it renders above canvas art. */ body[data-card] .logo { z-index: 9100; } /* --- source lines 111-180 --- */ /* ====================================================== HERO ====================================================== */ .hero { /* Fill the viewport so the content block sits vertically centred */ height: 100dvh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; /* Top padding clears the fixed logo; bottom gives breathing room */ padding: 96px 28px 80px; } .hero-text { margin-bottom: 36px; } /* Hero scroll-in entrance */ .hero-word { display: inline-block; opacity: 0; transform: translateY(40px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .hero-word.is-in { opacity: 1; transform: translateY(0); } h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--text); margin-bottom: 20px; } /* Magnetic text — perspective so rotationY looks 3-D */ .magnetic-text { perspective: 700px; transform-style: preserve-3d; } .magnetic-text .char { display: inline-block; will-change: transform; cursor: default; } .hero-sub { font-size: 1.32rem; color: var(--text-2); font-weight: 400; line-height: 1.65; max-width: 75%; opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } .hero-sub.is-in { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .hero-sub { font-size: 0.99rem; } } /* --- source lines 181-193 --- */ /* ===== Generic scroll-reveal for section headings ===== JS splits text into .sr-word spans, groups by line, and wobbles each line in. CSS just provides the initial hidden state; transitions are handled by WAAPI. */ .scroll-reveal { opacity: 0; } /* Word spans inserted by scroll-reveal JS */ .sr-word { display: inline-block; white-space: nowrap; } /* ======================================================================== LAYER 03 · DISCIPLINE CARD SYSTEM — .cards-frame / .cards-row (hero card deck + resize handles) ======================================================================== */ /* --- source lines 194-258 --- */ /* ===== Cards Frame ===== */ .cards-frame { position: relative; border: 1px solid rgba(0,0,0,0.15); border-radius: var(--r-frame); padding: 20px 16px 16px; transition: border-color 0.25s var(--ease-out); } /* Cards have been removed from this frame — hide the empty container on the home page so the border/handles don't render. */ .hero #cards-frame { display: none !important; } /* Hide frame border when hovering or a card is active */ .cards-frame:has(.card:hover), .cards-frame:has(.card.active) { border-color: transparent; } /* Corner handles — shared styles */ .handle { position: absolute; width: 9px; height: 9px; background: #B8B2A8; border-radius: 1px; opacity: 0; transition: opacity 0.25s var(--ease-out); pointer-events: none; z-index: 6; } .h-tl { top: -5px; left: -5px; } .h-tr { top: -5px; right: -5px; } .h-bl { bottom: -5px; left: -5px; } .h-br { bottom: -5px; right: -5px; } /* Frame handles: visible by default, interactive for column-drag */ .cards-frame > .handle { opacity: 1; pointer-events: all; cursor: ew-resize; } /* Expanded invisible hit area so they're easy to grab */ .cards-frame > .handle::before { content: ''; position: absolute; inset: -10px; } .cards-frame:has(.card:hover) > .handle, .cards-frame:has(.card.active) > .handle { opacity: 0; } /* Card handles: show on hover or active */ .card:hover .handle, .card.active .handle { opacity: 1; } /* Card selection border: show only on active (selected) */ .card.active::before { content: ''; position: absolute; inset: -1px; border: 1px solid rgba(0,0,0,0.22); border-radius: calc(var(--r-card) + 1px); pointer-events: none; z-index: 5; } /* --- source lines 259-426 --- */ /* ===== Cards Row ===== */ .cards-row { display: flex; gap: 10px; justify-content: stretch; } /* Single card */ .card { flex: 1; min-width: 126px; /* cards don't shrink below their natural desktop width */ border-radius: var(--r-card); display: flex; flex-direction: column; cursor: pointer; position: relative; container-type: inline-size; /* enables cqi units → label font scales with card width */ transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); user-select: none; } .card:nth-child(1) { transform: rotate(-6deg) translateY(4px); animation: card-in-1 0.75s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.05s; } .card:nth-child(2) { transform: rotate(5deg) translateY(-6px); animation: card-in-2 0.75s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.15s; } .card:nth-child(3) { transform: rotate(-4deg) translateY(4px); animation: card-in-3 0.75s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.25s; } .card:nth-child(4) { transform: rotate(6deg) translateY(-2px); animation: card-in-4 0.75s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.35s; } @keyframes card-in-1 { from { transform: rotate(-6deg) translateY(140px); opacity: 0; } to { transform: rotate(-6deg) translateY(4px); opacity: 1; } } @keyframes card-in-2 { from { transform: rotate(5deg) translateY(140px); opacity: 0; } to { transform: rotate(5deg) translateY(-6px); opacity: 1; } } @keyframes card-in-3 { from { transform: rotate(-4deg) translateY(140px); opacity: 0; } to { transform: rotate(-4deg) translateY(4px); opacity: 1; } } @keyframes card-in-4 { from { transform: rotate(6deg) translateY(140px); opacity: 0; } to { transform: rotate(6deg) translateY(-2px); opacity: 1; } } /* Hero-mode hover only — body:not([data-card]) ensures JS fan transforms are never overridden by !important when a canvas is open */ body:not([data-card]) .card:hover { transform: rotate(0deg) translateY(-6px) scale(1.02) !important; z-index: 5; } .card.active { transform: rotate(0deg) translateY(-4px) !important; z-index: 4; } /* Card inner area — aspect-ratio keeps cards proportional at any width */ .card-inner { border-radius: calc(var(--r-card) - 10px); margin: 20px; aspect-ratio: 4/3; overflow: hidden; } /* Card image — fills inner stage */ .card-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Lottie inner — keeps card's background tint, centres the player */ .card-inner--lottie { display: flex; align-items: center; justify-content: center; } .card-inner--lottie dotlottie-player { width: 100%; height: 100%; } /* Video inner — img visible by default, video fades in on card hover */ .card-inner--video { position: relative; padding: 0; } .card-inner--video .card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.35s ease; } /* Hide the poster image while the card is hovered so any video letter- boxing or alpha edge can't reveal the still beneath it. */ .card:hover .card-inner--video .card-img { opacity: 0; } .card-video { position: absolute; /* Slight overflow + scale so the video fully covers the rounded card stage edge — kills the thin background-coloured hairline that can appear at the inner corners on certain aspect mismatches. */ inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); object-fit: cover; display: block; opacity: 0; transform: scale(1.02); transform-origin: center; transition: opacity 0.35s ease; } .card:hover .card-video { opacity: 1; } /* Card label — font scales with card width so all 4 labels stay on one line together */ .card-label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: min(13cqi, 2.565rem); /* 13% of card width; equal-width cards = all same size */ font-weight: 400; letter-spacing: 0.01em; padding: 4px 20% 16px 20px; /* 20% right keeps longest label clear of edge */ display: block; } /* Bottom-right arrow badge — same style as canvas thumb hover hint */ .card-hint { position: absolute; bottom: 14px; right: 14px; width: 32px; height: 32px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: opacity 0.18s var(--ease-out), transform 0.22s var(--ease-spring); pointer-events: none; color: var(--text); z-index: 5; } .card--brand .card-hint { background: #e8e8e8; } .card:hover .card-hint { opacity: 1; transform: scale(1); } /* Card colour overrides */ .card--apps { background: #3676FF; } .card--apps .card-inner { background: #3676FF; } .card--apps .card-label { color: #fff; } .card--websites { background: #FFD146; } .card--websites .card-inner { background: #FFD146; } .card--websites .card-label { color: #000; } .card--brand { background: #fff; } .card--brand .card-inner { background: #fff; } .card--brand .card-label { color: #000; } .card--ai { background: #0E4C4B; } .card--ai .card-inner { background: #0E4C4B; } .card--ai .card-label { color: #fff; } /* ======================================================================== LAYER 04 · WORK PANEL — sticky title column + folio grid, filters, rows/tiles view toggle ======================================================================== */ /* --- source lines 427-535 --- */ /* ====================================================== WORK PANEL — sticky title left, scrolling grid right ====================================================== */ .work-panel { display: flex; align-items: flex-start; padding: 80px 28px 120px; gap: 60px; transition: gap 0.4s var(--ease-out); } /* Tile mode: header stacks above full-width grid */ .work-panel--tiles { flex-direction: column; gap: 32px; } /* Left column: sticky title — pins to vertical centre of viewport */ .work-panel__left { position: sticky; top: 50vh; transform: translateY(-50%); flex: 0 0 auto; width: clamp(220px, 26vw, 320px); transition: width 0.4s var(--ease-out), max-width 0.4s var(--ease-out); } .work-panel__left .about-title { margin-bottom: 24px; } /* Tile mode: left col becomes full-width header strip */ .work-panel--tiles .work-panel__left { position: static; transform: none; top: auto; width: 100%; } .work-panel--tiles .about-title { max-width: 800px; margin-bottom: 28px; } /* Controls wrapper: holds filters + view toggle */ .work-panel__controls { display: flex; flex-direction: column; gap: 0; } /* Tile mode: filters + toggle collapse into one row */ .work-panel--tiles .work-panel__controls { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 8px; } .work-panel--tiles .work-view-toggle { margin-top: 0; } /* Filter buttons */ .work-filters { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .work-panel--tiles .work-filters { flex-wrap: nowrap; margin-top: 0; } /* Hollow active filter in tile mode */ .work-panel--tiles .work-filter--active { background: transparent; border-color: var(--text-1); color: var(--text-1); font-weight: 400; } .work-filter { background: transparent; border: 1.5px solid rgba(26,26,24,0.3); border-radius: 999px; color: var(--text-1); font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; padding: 7px 18px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .work-filter:hover { border-color: rgba(26,26,24,0.7); } .work-filter--active { background: var(--text-1); border-color: var(--text-1); color: var(--bg-page); } /* --- source lines 536-610 --- */ /* ===== Industry sub-filters — hollow pills ===== A second tier of filters under .work-filters. Stays hollow even when active (border thickens + colour darkens) so they read as secondary to the main category filters above. Final pill in the row (.industry-filter--reset, label "Show all") clears the industry filter and surfaces every project again. */ .industry-filters { display: flex !important; flex-wrap: wrap; gap: 10px; /* Sits directly under the .process-hed-row H2 (e.g. "Product design, system, architecture…") and inherits its column — nudge top spacing so the row doesn't crowd the title. */ margin: 24px 0 0 0; max-width: 90%; position: relative; z-index: 750; } @media (max-width: 699px) { .industry-filters { margin: 14px 16px 0; gap: 6px; } } /* Industry filter pill — mirrors `.faq-more-btn` exactly so the pill row reads as part of the same visual family as the "Show more questions" button. Inter sans-serif (not monospace), transparent fill, 1.5 px hairline border, 100 px radius. */ .industry-filter { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--border); border-radius: 100px; padding: 10px 22px; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--text-2); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .industry-filter:hover { border-color: var(--text); color: var(--text); } .industry-filter--active { border-color: var(--text); color: var(--text); } /* Hide the industry-filters row entirely unless the "Product design" intro-chip (data-intro-filter="apps") is active — industries only apply to the apps discipline. The :has() check on the document means the row reveals as soon as the user clicks the Product Design chip and hides again on any other discipline. */ .industry-filters { display: none !important; } :root:has(.intro-chip[data-intro-filter="apps"].is-active) .industry-filters, body:has(.intro-chip[data-intro-filter="apps"].is-active) .industry-filters { display: flex !important; } /* Show-all pill — sits inline beside the industry pills (no auto-margin push to the right). Slightly dimmer text so it still reads as a reset action. */ .industry-filter--reset { color: rgba(26,26,24,0.6); } .industry-filter--reset:hover { color: var(--text-1); } /* Hidden by the industry filter — kept separate from the category filter's `.work-thumb--hidden` so both filters can be layered, and so the cap counter can skip industry-filtered thumbs when computing what counts toward the 11-thumb limit. */ .work-thumb--industry-hidden { display: none !important; } /* --- source lines 611-664 --- */ /* ===== Work view toggle (rows / tiles) ===== */ .work-view-toggle { display: flex; gap: 6px; margin-top: 16px; } .work-view-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid rgba(26,26,24,0.18); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(26,26,24,0.4); transition: background 0.15s, color 0.15s, border-color 0.15s; } .work-view-btn:hover { border-color: rgba(26,26,24,0.5); color: rgba(26,26,24,0.8); } .work-view-btn--active { background: rgba(26,26,24,0.08); border-color: rgba(26,26,24,0.3); color: rgba(26,26,24,0.85); } /* Hidden filtered thumbnails */ .work-thumb.work-thumb--hidden { display: none; } /* Right column: single-column grid */ .work-panel__right { flex: 1 1 auto; min-width: 0; } .work-panel__grid { display: grid; grid-template-columns: min(700px, 100%); gap: 40px; /* Left-align with the Trusted-By heading column (15vw) so the "Recent completed projects" title and the cards share an edge. */ margin-left: 15vw; transition: gap 0.4s var(--ease-out); } /* --- source lines 665-893 --- */ /* ===== Tile view override ===== */ .work-panel--tiles .work-panel__right { width: 100%; } .work-panel__grid--tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; width: 100%; } .work-panel__grid--tiles .work-thumb { border-radius: 10px; } .work-panel__grid--tiles .work-thumb--tall { grid-row: span 2; } .work-panel__grid--tiles .work-thumb--tall img { height: 100%; object-fit: cover; } /* Desktop-only tall variant — applies the same span-2 treatment but only above the mobile breakpoint, so a portrait-cropped tile (e.g. Supapix) stays a normal single-row tile on small screens. */ @media (min-width: 700px) { .work-panel__grid--tiles .work-thumb--tall-desktop { grid-row: span 2; } .work-panel__grid--tiles .work-thumb--tall-desktop img { height: 100%; object-fit: cover; } .work-panel__grid--tiles .work-thumb--tall-desktop video.work-thumb__video { height: 100%; object-fit: cover; } } /* Tile-in animation */ @keyframes tile-in { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } } .work-panel__grid--tiles .work-thumb:not(.work-thumb--hidden) { animation: tile-in 0.35s var(--ease-out) both; } .work-panel__grid--tiles .work-thumb:nth-child(2) { animation-delay: 35ms; } .work-panel__grid--tiles .work-thumb:nth-child(3) { animation-delay: 70ms; } .work-panel__grid--tiles .work-thumb:nth-child(4) { animation-delay: 105ms; } .work-panel__grid--tiles .work-thumb:nth-child(5) { animation-delay: 140ms; } .work-panel__grid--tiles .work-thumb:nth-child(6) { animation-delay: 175ms; } .work-panel__grid--tiles .work-thumb:nth-child(7) { animation-delay: 210ms; } .work-panel__grid--tiles .work-thumb:nth-child(8) { animation-delay: 245ms; } .work-panel__grid--tiles .work-thumb:nth-child(9) { animation-delay: 280ms; } .work-panel__grid--tiles .work-thumb:nth-child(10) { animation-delay: 315ms; } .work-panel__grid--tiles .work-thumb:nth-child(11) { animation-delay: 350ms; } .work-panel__grid--tiles .work-thumb:nth-child(12) { animation-delay: 385ms; } .work-panel__grid--tiles .work-thumb:nth-child(13) { animation-delay: 420ms; } /* Individual thumbnails */ .work-thumb { display: block; position: relative; border-radius: 14px; overflow: hidden; text-decoration: none; background: var(--surface); transition: transform 0.25s var(--ease-out); /* iOS Safari: stop the browser hesitating between "is this a tap?" and "is this a scroll?" — `manipulation` removes the 300ms double-tap-zoom delay AND keeps native vertical scrolling responsive when a touch starts on a thumb. Fixes the "scroll gets stuck over the folio" bug. */ touch-action: manipulation; } .work-thumb:hover { transform: translateY(-4px); } /* Top-right expand arrow removed. */ .work-thumb img { display: block; width: 100%; aspect-ratio: 900 / 630; object-fit: contain; } .work-thumb__cat { display: none; } .work-thumb__label { position: absolute; bottom: 12px; left: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: #fff; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 20px; pointer-events: none; z-index: 4; /* above video(1), reveal canvas(2) */ } /* Autoplay video overlay — sits above static img, below label */ .work-thumb__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity 0.4s ease; } .work-thumb__video.is-playing { opacity: 1; } /* Pixel-reveal canvas overlay disabled — glass effect removed */ .work-thumb__reveal { display: none !important; } /* Work-section title banner — appears above the folio when a user clicks an intro chip on the homepage. Hidden by default. Sits directly above the work-zoom with breathing room. */ .work-title-banner { display: none; /* Left margin matches the Trusted-By heading column (15vw + 100 px). */ margin: 260px 28px 28px calc(15vw + 100px); padding: 0; max-width: 70vw; } .work-title-banner.is-shown { display: block; } /* When banner is shown, reduce the work-zoom's top padding so the banner doesn't double up with the section's own top spacing. */ body.has-work-title .work-zoom[data-view="rows"] { padding-top: 40px !important; } .work-title-banner__text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(0.79rem, 3.1vw, 3.06rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; color: var(--text); text-align: left; margin: 0; } @media (max-width: 699px) { /* Banner sits 40 px above the first work card. Banner has no bottom margin; zoom strips its padding-top; the sticky rail above the grid is collapsed; the grid itself carries a 40 px padding-top so the gap lands at exactly 40 px (not 24 + 25 + padding stacking that the earlier rules produced ≈ 69 px). */ .work-title-banner { margin: 0 16px 0 !important; } body.has-work-title .work-zoom[data-view="rows"] { padding-top: 0 !important; } } /* Banner-to-first-thumb gap (40 px) is enforced inside the `@media (max-width: 699px)` block further down, after the `.work-zoom__grid-host { padding: 0 }` reset — source order matters here since specificity ties. */ /* Plain Trusted-By headline — matches the home h1 (.intro-giant--multiline) in size, weight, leading and left-alignment. */ .trusted-hed--plain { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(0.79rem, 3.1vw, 3.06rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; color: var(--text); text-align: left; /* Shifted 100 px further right so every section H2 aligns with the indented work-thumb column. */ margin: 0 28px 60px calc(15vw + 100px); padding: 0; max-width: min(100%, calc(85vw - 128px)); } .trusted-hed--plain .hero-word { display: inline-block; margin-right: 0.25em; } /* When the Trusted-By plain heading sits inside the .hero section (the "Read more about process." instance), compensate for the hero's left padding (17.5vw on desktop / 28px on mobile) so the text aligns at the same 10 vw column as the trusted heading. */ .hero .trusted-hed--plain { margin-left: 0; } @media (min-width: 900px) { .hero .trusted-hed--plain { margin-left: calc(15vw - 17.5vw + 100px); } } @media (max-width: 699px) { .trusted-hed--plain { font-size: clamp(0.72rem, 3.96vw, 1.62rem); margin: 0 16px 32px; } } /* (Ask-AI top-right override moved to the bottom of the file so it wins against the original .ask-ai-btn rule defined later in this stylesheet — same specificity, last-rule wins.) */ /* Mobile: stack vertically */ @media (max-width: 699px) { .work-panel { flex-direction: column; gap: 32px; padding: 80px 20px 80px; /* match other section top padding */ } .work-panel__left { position: static; width: 100%; } } /* ======================================================================== LAYER 05 · CONTENT SECTIONS — part 1: .work (about), .about-block / process, trusted-by marquee ======================================================================== */ /* --- source lines 894-1084 --- */ /* ====================================================== WORK SECTION ====================================================== */ .work { /* Left padding matches the 15vw + 100 px column. */ padding: 80px 28px 4vh calc(15vw + 100px); } /* Also strip any centering on the about-block inside .work so its content starts at the section's left padding (= 10vw). */ .work .about-block { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } .work.revealed { animation: work-reveal 0.6s var(--ease-out) both; } @keyframes work-reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } /* Connector from hero → work intro */ .connector-wrap--intro { position: relative; display: flex; align-items: flex-start; gap: 0; margin-bottom: 20px; } .connector-svg { width: 200px; height: 120px; flex-shrink: 0; overflow: visible; } .work-intro { font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 400; line-height: 1.3; color: var(--text-2); max-width: 380px; padding-top: 60px; align-self: center; } /* Work list */ .work-list { display: flex; flex-direction: column; gap: 0; } /* Between-project curves */ .between-curve { width: 100%; height: 100px; overflow: visible; } .between-curve svg { width: 100%; height: 100%; overflow: visible; } /* Project item */ .project { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; gap: 8px; padding: 12px 0; } .project--alt .project-info { order: 1; } .project--alt .project-connector { order: 2; } .project--alt .project-visual { order: 3; } /* On mobile, stack vertically */ @media (max-width: 640px) { .project { grid-template-columns: 1fr; } .project-connector { display: none; } .project--alt .project-info { order: 1; } .project--alt .project-visual { order: 2; } } /* Project connector (vertical line) */ .project-connector { display: flex; justify-content: center; height: 100%; min-height: 200px; } .project-connector svg { width: 48px; height: 100%; overflow: visible; } /* Project visual frame */ .mockup-frame { background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; min-height: 240px; display: flex; align-items: center; justify-content: center; } /* ── Phone duo mockup ── */ .phones-duo { position: relative; width: 180px; height: 180px; } .phone { position: absolute; width: 80px; height: 148px; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 14px; overflow: hidden; background: #1a2340; } .phone--back { top: 20px; left: 4px; transform: rotate(-7deg); z-index: 1; } .phone--front { top: 8px; right: 4px; transform: rotate(5deg); z-index: 2; } .phone-screen { width: 100%; height: 100%; padding: 8px 6px; } .ps-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.2); margin-bottom: 5px; } .ps-bar--short { width: 55%; } .ps-gap { height: 10px; } .ps-card { border-radius: 6px; background: rgba(255,255,255,0.08); height: 48px; margin-bottom: 6px; } .ps-card--sm { height: 28px; } /* ── Desktop mockup ── */ .desktop-mock { width: 240px; } .desktop-screen { width: 100%; height: 148px; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 8px; overflow: hidden; } .ds-nav { height: 16px; background: rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.05); } .ds-hero { margin: 8px 10px 6px; height: 44px; border-radius: 5px; background: rgba(255,255,255,0.08); } .ds-grid { display: flex; gap: 5px; padding: 0 10px; } .ds-item { flex: 1; height: 48px; border-radius: 5px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.05); } /* ── Brand mockup ── */ .brand-mock { width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .bm-mark { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(135deg, #2B6FD4, #F5C440); margin-bottom: 16px; } .bm-palette { display: flex; gap: 7px; margin-bottom: 14px; } .bm-palette span { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.08); display: block; } .bm-lines { display: flex; flex-direction: column; gap: 6px; } .bm-line { height: 5px; border-radius: 3px; background: rgba(0,0,0,0.10); width: 80%; } .bm-line--h { height: 8px; background: rgba(0,0,0,0.14); width: 100%; } .bm-line--sm { width: 50%; } /* Project info */ .project-info { display: flex; flex-direction: column; gap: 20px; padding: 8px 0; } .project-desc { font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 400; line-height: 1.45; color: var(--text-2); max-width: 340px; } /* --- source lines 1085-1805 --- */ /* ====================================================== ABOUT BLOCK — scrollable bio / history section ====================================================== */ .about-block { max-width: 660px; margin: 0 auto; padding: 72px 0 24px; position: relative; /* anchor for the curve SVG */ overflow: visible; } /* ── "For the love of design" curved text ── */ .about-curve-svg { position: fixed; /* pinned to viewport — guarantees path entry is always at screen bottom */ bottom: 0; left: 0; width: 100%; height: 700px; overflow: visible; pointer-events: none; z-index: 6; opacity: 0; /* JS controls visibility */ } .about-curve-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 155px; font-weight: 400; fill: var(--text); letter-spacing: -3px; } .about-chip { display: inline-flex; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 1.05rem; padding: 5px 16px; border-radius: 20px; background: var(--surface); color: var(--text-2); margin-bottom: 32px; /* The .about-block is a flex column, which would otherwise stretch the chip to full width. Pin it to its natural content width and left-align. */ align-self: flex-start; width: fit-content; } .about-title { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); margin-bottom: 36px; } /* Heading + back-arrow row. The row's left edge sits at the 10 vw viewport column (matches body copy below). The toggle hangs to the LEFT of that column so the heading text itself starts at 10 vw, exactly above the loaded body copy. */ .process-hed-row { position: relative; /* Extra breathing room above so the process section sits clearly separated from the work-zoom rail / cards above it. */ margin: 160px 0 0; } @media (min-width: 900px) { .process-hed-row { margin-left: calc(15vw - 17.5vw + 100px); margin-top: 200px; } } .process-hed-row .process-hed { margin-left: 0 !important; } .process-hed { display: block; } .process-hed .process-hed__text { display: inline; } .hero .process-toggle { display: none; position: absolute; top: 6px; /* optically centre on first heading line */ right: 100%; /* sit immediately left of the row */ margin-right: 14px; flex-shrink: 0; } /* On mobile the absolute toggle would go off-screen — stack it above the heading instead. */ @media (max-width: 899px) { .hero .process-toggle { position: static; margin: 0 0 14px; } } /* Chip picker below the process heading — displays a cloned copy of the 5 intro chips so the user can pick a discipline from the hero too. Hidden once a filter is active. */ .process-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 28px 0 24px; max-width: 70vw; } .hero .process-chips { margin-left: 0; } @media (min-width: 900px) { /* Align the discipline picker pills with the "More about process." heading column (15vw + 100 px from the viewport edge). */ .hero .process-chips { margin-left: calc(15vw - 17.5vw + 100px); } } .process-chips.is-hidden { display: none; } /* Read-more-about-process toggle button — black circle with white down-arrow, sits below the .process-hed inside the .hero. */ .process-toggle { display: inline-flex; align-items: center; justify-content: center; /* Shrunk 30% from the previous 44 / 16. */ width: 31px; height: 31px; border-radius: 50%; background: #1A1A18; color: #fff; border: none; cursor: pointer; margin-left: 0; flex-shrink: 0; transition: transform 0.25s var(--ease-out), background 0.2s ease; } .process-toggle svg { width: 11px; height: 11px; } .process-toggle[aria-expanded="true"] { transform: rotate(180deg); } .process-toggle:hover { background: #2A2A28; } /* "Process" eyebrow row — toggle + label, sits above the discipline heading when a filter is active. */ .process-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; } .process-eyebrow__label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--text); /* Match the toggle circle height so the visual baselines line up when flex centres the row (eliminates the ~6 px lift caused by the smaller text's intrinsic line-box height). */ line-height: 31px; display: inline-flex; align-items: center; } /* Hidden when no discipline is picked (the chip-picker state). The JS toggles toggle.style.display = 'none' → also hide the eyebrow. */ .process-eyebrow:has(> #process-toggle[style*="display: none"]) { display: none; } /* Toggle now sits ABOVE the heading; alignment handled in the .hero .process-toggle block above. */ /* Content entrance — fade + slide-up with a per-block stagger, mirroring the home h1 word-wobble entrance. */ @keyframes processPanelIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .process-panel.is-revealing .ph-block { opacity: 0; animation: processPanelIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .process-panel.is-revealing .ph-block:nth-child(1) { animation-delay: 0ms; } .process-panel.is-revealing .ph-block:nth-child(2) { animation-delay: 120ms; } .process-panel.is-revealing .ph-block:nth-child(3) { animation-delay: 220ms; } .process-panel.is-revealing .ph-block:nth-child(n+4) { animation-delay: 320ms; } /* Also fade the heading update so the new title settles in with the body. */ .process-hed.is-revealing .process-hed__text { display: inline-block; animation: processPanelIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Expandable content panel — left padding matches the heading's 10 vw column. */ .process-panel { display: block; margin: -40dvh 0 0; padding: 16px 28px 48px 28px !important; position: relative; z-index: 1; } .process-panel[hidden] { display: none; } @media (min-width: 900px) { .process-panel { margin-top: -40dvh; /* Left padding matches the process eyebrow / heading column (15vw) so the description, diagram and pill clusters all align under the toggle + "Process" label. */ padding: 16px 10vw 64px calc(15vw + 100px) !important; } } .process-panel .ph-block { margin: 0 0 56px; padding: 0; } /* Brute-force reset: every element inside the panel gets zero left inset so all body copy aligns with the panel's left padding edge. */ .process-panel, .process-panel * { box-sizing: border-box; } .process-panel * { margin-left: 0 !important; padding-left: 0 !important; max-width: none !important; text-indent: 0 !important; } /* Single-column flow — description first, FAQ accordions follow in a full-width row that bleeds to the page's left edge (escapes the panel's left padding via negative margin). */ .process-panel > * { display: block; } .process-panel .ph-block:not(:first-child) { margin-left: calc(-1 * (10vw)) !important; /* break out to viewport left edge */ margin-right: calc(-1 * (10vw)) !important; padding-left: 28px !important; padding-right: 28px !important; } @media (max-width: 899px) { .process-panel .ph-block:not(:first-child) { margin-left: -28px !important; margin-right: -28px !important; padding-left: 16px !important; padding-right: 16px !important; } } .process-panel .ph-block { margin-bottom: 18px !important; } .process-panel .about-block { margin-bottom: 32px !important; } .process-panel .faq-section { margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .process-panel .faq-inner { padding: 0 !important; margin: 0 !important; } .process-panel .about-body { margin-bottom: 28px !important; } .process-panel .about-body p { margin: 0 0 18px !important; } .process-panel .faq-list { list-style: none !important; } /* Pills lay out in horizontal rows, wrapping naturally onto the next line when the row fills up. Each pill is content-width by default; on hover/open it expands to fill its row. */ .process-panel .faq-list { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 10px !important; } .process-panel .faq-item { width: auto !important; max-width: 100% !important; display: inline-block !important; } .process-panel .faq-q { width: auto !important; display: inline-flex !important; } .process-panel .faq-q__text { flex: 0 0 auto !important; } /* When a pill opens, expand to ~1/3 of the viewport (not the full pill cluster width). Title indent bumped so the heading aligns with the body copy below it. */ .process-panel .faq-item:has(.faq-q[aria-expanded="true"]) { width: min(33vw, 480px) !important; display: block !important; transition: width 220ms ease; } .process-panel .faq-item:has(.faq-q[aria-expanded="true"]) .faq-q { width: 100% !important; display: flex !important; /* Match the body's 28 px left inset so the title and body copy align on the same vertical line. */ padding-left: 28px !important; } .process-panel .faq-item:has(.faq-q[aria-expanded="true"]) .faq-q__text { flex: 1 1 auto !important; } /* Accordion pills — match the home .intro-chip type treatment so the accordion titles read at the same weight/scale as the discipline pills. Sizes shrunk ~25% from the previous defaults. */ .process-panel .faq-q { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Matches the FAQ section pills (15.75 / 56 / 16-22 / 25 badge). */ font-size: 15.75px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; line-height: 1.25 !important; padding: 16px 22px !important; align-items: center !important; min-height: 56px; } .process-panel .faq-q__text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-size: 15.75px !important; font-weight: 500 !important; letter-spacing: -0.005em !important; line-height: 1.25 !important; } .process-panel .faq-icon { width: 25px !important; height: 25px !important; } .process-panel .faq-icon svg { width: 13px !important; height: 13px !important; } /* Chevron separator inside the H4 cluster labels. */ .process-panel .ph-title-chevron { opacity: 0.55; flex-shrink: 0; } /* FAQs collapsible block — black pill button with white chevron-down. */ .process-panel .ph-block--faqs { margin-top: 8px !important; } .process-panel .ph-faqs-toggle { display: inline-flex; align-items: center; gap: 12px; background: #111111; color: #ffffff; border: none; border-radius: 999px; /* Extra inset on the left/right so the label has breathing room. !important is needed to override a `.process-panel *` reset. */ padding: 12px 24px 12px 28px !important; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; cursor: pointer; transition: background 0.2s ease; } .process-panel .ph-faqs-toggle:hover { background: #000000; } .process-panel .ph-faqs-toggle__chev { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s ease; } .process-panel .ph-faqs-toggle[aria-expanded="true"] .ph-faqs-toggle__chev { transform: rotate(180deg); } .process-panel .ph-faqs-panel { margin-top: 18px; } /* Body inside open accordion — restore left padding so it aligns with the pill's title text (28 px inset), not the pill's outer edge. Hidden answers use display:none (not just max-height) so their content width doesn't pad out the pill's intrinsic width. */ .process-panel .faq-a { padding-left: 28px !important; padding-right: 28px !important; } .process-panel .faq-a > * { padding-left: 0 !important; } .process-panel .faq-a ul { padding-left: 1.2em !important; } .process-panel .faq-q[aria-expanded="false"] + .faq-a { display: none !important; } .process-panel .faq-q[aria-expanded="true"] + .faq-a { display: block !important; } .process-panel .ph-block .faq-title, .process-panel .ph-block h2, .process-panel .ph-block h4, .process-panel .ph-block section.faq-section > .faq-inner > .faq-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; /* +20 px padding under the H4 cluster headings (was 14). */ margin: 0 0 34px !important; color: var(--text) !important; opacity: 1 !important; text-align: left !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; /* Cancel the calc-based break-out margin inherited from the section.faq-section override (which pushes the heading to the viewport's 15vw column — wrong inside the panel grid). */ margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto !important; } .process-panel .faq-list { list-style: none; padding: 0; margin: 0; } .process-panel .faq-q, .process-panel .faq-a { color: var(--text); } .process-panel .about-block { max-width: none; padding: 0; } /* Process Diagram floats to the right of the description column. */ .process-panel .ph-diagram-wrap { width: 100%; margin: 0; } /* New layout: top row puts description column (left, ~30 % wide) beside the Process Diagram (right). Pill clusters sit full-width below, stacked. Stacks vertically on narrow viewports. */ .process-panel .ph-stack { display: flex; flex-direction: column; gap: 40px; } @media (min-width: 900px) { .process-panel .ph-stack { display: grid; grid-template-columns: minmax(220px, 30%) 1fr; column-gap: 48px; /* Row-gap sized so the second pill cluster sits ~60 px below the last pill of the first cluster. */ row-gap: 42px; align-items: start; } /* Description block — left column, row 1. Pushed 50 px down so it sits below the eyebrow + heading with breathing room. */ .process-panel .ph-stack > .ph-block--intro { grid-column: 1; grid-row: 1; margin-top: 50px; } /* Diagram — right column, row 1. Matched 50 px push-down. */ .process-panel .ph-stack > .ph-diagram-wrap { grid-column: 2; grid-row: 1; margin-top: 50px; } /* Pill clusters and the FAQs block — full width, rows below the intro/diagram row, stacked. */ .process-panel .ph-stack > .ph-block--pills, .process-panel .ph-stack > .ph-block--faqs { grid-column: 1 / -1; margin-top: 0 !important; } } .process-panel .ph-block--intro, .process-panel .ph-block--intro .about-block { margin-bottom: 0 !important; } /* Cancel the legacy "break out to viewport edge" rule (line ~1176) for any .ph-block that lives inside a .ph-stack — those need to stay within the grid container so the diagram, description and pill columns share the same L/R margins. */ .process-panel .ph-stack > .ph-block, .process-panel .ph-stack > .ph-block:not(:first-child) { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .process-panel .ph-block--intro, .process-panel .ph-block--intro .about-block, .process-panel .ph-block--intro .about-body { max-width: 100% !important; width: 100% !important; } .process-panel .ph-diagram { display: block; width: 100%; height: auto; } /* Match the hero's 17.5 vw left padding (desktop) so inline content reads alongside the heading instead of going edge-to-edge. */ .process-panel { padding: 0 28px 0 28px; } @media (min-width: 900px) { .process-panel { padding: 0 17.5vw; } } /* H1 promoted into the about-block (above the .about-chip). Matches .trusted-hed--plain exactly: same font-size clamp, same left-alignment at the viewport's 10 vw column (breaks out of the .about-block's centered 660 px container). */ .about-h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(0.79rem, 3.1vw, 3.06rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; color: var(--text); text-align: left; margin-top: 0; margin-bottom: 24px; margin-left: calc(50% - 50vw + 15vw + 100px); margin-right: calc(50% - 50vw + 15vw); } @media (max-width: 699px) { .about-h1 { font-size: clamp(0.72rem, 3.96vw, 1.62rem); margin-left: calc(50% - 50vw + 16px); margin-right: calc(50% - 50vw + 16px); } } /* Two-column variant — Experience card on the left, meta rows on the right. */ /* Single-column meta block — the avatar card is lifted out of this grid and pinned top-right of the parent .about-block (see rules below), so the Speciality / Experience rows now fall directly under the title + chip on the left. */ .about-meta--with-card { display: flex !important; flex-direction: column; gap: 18px; padding-bottom: 40px; margin-bottom: 40px; } .about-meta--with-card .about-meta__rows { display: flex; flex-direction: column; gap: 18px; } /* Lift the avatar image to the top-right of the .about-block so it sits up alongside the title, while the text column (title, chip, meta rows, buttons) all left-align underneath. */ .work .about-block { position: relative; } /* Desktop layout — title + meta on the left, avatar card floated absolutely on the right. Only kicks in at ≥1100 px so tablets (≤1024 px landscape) and small laptops get the stacked variant below instead of having the meta column squeezed to <200 px by the 720 px right-padding. */ @media (min-width: 1100px) { .work .about-block { padding-right: 720px; } .work .about-meta--with-card .about-meta__card { position: absolute; /* Dropped 30% down the about-block — sits lower alongside the chip / Speciality / Experience rows instead of crowning the title. */ top: 30%; right: 15vw; /* pull the photo in to match the L/R 15vw column */ width: 360px; margin: 0; } /* Cap the Speciality / Experience meta rows to 75 % width so the long "Design Engineer, UX, Product Design …" string folds onto multiple lines instead of bumping into the avatar card. */ .work .about-meta--with-card .about-meta-item { max-width: 75%; width: 75%; white-space: normal; overflow-wrap: anywhere; } } /* Mobile + tablet stacked layout (<1100 px). The DOM order is already title → chip → image → Speciality/Experience → buttons → description body, which IS the stack we want; we just need everything to flow at 90 % width with normal wrapping and drop the heading's `white-space: nowrap`. */ @media (max-width: 1099px) { .work .about-block { padding-right: 0; } .work .about-h1 { /* The default rule forces nowrap so the title sits on one line on desktop; on smaller screens that pushes the title off-screen. Allow normal wrapping and cap the width to ~90 %. */ white-space: normal !important; max-width: 90%; word-break: normal; overflow-wrap: break-word; } .work .about-chip { max-width: 90%; } .work .about-meta--with-card .about-meta__card { /* In the flex flow rather than absolute — appears under the chip, above the Speciality / Experience rows. Cap width so the photo doesn't fill the whole tablet width. */ position: static !important; width: min(360px, 80%); margin: 8px 0 16px 0; } .work .about-meta--with-card .about-meta-item { /* Override the desktop 75 % cap (which assumed a 720 px right gutter for the avatar). Use the full text column. */ max-width: 90%; width: 90%; white-space: normal; overflow-wrap: break-word; } .work .about-more-body { max-width: 90%; } } /* Hide the "Experience" label tag on the avatar card. */ .work .about-meta--with-card .about-meta__label { display: none !important; } /* Buttons sit immediately under the meta rows, left-aligned to the title (no indent / centering). White pills with no outline; the arrow badge is a solid black circle. */ .work .about-actions { margin-top: 20px; justify-content: flex-start; margin-left: 0; } .work .about-actions .thoughts-see-all-btn, .work .about-actions .about-more-btn, .work .about-actions .about-experience-btn { background: #ffffff !important; border: none !important; color: #111 !important; box-shadow: none !important; } .work .about-actions .thoughts-see-all-btn:hover, .work .about-actions .about-more-btn:hover, .work .about-actions .about-experience-btn:hover { background: #f4f3ee !important; color: #111 !important; } .work .about-actions .btn-arrow-circle { background: #111111 !important; color: #ffffff !important; } /* Cancel the title's "break-out to 10vw" margin trick inside the .work section — it was designed for the centred about-block but here we want the title to flow normally so the chip, meta rows and buttons can left-align directly underneath. Also force it onto a single line. */ .work .about-h1 { margin-left: 0 !important; margin-right: 0 !important; white-space: nowrap; } .work .about-chip { margin-left: 0 !important; } .about-meta__card { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2, #EDE8DE); } .about-meta__card .about-meta__img, .about-meta__card .about-meta__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .about-meta__card .about-meta__video { z-index: 1; } .about-meta__label { position: absolute; left: 16px; bottom: 14px; color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.04em; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); padding: 5px 12px; border-radius: 999px; z-index: 2; } @media (max-width: 699px) { .about-meta--with-card { grid-template-columns: 1fr; gap: 20px; } .about-meta__card { aspect-ratio: 16 / 10; } } .about-meta { display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--border); } .about-meta-item { font-family: 'IBM Plex Mono', monospace; font-size: 1rem; color: var(--text-2); line-height: 1.5; } .about-meta-item strong { display: block; font-weight: 500; color: var(--text); margin-bottom: 3px; } .about-body { margin-bottom: 48px; } .about-body p { font-family: 'Inter', sans-serif; font-size: 1.12rem; line-height: 1.78; color: var(--text-2); margin-bottom: 20px; } /* --- source lines 1914-2149 --- */ /* ====================================================== TRUSTED BY ====================================================== */ /* Accessibility utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .trusted-section { /* overflow: hidden removed — body overflow-x:clip handles horizontal bleed; pills need to be able to fall below this section's boundary during scatter */ overflow: visible; padding: 220px 0 90px; /* push the heading well below the intro */ /* Bleed past parent section's horizontal padding so the marquee runs the full viewport width */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } /* ─── Heading ────────────────────────────────────────── */ .trusted-hed { margin-bottom: 44px; pointer-events: none; /* overflow intentionally visible — text allowed to bleed off sides; body overflow-x:clip handles viewport clipping */ } /* The heading is followed by a lede and a clarification line now, so it needs far less space beneath it than when it stood alone. Scoped to .trusted-section — .process-hed carries .trusted-hed--plain too. */ .trusted-section .trusted-hed--plain { margin-bottom: 20px; } /* Supporting paragraph. Values follow .intro-supporting, but deliberately not its class: that one is display:none below 699px, which would be wrong here. */ .tb-lede { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.45; color: var(--text-2); /* same left column as the heading above it */ margin: 0 28px 14px calc(15vw + 100px); max-width: min(52ch, calc(85vw - 128px)); } /* Clarification line — the mono eyebrow convention used by .ph-phase. */ .tb-note { font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.55; letter-spacing: 0.02em; color: var(--text-3); margin: 0 28px 44px calc(15vw + 100px); max-width: min(58ch, calc(85vw - 128px)); } /* ─── Two-row marquee (row 0 forward, row 1 reverse) ─── */ .tb-rows { display: flex; flex-direction: column; gap: 14px; opacity: 0; transition: opacity 0.6s ease 0.25s; overflow-x: clip; /* clips marquee at viewport edges */ overflow-y: visible; /* lets scattered pills fall into the testimonials below */ } /* Rows visible once text has landed */ .trusted-section.is-landed .tb-rows { opacity: 1; } .trusted-section.is-split .tb-rows { opacity: 1; } /* Squiggle sweep removed — coordinated entrance instead: heading slides UP, logos drop DOWN, when section scrolls into view. */ .trusted-section .tb-rows { opacity: 0; transform: translateY(-60px); transition: opacity 0.7s ease, transform 0.9s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } .trusted-section.is-in .tb-rows { opacity: 1; transform: translateY(0); } .trusted-section .trusted-hed--plain { opacity: 0; transform: translateY(60px); transition: opacity 0.7s ease, transform 0.9s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } .trusted-section.is-in .trusted-hed--plain { opacity: 1; transform: translateY(0); } .tb-row { display: flex; align-items: center; gap: 14px; width: max-content; will-change: transform; /* position driven by JS marquee engine — no CSS animation */ } /* ─── Organisation tooltip ──────────────────────────────── Three lines: organisation, industry context, capability areas. Positioned by JS (placeTip in site.js) — it sets left/top, flips to .is-below when there is no room above, and sets --caret-x so the pointer still aims at the card after the box has been clamped inside the viewport. */ #tb-tooltip { position: fixed; z-index: 9999; pointer-events: none; display: flex; flex-direction: column; gap: 5px; width: max-content; max-width: min(320px, calc(100vw - 24px)); background: var(--text); border-radius: 10px; padding: 11px 15px 12px; opacity: 0; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28); } /* Coming from below, the entrance should rise from the other direction. */ #tb-tooltip.is-below { transform: translateY(-6px); } /* Declared after .is-below so it wins the tie at equal specificity. */ #tb-tooltip.is-visible { opacity: 1; transform: translateY(0); } .tb-tip__org { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bg); } .tb-tip__context { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.82rem; line-height: 1.4; color: rgba(244, 243, 238, 0.74); } .tb-tip__caps { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; line-height: 1.5; letter-spacing: 0.02em; color: rgba(244, 243, 238, 0.52); padding-top: 3px; border-top: 1px solid rgba(244, 243, 238, 0.14); } #tb-tooltip::after { content: ''; position: absolute; top: 100%; left: var(--caret-x, 50%); transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--text); } #tb-tooltip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); } /* ─── Organisation cards ────────────────────────────────── A