/* Shared chrome + replicated design-system component styles for the standalone pages (everything except index.html, which keeps its own runtime and styling). Built on top of the same design tokens (_ds/.../tokens/*.css) Home uses, so it reads as one site. */ [hidden] { display: none !important; } /* Scroll works exactly the same; only the visual track/thumb is suppressed so every page reads the same as Home's pinned journey (which has no scrollbar because it never has real document scroll). */ html { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { display: none; width: 0; height: 0; } a { text-decoration: none; border-bottom: none; color: var(--text-primary); } a:hover { color: var(--text-accent-psych); border-bottom: none; } /* ---------- cinematic cross-document page transition ---------- Native browser View Transitions (Chromium 126+; opted in per-page via both in and the @view-transition at-rule below — belt and suspenders, in case a given engine version only honors one of the two) drive a real navigation between two separate HTML documents — no client-side router, no fetch()+innerHTML swap, no second scroll engine, no touching window.scrollY. The outgoing document keeps rendering/running normally (Home's SceneController and RAF loop are untouched) right up until the browser captures it for the transition and unloads it; the incoming document boots completely fresh exactly as it does today, so Home's virtual-scene init is unaffected either direction. Browsers without support (or a full/external-origin navigation) just navigate instantly, no transition — this is pure progressive enhancement, nothing to fail. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: gc-page-exit 1950ms cubic-bezier(.22,1,.36,1) both; } ::view-transition-new(root) { animation: gc-page-enter 1950ms cubic-bezier(.22,1,.36,1) both; } /* Reverse-engineered off a reference agency site's own page-transition script (GSAP timeline: shrink to scale .6 + round corners over 0.75s, THEN slide the shrunk card off/on by 175vh over the next 0.75s with a 0.15s overlap, THEN grow the incoming card back to scale 1 over its final 0.75s) and re-expressed as two parallel view-transition keyframe animations sharing one timeline — shrink-then-move-then-grow, not a single blended scale+translate the whole way through. Pure 2D (no rotateX/perspective): matches the reference exactly, and reads faster/ cleaner than the previous 3D-tilt version at this scale. */ @keyframes gc-page-exit { 0% { transform: translateY(0) scale(1); border-radius: 0; } 31% { transform: translateY(0) scale(.68); border-radius: calc(var(--radius-3xl) * .8); } 38% { transform: translateY(-35vh) scale(.6); border-radius: var(--radius-3xl); } 69% { transform: translateY(-175vh) scale(.6); border-radius: var(--radius-3xl); } 100% { transform: translateY(-175vh) scale(.6); border-radius: var(--radius-3xl); } } @keyframes gc-page-enter { 0% { transform: translateY(175vh) scale(.6); border-radius: var(--radius-3xl); } 31% { transform: translateY(175vh) scale(.6); border-radius: var(--radius-3xl); } 62% { transform: translateY(35vh) scale(.6); border-radius: var(--radius-3xl); } 69% { transform: translateY(0) scale(.68); border-radius: calc(var(--radius-3xl) * .8); } 100% { transform: translateY(0) scale(1); border-radius: 0; } } /* Flat near-black fallback (site's own background token) behind the two shrunk cards while they're both off-screen mid-transition — a plain safety net against a white gap, not an added effect. */ ::view-transition { background: #08090B; } @media (max-width: 640px) { /* Same shrink → move → grow shape, shallower distance/scale and a shorter total duration so it doesn't feel excessive on a small, touch-driven screen (still clearly the same choreography). */ ::view-transition-old(root) { animation: gc-page-exit-mobile 1500ms cubic-bezier(.22,1,.36,1) both; } ::view-transition-new(root) { animation: gc-page-enter-mobile 1500ms cubic-bezier(.22,1,.36,1) both; } @keyframes gc-page-exit-mobile { 0% { transform: translateY(0) scale(1); border-radius: 0; } 31% { transform: translateY(0) scale(.78); border-radius: calc(var(--radius-2xl) * .8); } 38% { transform: translateY(-28vh) scale(.72); border-radius: var(--radius-2xl); } 69% { transform: translateY(-140vh) scale(.72); border-radius: var(--radius-2xl); } 100% { transform: translateY(-140vh) scale(.72); border-radius: var(--radius-2xl); } } @keyframes gc-page-enter-mobile { 0% { transform: translateY(140vh) scale(.72); border-radius: var(--radius-2xl); } 31% { transform: translateY(140vh) scale(.72); border-radius: var(--radius-2xl); } 62% { transform: translateY(28vh) scale(.72); border-radius: var(--radius-2xl); } 69% { transform: translateY(0) scale(.78); border-radius: calc(var(--radius-2xl) * .8); } 100% { transform: translateY(0) scale(1); border-radius: 0; } } } } /* prefers-reduced-motion: reduce — a short opacity/small-movement crossfade instead of the 3D choreography. Navigation itself is never disabled either way; this only changes how it looks. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(root) { animation-duration: 220ms; } ::view-transition-old(root) { animation: gc-page-exit-reduced 220ms ease both; } ::view-transition-new(root) { animation: gc-page-enter-reduced 220ms ease both; } @keyframes gc-page-exit-reduced { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } } @keyframes gc-page-enter-reduced { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } } /* ---------- background layers (live WebGL chromatic fluid + grid/noise texture) ---------- */ .bg-base,.live-bg-canvas,.bg-wash,.bg-grid,.bg-noise{position:fixed;inset:0;pointer-events:none} .bg-base{background:#08090B;z-index:0} .bg-wash{background:linear-gradient(180deg,#12102A 0%,#08090B 58%);opacity:.12;z-index:1} /* Softened so body text stays clearly readable over it: lower opacity plus a heavy blur (scaled up slightly so the blur's faded edge stays off-screen). */ :root{--liquid-opacity:.92;--liquid-blur:8px} /* tune: opacity 0..1 (lower = dimmer), blur in px */ .live-bg-canvas{width:100%;height:100%;z-index:2;opacity:0;filter:blur(var(--liquid-blur));transform:scale(1.04);transition:opacity 1200ms cubic-bezier(.22,1,.36,1)} .live-bg-canvas.is-ready{opacity:var(--liquid-opacity)} .bg-grid{background-image:repeating-linear-gradient(90deg,rgba(243,240,232,.042) 0 1px,transparent 1px 96px);opacity:.35;z-index:3} .bg-noise{opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");z-index:4} .page{position:relative;z-index:5} /* ---------- header ---------- */ .site-header{position:fixed;top:0;left:0;right:0;z-index:6;border-bottom:1px solid rgba(243,240,232,.08);background:rgba(8,9,11,.36);backdrop-filter:blur(18px);transform:translateY(0);transition:transform 360ms cubic-bezier(.22,1,.36,1)} .site-header.is-hidden{transform:translateY(-100%)} .site-header__inner{max-width:1440px;margin:0 auto;padding:20px clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:24px} .site-brand{display:flex;align-items:baseline;gap:14px} .site-brand__name{font-size:16px;font-weight:500;letter-spacing:-.02em;color:var(--text-primary)} .site-brand__tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(168,165,176,.5)} .site-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)} .site-nav a{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A8A5B0;padding-bottom:3px;border-bottom:1px solid transparent;transition:color 320ms ease,border-color 320ms ease} .site-nav a:hover{color:var(--text-primary)} .site-nav a.is-active{color:var(--text-primary);border-bottom-color:rgba(176,143,224,.7)} .site-nav a.cta{color:#F3F0E8;border-bottom:1px solid rgba(243,240,232,.42)} .site-nav a.cta:hover{border-bottom-color:#B08FE0} /* ---------- footer ---------- Plain, self-contained markup/CSS — no JS, no scroll-engine coupling. Identical on every standalone page (about/approach/article/case/contact/ service/services/thinking/work); Home keeps its own pinned journey and has no footer. */ .site-footer{border-top:1px solid rgba(243,240,232,.09);position:relative;z-index:2;overflow:hidden;padding-top:64px} .footer-links{display:grid;grid-template-columns:repeat(4,1fr);column-gap:56px;row-gap:48px;padding-bottom:48px} .footer-col{display:flex;flex-direction:column;gap:12px;min-width:0} .footer-col__title{font-family:var(--font-sans);font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:#F3F0E8;margin-bottom:10px} .footer-col a{font-size:14px;font-weight:500;color:rgba(243,240,232,.7);transition:color 260ms ease} .footer-col a:hover{color:#F3F0E8} /* Logo placeholder + brand wordmark — full-bleed (no .wrap) so the wordmark can scale dramatically with viewport width, same idea as the header's "wordmark placeholder" tag: brand assets aren't final yet. Sized to read as the dominant element of the footer (large logo mark + wordmark filling most of the row), same proportions as a typical big-brand footer close. */ .footer-brand{display:flex;align-items:center;gap:clamp(24px,4vw,60px);padding:40px clamp(20px,5vw,80px);border-top:1px solid rgba(243,240,232,.09)} .footer-logo-placeholder{flex-shrink:0;width:clamp(80px,10vw,200px);height:clamp(80px,10vw,200px);border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center} .footer-logo-placeholder img{width:100%;height:100%;object-fit:cover;display:block} .footer-brand-name{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;line-height:1;user-select:none;row-gap:.05em} .footer-brand-name .word{display:inline-flex;flex-wrap:nowrap} /* font-size defaults to the clamp() below (used before JS has measured, and as a fallback if it never runs) but is then overridden by --wordmark-size — set by fitFooterWordmarks() in site.js/the homepage's own inline copy — so the word spans the row's full width exactly, whatever the word's length or the container's width happen to be. */ .footer-brand-name .ltr{display:inline-block;font-family:var(--font-sans);font-weight:700;font-size:var(--wordmark-size, clamp(3.5rem,15vw,14rem));letter-spacing:-.02em;color:#F3F0E8;padding:0 .03em;margin:0 -.01em;border:1px solid transparent;border-radius:6px;transition:border-color 160ms ease,color 160ms ease,background-color 160ms ease;cursor:default} .footer-brand-name .ltr:hover{border-color:rgba(243,240,232,.55);background:rgba(243,240,232,.04)} .footer-brand-name .gap{display:inline-block;width:.3em;font-size:clamp(3.5rem,15vw,14rem)} /* Legal row — copyright / "trusted by" / policy links, three-up, same row as a typical footer close, now sitting BELOW the brand wordmark rather than above it. */ .footer-legal{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid rgba(243,240,232,.09);font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(168,165,176,.45)} .footer-legal__trusted{color:rgba(168,165,176,.45)} .footer-legal__links{display:flex;flex-wrap:wrap;gap:24px} /* Marquee: pure CSS loop (duplicated item list, translateX to -50%) — no JS. Placeholder slots, not real client logos: the site has none yet (see the "Proof slots are intentionally empty" language elsewhere on the site). */ .footer-marquee{border-top:1px solid rgba(243,240,232,.09);overflow:hidden;padding:28px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .footer-marquee__track{display:flex;width:max-content;gap:64px;animation:footer-marquee-scroll 32s linear infinite} .footer-marquee:hover .footer-marquee__track{animation-play-state:paused} .footer-marquee__item{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(168,165,176,.4)} .footer-marquee__item::before{content:'';width:28px;height:28px;flex-shrink:0;border:1px dashed rgba(243,240,232,.16);border-radius:6px} @keyframes footer-marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.footer-marquee__track{animation:none}} @media (max-width:900px){ .footer-links{grid-template-columns:repeat(2,1fr);column-gap:40px;row-gap:36px} } @media (max-width:640px){ .footer-links{grid-template-columns:1fr} .footer-brand{flex-direction:column;align-items:flex-start;gap:20px} } /* ---------- layout helpers ---------- */ .wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,5vw,80px)} .grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px} .hero{align-content:center;padding:170px clamp(20px,5vw,80px) 80px} .section{padding:clamp(90px,14vh,180px) 0} .section--flush-top{padding-top:0} .section--flush-bottom{padding-bottom:0} .mono{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase} .divider{height:1px;background:rgba(243,240,232,.1)} .back-link{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(168,165,176,.6)} .back-link:hover{color:var(--text-primary)} .row-list{display:flex;flex-direction:column} .row-list>a,.row-list>div{border-top:1px solid rgba(243,240,232,.1)} .text-link{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A8A5B0;padding-bottom:4px;border-bottom:1px solid rgba(243,240,232,.18)} .text-link:hover{color:#F3F0E8;border-bottom-color:rgba(243,240,232,.5)} /* ---------- section label (SectionLabel) ---------- */ .section-label{display:flex;align-items:baseline;gap:16px;font-family:var(--font-mono);font-size:var(--size-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase} .section-label__index{color:var(--text-secondary)} .section-label__index--psych{color:var(--text-accent-psych)} .section-label__index--tech{color:var(--text-accent-tech)} .section-label__text{color:var(--text-tertiary)} /* ---------- button (Button) ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;white-space:nowrap;font-family:var(--font-sans);font-weight:var(--weight-medium);letter-spacing:-.005em;background:var(--paper-100);color:var(--text-inverse);border:1px solid transparent;transition:var(--transition-control),transform var(--dur-instant) var(--ease-standard)} .btn:hover{background:#FFFFFF;color:var(--text-inverse)} .btn:active{transform:scale(.985)} .btn--md{height:42px;padding:0 20px;font-size:var(--size-body-sm)} .btn--lg{height:52px;padding:0 28px;font-size:var(--size-body)} .btn--full{display:flex;width:100%} .btn__icon{transition:transform var(--dur-fast) var(--ease-editorial)} .btn:hover .btn__icon{transform:translateX(2px)} /* ---------- form controls (Field / Input / Select / Textarea) ---------- */ .field{display:flex;flex-direction:column;gap:8px} .field__label{font-family:var(--font-mono);font-size:var(--size-mono-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)} .field__hint{font-size:var(--size-caption);color:var(--text-tertiary)} .input,.select,.textarea{width:100%;background:var(--surface-field);border:1px solid var(--border-default);border-radius:var(--radius-field);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--size-body-sm);outline:none;transition:var(--transition-control)} .input{height:44px;padding:0 14px} .select{height:44px;padding:0 40px 0 14px;appearance:none;background-image:none} .textarea{padding:12px 14px;resize:vertical} .input:focus,.select:focus,.textarea:focus{border-color:var(--focus-ring)} .select option{background:var(--ink-900)} .select-wrap{position:relative} .select-wrap .chevron{position:absolute;right:14px;top:14px;color:var(--text-tertiary);pointer-events:none;display:flex} /* ---------- approach: step rows + area cells (hover/click swap panels) ---------- */ .step-row{display:grid;grid-template-columns:44px 20px minmax(0,1fr) auto;gap:20px;align-items:center;padding:24px 0;border-top:1px solid rgba(243,240,232,.09);cursor:pointer;transition:background 420ms cubic-bezier(.22,1,.36,1)} .step-row:hover{background:rgba(243,240,232,.025)} .step-idx{color:rgba(168,165,176,.5)} .step-dot{justify-self:center;border-radius:50%;width:6px;height:6px;opacity:.5;transition:all 480ms cubic-bezier(.22,1,.36,1)} .step-row.is-active .step-dot{width:11px;height:11px;opacity:1} .step-label{font-weight:300;line-height:1.02;letter-spacing:-.03em;font-size:clamp(1.5rem,2.2vw,2rem);color:rgba(243,240,232,.42);transition:all 520ms cubic-bezier(.22,1,.36,1)} .step-row.is-active .step-label{font-size:clamp(2rem,3.2vw,2.9rem);color:#F3F0E8} .step-tag{color:rgba(168,165,176,.42);transition:color 480ms ease} .step-row.is-active[data-tone="h"] .step-tag{color:#B08FE0} .step-row.is-active[data-tone="m"] .step-tag{color:#8FA6FF} .area-cell{cursor:default;display:flex;flex-direction:column;gap:26px;justify-content:space-between;padding:22px 20px;background:#08090B;transition:background 420ms cubic-bezier(.22,1,.36,1)} .area-cell.is-active{background:rgba(243,240,232,.05)} .area-idx{color:rgba(168,165,176,.42)} .area-cell.is-active .area-idx{color:#B08FE0} .area-label{font-weight:300;font-size:clamp(1.1rem,1.5vw,1.4rem);letter-spacing:-.02em;line-height:1.1;color:rgba(243,240,232,.5);transition:color 420ms ease} .area-cell.is-active .area-label{color:#F3F0E8} /* ---------- hover-emphasis index rows (Services / Work / Thinking / About) ---------- */ .hover-row{display:block;border-top:1px solid rgba(243,240,232,.1);transition:background 480ms cubic-bezier(.22,1,.36,1)} .hover-row:hover{background:rgba(243,240,232,.02)} .row-emph{transition:color 480ms ease} .hover-row:hover .row-emph{color:#F3F0E8 !important} .row-tag{color:rgba(168,165,176,.42);transition:color 480ms ease} .hover-row:hover .row-tag--h{color:#B08FE0 !important} .hover-row:hover .row-tag--m{color:#8FA6FF !important} /* ---------- thinking: category filter pills ---------- */ .cat-pill{appearance:none;-webkit-appearance:none;margin:0;line-height:normal;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid rgba(243,240,232,.14);background:transparent;color:#A8A5B0;transition:all 320ms ease} .cat-pill.is-active{border-color:transparent;background:#F3F0E8;color:#08090B} /* Keyboard focus rings for the div-based pickers (Approach) and the pills. */ .cat-pill:focus-visible{outline:1px solid rgba(176,143,224,.7);outline-offset:3px} .step-row:focus-visible,.area-cell:focus-visible{outline:1px solid rgba(176,143,224,.55);outline-offset:-2px;border-radius:3px} /* ---------- responsive: collapse the 12-col grids to a single column ---------- */ @media (max-width:760px){ .grid12,.hero{display:block} .grid12>*,.hero>*{margin-bottom:24px} .grid12>*:last-child,.hero>*:last-child{margin-bottom:0} .site-nav{gap:12px;flex-wrap:wrap;justify-content:flex-end} .site-header__inner{flex-wrap:wrap;row-gap:12px} }