instead. */ .page-fade { opacity: 0; animation: page-fade .8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } @keyframes page-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* form */ .field { position: relative; } .field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #E5E5E2; color: #232A31; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 17px; padding: 16px 0 14px; transition: border-color .3s ease; resize: none; } .field textarea { min-height: 140px; } .field input::placeholder, .field textarea::placeholder { color: #586069; } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: #232A31; } .field--pink input:focus, .field--pink textarea:focus { border-bottom-color: #1B3A5B; } /* ========================================================= COMPONENTS — pill nav, gradient blob, tabs, row cards, dark footer ========================================================= */ /* Floating pill nav — must persist visible across every section, hero through footer. Nothing in CSS or JS may hide, fade, slide, or collapse this element on scroll. z-index is intentionally above every section stacking context. */ .pill-nav { position: fixed; top: clamp(18px, 3vw, 32px); left: 50%; transform: translateX(-50%); z-index: 1000; background: var(--bl-off-white); border-radius: 999px; padding: 8px 8px 8px 28px; display: inline-flex; align-items: center; gap: 32px; border: 1px solid var(--bl-line); box-shadow: 0 1px 0 rgba(35,42,49,0.05), 0 12px 30px -16px rgba(35,42,49,0.18); width: max-content; max-width: calc(100vw - 24px); transition: background-color .35s ease, box-shadow .35s ease; /* defensive: forbid any "hide on scroll" pattern from accidentally taking this nav offscreen or removing it from the paint layer. */ opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .pill-nav__wordmark { display: inline-flex; align-items: center; color: #232A31; line-height: 0; } .pill-nav__wordmark img, .pill-nav__wordmark svg { display: block; height: 16px; width: auto; } .pill-nav__links { display: inline-flex; align-items: center; gap: 28px; } .pill-nav__links a { font-size: 13px; color: #232A31; position: relative; } .pill-nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #1B3A5B; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(0.2,0.8,0.2,1); } .pill-nav__links a:hover::after, .pill-nav__links a.is-active::after { transform: scaleX(1); } .pill-nav, .pill-nav * { box-sizing: border-box; } .pill-nav__cta { display: inline-flex; align-items: center; gap: 10px; background: #FAFAF8; border-radius: 999px; padding: 4px 4px 4px 14px; font-size: 13px; color: #232A31; min-width: max-content; transform: none !important; transition: opacity .25s ease, background-color .25s ease; } .pill-nav__cta:hover { opacity: 0.9; transform: none !important; } .pill-nav__cta-dot { flex: 0 0 auto; width: 32px; height: 32px; background: #1B3A5B; color: #FAFAF8; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease; } /* Uniform Discovery Call button hover — text/icon become accent amber, button surface becomes navy slate */ .group:hover .pill-nav__cta-dot, .btn-pink:hover .pill-nav__cta-dot, .footer-shell__cta-btn:hover .pill-nav__cta-dot { background: #232A31; color: #FAFAF8; } .btn-pink { transition: background .25s ease, color .25s ease, transform .15s ease; } .footer-shell__cta-btn { transition: color .25s ease; } .footer-shell__cta-btn:hover { color: #FAFAF8; } .pill-nav__cta:hover .pill-nav__cta-dot { background: #1B3A5B; } /* Brand mark must never collapse — it has highest hide priority. */ .pill-nav__wordmark { flex-shrink: 0; } .pill-nav__wordmark img, .pill-nav__wordmark svg { flex-shrink: 0; } /* Quiet positioning chip — sits where the old "Talk to us" pill was, but is a non-interactive with muted styling. Hide priority: 1) wordmark, 2) nav links, 3) this chip. */ .pill-nav__chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(244, 241, 236, 0.6); border: 1px solid rgba(216, 210, 199, 0.7); font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 11.5px; font-weight: 500; color: #586069; letter-spacing: 0.01em; white-space: nowrap; user-select: none; cursor: default; flex-shrink: 0; } .pill-nav__chip-text-short { display: none; } @media (max-width: 720px) { .pill-nav__chip { padding: 5px 10px; font-size: 10.5px; } .pill-nav__chip-text-long { display: none; } .pill-nav__chip-text-short { display: inline; } } @media (max-width: 480px) { .pill-nav__chip { display: none; } } @media (max-width: 720px) { .pill-nav { padding: 6px 6px 6px 18px; gap: 14px; } .pill-nav__links { gap: 14px; } .pill-nav__links a { font-size: 12px; } .pill-nav__wordmark img, .pill-nav__wordmark svg { height: 18px; } } /* Hero gradient blob — the signature multi-color wash */ .blob-wrap { position: relative; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; } .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.95; pointer-events: none; z-index: -1; will-change: transform; } .blob--pink { width: 70vw; height: 70vw; background: #1B3A5B; top: -8%; right: -6%; opacity: 0.30; } .blob--peach { width: 60vw; height: 60vw; background: #E5E5E2; top: 22%; right: 8%; opacity: 0.65; } .blob--rose { width: 48vw; height: 48vw; background: #1B3A5B; top: 50%; right: -4%; opacity: 0.22; } .blob--teal { width: 52vw; height: 52vw; background: #586069; top: 35%; right: -8%; opacity: 0.22; } .blob--cream { width: 42vw; height: 42vw; background: #FAFAF8; top: 5%; right: 28%; opacity: 0.9; } /* Per-blob keyframes — position drift + scale breathing + opacity pulsing so colours visibly shift */ @keyframes blob-pink-cycle { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.28; } 33% { transform: translate(-10%, 7%) scale(1.07); opacity: 0.42; } 66% { transform: translate(-4%, -4%) scale(0.95); opacity: 0.20; } } @keyframes blob-peach-cycle { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.58; } 33% { transform: translate(8%, -5%) scale(1.05); opacity: 0.78; } 66% { transform: translate(3%, 5%) scale(0.96); opacity: 0.52; } } @keyframes blob-teal-cycle { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.20; } 50% { transform: translate(-6%, -9%) scale(1.07); opacity: 0.34; } } @keyframes blob-cream-cycle { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.82; } 33% { transform: translate(-9%, 6%) scale(1.06); opacity: 1; } 66% { transform: translate(-4%, -3%) scale(0.94); opacity: 0.72; } } @keyframes blob-rose-cycle { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.18; } 50% { transform: translate(5%, 7%) scale(1.06); opacity: 0.34; } } .blob--pink { animation: blob-pink-cycle 22s ease-in-out infinite; } .blob--peach { animation: blob-peach-cycle 26s ease-in-out infinite; } .blob--teal { animation: blob-teal-cycle 30s ease-in-out infinite; } .blob--cream { animation: blob-cream-cycle 24s ease-in-out infinite; } .blob--rose { animation: blob-rose-cycle 28s ease-in-out infinite; } /* Editorial watermark — large serif word sitting behind the hero content, anchored upper-right and cropped at the edge for newspaper-masthead feel. */ .hero-watermark { position: absolute; top: clamp(40px, 8vh, 110px); right: -2vw; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(140px, 22vw, 320px); line-height: 0.9; letter-spacing: -0.04em; color: rgba(35,42,49, 0.055); pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; } @media (max-width: 768px) { .hero-watermark { font-size: clamp(96px, 30vw, 200px); top: 24px; right: -4vw; } } /* Soft fade from hero into the section below — matches bg-surface/60 (#FAFAF8 @ 60%) exactly. Uses ::before so it does not collide with the noise-texture ::after defined later in the file. */ .blob-wrap::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 45vh; background: linear-gradient(to bottom, rgba(241, 236, 227, 0) 0%, rgba(241, 236, 227, 0.4) 40%, rgba(241, 236, 227, 0.7) 80%, rgba(241, 236, 227, 0.78) 100%); pointer-events: none; z-index: 2; } /* Tab switcher — full-width strip with thin dividers + pink top-bar indicator */ .tabs { display: grid; grid-template-columns: repeat(var(--tab-count, 3), 1fr); border-top: 1px solid #E5E5E2; border-bottom: 1px solid #E5E5E2; position: relative; } .tab { text-align: left; padding: 24px 24px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; font-weight: 400; color: #586069; background: transparent; border: 0; border-left: 1px solid #E5E5E2; position: relative; cursor: pointer; transition: color .3s ease; } .tab:first-child { border-left: 0; } .tab:hover { color: #232A31; } .tab.is-active { color: #232A31; font-weight: 700; } .tab::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: #1B3A5B; transform: scaleX(var(--tab-progress, 0)); transform-origin: left center; transition: transform 90ms linear; } .tab::after { display: none; } .tab.is-active::before { transform: scaleX(1); } .tab-panel { display: none; } .tab-panel.is-active { display: block; animation: page-fade .55s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Scroll-driven progress bar under pinned-section tabs */ .scroll-progress { position: relative; width: 100%; height: 2px; background: rgba(35,42,49,0.08); overflow: hidden; border-radius: 2px; } .scroll-progress__bar { height: 100%; width: calc(var(--scroll-progress, 0) * 100%); background: #1B3A5B; transition: width 90ms linear; } .case-section .scroll-progress { background: rgba(255,255,255,0.12); } /* Pill tabs (case study) */ .pill-tabs { display: inline-flex; gap: 10px; padding: 6px; background: #FAFAF8; border-radius: 999px; } .pill-tab { position: relative; overflow: hidden; padding: 10px 20px; border-radius: 999px; font-size: 13px; color: rgba(35,42,49,0.65); background: transparent; border: 0; cursor: pointer; transition: color .25s ease, background .35s cubic-bezier(0.2,0.8,0.2,1); } .pill-tab:hover { color: #232A31; } .pill-tab.is-active { background: #232A31; color: #FAFAF8; } .pill-tab::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(122,152,191,0.85); transform: scaleX(var(--tab-progress, 0)); transform-origin: left center; transition: transform 90ms linear; pointer-events: none; } .case-section.is-armed .pill-tab.is-active::after { animation: pill-progress 6.5s linear forwards; } .case-section.is-armed .pill-tabs.is-paused .pill-tab.is-active::after { animation-play-state: paused; } @keyframes pill-progress { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .case-section.is-armed .pill-tab.is-active::after { animation: none; transform: scaleX(1); opacity: 0.35; } } /* Row-style capability cards */ .cap-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 14px; transition: background .35s ease, border-color .35s ease, transform .35s cubic-bezier(0.2,0.8,0.2,1); } .cap-row:hover { background: #E5E5E2; border-color: #1B3A5B; transform: translateY(-2px); } .cap-row__title { font-family: 'Source Sans 3', sans-serif; font-weight: 700; color: #232A31; font-size: 15px; letter-spacing: -0.01em; } .cap-row__icon { width: 36px; height: 36px; background: #232A31; color: #FAFAF8; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .35s cubic-bezier(0.2,0.8,0.2,1), background .25s ease; } .cap-row:hover .cap-row__icon { transform: rotate(90deg); background: #FAFAF8; color: #1B3A5B; } /* Dark gradient footer */ .footer-dark { position: relative; background: radial-gradient(120% 90% at 50% 100%, #232A31 0%, #232A31 40%, #232A31 80%); color: rgba(255,255,255,0.72); overflow: hidden; } .footer-dark::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; pointer-events: none; } .footer-dark .wordmark, .footer-dark .h-light { color: #FAFAF8; } .footer-dark a { color: rgba(255,255,255,0.85); } .footer-dark a:hover { color: #FAFAF8; } .footer-link-big { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.18); font-family: 'Fraunces', Georgia, serif; font-size: clamp(40px, 5vw, 64px); color: #FAFAF8; line-height: 1; transition: padding-left .4s cubic-bezier(0.2,0.8,0.2,1); } .footer-link-big:hover { padding-left: 12px; } .footer-link-big__arrow { width: 56px; height: 56px; border-radius: 999px; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; transition: background .3s ease, transform .4s cubic-bezier(0.2,0.8,0.2,1); } .footer-link-big:hover .footer-link-big__arrow { background: #1B3A5B; transform: rotate(-35deg); color: #FAFAF8; } /* Hero brand-backbone card */ .backbone-card { background: rgba(35,42,49,0.92); color: #FAFAF8; border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; width: 440px; max-width: calc(100vw - 48px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 40px -18px rgba(0,0,0,0.45); } /* CTA gradient (matches footer warmth) */ .cta-warm { background: radial-gradient(120% 100% at 50% 0%, #E5E5E2 0%, #E5E5E2 45%, #1B3A5B 100%); } /* Sections size to their content + padding — no enforced viewport floor */ .section-full { min-height: 0; } /* Section heading split layout */ .heading-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end; } @media (max-width: 900px) { .heading-split { grid-template-columns: 1fr; gap: 24px; } } /* Why Built Logic: sit the CTA on the heading baseline (button-only right column) */ .capabilities-section .heading-split .max-w-md { align-self: end; } .capabilities-section .heading-split .max-w-md .hero-btn { margin-top: 0; } /* ========================================================= PINNED PILLAR SECTION — scroll-driven tab advance ========================================================= */ .pinned-section { position: relative; /* Click-to-switch tabs, no scroll-jacking: normal flow height. */ height: auto; } .pinned-section::before { content: ''; position: absolute; left: -120px; bottom: 8vh; width: 380px; height: 380px; pointer-events: none; z-index: 0; opacity: 0.07; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; } .pinned-sticky { position: static; display: flex; flex-direction: column; padding-bottom: 48px; } .pinned-panels { position: relative; min-height: 540px; } .pinned-panel { display: none; padding-top: clamp(32px, 3.2vw, 48px); } .pinned-panel.is-active { display: block; animation: pinned-panel-in .45s cubic-bezier(0.2,0.85,0.2,1); } @keyframes pinned-panel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Stagger reveal inside an activated panel */ .panel-reveal > * { opacity: 0; transform: translateY(20px); transition: opacity .75s cubic-bezier(0.2,0.85,0.2,1), transform .75s cubic-bezier(0.2,0.85,0.2,1); } .is-active .panel-reveal > *:nth-child(1) { transition-delay: 0.08s; } .is-active .panel-reveal > *:nth-child(2) { transition-delay: 0.18s; } .is-active .panel-reveal > *:nth-child(3) { transition-delay: 0.28s; } .is-active .panel-reveal > *:nth-child(4) { transition-delay: 0.38s; } .is-active .panel-reveal > *:nth-child(5) { transition-delay: 0.48s; } .is-active .panel-reveal > *:nth-child(6) { transition-delay: 0.56s; } .is-active .panel-reveal > * { opacity: 1; transform: none; } /* Per-item stagger inside the products list */ .is-active .panel-reveal .pillar-list li { opacity: 0; transform: translateY(14px); animation: pillar-list-in .6s cubic-bezier(0.2,0.85,0.2,1) forwards; } .is-active .panel-reveal .pillar-list li:nth-child(1) { animation-delay: 0.40s; } .is-active .panel-reveal .pillar-list li:nth-child(2) { animation-delay: 0.48s; } .is-active .panel-reveal .pillar-list li:nth-child(3) { animation-delay: 0.56s; } .is-active .panel-reveal .pillar-list li:nth-child(4) { animation-delay: 0.64s; } .is-active .panel-reveal .pillar-list li:nth-child(5) { animation-delay: 0.72s; } @keyframes pillar-list-in { to { opacity: 1; transform: none; } } /* Method-stage detail — lifts the "what we …" list onto an elevated Soft Stone surface, filling the right of the panel and restoring depth on the uniform off-white. */ .pillar-panel { background: rgba(216, 210, 199, 0.40); border: 1px solid #E5E5E2; border-radius: 14px; padding: 24px 30px 14px; box-shadow: 0 1px 0 rgba(35,42,49,0.04), 0 18px 38px -26px rgba(35,42,49,0.20); } .pillar-panel .pillar-list li { border-bottom: 1px solid rgba(35,42,49,0.10); } .pillar-panel .pillar-list li:last-child { border-bottom: none; } /* ========================================================= CASE SECTION — dark full-viewport chapter The section is a normal stacked block (no sticky, no wrapper). As the user scrolls past the services section, this dark section enters from below with a hard horizontal boundary and takes over the viewport. ========================================================= */ .case-section { position: relative; min-height: 100vh; background: #232A31; color: rgba(255,255,255,0.78); } /* Top-biased editorial layout: heading sits in the upper third of the dark section so it's visible the moment the dark panel begins entering from the bottom — but with enough top room to clear the floating nav. */ .case-section > .max-w-shell { padding-top: 72px !important; padding-bottom: 72px !important; } @media (min-width: 768px) { .case-section > .max-w-shell { padding-top: 96px !important; padding-bottom: 96px !important; } } .case-section .h-display, .case-section .h-display em { color: #FAFAF8; } .case-section .text-body, .case-section .text-ink { color: rgba(255,255,255,0.78); } .case-section blockquote, .case-section figcaption { color: rgba(255,255,255,0.85); } .case-section figcaption.text-ink { color: #FAFAF8; } .case-section figure { border-color: rgba(255,255,255,0.16) !important; } .case-section h3.h-display { color: #FAFAF8; } /* White case card on the dark scene (inverted) */ .case-section .case-card { background: var(--bl-panel-solid); color: var(--bl-deep-slate); border-radius: 22px; padding: 56px 32px; min-height: 360px; } .case-section .case-card p, .case-section .case-card .font-display { color: var(--bl-deep-slate); } /* Photo variant of the case-card (founder portrait) */ .case-section .case-card.case-card--photo { padding: 0; overflow: hidden; } .case-section .case-card.case-card--photo img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; } /* Pill row adapted for dark scene */ .case-section .pill-tabs { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); } .case-section .pill-tab { color: rgba(255,255,255,0.55); } .case-section .pill-tab:hover { color: #FAFAF8; } .case-section .pill-tab.is-active { background: #232A31; color: #FAFAF8; } /* Capabilities sits directly after the dark section — keep the seam clean */ .case-section + section { position: relative; z-index: 1; } @media (max-width: 768px) { .case-section { min-height: 100vh; } } /* Short-viewport desktops/laptops (e.g. 1280×720): compress the dark case scene so the longest panel (Brand Transformation's quote) fits within 100 vh without growing the section past the takeover viewport. */ @media (min-width: 768px) and (max-height: 800px) { .case-section > .max-w-shell { padding-top: 80px !important; padding-bottom: 56px !important; } .case-section .case-card { padding: 36px 28px; min-height: 280px; } .case-section blockquote { font-size: 14px !important; line-height: 1.65 !important; } .case-section figure { margin-top: 24px !important; padding-top: 20px !important; } } /* Softer, slower panel transition (case-section only) */ .case-section .tab-panel.is-active { animation: case-panel-in .9s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes case-panel-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Scroll-progress staged reveal: as the dark section enters the viewport, heading appears first, pills second, then the case content. Driven by CSS variables set in app.js. The tab-panel.is-active animation above handles per-tab transitions; the wrapper handles the scroll-led reveal. */ .case-section { --case-heading-opacity: 0; --case-heading-y: 22px; --case-pills-opacity: 0; --case-pills-y: 24px; --case-content-opacity: 0; --case-content-y: 32px; } .case-section .case-heading { opacity: var(--case-heading-opacity); transform: translateY(var(--case-heading-y)); will-change: opacity, transform; } .case-section .case-pill-row { opacity: var(--case-pills-opacity); transform: translateY(var(--case-pills-y)); will-change: opacity, transform; } .case-section .case-content-reveal { opacity: var(--case-content-opacity); transform: translateY(var(--case-content-y)); will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .case-section .tab-panel.is-active { animation: none; } .case-section .case-heading, .case-section .case-pill-row, .case-section .case-content-reveal { opacity: 1 !important; transform: none !important; } } /* ========================================================= HERO — continuous client marquee inside backbone-card ========================================================= */ .client-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } .client-marquee__track { display: flex; align-items: center; gap: 18px; width: max-content; animation: client-marquee 32s linear infinite; will-change: transform; color: #FAFAF8; } .client-marquee:hover .client-marquee__track { animation-play-state: paused; } .client-marquee__track > span { flex: 0 0 auto; white-space: nowrap; } .client-marquee__track > i { flex: 0 0 auto; width: 1px; height: 14px; background: rgba(255,255,255,0.18); } @keyframes client-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .client-marquee__track { animation: none; } } /* ========================================================= CAPABILITY CARDS — in-place hover expansion ========================================================= */ .cap-row { display: grid; grid-template-rows: auto 0fr; gap: 0; align-items: start; background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 14px; padding: 22px 26px; transition: grid-template-rows .75s cubic-bezier(0.2,0.85,0.2,1), background-color .55s ease, color .55s ease, border-color .55s ease, transform .55s cubic-bezier(0.2,0.85,0.2,1); text-decoration: none; color: #232A31; } .cap-row:hover { grid-template-rows: auto 1fr; background: #232A31; border-color: #232A31; color: #FAFAF8; transform: translateY(-2px); } .cap-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cap-row__title { font-family: 'Source Sans 3', sans-serif; font-weight: 700; color: inherit; font-size: 15px; letter-spacing: -0.01em; } .cap-row__icon { width: 36px; height: 36px; background: #232A31; color: #FAFAF8; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .55s cubic-bezier(0.2,0.85,0.2,1), background-color .4s ease, color .4s ease; } .cap-row:hover .cap-row__icon { background: #FAFAF8; color: #1B3A5B; transform: rotate(90deg); } .cap-row__desc { overflow: hidden; opacity: 0; transition: opacity .5s ease .2s; } .cap-row:hover .cap-row__desc { opacity: 1; } .cap-row__desc-inner { padding-top: 14px; font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 320px; } /* ========================================================= FOOTER SHELL — dark banner + white card overlay ========================================================= */ .footer-shell { position: relative; background: var(--bl-deep-slate); color: var(--bl-off-white); padding: 100px 0 28px; overflow: hidden; } .footer-shell .h-display, .footer-shell .h-display em { color: var(--bl-off-white); } .footer-shell__cta { text-align: center; padding: 40px 24px 100px; } .footer-shell__cta-btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 38px; color: var(--bl-off-white); font-size: 13px; font-weight: 400; font-style: italic; font-family: 'Fraunces', system-ui, sans-serif; } .footer-card { max-width: 1180px; margin: 0 auto; background: var(--bl-panel-solid); border-radius: 28px; padding: 44px 48px; color: var(--bl-deep-slate); display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } @media (max-width: 900px) { .footer-card { grid-template-columns: 1fr; gap: 36px; padding: 32px; } } .footer-link-row { display: flex; align-items: center; justify-content: flex-end; padding: 22px 4px; font-family: 'Fraunces', Georgia, serif; font-size: 30px; color: var(--bl-deep-slate); text-decoration: none; transition: padding-right .4s cubic-bezier(0.2,0.85,0.2,1), color .25s ease; } .footer-link-row:hover { padding-right: 14px; color: var(--bl-signal-amber); } /* Footer social icon hover — stroke + border to accent */ .footer-card a[aria-label="LinkedIn"] svg path, .footer-card a[aria-label*="Email"] svg path, .footer-card a[aria-label="Phone"] svg path { transition: stroke .25s ease; } .footer-card a[aria-label="LinkedIn"]:hover svg path, .footer-card a[aria-label*="Email"]:hover svg path, .footer-card a[aria-label="Phone"]:hover svg path { stroke: var(--bl-signal-amber); } .footer-card a[aria-label="LinkedIn"], .footer-card a[aria-label*="Email"], .footer-card a[aria-label="Phone"] { transition: border-color .25s ease, background-color .35s ease; } .footer-card a[aria-label="LinkedIn"]:hover, .footer-card a[aria-label*="Email"]:hover, .footer-card a[aria-label="Phone"]:hover { border-color: var(--bl-signal-amber); } .footer-link-row__arrow { width: 34px; height: 34px; border-radius: 999px; background: var(--bl-deep-slate); color: var(--bl-off-white); display: inline-flex; align-items: center; justify-content: center; transition: background-color .3s ease, transform .4s cubic-bezier(0.2,0.85,0.2,1), color .3s ease; } .footer-link-row:hover .footer-link-row__arrow { background: var(--bl-signal-amber); color: var(--bl-deep-slate); transform: rotate(-25deg); } .footer-shell__bottom { max-width: 1180px; margin: 32px auto 0; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--bl-dark-muted); } .footer-shell__bottom a { color: var(--bl-dark-muted); } .footer-shell__bottom a:hover { color: var(--bl-off-white); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .marquee__track { animation: none; } .mask-reveal { -webkit-clip-path: none; clip-path: none; } .mask-reveal img { transform: none; } .page-fade { opacity: 1; transform: none; animation: none; } } /* ========================================================= ABOUT PAGE — scoped components ========================================================= */ /* Hero at-a-glance card */ .about-card { background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 24px; padding: 30px 32px 28px; box-shadow: 0 1px 0 rgba(35,42,49,0.04), 0 18px 40px -28px rgba(35,42,49,0.18); } .about-card__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #E5E5E2; } .about-card__eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #586069; } .about-card__year { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #1B3A5B; } .about-card__list { margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; } .about-card__row { display: grid; grid-template-columns: 120px 1fr; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(216, 210, 199, 0.6); } .about-card__row:last-of-type { border-bottom: none; } .about-card__row dt { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; margin: 0; } .about-card__row dd { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: #232A31; } .about-card__row dd em { color: #1B3A5B; font-style: italic; } .about-card__sep { color: #586069; padding: 0 4px; } .about-card__pull { margin-top: 18px; padding-top: 18px; border-top: 1px solid #E5E5E2; font-size: 13px; color: #586069; line-height: 1.65; font-style: italic; } @media (max-width: 640px) { .about-card { padding: 24px 22px 22px; border-radius: 20px; } .about-card__row { grid-template-columns: 104px 1fr; gap: 14px; } .about-card__row dd { font-size: 17px; } } /* About stat card — single cited figure variant */ .about-stat { padding-top: 8px; } .about-stat__figure { margin: 10px 0 0; font-family: 'Fraunces', system-ui, sans-serif; font-weight: 600; font-size: 84px; line-height: 0.95; letter-spacing: -0.04em; color: #1B3A5B; } .about-stat__pct { font-size: 0.5em; font-weight: 500; margin-left: 2px; } .about-stat__lead { margin: 16px 0 0; max-width: 320px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 17px; line-height: 1.5; color: #232A31; } .about-stat__sub { margin: 12px 0 0; max-width: 320px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; color: #586069; } .about-stat__cite { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #E5E5E2; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.1em; color: #586069; } @media (max-width: 640px) { .about-stat__figure { font-size: 64px; } } /* Engagements — three-tier "ways to work with us" block */ .engagements { display: flex; align-items: stretch; margin-top: 56px; } .eng-card { flex: 1; background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 18px; padding: 30px 28px 26px; display: flex; flex-direction: column; position: relative; transition: transform .35s cubic-bezier(0.2,0.85,0.2,1), border-color .3s ease, box-shadow .35s ease; } .eng-card:hover { transform: translateY(-6px) scale(1.025); border-color: #1B3A5B; z-index: 2; box-shadow: 0 1px 0 rgba(35,42,49,0.04), 0 22px 44px -24px rgba(35,42,49,0.22); } .eng-card__top { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: 16px; } .eng-card__num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.16em; color: #586069; } .eng-card__tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #1B3A5B; background: rgba(27,58,91,0.08); border: 1px solid rgba(27,58,91,0.3); padding: 4px 10px; border-radius: 100px; } .eng-card__name { font-family: 'Fraunces', system-ui, sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: #232A31; } .eng-card__summary { margin-top: 12px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: #586069; } .eng-card__divider { height: 1px; background: #E5E5E2; margin: 22px 0 18px; } .eng-card__label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; margin-bottom: 12px; } .eng-card__list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; } .eng-card__list li { position: relative; padding-left: 18px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13.5px; line-height: 1.5; color: #232A31; } .eng-card__list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 9px; height: 1.5px; background: #E5E5E2; } .eng-card__entry { margin-top: auto; padding-top: 18px; font-size: 12.5px; line-height: 1.55; color: #586069; font-style: italic; } .eng-arrow { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; color: #E5E5E2; } @media (max-width: 860px) { .engagements { flex-direction: column; } .eng-arrow { flex: 0 0 36px; transform: rotate(90deg); } } /* FAQ accordion (contact page) */ .faq-list { margin-top: 48px; border-top: 1px solid #E5E5E2; } .faq-item { border-bottom: 1px solid #E5E5E2; } .faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px 2px; font-family: 'Fraunces', system-ui, sans-serif; font-weight: 500; font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; color: #232A31; transition: color .2s ease; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::marker { content: ''; } .faq-item > summary:hover { color: #1B3A5B; } .faq-item__icon { flex-shrink: 0; color: #586069; transition: transform .35s cubic-bezier(0.2,0.85,0.2,1), color .2s ease; } .faq-item[open] .faq-item__icon { transform: rotate(45deg); color: #1B3A5B; } .faq-item__answer { padding: 0 2px 28px; max-width: 760px; } .faq-item__answer p { font-size: 15px; line-height: 1.8; color: #586069; } .faq-item[open] .faq-item__answer { animation: faq-in .4s cubic-bezier(0.2,0.85,0.2,1); } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .faq-item > summary { font-size: 17px; padding: 22px 2px; gap: 18px; } } /* How-to-reach-us booking button (contact page) — opens Cal popup */ .contact-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 26px; cursor: pointer; padding: 15px 24px; border-radius: 100px; background: #1B3A5B; color: #FAFAF8; font-family: 'Fraunces', system-ui, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; transition: background .2s ease, transform .25s cubic-bezier(0.2,0.85,0.2,1); } .contact-card__cta:hover { background: #232A31; transform: translateY(-2px); } .contact-card__cta:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; } /* Principle rows — top-rule editorial treatment */ .principle-grid { margin-top: 4px; } .principle-row { border-top: 1px solid #E5E5E2; padding-top: 26px; padding-bottom: 32px; display: grid; grid-template-columns: 60px 1fr; column-gap: 18px; row-gap: 12px; align-items: start; transition: border-top-color .35s ease; } .principle-row:hover { border-top-color: #1B3A5B; } .principle-row__num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: #1B3A5B; letter-spacing: 0.06em; padding-top: 8px; grid-row: 1 / span 2; } .principle-row__title { font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1.18; letter-spacing: -0.015em; color: #232A31; margin: 0; } .principle-row__body { grid-column: 2; font-size: 14.5px; color: #586069; line-height: 1.8; margin: 0; } @media (max-width: 640px) { .principle-row { padding-top: 22px; padding-bottom: 24px; grid-template-columns: 48px 1fr; } .principle-row__title { font-size: 22px; } } /* Stat cards — refined, mono label, restrained */ .stat-card { border-top: 2px solid #232A31; padding: 22px 24px 0 0; display: flex; flex-direction: column; gap: 14px; transition: border-top-color .35s ease; } .stat-card:hover { border-top-color: #1B3A5B; } .stat-card__label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; } .stat-card__num { font-family: 'Fraunces', Georgia, serif; font-size: 52px; line-height: 1; color: #232A31; letter-spacing: -0.02em; } .stat-card__body { font-size: 13.5px; color: #586069; line-height: 1.7; margin: 0; } .stat-card__source { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #586069; margin: 4px 0 0; } .stat-card__source a { color: inherit; text-decoration: underline; text-decoration-color: #E5E5E2; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; } .stat-card__source a:hover { color: #1B3A5B; text-decoration-color: #1B3A5B; } /* Team — typographic editorial roster (no portrait placeholders) */ .team-roster { list-style: none; padding: 0; margin: 0; } .team-row { display: grid; grid-template-columns: 1fr 1.5fr; column-gap: 40px; align-items: baseline; padding: 36px 0 38px; border-top: 1px solid #E5E5E2; transition: padding-left .4s cubic-bezier(0.2, 0.8, 0.2, 1), border-top-color .35s ease; } .team-row:last-child { border-bottom: 1px solid #E5E5E2; } .team-row:hover { padding-left: 10px; border-top-color: #1B3A5B; } .team-row:hover + .team-row { border-top-color: #1B3A5B; } .team-row__num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: #1B3A5B; letter-spacing: 0.06em; padding-top: 12px; } .team-row__name { font-family: 'Fraunces', Georgia, serif; font-size: 40px; line-height: 1.02; color: #232A31; letter-spacing: -0.02em; margin: 0; } .team-row__role { margin-top: 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; } .team-row__bio { font-size: 15px; color: #586069; line-height: 1.85; margin: 0; max-width: 480px; } @media (max-width: 900px) { .team-row { grid-template-columns: 1fr; row-gap: 12px; padding: 26px 0 28px; } .team-row__bio { grid-column: 1 / -1; } .team-row__name { font-size: 28px; } .team-row:hover { padding-left: 0; } } @media (max-width: 500px) { .team-row { grid-template-columns: 1fr; column-gap: 18px; } .team-row__name { font-size: 24px; } } /* Selected work — dark unified case module */ .about-case { background: #232A31; color: rgba(255, 255, 255, 0.82); border-radius: 28px; overflow: hidden; box-shadow: 0 1px 0 rgba(35,42,49,0.04), 0 30px 60px -36px rgba(26,22,18,0.45); } .about-case__inner { display: grid; grid-template-columns: 5fr 7fr; gap: 0; } .about-case__copy { padding: 48px 44px 48px 48px; background: #FAFAF8; color: #232A31; } .about-case__copy .tag { background: #FAFAF8; border-color: #E5E5E2; } .about-case__scene { display: flex; flex-direction: column; background: #232A31; } .about-case__image { position: relative; flex: 1; border-radius: 0; background: #232A31; aspect-ratio: 5 / 4; overflow: hidden; } .about-case__image::after { display: none; } .about-case__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-case__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.08); } .about-case__metric { background: #232A31; padding: 28px 24px 30px; display: flex; flex-direction: column; gap: 12px; transition: background-color .3s ease; } .about-case__metric:hover { background: #232A31; } .about-case__metric-num { font-family: 'Fraunces', Georgia, serif; font-size: 34px; line-height: 1; color: #FAFAF8; letter-spacing: -0.02em; } .about-case__metric-arrow { color: #1B3A5B; } .about-case__metric-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); line-height: 1.5; } @media (max-width: 960px) { .about-case__inner { grid-template-columns: 1fr; } .about-case__copy { padding: 36px 28px; } .about-case__image { aspect-ratio: 5 / 3.5; } .about-case__metrics { grid-template-columns: 1fr; } } @media (max-width: 500px) { .about-case__copy { padding: 28px 22px; } .about-case__metric { padding: 22px 22px 24px; } } /* ========================================================= INSIGHTS PAGE — scoped components ========================================================= */ /* Featured insight (hero right column) */ .featured-insight { display: block; background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 24px; overflow: hidden; text-decoration: none; color: #232A31; transition: border-color .35s ease, transform .4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .4s ease; box-shadow: 0 1px 0 rgba(35,42,49,0.04), 0 18px 40px -28px rgba(35,42,49,0.18); } .featured-insight:hover { border-color: #1B3A5B; transform: translateY(-3px); box-shadow: 0 1px 0 rgba(35,42,49,0.04), 0 28px 50px -28px rgba(35,42,49,0.24); } .featured-insight:focus-visible { outline: 2px solid #232A31; outline-offset: 4px; } .featured-insight__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background-image: linear-gradient(165deg, rgba(35,42,49,0.40) 0%, rgba(35,42,49,0.86) 100%), url('/assets/patterns/pattern-diagnosis.png'); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 36px; } .featured-insight__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; opacity: 0.32; } .featured-insight__media-edition { position: relative; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,250,248, 0.72); margin-bottom: 14px; } .featured-insight__media-quote { position: relative; display: block; font-family: 'Fraunces', Georgia, serif; color: #FAFAF8; line-height: 0.92; letter-spacing: -0.035em; font-size: 110px; } .featured-insight__media-line { display: block; word-break: break-word; hyphens: auto; } .featured-insight__media-line em { font-style: italic; color: #AFC4DD; } .featured-insight__media-foot { position: relative; margin-top: 14px; font-size: 12px; line-height: 1.55; color: rgba(250,250,248, 0.78); max-width: 360px; font-family: 'Source Sans 3', system-ui, sans-serif; } .featured-insight__badge { position: absolute; top: 18px; right: 18px; background: #232A31; color: #FAFAF8; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; z-index: 1; } @media (min-width: 1280px) { .featured-insight__media { padding: 32px 40px; } .featured-insight__media-quote { font-size: 50px; } } @media (max-width: 640px) { .featured-insight__media { padding: 22px 22px; } .featured-insight__media-quote { font-size: 84px; line-height: 0.95; letter-spacing: -0.03em; } .featured-insight__media-foot { font-size: 11.5px; } } @media (max-width: 360px) { .featured-insight__media { padding: 18px 18px; } .featured-insight__media-quote { font-size: 64px; line-height: 1; letter-spacing: -0.025em; } .featured-insight__media-edition { font-size: 10px; letter-spacing: 0.16em; } .featured-insight__media-foot { font-size: 11px; line-height: 1.5; } } .featured-insight__body { padding: 32px 36px 36px; } .featured-insight__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #586069; } .featured-insight__cat { color: #1B3A5B; } .featured-insight__dot { width: 3px; height: 3px; border-radius: 50%; background: #586069; } .featured-insight__title { margin-top: 18px; font-family: 'Fraunces', Georgia, serif; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: #232A31; } .featured-insight__title em { font-style: italic; color: #1B3A5B; } .featured-insight__excerpt { margin-top: 16px; font-size: 15px; color: #586069; line-height: 1.8; max-width: 520px; } .featured-insight__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13.5px; font-weight: 700; color: #232A31; } .featured-insight__arrow { display: inline-flex; width: 30px; height: 30px; background: #1B3A5B; color: #232A31; border-radius: 999px; align-items: center; justify-content: center; transition: background .25s ease, transform .35s cubic-bezier(0.2, 0.8, 0.2, 1); } .featured-insight:hover .featured-insight__arrow { background: #1B3A5B; transform: translate(2px, -2px); } @media (min-width: 1024px) { .featured-insight__title { font-size: 36px; } .featured-insight__body { padding: 36px 40px 40px; } } @media (max-width: 640px) { .featured-insight__body { padding: 26px 24px 28px; } .featured-insight__title { font-size: 26px; } } /* Filter chips */ .insights-filter { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { appearance: none; border: 1px solid #E5E5E2; background: #FAFAF8; color: #232A31; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-family: 'Source Sans 3', system-ui, sans-serif; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; } .filter-chip:hover { background: #E5E5E2; border-color: #1B3A5B; color: #232A31; } .filter-chip.is-active { background: #232A31; color: #FAFAF8; border-color: #232A31; } .filter-chip.is-active:hover { background: #232A31; color: #FAFAF8; border-color: #232A31; } .filter-chip:focus-visible { outline: 2px solid #232A31; outline-offset: 3px; } /* Insight cards (text-led editorial) */ .insight-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 720px) { .insight-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (min-width: 1024px) { .insight-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .insight-card { background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 20px; transition: border-color .35s ease, transform .4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .4s ease; position: relative; overflow: hidden; } .insight-card[hidden] { display: none !important; } .insight-card:hover { border-color: #1B3A5B; transform: translateY(-3px); box-shadow: 0 1px 0 rgba(35,42,49,0.04), 0 22px 40px -28px rgba(35,42,49,0.22); } .insight-card__link { display: flex; flex-direction: column; height: 100%; padding: 0 28px 26px; text-decoration: none; color: #232A31; } .insight-card__link:focus-visible { outline: 2px solid #232A31; outline-offset: -2px; border-radius: 18px; } .insight-card__index { display: flex; align-items: baseline; gap: 10px; margin: 0 -28px 0; padding: 22px 28px 20px; background: radial-gradient(120% 80% at 100% 100%, rgba(27,58,91, 0.10), transparent 65%), linear-gradient(180deg, #FAFAF8 0%, #FAFAF8 100%); border-bottom: 1px solid rgba(216, 210, 199, 0.7); font-family: 'Fraunces', Georgia, serif; font-size: 32px; line-height: 1; letter-spacing: -0.025em; color: #232A31; transition: background .35s ease; } .insight-card__index::before { content: 'Nº'; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #1B3A5B; font-weight: 500; position: relative; top: -10px; } .insight-card:hover .insight-card__index { background: radial-gradient(120% 80% at 100% 100%, rgba(27,58,91, 0.18), transparent 65%), linear-gradient(180deg, #FAFAF8 0%, #FAFAF8 100%); } .insight-card__meta { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #586069; } .insight-card__cat { color: #232A31; font-weight: 500; } .insight-card__dot { width: 3px; height: 3px; border-radius: 50%; background: #586069; } .insight-card__title { margin-top: 14px; font-family: 'Fraunces', Georgia, serif; font-size: 22px; line-height: 1.18; letter-spacing: -0.015em; color: #232A31; transition: color .25s ease; } .insight-card:hover .insight-card__title { color: #232A31; } .insight-card__excerpt { margin-top: 12px; font-size: 14px; color: #586069; line-height: 1.75; } .insight-card__cta { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(216, 210, 199, 0.6); display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: #232A31; letter-spacing: 0.02em; } .insight-card__arrow { display: inline-flex; width: 26px; height: 26px; background: #FAFAF8; color: #232A31; border-radius: 999px; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(0.2, 0.8, 0.2, 1); } .insight-card:hover .insight-card__arrow { background: #1B3A5B; transform: translateX(3px); } /* Load more button (insights only) */ .insights-load-more { appearance: none; background: transparent; border: 1px solid #232A31; color: #232A31; padding: 6px 6px 6px 22px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 14px; transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease; } .insights-load-more:hover { background: #232A31; color: #FAFAF8; transform: translateY(-1px); } .insights-load-more__arrow { display: inline-flex; width: 32px; height: 32px; background: #1B3A5B; color: #232A31; border-radius: 999px; align-items: center; justify-content: center; transition: background .25s ease, transform .35s cubic-bezier(0.2, 0.8, 0.2, 1); } .insights-load-more:hover .insights-load-more__arrow { background: #1B3A5B; transform: translateY(2px); } .insights-load-more:focus-visible { outline: 2px solid #232A31; outline-offset: 3px; } .insights-load-more[hidden] { display: none; } /* Empty filter state */ .insights-empty { margin-top: 24px; text-align: center; color: #586069; font-size: 14px; } .insights-empty[hidden] { display: none; } .insights-empty__link { appearance: none; background: none; border: none; padding: 0; color: #1B3A5B; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; } .insights-empty__link:hover { color: #1B3A5B; } /* Subscribe form */ .subscribe-grid { align-items: end; } @media (max-width: 1023px) { .subscribe-grid { gap: 36px; align-items: start; } } .subscribe-form { width: 100%; } .subscribe-form__label { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; margin-bottom: 14px; } .subscribe-form__row { display: flex; gap: 12px; background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 999px; padding: 5px 5px 5px 22px; align-items: center; transition: border-color .25s ease; } .subscribe-form__row:focus-within { border-color: #232A31; } .subscribe-form__input { flex: 1; appearance: none; border: none; background: transparent; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; color: #232A31; padding: 12px 0; outline: none; min-width: 0; } .subscribe-form__input::placeholder { color: #586069; } .subscribe-form__btn { display: inline-flex; align-items: center; gap: 10px; background: #1B3A5B; color: #232A31; border: none; border-radius: 999px; padding: 11px 22px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .25s ease, transform .25s cubic-bezier(0.2, 0.8, 0.2, 1); white-space: nowrap; } .subscribe-form__btn:hover { background: #1B3A5B; color: #232A31; transform: translateY(-1px); } .subscribe-form__btn:disabled { background: #232A31; color: #FAFAF8; cursor: default; transform: none; } .subscribe-form__btn[data-state="success"] { background: #232A31; color: #FAFAF8; } .subscribe-form__btn:focus-visible { outline: 2px solid #232A31; outline-offset: 3px; } .subscribe-form__arrow { display: inline-flex; width: 22px; height: 22px; border-radius: 999px; background: rgba(35,42,49, 0.12); align-items: center; justify-content: center; transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1); } .subscribe-form__btn:hover .subscribe-form__arrow { transform: translate(2px, -2px); } .subscribe-form__status { margin-top: 14px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; min-height: 1.2em; color: #586069; } .subscribe-form__status[data-state="error"] { color: #1B3A5B; } .subscribe-form__status[data-state="success"] { color: #232A31; } .subscribe-form__note { margin-top: 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; } @media (max-width: 480px) { .subscribe-form__row { flex-direction: column; align-items: stretch; padding: 14px; border-radius: 22px; } .subscribe-form__input { padding: 10px 4px; } .subscribe-form__btn { justify-content: center; } } /* ========================================================= CONTACT PAGE — scoped components ========================================================= */ .contact-form__req { color: #1B3A5B; margin-left: 2px; } /* Topic pills */ .contact-form__pills { border: 0; padding: 0; margin: 0; } .contact-form__pills legend { padding: 0; } .contact-pills { display: flex; flex-wrap: wrap; gap: 8px; } .contact-pill { position: relative; display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid #E5E5E2; border-radius: 999px; background: #FAFAF8; color: #232A31; font-size: 12.5px; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } .contact-pill input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .contact-pill:hover { background: #E5E5E2; border-color: #1B3A5B; } .contact-pill:has(input:focus-visible) { outline: 2px solid #232A31; outline-offset: 3px; } .contact-pill:has(input:checked) { background: #232A31; color: #FAFAF8; border-color: #232A31; } .contact-pill:has(input:checked):hover { background: #232A31; color: #FAFAF8; border-color: #232A31; } /* Textarea affordance */ .contact-form__textarea textarea { background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 14px; padding: 16px 18px; min-height: 160px; width: 100%; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 15px; color: #232A31; line-height: 1.7; resize: vertical; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; } .contact-form__textarea textarea::placeholder { color: #586069; } .contact-form__textarea textarea:focus { outline: none; background: #FAFAF8; border-color: #232A31; box-shadow: 0 0 0 3px rgba(35,42,49, 0.06); } /* Submit button */ .contact-form__submit { appearance: none; display: inline-flex; align-items: center; background: #1B3A5B; color: #FAFAF8; border: none; border-radius: 999px; padding: 14px 30px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background .25s ease, transform .25s ease, color .25s ease; } .contact-form__submit:hover { background: #232A31; color: #FAFAF8; transform: translateY(-1px); } .contact-form__submit:disabled { background: #232A31; color: #FAFAF8; cursor: default; transform: none; } .contact-form__submit[data-state="success"] { background: #232A31; color: #FAFAF8; } .contact-form__submit:focus-visible { outline: 2px solid #232A31; outline-offset: 3px; } /* Status message */ .contact-form__status { margin-top: 18px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; min-height: 1.2em; color: #586069; } .contact-form__status[data-state="error"] { color: #1B3A5B; } .contact-form__status[data-state="success"] { color: #232A31; } /* Right-side cards */ .contact-card { background: #FAFAF8; border: 1px solid #E5E5E2; border-radius: 22px; padding: 30px 32px 32px; box-shadow: 0 1px 0 rgba(35,42,49,0.04), 0 16px 36px -28px rgba(35,42,49,0.16); } .contact-card--tint { background: #E5E5E2; border-color: #E5E5E2; } .contact-card__list { list-style: none; padding: 0; margin: 0; } .contact-card__list li { padding: 16px 0; border-bottom: 1px solid rgba(216, 210, 199, 0.6); } .contact-card__list li:last-child { border-bottom: none; padding-bottom: 0; } .contact-card__list li:first-child { padding-top: 0; } .contact-card__label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; margin-bottom: 8px; } .contact-card__primary { font-family: 'Fraunces', system-ui, sans-serif; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: #232A31; text-decoration: none; transition: color .25s ease; font-weight: 400; font-style: italic; } .contact-card__primary:hover { color: #1B3A5B; } .contact-card__detail { font-size: 15px; color: #232A31; line-height: 1.6; } .contact-card__lead { font-family: 'Fraunces', Georgia, serif; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; color: #232A31; } .contact-card__lead em { color: #1B3A5B; font-style: italic; } .contact-card__body { margin-top: 12px; font-size: 14px; color: #586069; line-height: 1.75; } /* Good-fit firms list */ .contact-fit { list-style: none; padding: 0; margin: 0; } .contact-fit__row { display: grid; grid-template-columns: 1fr 1.4fr; column-gap: 40px; align-items: baseline; padding: 32px 0 34px; border-top: 1px solid #E5E5E2; transition: border-top-color .35s ease, padding-left .4s cubic-bezier(0.2, 0.8, 0.2, 1); } .contact-fit__row:last-child { border-bottom: 1px solid #E5E5E2; } .contact-fit__row:hover { border-top-color: #1B3A5B; padding-left: 10px; } .contact-fit__num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: #1B3A5B; letter-spacing: 0.06em; padding-top: 10px; } .contact-fit__title { font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; color: #232A31; margin: 0; } .contact-fit__body { font-size: 14.5px; color: #586069; line-height: 1.8; margin: 0; max-width: 460px; } @media (max-width: 900px) { .contact-fit__row { grid-template-columns: 1fr; row-gap: 12px; padding: 24px 0 26px; } .contact-fit__body { grid-column: 1 / -1; } .contact-fit__title { font-size: 22px; } .contact-fit__row:hover { padding-left: 0; } } @media (max-width: 640px) { .contact-card { padding: 24px 24px 26px; border-radius: 18px; } .contact-card__primary { font-size: 19px; } .contact-card__lead { font-size: 21px; } } /* ========================================================= HOMEPAGE — Marrow-reference fidelity corrections ========================================================= */ /* Global scroll padding so anchored jumps clear the floating nav. */ html { scroll-padding-top: 100px; } /* Hero headline — mixed italic-serif + sans-bold */ .hero-headline { color: #232A31; line-height: 1.02; letter-spacing: -0.025em; font-family: 'Source Sans 3', system-ui, sans-serif; } .hero-headline__serif { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.06em; letter-spacing: -0.02em; position: relative; top: -0.012em; } .hero-headline__serif em { font-style: italic; color: #232A31; } .hero-headline__sans { font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 400; letter-spacing: -0.035em; } /* Hero composition — fills the viewport; content centers, logo band pins to the bottom */ .hero-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; } /* Hero — Option C: animated mesh gradient. Multiple soft radial gradients in the brand palette, kept in the upper half, morphing slowly via animated custom properties (@property for smooth interpolation). */ @property --mg1x { syntax: ''; inherits: false; initial-value: 72%; } @property --mg1y { syntax: ''; inherits: false; initial-value: 22%; } @property --mg2x { syntax: ''; inherits: false; initial-value: 22%; } @property --mg2y { syntax: ''; inherits: false; initial-value: 18%; } @property --mg3x { syntax: ''; inherits: false; initial-value: 88%; } @property --mg3y { syntax: ''; inherits: false; initial-value: 38%; } @property --mg4x { syntax: ''; inherits: false; initial-value: 50%; } @property --mg4y { syntax: ''; inherits: false; initial-value: 8%; } .blob-wrap { --mg1x: 72%; --mg1y: 22%; --mg2x: 22%; --mg2y: 18%; --mg3x: 88%; --mg3y: 38%; --mg4x: 50%; --mg4y: 8%; background: radial-gradient(60vw 50vw at var(--mg1x) var(--mg1y), rgba(27, 58, 91, 0.14), transparent 65%), radial-gradient(55vw 45vw at var(--mg2x) var(--mg2y), rgba(88, 96, 105, 0.14), transparent 65%), radial-gradient(50vw 40vw at var(--mg3x) var(--mg3y), rgba(27, 58, 91, 0.10), transparent 60%), radial-gradient(40vw 32vw at var(--mg4x) var(--mg4y), rgba(229, 229, 226, 0.55), transparent 55%), linear-gradient(180deg, #FAFAF8 0%, #FAFAF8 60%, #FAFAF8 100%); animation: mesh-morph 32s ease-in-out infinite; } @keyframes mesh-morph { 0%, 100% { --mg1x: 72%; --mg1y: 22%; --mg2x: 22%; --mg2y: 18%; --mg3x: 88%; --mg3y: 38%; --mg4x: 50%; --mg4y: 8%; } 33% { --mg1x: 60%; --mg1y: 30%; --mg2x: 32%; --mg2y: 12%; --mg3x: 78%; --mg3y: 28%; --mg4x: 42%; --mg4y: 14%; } 66% { --mg1x: 82%; --mg1y: 14%; --mg2x: 14%; --mg2y: 26%; --mg3x: 94%; --mg3y: 46%; --mg4x: 58%; --mg4y: 4%; } } .blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); } .blob--pink { width: 56vw; height: 56vw; background: #1B3A5B; top: -18%; right: -10%; opacity: 0.18; } .blob--peach { width: 44vw; height: 44vw; background: #E5E5E2; top: 32%; right: 14%; opacity: 0.55; } .blob--rose { width: 30vw; height: 30vw; background: #1B3A5B; top: 8%; right: -2%; opacity: 0.14; } .blob--teal { width: 38vw; height: 38vw; background: #586069; top: 18%; right: -18%; opacity: 0.16; } .blob--cream { width: 38vw; height: 38vw; background: #FAFAF8; top: 4%; right: 30%; opacity: 0.55; } .blob-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.45; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; } /* Backbone proof card sits lower-right but never touches viewport bottom */ @media (min-width: 768px) { .backbone-card { width: 360px; padding: 16px 22px; gap: 12px; } } @media (min-width: 1024px) { .backbone-card { width: 420px; padding: 18px 24px; gap: 14px; } } /* Hero proof card wrapper — keep the dark card clear of the viewport floor at common 1440x900 framings without resizing the card itself. */ .hero-proof { z-index: 2; } /* Nav — slightly more compact, layered shadow so the pill reads as a deliberate floating object over body content rather than a thin overlap. */ .pill-nav { padding: 6px 8px 6px 22px; gap: 26px; background: var(--bl-off-white); box-shadow: 0 1px 0 rgba(35,42,49,0.05), 0 10px 24px -14px rgba(35,42,49,0.22), 0 22px 44px -22px rgba(35,42,49,0.18); } .pill-nav__wordmark img, .pill-nav__wordmark svg { height: 20px; } .pill-nav__links { gap: 24px; } /* Tabs — softer rules, lighter active indicator, more breathing room */ .tabs { border-top-color: var(--bl-line); border-bottom-color: var(--bl-line); } .tab { padding: 20px 22px; color: var(--bl-muted); border-left-color: var(--bl-line); } .tab::before { height: 2px; background: #1B3A5B; top: -1px; } /* Pinned section — tighter dwell, cleaner release */ .pinned-section { height: auto; } @media (max-width: 900px) { .pinned-section { height: auto; } } /* Dark case section — limit copy width + slightly tighter shell */ .case-section .case-copy { max-width: 560px; } .case-section > .max-w-shell { padding-top: 92px !important; padding-bottom: 80px !important; } @media (min-width: 768px) { .case-section > .max-w-shell { padding-top: 108px !important; padding-bottom: 96px !important; } } .case-section .case-card { padding: 44px 28px; min-height: 320px; } /* Capabilities — right-aligned arrow icons + tighter card body */ .cap-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cap-row__icon { margin-left: auto; } /* Insights teaser → footer transition: pull footer up slightly */ .footer-shell { margin-top: -40px; } .footer-shell__cta { /* Make sure the floating pill never overlaps the big CTA heading. max() respects the visual rhythm we want, but lifts the heading down whenever the nav-safe-area is larger. */ padding-top: max(96px, var(--nav-safe-area)); padding-bottom: 64px; } .footer-shell__cta .h-display { font-size: clamp(36px, 6vw, 76px); line-height: 1.05; letter-spacing: -0.025em; } .footer-shell__cta-btn { margin-top: 28px; } /* Mobile: keep the headline mix readable + composed proof card */ @media (max-width: 640px) { .hero-headline { line-height: 1.06; } .backbone-card { width: auto; max-width: calc(100vw - 48px); } } /* ---- Dark case-section: clear floating nav + tighter scene cadence ---- */ .case-section > .max-w-shell { padding-top: 92px !important; padding-bottom: 64px !important; } @media (min-width: 768px) { .case-section > .max-w-shell { padding-top: 104px !important; padding-bottom: 76px !important; } } /* Pull the case grid slightly closer to the pills row. */ .case-section .case-content-reveal .tab-panel.is-active { margin-top: 24px; } @media (min-width: 768px) { .case-section .case-content-reveal .tab-panel.is-active { margin-top: 28px; } } /* ---- Pinned services section: tighten dwell + clean release ---- */ .pinned-section { height: auto; } /* Case section has taller content (founder photo + multi-paragraph copy), so it needs more pinned scroll for Client 02 to fully load. */ .case-section.pinned-section { height: auto; } /* Primary pillars section has 4 tabs (vs the case section's 3), so 135vh left the final "Embed" panel only ~half the per-tab scroll of every other panel — the pin released while it was still revealing. Match the case section's per-tab dwell (~224px) across 4 tabs. Desktop only; mobile cascade untouched. */ @media (min-width: 901px) { .pinned-section:not(.case-section) { height: auto; } } .pinned-section::before { display: none; } /* removes decorative dot artefacts near the transition seam */ .pinned-sticky { padding-bottom: 12px; } .pinned-panels { overflow: hidden; } /* ---- Capabilities -> Insights: tighten the cream gap ---- */ .capabilities-section { padding-bottom: 0; } .insights-teaser-section { padding-top: 0; } .insights-teaser-section .reveal h2 { margin-top: 0; } /* ---- Insight teaser cards: tonal editorial media surface (no fake imagery) ---- */ .insight-teaser-card a { display: block; } .insight-teaser__media { position: relative; height: 220px; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.40), transparent 36%), radial-gradient(circle at 76% 72%, rgba(27,58,91,0.14), transparent 42%), linear-gradient(135deg, #FAFAF8 0%, #E5E5E2 100%); overflow: hidden; } .insight-teaser__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; opacity: 0.55; } .insight-teaser-card:nth-child(2) .insight-teaser__media { background: radial-gradient(circle at 24% 26%, rgba(255,255,255,0.35), transparent 38%), radial-gradient(circle at 80% 74%, rgba(105, 113, 110, 0.16), transparent 44%), linear-gradient(135deg, #FAFAF8 0%, #E5E5E2 100%); } .insight-teaser-card:nth-child(3) .insight-teaser__media { background: radial-gradient(circle at 28% 24%, rgba(255,255,255,0.34), transparent 36%), radial-gradient(circle at 78% 72%, rgba(27, 58, 91, 0.18), transparent 42%), linear-gradient(135deg, #FAFAF8 0%, #E5E5E2 100%); } @media (max-width: 768px) { .insight-teaser__media { height: 180px; } } .insight-teaser__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; color: rgba(27,58,91, 0.55); } .insight-teaser__icon svg { width: 72px; height: 72px; } .insight-teaser-card a:hover .insight-teaser__icon { color: rgba(27,58,91, 0.65); } .insight-teaser__icon { transition: color .35s ease; } .insight-teaser__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s cubic-bezier(0.2,0.85,0.2,1); } .insight-teaser-card a:hover .insight-teaser__img { transform: scale(1.04); } /* ============================================================ ARTICLE PAGES — /insights/[slug].html ============================================================ */ .article-hero { background: #FAFAF8; border-bottom: 1px solid rgba(35,42,49, 0.08); } .article-hero__back { display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; transition: color .2s ease; } .article-hero__back:hover { color: #1B3A5B; } .article-hero__title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(36px, 6vw, 64px); line-height: 1.1; letter-spacing: -0.025em; color: #232A31; font-weight: 400; margin: 0; } .article-hero__title em { font-style: italic; } .article-hero__meta { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #586069; } .article-hero__lead { margin-top: 32px; font-size: 19px; line-height: 1.6; color: #586069; font-family: 'Source Sans 3', system-ui, sans-serif; max-width: 720px; } /* Article body */ .article-body { background: #FAFAF8; } .article-body p { font-size: 16px; line-height: 1.85; color: #586069; margin: 0 0 22px; font-family: 'Source Sans 3', system-ui, sans-serif; } .article-body p:first-child { margin-top: 0; } .article-body h2 { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 24px; font-weight: 700; color: #232A31; letter-spacing: -0.02em; margin: 56px 0 18px; line-height: 1.25; } .article-body h2:first-child { margin-top: 0; } .article-body strong { color: #232A31; font-weight: 700; } .article-body em { font-style: italic; } .article-body a { color: #1B3A5B; text-decoration: underline; text-decoration-color: rgba(27,58,91, 0.4); text-underline-offset: 3px; transition: text-decoration-color .2s ease; } .article-body a:hover { text-decoration-color: #1B3A5B; } .article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 24px; } .article-body li { font-size: 16px; line-height: 1.85; color: #586069; margin-bottom: 6px; font-family: 'Source Sans 3', system-ui, sans-serif; } .article-body blockquote { border-left: 3px solid #1B3A5B; padding: 4px 0 4px 22px; margin: 32px 0; font-family: 'Fraunces', Georgia, serif; font-size: 22px; line-height: 1.5; color: #232A31; font-style: italic; } /* ---- Decorative numerals hidden on non-sequential lists (kept on engagements + principles) ---- */ .team-row__num, .contact-fit__num { display: none; } /* ---- Accessibility: focus-visible coverage (added 2026-05-30) ---- */ .pill-nav__links a:focus-visible { outline: 2px solid #232A31; outline-offset: 4px; border-radius: 3px; } .faq-item > summary:focus-visible { outline: 2px solid #232A31; outline-offset: 2px; border-radius: 4px; } .footer-card a:focus-visible { outline: 2px solid #232A31; outline-offset: 3px; border-radius: 6px; } .footer-shell__cta-btn:focus-visible { outline: 2px solid #FAFAF8; outline-offset: 4px; border-radius: 4px; } .contact-card__primary:focus-visible { outline: 2px solid #232A31; outline-offset: 3px; border-radius: 3px; } /* ---- Darker amber for SMALL text on light surfaces (WCAG AA: #1B3A5B ~4.7:1 on cream). Brand #1B3A5B kept for fills, icons, large display figures, heading accents, and dark backgrounds. ---- */ .about-card__year, .principle-row__num, .featured-insight__cat, .insight-card__index::before, .insights-load-more, .eng-card__tag, .subscribe-form__status[data-state="error"], .contact-form__status[data-state="error"], .contact-form__req, .article-body a { color: #1B3A5B; } .article-body a { text-decoration-color: rgba(27,58,91, 0.45); } .article-body a:hover { text-decoration-color: #1B3A5B; } /* Focus rings for the click-to-switch tabs */ .tab:focus-visible { outline: 2px solid #232A31; outline-offset: -3px; } .case-section .pill-tab:focus-visible { outline: 2px solid #FAFAF8; outline-offset: 2px; } /* ============================================================ HERO — two-column composition: copy + lead form ============================================================ */ .hero-grid { display: grid; gap: 40px; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.92fr); gap: clamp(36px, 5vw, 76px); } } .hero-headline { text-wrap: balance; } /* Hero CTAs — solid primary + outline secondary */ .hero-btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; padding: 14px 22px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } .hero-btn svg { transition: transform .3s cubic-bezier(.2,.8,.2,1); } .hero-btn--primary { background: #232A31; color: #FAFAF8; box-shadow: 0 14px 30px -16px rgba(35,42,49,0.55), 0 2px 6px -2px rgba(27,58,91,0.25); } .hero-btn--primary:hover { background: #233140; transform: translateY(-2px); } .hero-btn--primary:hover svg { transform: translateX(3px); } .hero-btn--primary:active { transform: translateY(0); } .hero-btn--ghost { background: transparent; color: #232A31; border-color: rgba(35,42,49,0.28); } .hero-btn--ghost:hover { border-color: #232A31; background: rgba(35,42,49,0.04); transform: translateY(-2px); } .hero-btn--ghost:active { transform: translateY(0); } .hero-btn:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; } /* Hero lead-form card — light, elevated, framed like the reference */ .hero-formwrap { width: 100%; } .hero-form { background: linear-gradient(168deg, #242C35 0%, #1A2736 100%); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; padding: clamp(18px, 2.2vw, 26px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 34px 70px -34px rgba(10,16,24,0.72), 0 12px 30px -18px rgba(27,58,91,0.5); } .hero-form__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9DB6CE; display: flex; align-items: center; gap: 10px; } .hero-form__title { font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(22px, 2.4vw, 27px); color: #F4F6F8; margin-top: 14px; text-wrap: balance; } .hero-form__title em { font-style: italic; color: #A9C3DA; } .hero-form__sub { font-size: 13.5px; line-height: 1.55; color: rgba(244,246,248,0.62); margin-top: 8px; } .hero-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 16px; } .hero-field { display: flex; flex-direction: column; } .hero-field[data-field="company"], .hero-field[data-field="challenge"] { grid-column: 1 / -1; } .hero-field label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,246,248,0.6); margin-bottom: 8px; } .hero-field__opt { color: rgba(244,246,248,0.42); } .hero-field input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 9px 13px; color: #F4F6F8; font-size: 14.5px; font-family: 'Source Sans 3', system-ui, sans-serif; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .hero-field input::placeholder { color: rgba(244,246,248,0.4); } .hero-field input:focus { outline: none; border-color: #9DB6CE; background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(157,182,206,0.2); } .hero-field.is-error input { border-color: #E2895A; background: rgba(226,137,90,0.12); } .hero-field__err { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #E2895A; margin-top: 6px; } .hero-form__submit { width: 100%; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #FAFAF8; color: #232A31; border: 1px solid #FAFAF8; border-radius: 11px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding: 13px 18px; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s ease, box-shadow .25s ease; box-shadow: 0 16px 32px -16px rgba(0,0,0,0.66); } .hero-form__submit svg { transition: transform .3s cubic-bezier(.2,.8,.2,1); } .hero-form__submit:hover { background: #FFFFFF; transform: translateY(-2px); } .hero-form__submit:hover svg { transform: translateX(3px); } .hero-form__submit:active { transform: translateY(0); } .hero-form__submit:focus-visible { outline: 2px solid #9DB6CE; outline-offset: 3px; } .hero-form.is-sending .hero-form__submit { opacity: .7; pointer-events: none; } .hero-form__err { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: #E2895A; margin-top: 12px; } .hero-form__note { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,246,248,0.5); margin-top: 14px; text-align: center; } /* ============================================================ PROUDLY WORKED WITH — logo marquee band ============================================================ */ .logo-band { margin-top: auto; /* pin to the bottom of the hero */ background: transparent; /* let the hero wash show through */ border-top: 1px solid rgba(26,37,48,0.10); padding: 14px 0 16px; } .logo-band__label { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(92,102,112,0.72); margin-bottom: 14px; } .logo-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logo-marquee__track { display: flex; align-items: center; gap: clamp(40px, 6vw, 80px); width: max-content; animation: logo-scroll 42s linear infinite; } .logo-marquee:hover .logo-marquee__track { animation-play-state: paused; } .logo-marquee__item { flex: 0 0 auto; } .logo-marquee__item img { display: block; height: 32px; width: auto; filter: grayscale(1); opacity: 0.9; transition: filter .3s ease, opacity .3s ease; } .logo-marquee__item img:hover { filter: grayscale(0); opacity: 1; } @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 28px 48px; } .logo-marquee { -webkit-mask-image: none; mask-image: none; } } /* ===== Insights — Field Notes (short-form dispatches) ===== */ .field-notes { margin-top: 44px; border-top: 1px solid #E5E5E2; } .field-note { display: grid; grid-template-columns: 132px 1fr 40px; gap: 28px; align-items: start; padding: 30px 6px; border-bottom: 1px solid #E5E5E2; text-decoration: none; color: #232A31; transition: background-color .3s ease, padding-left .35s cubic-bezier(0.2,0.8,0.2,1); } .field-note:hover { background-color: rgba(27,58,91,0.035); padding-left: 16px; } .field-note:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 2px; border-radius: 8px; } .field-note__date { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #586069; padding-top: 7px; } .field-note__main { min-width: 0; } .field-note__title { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; color: #232A31; } .field-note__dek { display: block; margin-top: 9px; font-size: 15px; line-height: 1.65; color: #586069; max-width: 560px; } .field-note__arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid #E5E5E2; color: #1B3A5B; margin-top: 4px; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; } .field-note:hover .field-note__arrow { background: #232A31; color: #FAFAF8; border-color: #232A31; transform: translate(2px,-2px); } @media (max-width: 700px) { .field-note { grid-template-columns: 1fr; gap: 10px; padding: 24px 4px; } .field-note__arrow { display: none; } .field-note__title { font-size: 20px; } } /* ===== Insights — interactive payback explorer (£23k piece) ===== */ .payback { margin: 4px 0; } .payback__panel { max-width: 820px; margin: 0 auto; background: #232A31; color: #FAFAF8; border-radius: 24px; padding: 34px 32px 30px; box-shadow: 0 30px 70px -34px rgba(35,42,49,0.55); } .payback__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .payback__head .eyebrow { color: #AFC4DD; } .payback__title { font-family: 'Fraunces', Georgia, serif; font-size: 27px; line-height: 1.15; letter-spacing: -0.02em; color: #FAFAF8; margin-top: 8px; max-width: 470px; } .payback__title em { font-style: italic; color: #AFC4DD; } .payback__tag { flex-shrink: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,250,248,0.62); border: 1px solid rgba(250,250,248,0.22); padding: 6px 11px; border-radius: 999px; white-space: nowrap; } .payback__sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .payback__label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,250,248,0.55); } .payback__size-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; } .payback__size { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13.5px; color: #FAFAF8; background: transparent; border: 1px solid rgba(250,250,248,0.24); padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .payback__size:hover { border-color: rgba(250,250,248,0.55); } .payback__size:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 2px; } .payback__size.is-active { background: #FAFAF8; color: #232A31; border-color: #FAFAF8; } .payback__areas { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid rgba(250,250,248,0.12); } .payback__toggle { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: start; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 18px 2px; border-bottom: 1px solid rgba(250,250,248,0.12); transition: opacity .25s ease; } .payback__toggle:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 2px; border-radius: 8px; } .payback__toggle:not(.is-on) { opacity: 0.42; } .payback__check { width: 22px; height: 22px; border-radius: 6px; margin-top: 2px; border: 1.5px solid rgba(250,250,248,0.4); display: flex; align-items: center; justify-content: center; transition: background-color .25s ease, border-color .25s ease; } .payback__toggle.is-on .payback__check { background: #AFC4DD; border-color: #AFC4DD; } .payback__check svg { opacity: 0; transition: opacity .2s ease; } .payback__toggle.is-on .payback__check svg { opacity: 1; } .payback__area-name { display: block; font-size: 16px; color: #FAFAF8; font-weight: 600; } .payback__area-why { display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: rgba(250,250,248,0.6); max-width: 430px; } .payback__area-val { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: #AFC4DD; white-space: nowrap; padding-top: 2px; } .payback__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 22px; } .payback__total-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,250,248,0.6); } .payback__total-val { font-family: 'Fraunces', Georgia, serif; font-size: 38px; line-height: 1; letter-spacing: -0.02em; color: #FAFAF8; white-space: nowrap; } .payback__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(250,250,248,0.12); } .payback__note { font-size: 13px; line-height: 1.6; color: rgba(250,250,248,0.62); max-width: 430px; margin: 0; } .payback__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; background: #FAFAF8; color: #232A31; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 14.5px; padding: 12px 20px; border-radius: 999px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .payback__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0,0,0,0.5); } .payback__cta:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 3px; } .payback__cta svg { color: #1B3A5B; } @media (max-width: 640px) { .payback__panel { padding: 26px 20px 24px; border-radius: 20px; } .payback__head { flex-direction: column; gap: 12px; } .payback__title { font-size: 23px; } .payback__toggle { grid-template-columns: 22px 1fr; } .payback__area-val { grid-column: 2; padding-top: 6px; } .payback__total-val { font-size: 30px; } .payback__foot { flex-direction: column; align-items: flex-start; } } /* ===== Payback explorer — wide / full-width layout (insights hero) ===== */ .payback__panel--wide { max-width: 100%; display: grid; grid-template-columns: 0.82fr 1.18fr; grid-template-areas: "head areas" "sizes areas" "total areas" "foot areas"; column-gap: 52px; align-items: start; padding: 42px 46px 40px; } .payback__panel--wide .payback__head { grid-area: head; margin-bottom: 0; flex-direction: column; align-items: flex-start; gap: 14px; } .payback__panel--wide .payback__title { font-size: 31px; max-width: none; margin-top: 6px; } .payback__panel--wide .payback__sizes { grid-area: sizes; margin-top: 30px; flex-direction: column; align-items: flex-start; gap: 12px; } .payback__panel--wide .payback__areas { grid-area: areas; margin-top: 0; } .payback__panel--wide .payback__total { grid-area: total; margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 8px; } .payback__panel--wide .payback__total-val { font-size: 50px; } .payback__panel--wide .payback__foot { grid-area: foot; margin-top: 24px; padding-top: 0; border-top: 0; flex-direction: column; align-items: flex-start; gap: 16px; } .payback__panel--wide .payback__note { order: 1; } .payback__panel--wide .payback__cta { order: 2; } @media (max-width: 980px) { .payback__panel--wide { grid-template-columns: 1fr; grid-template-areas: "head" "sizes" "areas" "total" "foot"; column-gap: 0; row-gap: 4px; padding: 32px 26px 30px; } .payback__panel--wide .payback__areas { margin-top: 22px; } .payback__panel--wide .payback__total-val { font-size: 40px; } }