/* ============================================================ FONTS ============================================================ */ @font-face { font-family: 'Cabinet Grotesk'; src: url('../assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../assets/fonts/Satoshi-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('../assets/fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'); font-weight: 300 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Fraktion'; src: url('../assets/fonts/PPFraktionSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* ============================================================ VARIABLES ============================================================ */ :root { --bg: #f5f5f5; --bg-dark: #0D0D0D; --text: #0D0D0D; --text-light: #FFFFFF; --text-muted: #7a7a72; --border: rgba(13, 13, 13, 0.1); --border-light: rgba(255, 255, 255, 0.12); --font-heading: 'Cabinet Grotesk', sans-serif; --font-body: 'Satoshi', sans-serif; --font-mono: 'Fraktion', monospace; --container: 1320px; --gutter: 48px; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ TEXT SELECTION ============================================================ */ /* Light backgrounds: black highlight, white text */ ::selection { background: #0d0d0d; color: #ffffff; } /* Dark backgrounds (services, hero, contact, footer, nav overlay, outcome block): white highlight, black text */ .services-section ::selection, .hero ::selection, .contact-section ::selection, .footer ::selection, .nav-overlay ::selection, .loader ::selection, .pd-outcome ::selection { background: #ffffff; color: #0d0d0d; } /* Contact form card sits on a white background — revert to black highlight */ .contact-card ::selection { background: #0d0d0d; color: #ffffff; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: auto; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } button { cursor: pointer; font-family: inherit; } /* ============================================================ PAGE TRANSITION OVERLAY ============================================================ */ .page-transition { position: fixed; inset: 0; background: #0D0D0D; z-index: 9998; /* above all content, below loader (9999) */ transform: translateY(100%); /* idle: parked below the viewport */ pointer-events: none; will-change: transform; } .page-transition-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--gutter); pointer-events: none; } .page-transition-name { color: #fff; font-family: 'Satoshi', sans-serif; font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; text-align: center; } .page-transition-logo { display: block; width: auto; height: auto; max-width: min(280px, 58vw); max-height: 100px; object-fit: contain; filter: brightness(0) invert(1); } /* Applied via inline script before first paint to prevent flash. No !important — JS inline styles must be able to override this to animate. */ html.pt-entering .page-transition { transform: translateY(0); transition: none; } /* Page content wrapper — sits between nav and fixed overlays. transform-origin kept at top so slides feel anchored. */ #pageContent { transform-origin: top center; will-change: opacity, transform; } /* ============================================================ LOADER ============================================================ */ .loader { position: fixed; inset: 0; background: var(--bg-dark); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.7s var(--ease), visibility 0.7s; } .loader.out { opacity: 0; visibility: hidden; } .loader-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; } .loader-name { font-family: var(--font-heading); font-size: 28px; font-weight: 800; color: white; letter-spacing: -0.02em; opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out) 0.1s, transform 0.6s var(--ease-out) 0.1s; } .loader-name.show { opacity: 1; transform: none; } .loader-bar { width: 200px; height: 1px; background: rgba(255,255,255,0.15); overflow: hidden; } .loader-bar-fill { height: 100%; background: white; width: 0%; transition: width 1.2s var(--ease-out) 0.3s; } .loader-bar-fill.go { width: 100%; } /* ============================================================ HOME INTRO ANIMATION ============================================================ */ /* Blur strip at the bottom — same 8-layer backdrop-filter structure as .blur-fade but positioned inside the loader. Letters (z-index 1) sit behind this (z-index 2) so they appear blurry as they rise through the zone and emerge sharp above it. */ .home-intro-blur { position: absolute; bottom: 0; left: 0; right: 0; height: calc(50vh - 60px); /* reaches just below letter resting position */ pointer-events: none; z-index: 2; } /* Name container — JS controls the Y offset via inline transform */ .home-intro-name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; line-height: 1; font-family: var(--font-body); font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.04em; color: white; white-space: nowrap; z-index: 1; will-change: transform, opacity; } .home-intro-name span { display: inline-block; opacity: 0; } /* Logomark before the name */ .home-intro-name .hi-logo { display: inline-flex; align-items: center; height: 1em; width: 1em; margin-right: 0.45em; flex-shrink: 0; } .home-intro-name .hi-logo svg { height: 100%; width: auto; display: block; } /* Fixed-width stand-in for the word space */ .home-intro-name .hi-sp { width: 0.22em; } /* Letter entrance — slides up from below the viewport */ @keyframes hi-letter-in { from { opacity: 0; transform: translateY(65vh); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ HERO ENTRANCE ANIMATIONS Triggered by body.hero-animated after the intro exits (or immediately on page-transition arrivals). ============================================================ */ .hero-anim-left, .hero-anim-right, .hero-anim-bottom { opacity: 0; } body.hero-animated .hero-anim-left { animation: hero-from-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } body.hero-animated .hero-anim-right { animation: hero-from-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } body.hero-animated .hero-anim-bottom { animation: hero-from-bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Stagger delays */ body.hero-animated [data-hero-delay="0"] { animation-delay: 0ms; } body.hero-animated [data-hero-delay="1"] { animation-delay: 130ms; } body.hero-animated [data-hero-delay="2"] { animation-delay: 260ms; } body.hero-animated [data-hero-delay="3"] { animation-delay: 390ms; } @keyframes hero-from-left { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: translateX(0); } } @keyframes hero-from-right { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: translateX(0); } } @keyframes hero-from-bottom { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ CONTAINER ============================================================ */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: rgba(245, 245, 245, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background 0.3s var(--ease); } .nav.scrolled { background: rgba(245, 245, 245, 0.95); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--gutter); } .nav-logo { display: flex; align-items: center; gap: 8px; } /* Logomark image — used in nav, overlay, and footer */ .nav-logomark { height: 22px; width: 22px; flex-shrink: 0; display: block; } .nav-logo-name { font-family: var(--font-body); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links li a { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 6px; transition: opacity 0.2s; } .nav-links li a:hover { opacity: 0.5; } .nav-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; background: var(--text); color: white; border-radius: 100px; padding: 2px 6px; letter-spacing: 0.04em; } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-cta { font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 9px 20px; background: var(--text); color: white; border-radius: 100px; transition: background 0.2s; } .nav-cta:hover { background: #333; } .nav-menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; padding: 4px; } .nav-menu-btn span { display: block; width: 100%; height: 1.5px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.3s; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-family: var(--font-body); font-size: 14px; font-weight: 600; transition: all 0.25s var(--ease); border: none; cursor: pointer; } .btn-dark { background: var(--text); color: white; } .btn-dark:hover { background: #2a2a2a; transform: translateY(-1px); } .btn-light { background: white; color: var(--text); } .btn-light:hover { background: rgba(255,255,255,0.85); transform: translateY(-1px); } .btn-outline-light { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.3); } .btn-outline-light:hover { background: rgba(255,255,255,0.08); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: calc(100svh - 80px); /* 72px top margin + 8px bottom = exactly fills viewport */ min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; margin: 72px 8px 8px; border-radius: 20px; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.78) 100% ); } .hero-content { position: relative; z-index: 2; padding-bottom: 96px; width: 100%; } .hero-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 28px; display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: rgba(255,255,255,0.4); } .hero-title { font-family: var(--font-heading); font-size: clamp(60px, 8.5vw, 120px); font-weight: 800; color: white; line-height: 0.93; letter-spacing: -0.035em; margin-bottom: 56px; } .hero-lockup { display: flex; align-items: center; gap: clamp(24px, 2.5vw, 48px); margin-bottom: 56px; } .hero-big-name { font-family: var(--font-body); font-size: clamp(96px, 14vw, 220px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.9; color: white; white-space: nowrap; } .hero-logomark svg { height: clamp(80px, 12vw, 160px); width: auto; display: block; clip-path: circle(50%); animation: footer-logo-spin 5s linear( 0, 0.006 5%, 0.024 10%, 0.055 15%, 0.095 20%, 0.146 25%, 0.206 30%, 0.273 35%, 0.345 40%, 0.422 45%, 0.5 50%, 0.578 55%, 0.655 60%, 0.727 65%, 0.794 70%, 0.854 75%, 0.905 80%, 0.945 85%, 0.976 90%, 0.994 95%, 1 ) infinite; } .hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } .hero-desc { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.65; max-width: 360px; font-weight: 400; } .hero-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hero-scroll-line { width: 1px; height: 48px; background: rgba(255,255,255,0.3); position: relative; overflow: hidden; } .hero-scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: white; animation: scrollLine 1.8s ease-in-out infinite; } @keyframes scrollLine { 0% { top: -100%; } 100% { top: 100%; } } .hero-scroll-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.35); } /* ============================================================ SECTION UTILITIES ============================================================ */ .section-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.4; } .section-year { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.3; } /* ============================================================ PROJECTS ============================================================ */ .projects-section { padding: 120px 0 0; } .projects-header { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 28px; margin-bottom: 0; } .projects-header-left { display: flex; align-items: baseline; gap: 18px; } .projects-title { font-family: var(--font-heading); font-size: clamp(52px, 7vw, 96px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; } .projects-subtitle { font-size: 14px; color: var(--text-muted); max-width: 280px; text-align: right; line-height: 1.6; } .projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; } /* ── Card — static wrapper; works as
or ── */ .project-card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-decoration: none; color: inherit; } /* ── Title box — separate static white pill above the thumb ── */ .project-card-header { background: white; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; flex-shrink: 0; } .project-card-header-left { display: flex; align-items: center; gap: 8px; position: relative; height: 22px; } /* Icon — slides in from left on card hover */ .project-card-icon { display: flex; align-items: center; position: absolute; left: 0; opacity: 0; transform: translateX(-8px); transition: opacity 0.48s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1); color: var(--text); } .project-card-icon svg, .project-card-icon [data-lucide] { width: 15px; height: 15px; } .project-card-icon [class^="iconoir-"] { font-size: 15px; line-height: 1; } .project-card:hover .project-card-icon { opacity: 1; transform: translateX(0); } .project-card-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); transform: translateX(0); transition: transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1); } .project-card:hover .project-card-name { transform: translateX(23px); } .project-card-year { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.03em; transform: translateX(0); transition: transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1); } .project-card:hover .project-card-year { transform: translateX(23px); } /* Traffic-light dots */ .project-card-dots { display: flex; gap: 5px; opacity: 0.28; transition: opacity 0.4s var(--ease); } .project-card:hover .project-card-dots { opacity: 1; } .dot { width: 11px; height: 11px; border-radius: 50%; } .dot-red { background: #ff5f57; } .dot-yellow { background: #febc2e; } .dot-green { background: #28c840; } /* ── Thumbnail box ── */ .project-card-thumb-wrap { border-radius: 14px; overflow: hidden; } .project-card-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; } /* Background gradient / future image */ .project-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease; } .project-card:hover .project-card-bg { transform: scale(1.07); filter: blur(7px) brightness(0.7); } .project-gradient-1 { background: linear-gradient(135deg, #1a1a1f 0%, #2d2535 50%, #1c1c2e 100%); } .project-gradient-2 { background: linear-gradient(135deg, #0f1923 0%, #1a3a4a 50%, #0d2030 100%); } .project-gradient-3 { background: linear-gradient(135deg, #1f0f0f 0%, #3d1a1a 50%, #2a0f0f 100%); } .project-gradient-4 { background: linear-gradient(135deg, #0f1f15 0%, #1a3d2a 50%, #0f2a1a 100%); } /* ── Centre identity / logo placeholder ─────── */ .project-card-identity { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; padding-top: 0; } .project-card-logo-text { font-family: var(--font-heading); font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; color: white; letter-spacing: -0.025em; text-shadow: 0 2px 16px rgba(0,0,0,0.35); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; } .project-card:hover .project-card-logo-text { transform: scale(0.78); opacity: 1; } .project-card-logo-img { width: auto; height: clamp(36px, 4vw, 52px); object-fit: contain; } .projects-view-all { padding: 40px 0; display: flex; justify-content: center; margin-top: 2px; } /* ============================================================ RESULTS ============================================================ */ .results-section { padding: 120px 0; border-top: 1px solid var(--border); } .results-inner { display: grid; grid-template-columns: 360px 1fr; gap: 100px; align-items: center; } .results-photo { aspect-ratio: 3/4; background: linear-gradient(160deg, #1a1a1a 0%, #2d2d2d 100%); border-radius: 6px; overflow: hidden; position: relative; } .results-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .results-photo-placeholder { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 28px; } .results-photo-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); padding: 6px 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.1); } .results-right {} .results-copy {} .results-kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; } .results-heading { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 56px; } .results-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border); } .result-stat { padding: 36px 0 36px; border-right: 1px solid var(--border); padding-right: 40px; margin-right: 40px; } .result-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; } .result-stat-num { font-family: var(--font-heading); font-size: clamp(48px, 5.5vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; display: flex; align-items: baseline; gap: 2px; } .result-stat-suffix { font-size: 0.55em; font-weight: 700; letter-spacing: -0.01em; } .result-stat-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; } /* ============================================================ SERVICES (DARK) ============================================================ */ .services-section { position: relative; background: var(--bg-dark); color: var(--text-light); padding: 100px 0 80px; margin: 0 8px; border-radius: 20px; overflow: hidden; } /* Ambient glow — bottom-left corner light */ .services-section::before { content: ''; position: absolute; bottom: -120px; left: -120px; width: 620px; height: 520px; background: radial-gradient(ellipse at center, rgba(52, 42, 72, 0.95) 0%, rgba(30, 24, 42, 0.5) 45%, transparent 70% ); filter: blur(72px); border-radius: 50%; z-index: 0; pointer-events: none; } /* ── Header ──────────────────────────────────────────── */ .services-header { display: flex; flex-direction: column; gap: 10px; padding-bottom: 56px; } .services-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 8px; } .services-kicker-icon { font-size: 14px; color: rgba(255,255,255,0.5); } .services-title-row { display: flex; align-items: baseline; gap: 16px; } .services-title { font-family: var(--font-heading); font-size: clamp(52px, 7vw, 96px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: white; } .services-count { font-family: var(--font-heading); font-size: clamp(20px, 2.5vw, 32px); font-weight: 700; color: rgba(255,255,255,0.22); letter-spacing: -0.02em; } /* ── Accordion list ──────────────────────────────────── */ .services-list { list-style: none; } .service-item { display: grid; grid-template-columns: 72px 1fr; cursor: pointer; } .service-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.22); letter-spacing: 0.04em; padding-top: 26px; /* aligns with toggle-btn text */ flex-shrink: 0; } /* Right side of the grid — has the top border (not the num) */ .service-item-inner { border-top: 1px solid rgba(255,255,255,0.1); } /* Clickable header row */ .service-toggle-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; background: none; border: none; cursor: pointer; text-align: left; } .service-name { font-family: var(--font-body); font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; color: white; transition: opacity 0.2s; } .service-toggle-btn:hover .service-name { opacity: 0.65; } /* +/− circle */ .service-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; transition: background 0.3s var(--ease), border-color 0.3s; } .service-item.open .service-toggle { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.35); } /* ── Expanding body ──────────────────────────────────── */ .service-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); } .service-item.open .service-body { grid-template-rows: 1fr; } .service-body-inner { overflow: hidden; } .service-body-content { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start; padding-bottom: 32px; } .service-desc { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.7; max-width: 400px; } /* Categories column */ .service-cats { min-width: 220px; } .service-cats-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 10px; } .service-cat-tags { display: flex; flex-wrap: wrap; gap: 6px; } .service-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 100px; color: rgba(255,255,255,0.5); } /* ── CTA ─────────────────────────────────────────────── */ .services-cta { padding-top: 52px; } /* Lift content above noise/glow layers */ .services-section > .container { position: relative; z-index: 2; } /* ============================================================ PROCESS ============================================================ */ .process-section { padding: 120px 0 0; border-top: 1px solid var(--border); } .process-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; } .process-title { font-family: var(--font-heading); font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; max-width: 640px; } .process-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } .process-subtext { max-width: 260px; color: var(--text-muted); font-size: 14px; line-height: 1.6; text-align: right; } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .process-step { padding: 20px 22px 24px; background: white; border-radius: 14px; display: flex; flex-direction: column; gap: 22px; height: 100%; transition: background 0.3s; } /* Header row: dots + step number */ .process-step-header { display: flex; align-items: center; justify-content: space-between; } .process-step-dots { display: flex; align-items: center; gap: 4px; } .psd { display: block; width: 9px; height: 9px; border-radius: 50%; background: #d4d4d0; } .psd.active { background: #1a1a1a; } .process-step-num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); } /* Process card copy */ .process-step-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 20px; } .process-step-sentence { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.6; flex: 1; min-width: 0; } .process-step-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: auto; object-fit: cover; object-position: center; border-radius: 10px; } /* ============================================================ PARALLAX DIVIDER ============================================================ */ .parallax-divider-wrap { padding: 6px 0 80px; } .parallax-divider { border-radius: 20px; overflow: hidden; height: 460px; position: relative; will-change: transform; transform: translateZ(0); } .parallax-divider-img { position: absolute; top: -15%; left: 0; width: 100%; height: 130%; object-fit: cover; object-position: center; } .parallax-divider-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1; border-radius: inherit; } .parallax-divider-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); width: clamp(64px, 8vw, 100px); height: auto; filter: brightness(0) invert(1); z-index: 2; will-change: transform; pointer-events: none; } /* ============================================================ NUMBERS ============================================================ */ .numbers-section { padding: 0 0 120px; border-bottom: 1px solid var(--border); } .numbers-inner { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .number-item { padding: 64px 48px; border-right: 1px solid var(--border); position: relative; } .number-item:last-child { border-right: none; } .number-kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; } .number-value { font-family: var(--font-heading); font-size: clamp(48px, 5.5vw, 80px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 16px; display: flex; align-items: baseline; gap: 3px; } .number-suffix { font-size: 0.5em; font-weight: 700; } .number-label { font-size: 14px; color: var(--text-muted); line-height: 1.55; } /* ============================================================ ABOUT / FACES ============================================================ */ .about-section { padding: 120px 0; border-top: 1px solid var(--border); } .about-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: start; } .about-left { display: flex; flex-direction: column; gap: 20px; } .about-cta { width: 100%; justify-content: center; } .about-cta--mobile { display: none; } .about-title { font-family: var(--font-heading); font-size: clamp(40px, 5.5vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; } .about-title em { font-style: normal; color: #aaa; } .about-title-wrap { /* title only — CTA is a sibling */ } /* ── Activity cards ───────────────────────────────────────── */ .activity-cards { display: flex; flex-direction: column; gap: 6px; } .activity-card { background: white; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; overflow: hidden; cursor: default; user-select: none; } .activity-card-left { display: flex; align-items: center; position: relative; height: 22px; /* fixed height so layout doesn't shift */ } /* Icon — hidden off-left, slides in on hover */ .activity-icon { display: flex; align-items: center; position: absolute; left: 0; opacity: 0; transform: translateX(-8px); transition: opacity 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); color: var(--text); } /* Size both icon types uniformly */ .activity-icon svg, .activity-icon [data-lucide] { width: 17px; height: 17px; } .activity-icon [class^="iconoir-"] { font-size: 17px; line-height: 1; } /* Name — shifts right on hover */ .activity-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); transform: translateX(0); transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); } .activity-card:hover .activity-icon { opacity: 1; transform: translateX(0); } .activity-card:hover .activity-name { transform: translateX(26px); } /* Dots — reuse project-card styles, dim when idle */ .activity-card-dots { display: flex; gap: 5px; opacity: 0.28; transition: opacity 0.3s var(--ease); } .activity-card:hover .activity-card-dots { opacity: 1; } .about-right { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .person-card { position: relative; border-radius: 14px; overflow: hidden; background: #1a1a1a; cursor: pointer; } .person-card:nth-child(odd) { aspect-ratio: 3/4; } .person-card:nth-child(even) { aspect-ratio: 3/4; margin-top: 28px; } .person-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .person-card:hover .person-card-img { transform: scale(1.04); } .person-card-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; } .person-card-role-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); padding: 5px 10px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.1); line-height: 1.3; } .person-card-role-badge small { display: block; opacity: 0.6; font-size: 8px; letter-spacing: 0.08em; } .person-card-plus { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; background: rgba(0,0,0,0.3); backdrop-filter: blur(8px); } .person-card-name { position: absolute; bottom: 20px; left: 20px; right: 20px; font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: white; letter-spacing: -0.02em; line-height: 1.15; } .person-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ============================================================ FAQ ============================================================ */ .faq-section { padding: 120px 0 160px; border-top: 1px solid var(--border); position: relative; } .faq-inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: 100px; align-items: start; } .faq-left { position: sticky; top: 88px; } .faq-heading { font-family: var(--font-heading); font-size: clamp(72px, 10vw, 136px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.88; margin-bottom: 28px; } .faq-sub { font-size: 15px; color: var(--text-muted); line-height: 1.65; max-width: 260px; } .faq-list { list-style: none; } .faq-item { border-bottom: 1px solid var(--border); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0; background: none; border: none; text-align: left; font-family: var(--font-body); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); cursor: pointer; transition: opacity 0.2s; } .faq-question:hover { opacity: 0.65; } .faq-q-icon { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 300; flex-shrink: 0; transition: transform 0.35s var(--ease), background 0.2s; color: var(--text); line-height: 1; } .faq-item.open .faq-q-icon { transform: rotate(45deg); background: var(--text); color: white; border-color: var(--text); } .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); } .faq-item.open .faq-answer { grid-template-rows: 1fr; } .faq-answer-inner { overflow: hidden; } .faq-answer-text { padding-bottom: 28px; font-size: 15px; color: var(--text-muted); line-height: 1.7; max-width: 540px; } /* ============================================================ FULL-SCREEN NAV OVERLAY ============================================================ */ .nav-overlay { position: fixed; top: 0; left: 0; right: 0; /* No bottom — height is content-driven */ background: #ffffff; z-index: 800; border-radius: 0 0 24px 24px; /* Start fully above viewport, slide down on open. 102% hides the box-shadow during the off state. */ transform: translateY(-102%); transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.22s; /* exit: wait for content to start leaving first */ box-shadow: 0 16px 60px rgba(0, 0, 0, 0.1); } .nav-overlay.open { transform: translateY(0); transition-delay: 0s; /* entrance: slide in immediately */ } .nav-overlay-inner { display: flex; flex-direction: column; /* Full width — top and bottom bars bleed edge-to-edge */ width: 100%; padding: 0 var(--gutter); } /* Top bar — same height as nav, no divider line */ .nav-overlay-top { display: flex; align-items: center; justify-content: space-between; height: 64px; flex-shrink: 0; /* border removed */ opacity: 0; transform: translateY(-20px); transition: opacity 0.65s var(--ease-out), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .nav-overlay.open .nav-overlay-top { opacity: 1; transform: none; transition-delay: 0.25s; /* entrance: first to arrive */ } .nav-overlay-logo { display: flex; align-items: center; gap: 8px; } /* .nav-logo-name shared with main nav — already set to Satoshi medium */ /* Close button (×) */ .nav-overlay-close { position: relative; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .nav-overlay-close span { position: absolute; top: 50%; left: 50%; display: block; width: 22px; height: 1.5px; background: #0d0d0d; transform-origin: center; transition: transform 0.3s var(--ease); } .nav-overlay-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .nav-overlay-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .nav-overlay-close:hover span { background: #555; } /* Centred nav links — constrained width so they stay centred */ .nav-overlay-links { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 48px 0; width: 100%; max-width: var(--container); margin: 0 auto; } .nav-overlay-link { font-family: var(--font-body); font-size: clamp(40px, 5.5vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; color: #0d0d0d; display: block; will-change: opacity, transform; /* Hidden entrance state */ opacity: 0; transform: translateY(44px); /* Base transition — handles hover out & un-hover gracefully */ transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } /* Entrance: open state */ .nav-overlay.open .nav-overlay-link { opacity: 1; transform: none; } /* Entrance stagger — fires after panel slide (~0.55s), 100ms between each link */ .nav-overlay.open .nav-overlay-link:nth-child(1) { transition-delay: 0.55s; } .nav-overlay.open .nav-overlay-link:nth-child(2) { transition-delay: 0.65s; } .nav-overlay.open .nav-overlay-link:nth-child(3) { transition-delay: 0.75s; } .nav-overlay.open .nav-overlay-link:nth-child(4) { transition-delay: 0.85s; } .nav-overlay.open .nav-overlay-link:nth-child(5) { transition-delay: 0.95s; } /* ── Hover dim ──────────────────────────────────────────────── :has() specificity (0,3,2) beats .open nth-child (0,3,1), so transition-delay:0s correctly overrides the stagger. */ /* Non-hovered siblings → fade to 13%, no stagger delay */ .nav-overlay-links:has(.nav-overlay-link:hover) .nav-overlay-link:not(:hover) { opacity: 0.13; transition: opacity 0.38s ease, transform 0.38s ease; transition-delay: 0s; } /* Hovered link → full opacity + subtle rightward nudge */ .nav-overlay-links:has(.nav-overlay-link:hover) .nav-overlay-link:hover { opacity: 1; transform: translateX(6px); transition: opacity 0.38s ease, transform 0.38s ease; transition-delay: 0s; } /* Footer strip — no border line */ .nav-overlay-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; flex-shrink: 0; opacity: 0; transform: translateY(20px); transition: opacity 0.65s var(--ease-out), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .nav-overlay.open .nav-overlay-footer { opacity: 1; transform: none; transition-delay: 0.90s; } /* ── Exit animation ──────────────────────────────────────────── .closing is added by JS on close. All items slide upward and fade out in sequence; the panel bg delay is handled separately by removing .open after a short pause in closeOverlay(). Order: top bar → links 1→4 → footer. ────────────────────────────────────────────────────────────── */ .nav-overlay.closing .nav-overlay-top, .nav-overlay.closing .nav-overlay-link, .nav-overlay.closing .nav-overlay-footer { transition: opacity 0.4s ease-in, transform 0.4s ease-in; } .nav-overlay.closing .nav-overlay-top { opacity: 0; transform: translateY(-20px); transition-delay: 0s; } .nav-overlay.closing .nav-overlay-link { opacity: 0; transform: translateY(-24px); } .nav-overlay.closing .nav-overlay-link:nth-child(1) { transition-delay: 0.06s; } .nav-overlay.closing .nav-overlay-link:nth-child(2) { transition-delay: 0.12s; } .nav-overlay.closing .nav-overlay-link:nth-child(3) { transition-delay: 0.18s; } .nav-overlay.closing .nav-overlay-link:nth-child(4) { transition-delay: 0.24s; } .nav-overlay.closing .nav-overlay-link:nth-child(5) { transition-delay: 0.30s; } .nav-overlay.closing .nav-overlay-footer { opacity: 0; transform: translateY(-16px); transition-delay: 0.32s; } .nav-overlay-email { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #0d0d0d; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity 0.2s; } .nav-overlay-email .footer-email-dot { width: 8px; height: 8px; } .nav-overlay-email:hover { opacity: 0.55; } .nav-overlay-copy { font-size: 13px; color: rgba(0,0,0,0.4); } /* ============================================================ GLOBAL PROGRESSIVE BLUR FADE — fixed to viewport bottom, hidden on hero, visible on all other sections. ============================================================ */ /* Global progressive blur — exact Fabrica structure. Height drives the band size: 200px ÷ 8 = 25px per band. */ .blur-fade { position: fixed; bottom: 0; left: 0; right: 0; height: 260px; pointer-events: none; z-index: 50; isolation: isolate; opacity: 1; transition: opacity 0.4s ease; } .blur-fade.hidden { opacity: 0; } /* ============================================================ CONTACT ============================================================ */ .contact-section { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; margin: 0 8px; border-radius: 20px; } .contact-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .contact-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.74); } .contact-content { position: relative; z-index: 2; width: 100%; padding: 120px 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /* Form card */ .contact-card { background: white; border-radius: 20px; padding: 48px; } .contact-card-logo { margin-bottom: 20px; } .contact-card-logo svg { width: 28px; height: 28px; display: block; } .contact-card-title { font-family: var(--font-heading); font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 36px; line-height: 1.1; white-space: nowrap; } .form-row { margin-bottom: 16px; } .form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--text); } .form-label sup { color: #e04; } .form-input { width: 100%; padding: 13px 16px; border: 1px solid #E0E1E8; border-radius: 10px; font-family: var(--font-body); font-size: 15px; background: #F4F5F7; color: var(--text); outline: none; transition: border-color 0.2s, background 0.2s; -webkit-appearance: none; } .form-input:focus { border-color: #aaa; background: white; } .form-input::placeholder { color: #A8AABB; } textarea.form-input { resize: vertical; min-height: 110px; } .form-submit { width: 100%; margin-top: 8px; padding: 16px; background: var(--text); color: white; border: none; border-radius: 100px; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s, transform 0.2s; } .form-submit:hover { background: #2a2a2a; transform: translateY(-1px); } .form-fine { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 14px; line-height: 1.5; } .form-fine a { text-decoration: underline; } /* Contact info side */ .contact-info {} .contact-heading-row {} .contact-info-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 24px; } .contact-heading { font-family: var(--font-heading); font-size: clamp(60px, 8vw, 108px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.88; color: white; white-space: nowrap; margin-bottom: 24px; } .contact-subtext { font-size: clamp(15px, 1.4vw, 18px); color: rgba(255,255,255,0.82); line-height: 1.55; margin-bottom: 44px; } .contact-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.12); margin-bottom: 44px; } .contact-features { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } .cf-icon { margin-bottom: 14px; color: white; } .cf-icon svg { width: 20px; height: 20px; stroke: white; stroke-width: 1.75; } .cf-title { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: white; margin-bottom: 8px; } .cf-text { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.6; } /* ── Contact me card ── */ .contact-me-card { margin-top: 44px; display: inline-flex; align-items: stretch; gap: 0; } /* Left: photo panel */ .contact-me-img-panel { background: #fff; border-radius: 16px; padding: 6px; flex-shrink: 0; display: flex; /* Only right corners animate to 0 on hover */ transition: border-top-right-radius 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-bottom-right-radius 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .contact-me-card:hover .contact-me-img-panel { border-top-right-radius: 0; border-bottom-right-radius: 0; } .contact-me-photo { width: 96px; flex: 1; object-fit: cover; object-position: center top; border-radius: 10px; display: block; } /* Right: email panel */ .contact-me-email-panel { background: #fff; border-radius: 16px; padding: 16px 116px 16px 16px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; /* Only left corners animate to 0 on hover */ transition: border-top-left-radius 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-bottom-left-radius 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .contact-me-card:hover .contact-me-email-panel { border-top-left-radius: 0; border-bottom-left-radius: 0; } .contact-me-info {} .contact-me-sub { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin-bottom: 4px; } .contact-me-name { font-family: 'Satoshi', sans-serif; font-size: 22px; font-weight: 600; color: #111; letter-spacing: -0.02em; } /* ── Email-directly button ── */ .contact-me-btn { display: inline-flex; align-items: center; align-self: flex-start; /* hug contents */ gap: 8px; background: var(--text); border: 0; color: white; border-radius: 100px; padding: 8px 8px 8px 14px; font-size: 12px; font-weight: 600; overflow: hidden; text-decoration: none; } /* Sliding text label */ .contact-me-btn-label { position: relative; display: block; height: 1.2em; line-height: 1.2; overflow: hidden; } .btn-text-out, .btn-text-in { display: block; white-space: nowrap; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .btn-text-out { transform: translateY(0); opacity: 1; } .btn-text-in { position: absolute; top: 0; left: 0; transform: translateY(-110%); opacity: 0; } .contact-me-btn:hover .btn-text-out { transform: translateY(110%); opacity: 0; } .contact-me-btn:hover .btn-text-in { transform: translateY(0); opacity: 1; } .contact-me-btn.copied .btn-text-out { transform: translateY(110%); opacity: 0; } .contact-me-btn.copied .btn-text-in { transform: translateY(0); opacity: 1; } /* White circle dot */ .contact-me-btn-dot { width: 10px; height: 10px; border-radius: 50%; background: white; flex-shrink: 0; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .contact-me-btn:hover .contact-me-btn-dot { transform: scale(1.25); } .contact-me-btn.copied .contact-me-btn-dot { background: transparent; transform: scale(1); } .contact-me-btn-dot svg { display: block; width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--bg); } .footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; padding: 80px 0 60px; border-bottom: 1px solid var(--border); } .footer-col-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px; } .footer-email-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .footer-email-address { font-family: var(--font-heading); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .footer-email-copy-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--text); border-radius: 999px; background: var(--text); color: white; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .footer-email-copy-btn:hover { background: #2a2a2a; border-color: #2a2a2a; transform: translateY(-1px); } .footer-email-copy-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .footer-copy-icon--success { display: none; } .footer-email-copy-btn.is-copied .footer-copy-icon--default { display: none; } .footer-email-copy-btn.is-copied .footer-copy-icon--success { display: block; } .footer-email-copy-status { max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-family: var(--font-body); font-size: 12px; font-weight: 600; transition: max-width 0.35s ease, margin-left 0.35s ease, opacity 0.2s ease; } .footer-email-copy-btn.is-copied .footer-email-copy-status { max-width: 88px; margin-left: 6px; opacity: 1; } .footer-email-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text); flex-shrink: 0; } .footer-nav { list-style: none; display: flex; flex-direction: column; gap: 14px; } .footer-nav a { font-size: 16px; font-weight: 500; color: var(--text); transition: opacity 0.2s; display: flex; align-items: center; gap: 6px; } .footer-nav a:hover { opacity: 0.5; } .footer-social { list-style: none; display: flex; flex-direction: column; gap: 14px; } .footer-social a { font-size: 16px; font-weight: 500; color: var(--text); transition: opacity 0.2s; display: flex; align-items: center; gap: 6px; } .footer-social a:hover { opacity: 0.5; } .ext-arrow { font-size: 12px; opacity: 0.4; } .footer-logo-area { padding: 72px 0 60px; } .footer-logo-lockup { display: flex; align-items: center; gap: clamp(24px, 2.5vw, 48px); } .footer-logomark-wrap { position: relative; display: flex; flex-shrink: 0; align-items: center; } .footer-logomark { height: clamp(72px, 10vw, 152px); width: auto; display: block; clip-path: circle(50%); /* Sine bell-curve encoded in linear() so the browser interpolates one smooth 0→360° value rather than stitching keyframe segments. Values: output = (1 − cos(πt)) / 2, sampled every 5%. */ animation: footer-logo-spin 5s linear( 0, 0.006 5%, 0.024 10%, 0.055 15%, 0.095 20%, 0.146 25%, 0.206 30%, 0.273 35%, 0.345 40%, 0.422 45%, 0.5 50%, 0.578 55%, 0.655 60%, 0.727 65%, 0.794 70%, 0.854 75%, 0.905 80%, 0.945 85%, 0.976 90%, 0.994 95%, 1 ) infinite; } /* Tooltip */ .footer-logomark-tip { position: absolute; bottom: calc(100% + 14px); left: 0; transform: translateY(6px); white-space: nowrap; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--bg); background: var(--text); padding: 7px 14px; border-radius: 100px; pointer-events: none; opacity: 0; transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } /* Arrow — points to roughly the logomark centre */ .footer-logomark-tip::after { content: ''; position: absolute; top: 100%; left: calc(clamp(72px, 10vw, 152px) / 2); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text); } .footer-logomark-wrap:hover .footer-logomark-tip { opacity: 1; transform: translateY(0); } @keyframes footer-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .footer-big-name { font-family: var(--font-body); font-size: clamp(96px, 14vw, 220px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.9; color: var(--text); white-space: nowrap; } .footer-bottom { background: var(--bg-dark); padding: 20px 0; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; } .footer-copyright { font-size: 13px; color: rgba(255,255,255,0.4); } /* ============================================================ NOISE TEXTURE OVERLAY SVG feTurbulence grain — GPU-rendered, no extra files. pointer-events:none so it never blocks interactions. ============================================================ */ .hero::after, .services-section::after, .contact-section::after { content: ''; position: absolute; inset: 0; z-index: 1; /* above bg/overlay, below all content which sits at z-index 2 */ pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } .hero::after { opacity: 0.13; } .services-section::after { opacity: 0.12; } .contact-section::after { opacity: 0.24; } /* ============================================================ SCROLL ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); } .reveal.visible { opacity: 1; transform: none; } .reveal-up { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal-up.visible { opacity: 1; transform: none; } .reveal-fade { opacity: 0; transition: opacity 0.9s var(--ease-out); } .reveal-fade.visible { opacity: 1; } /* stagger delays for children */ [data-delay="1"] { transition-delay: 0.08s; } [data-delay="2"] { transition-delay: 0.16s; } [data-delay="3"] { transition-delay: 0.24s; } [data-delay="4"] { transition-delay: 0.32s; } [data-delay="5"] { transition-delay: 0.40s; } [data-delay="6"] { transition-delay: 0.48s; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { :root { --gutter: 32px; } .results-inner { grid-template-columns: 1fr; gap: 48px; } .results-photo { max-width: 320px; } .process-steps { grid-template-columns: repeat(2, 1fr); } .numbers-grid { grid-template-columns: repeat(2, 1fr); } .number-item:nth-child(2) { border-right: none; } .number-item:nth-child(3) { border-top: 1px solid var(--border); } .number-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; } .about-inner { grid-template-columns: 1fr; row-gap: 28px; } .about-left { min-height: auto; gap: 20px; } .about-cta--desktop { display: none; } .about-cta--mobile { display: flex; width: 100%; justify-content: center; } .activity-cards { display: grid; grid-template-columns: 1fr 1fr; } .about-title br { display: none; } .about-title { font-size: clamp(16px, 5.2vw, 40px); white-space: nowrap; } .contact-grid { grid-template-columns: 1fr; } /* Contact info: text left, email card right; features full-width below */ .contact-info { display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: start; } .contact-info-eyebrow { grid-column: 1; grid-row: 1; } .contact-heading-row { grid-column: 1; grid-row: 2 / 4; } .contact-me-card { grid-column: 2; grid-row: 1 / 4; align-self: start; } .contact-divider { grid-column: 1 / 3; grid-row: 4; } .contact-features { grid-column: 1 / 3; grid-row: 5; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --gutter: 20px; } .nav-links { display: none; } .nav-cta { display: none; } .hero { margin: 72px 4px 4px; border-radius: 14px; } .services-section { margin: 0 4px; border-radius: 14px; } .contact-section { margin: 0 4px; border-radius: 14px; } .hero-title { font-size: clamp(44px, 11vw, 72px); } .hero-lockup { gap: 12px; } .hero-big-name { font-size: clamp(36px, 14vw, 96px); } .hero-logomark svg { height: clamp(36px, 12vw, 80px); } .hero-scroll { display: none; } .hero-bottom { flex-direction: column; align-items: stretch; gap: 24px; } .hero-desc { max-width: none; font-size: 14px; } .hero-actions { display: grid; grid-template-columns: 1fr 1fr; } .hero-actions .btn { justify-content: center; } .projects-grid { grid-template-columns: 1fr; padding: 0 6px; gap: 8px; } .project-card-thumb { aspect-ratio: 4/3; } .results-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; align-items: start; } .results-photo { grid-column: 2; grid-row: 1; width: 100%; max-width: none; } .results-right { display: contents; } .results-copy { grid-column: 1; grid-row: 1; align-self: start; } .results-heading { font-size: clamp(24px, 7.4vw, 34px); margin-bottom: 0; } .results-stats { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr 1fr; } .result-stat { border-right: 1px solid var(--border); border-bottom: none; padding-right: 16px; margin-right: 16px; } .result-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; } .service-item { grid-template-columns: 40px 1fr; gap: 0; cursor: pointer; } .service-body-content { grid-template-columns: 1fr; gap: 20px; } .service-cats { grid-column: 1 / -1; min-width: unset; } .service-tags { display: none; } .process-header { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 40px; } .process-title { width: 100%; max-width: none; } .process-title br { display: none; } .process-header-actions { width: 100%; align-items: stretch; } .process-subtext { width: 100%; max-width: none; text-align: left; } .process-header-actions .btn { width: 100%; justify-content: center; } .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process-step-body { align-items: center; } .process-step-sentence { font-size: 14px; } .numbers-grid { grid-template-columns: 1fr 1fr; } .faq-inner { grid-template-columns: 1fr; gap: 32px; } .faq-left { position: static; } .faq-heading { font-size: clamp(56px, 14vw, 96px); } .about-right { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; align-items: start; } .contact-info { display: contents; } .contact-info-eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; } .contact-heading-row { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; } .contact-heading { font-size: clamp(44px, 13vw, 68px); margin-bottom: 0; } .contact-subtext { margin-bottom: 0; font-size: 14px; } .contact-me-card { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: 0; } .contact-me-email-panel { flex: 1; padding-right: 16px; } .contact-card { grid-column: 1 / -1; grid-row: 4; padding: 28px 24px; } .contact-divider { grid-column: 1 / -1; grid-row: 5; margin-bottom: 0; } .contact-features { grid-column: 1 / -1; grid-row: 6; } .footer-top { grid-template-columns: 1fr; } .footer-big-name { font-size: clamp(56px, 14vw, 96px); } .footer-bottom-inner { flex-direction: column; gap: 16px; text-align: center; } }