/* Design tokens — dark mode is the default (:root); light mode overrides below via [data-theme="light"] on . Values from the Figma design system (Sections-Dark Mode / Sections-Light Mode). */ :root { --bg-canvas: #04220F; /* page background — same value as wordmark --dark */ --bg-surface: #2E4034; /* small UI chrome, e.g. the theme-toggle pill */ --bg-elevated: #102A1B; /* cards, modal, panels */ --bg-brand: #3DE83D; /* solid brand-green fills (chips, filled buttons) — constant across themes */ --text-primary: #EDF2EE; /* body text — off-white, never pure white */ --text-muted: #8FA396; /* labels, captions, metadata — constant across themes */ --text-accent: #3DE83D; /* colored text/links — shifts per theme for contrast */ --border-rule: #1E3A28; /* dividers, hairlines */ --border-button: #3DE83D; /* pill button outlines — shifts per theme, matches --text-accent */ --accent-ink: #0B1F14; /* text sitting on brand-green blocks — constant across themes */ /* Wordmark logo palette — fixed, independent of page theme (the green logo block itself doesn't change between dark/light per the design) */ --lime: #3DE83D; --dark: #04220F; --white: #EDF2EE; --mid: #0E4A22; /* transient flicker state only, never a resting state */ } [data-theme="light"] { --bg-canvas: #F7FFF7; --bg-surface: #EBF7EB; --bg-elevated: #EBF7EB; /* no separate modal spec in the light-mode file; reusing --bg-surface's tone */ --text-primary: #000000; --text-accent: #159845; --border-rule: #CFE5D7; --border-button: #159845; } /* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 65px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; font-optical-sizing: auto; letter-spacing: 0; line-height: 1.55; color: var(--text-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 900-weight display type — Inter Black needs auto optical sizing and looser tracking than Instrument 600 to avoid muddying at heavy weight */ .intro-heading, .section-label, .project-name, .connect-heading, h1, h2, h3 { font-weight: 900; font-optical-sizing: auto; font-variation-settings: 'opsz' 32; font-feature-settings: "kern" 1, "cv11" 1; text-rendering: optimizeLegibility; } .emphasis { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-variation-settings: 'SOFT' 0, 'WONK' 1; letter-spacing: -0.03em; font-size: 145px; line-height: 0; color: var(--text-accent); display: inline-block; position: relative; top: 0; vertical-align: baseline; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } p { margin: 0; } /* Nav Header */ .nav-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; height: 66px; padding: 0 15px; background: rgba(11, 31, 20, 0.85); background: rgb(from var(--bg-canvas) r g b / 85%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-logotype { flex: 0 0 auto; display: flex; align-items: center; height: 100%; padding: 12px 20px 10px 0; border-bottom: 1px solid var(--border-rule); } .nav-logo-text { font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; display: flex; align-items: center; } .nav-logo-gif { width: 50px; height: 50px; object-fit: contain; } .nav-logo-gif--dark { display: block; } .nav-logo-gif--light { display: none; } [data-theme="light"] .nav-logo-gif--dark { display: none; } [data-theme="light"] .nav-logo-gif--light { display: block; } .nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 40px; height: 100%; padding: 12px 30px 10px 20px; border-bottom: 1px solid var(--border-rule); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-link { font-size: 16px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; padding-bottom: 4px; flex-shrink: 0; transition: color 0.2s; } .nav-link:hover { color: var(--text-accent); } .nav-lang { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 16px; font-weight: 900; line-height: 1; } .nav-lang-active { color: var(--text-primary); } .nav-lang-divider { color: var(--text-muted); } .nav-lang-inactive { color: var(--text-muted); transition: color 0.2s; } .nav-lang-inactive:hover { color: var(--text-accent); } .theme-toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 8px; border: none; border-radius: 99px; background: var(--bg-surface); color: var(--text-primary); cursor: pointer; transition: background 0.2s; } .theme-toggle:hover { background: var(--border-rule); } .theme-toggle-icon { width: 20px; height: 20px; } .theme-toggle-icon--sun { display: none; } [data-theme="light"] .theme-toggle-icon--sun { display: block; } [data-theme="light"] .theme-toggle-icon--moon { display: none; } .nav-hamburger { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 55px; height: 32px; padding: 0; border: none; border-radius: 3px; background: var(--bg-brand); color: var(--accent-ink); cursor: pointer; margin-left: auto; } /* Mobile Menu Overlay — hidden by default; only openable below the 768px breakpoint where the nav row switches to the hamburger trigger. The breakpoint-gated .open rule also force-closes it if the viewport is resized past 768px while it's open. */ .mobile-menu-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: var(--bg-canvas); padding: 20px; overflow-y: auto; } .mobile-menu-topbar { display: flex; align-items: center; justify-content: space-between; } .mobile-menu-logo { font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); } .mobile-menu-controls { display: flex; align-items: center; gap: 24px; } .mobile-menu-close { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: none; color: var(--text-primary); cursor: pointer; } .mobile-menu-links { display: flex; flex-direction: column; margin-top: 70px; } .mobile-menu-link { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; line-height: 28px; color: var(--text-primary); padding: 21px 0; border-bottom: 1px solid var(--border-rule); transition: color 0.2s; } .mobile-menu-link:hover { color: var(--text-accent); } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-logotype { border-bottom: none; } .nav-header { border-bottom: 1px solid var(--border-rule); } .mobile-menu-overlay.open { display: flex; flex-direction: column; } } /* Intro Section */ .intro-section { padding: 45px 15px 0; } .hero-lockup { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 30px; row-gap: 25px; padding-bottom: 80px; border-bottom: 1px solid var(--border-rule); } .logo-block { grid-column: 1; grid-row: 1; flex-shrink: 0; width: 300px; height: 300px; background: var(--lime); overflow: hidden; margin-top: 50px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; } .logo-tagline { grid-column: 1; grid-row: 2; align-self: start; font-weight: 900; font-size: 16px; letter-spacing: -0.02em; color: var(--text-accent); } .wordmark { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0 4px; } .wordmark-line { display: flex; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 900; font-optical-sizing: auto; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.85; white-space: nowrap; } .wordmark-line--raft { letter-spacing: -0.06em; clip-path: inset(0 100% 0 0); transition: clip-path 0.33s cubic-bezier(0.65, 0, 0.35, 1); } .wordmark-line--studio { letter-spacing: -0.04em; clip-path: inset(0 0 0 100%); transition: clip-path 0.33s cubic-bezier(0.65, 0, 0.35, 1) 0.12s; } .wordmark-line--raft.revealed, .wordmark-line--studio.revealed { clip-path: inset(0 0 0 0); } .letter { color: var(--tc); } @media (prefers-reduced-motion: reduce) { .wordmark-line--raft, .wordmark-line--studio { transition: none; clip-path: inset(0 0 0 0); } } .intro-heading { grid-column: 2; grid-row: 1; min-width: 0; margin-top: 50px; } .hero-tags { grid-column: 2; grid-row: 2; align-self: start; display: flex; flex-wrap: nowrap; gap: 20px; clip-path: inset(-20% 100% -20% 0); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .hero-tags.revealed { clip-path: inset(-20% 0 -20% 0); } .hero-tag { font-size: 16px; line-height: 0.95; color: var(--text-primary); } .hero-tag-arrow { color: var(--text-accent); } .client-logos { grid-column: 1 / -1; grid-row: 3; margin-top: 95px; width: 100%; overflow: hidden; opacity: 0; transition: opacity 1s ease; } .client-logos.revealed { opacity: 0.5; } .client-logos-track { display: flex; gap: 40px; width: max-content; animation: client-logos-scroll 24s linear infinite; --marquee-distance: 33.333%; /* fallback for one of 3 sets, before JS measures the exact seam */ } .client-logo { flex-shrink: 0; width: 125px; height: 35px; object-fit: contain; } @keyframes client-logos-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-distance))); } } @media (prefers-reduced-motion: reduce) { .client-logos-track { animation: none; } } .headline-line { display: block; font-size: 128px; line-height: 0.78; letter-spacing: -0.03em; color: var(--text-primary); white-space: nowrap; clip-path: inset(-100% 100% -100% 0); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .headline-line.revealed { clip-path: inset(-100% 0 -100% 0); } @media (prefers-reduced-motion: reduce) { .headline-line { transition: none; clip-path: inset(-100% 0 -100% 0); } .hero-tags { transition: none; clip-path: inset(-20% 0 -20% 0); } } /* Thesis Section */ .thesis-section { padding: 20px 15px 120px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .thesis-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .thesis-text { display: flex; flex-direction: column; gap: 24px; } .thesis-heading { font-size: 28px; line-height: 0.95; color: var(--text-primary); max-width: 368px; } .thesis-body { font-size: 16px; line-height: 1.4; color: var(--text-primary); max-width: 615px; } .thesis-badge { position: relative; flex-shrink: 0; width: 250px; height: 250px; background: var(--lime); overflow: hidden; border-radius: 2px; } .thesis-laptop { position: absolute; inset: 51.025px 2.525px 50.1px 0; width: auto; height: auto; } .thesis-badge-viewport { position: absolute; left: 30.61px; top: 61.22px; width: 186.224px; height: 109.694px; overflow: hidden; } .thesis-marquee { position: absolute; left: 191.36px; top: 17.858px; width: 169.894px; height: 76.534px; animation: thesis-marquee-scroll 3s linear infinite; } .thesis-marquee-item { position: absolute; top: 0; height: 100%; width: auto; } .thesis-marquee-item--1 { left: 0; } .thesis-marquee-item--2 { left: 53.51px; } .thesis-marquee-item--3 { left: 107.11px; } .thesis-girl2 { position: absolute; left: 191.36px; top: 11.266px; width: auto; height: 91.01px; animation: thesis-girl2-scroll 3s linear infinite; } .thesis-girl { position: absolute; left: 48.47px; top: 11.266px; width: auto; height: 91.01px; animation: thesis-girl-scroll 3s linear infinite; } .thesis-oddball { position: absolute; left: 193.90px; top: 7.657px; width: auto; height: 94.38px; animation: thesis-oddball-scroll 3s linear infinite; } @keyframes thesis-marquee-scroll { 0% { translate: 0px 0px; } 15.93% { animation-timing-function: ease-out; translate: -5.102px 0px; } 32.14% { translate: -183.673px 0px; } 47.91% { translate: -181.122px 0px; } 64.2% { translate: -362.245px 0px; } 100% { translate: -362.245px 0px; } } @keyframes thesis-girl2-scroll { 0% { animation-timing-function: ease-out; translate: 0px 0px; } 83.277% { animation-timing-function: ease-out; translate: -2.551px 0px; } 100% { translate: -142.857px 0px; } } @keyframes thesis-girl-scroll { 0% { animation-timing-function: ease-out; translate: 0px 0px; } 15.97% { animation-timing-function: ease-out; translate: 2.553px 0px; } 32.14% { translate: -147.959px 0px; } 100% { translate: -147.959px 0px; } } @keyframes thesis-oddball-scroll { 0% { animation-timing-function: ease-out; translate: 0px 0px; } 47.92% { animation-timing-function: ease-out; translate: -7.653px 0px; } 64.2% { animation-timing-function: ease-out; translate: -130.102px 0px; } 83.277% { animation-timing-function: ease-out; translate: -127.551px 0px; } 100% { translate: -257.653px 0px; } } @media (prefers-reduced-motion: reduce) { .thesis-marquee, .thesis-girl2, .thesis-girl, .thesis-oddball { animation: none; } } /* Services Section */ .services-section { padding: 20px 15px 120px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .services-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .services-cards { display: flex; flex-direction: column; gap: 40px; } .services-row { display: flex; gap: 40px; } .service-card { display: flex; flex-direction: column; gap: 13px; width: 480px; } .service-title { font-size: 28px; line-height: 0.95; color: var(--text-primary); } .service-body { font-size: 16px; line-height: 1.4; color: var(--text-primary); } .service-tag { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--text-accent); } .services-badge { position: relative; flex-shrink: 0; width: 250px; height: 250px; background: var(--lime); overflow: hidden; border-radius: 2px; } .services-leg { position: absolute; width: auto; height: auto; } .services-leg--1 { left: 67.45px; top: 107.025px; } .services-leg--2 { left: 0.225px; top: 107.025px; } .services-leg--3 { left: 136.1px; top: 107.025px; } .services-diamond-wrap { position: absolute; left: 93.95px; top: 45.925px; width: 54.975px; height: 54.95px; display: flex; align-items: center; justify-content: center; animation: services-diamond-move 2.5s linear infinite, services-diamond-scale 2.5s linear infinite; } .services-diamond { width: 38.8668px; height: 38.8619px; transform: rotate(-45deg); } .services-diamond img { width: 100%; height: 100%; display: block; } .services-triangle { position: absolute; left: 160.9px; top: 54.95px; width: 61.68px; height: 46.17px; animation: services-triangle-move 2.5s linear infinite, services-triangle-scale 2.5s linear infinite; } .services-triangle img { width: 100%; height: 100%; display: block; } .services-circle { position: absolute; left: 31.175px; top: 50.4px; width: 46.08px; height: 46.08px; animation: services-circle-move 2.5s linear infinite, services-circle-scale 2.5s linear infinite; } .services-circle img { width: 100%; height: 100%; display: block; } @keyframes services-diamond-move { 0% { translate: 0px -96.939px; } 4% { translate: 0px -119.527px; } 8% { translate: 0px -142.114px; } 12% { translate: 0px -164.701px; } 16% { translate: 0px -187.289px; } 20% { translate: 2.891px -97.487px; } 24% { translate: 1.822px -40.872px; } 28% { translate: 1.096px -19.843px; } 32% { translate: -12.255px 9.482px; } 36% { translate: -8.718px -31.237px; } 40% { translate: -0.329px -88.154px; } 44% { translate: 2.941px -65.008px; } 48% { translate: -2.085px -18.112px; } 52% { translate: 0.739px -21.778px; } 56% { translate: 1.469px -24.28px; } 60% { translate: -0.197px 0.371px; } 64% { translate: 0px 0px; } 100% { translate: 0px 0px; } } @keyframes services-diamond-scale { 0% { scale: 1 1; } 19.743% { animation-timing-function: ease-out; scale: 1 1; } 27.282% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.926 1.08; } 32.576% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.818 0.55; } 41.46% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.8 1.25; } 49.357% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.25 0.8; } 54.786% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.909 1.1; } 58.735% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); scale: 1.064 0.94; } 62.19% { scale: 1 1; } 100% { scale: 1 1; } } @keyframes services-triangle-move { 0% { translate: 0px -100.865px; } 31.694% { animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); translate: 0px -100.865px; } 35.558% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: 0px 5.771px; } 40.389% { animation-timing-function: cubic-bezier(0, 0, 0.4, 1); translate: 0px -87.256px; } 47.152% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 0px -139.656px; } 51.982% { animation-timing-function: cubic-bezier(0.7, 0, 1, 0.7); translate: 0px -69.251px; } 55.847% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: 0px 9.233px; } 61.644% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 0px -79.639px; } 67.44% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: 0px 5.078px; } 71.788% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 0px -29.547px; } 75.652% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); translate: 0px 2.308px; } 80% { translate: 0px 0px; } 100% { translate: 0px 0px; } } @keyframes services-triangle-scale { 0% { scale: 1 1; } 31.694% { animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); scale: 1 1; } 35.558% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.333 0.75; } 40.389% { animation-timing-function: cubic-bezier(0, 0, 0.4, 1); scale: 0.847 1.18; } 47.152% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.952 1.05; } 51.982% { animation-timing-function: cubic-bezier(0.7, 0, 1, 0.7); scale: 1 1; } 55.847% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.667 0.6; } 61.644% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.87 1.15; } 67.44% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.282 0.78; } 71.788% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.926 1.08; } 75.652% { animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); scale: 1.111 0.9; } 80% { scale: 1 1; } 100% { scale: 1 1; } } @keyframes services-circle-move { 0% { translate: 0px -184.332px; } 7.956% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: -2.476px -100.223px; } 22.4% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: -18.852px 20.737px; } 32.48% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 3.515px -109.678px; } 41.44% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); translate: -5.76px 9.217px; } 48.16% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); translate: 1.707px -40.553px; } 52.08% { animation-timing-function: ease-out; translate: -2.004px 3.687px; } 56% { translate: 0px 0px; } 100% { translate: 0px 0px; } } @keyframes services-circle-scale { 0% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 1 1; } 22.4% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.818 0.55; } 32.48% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.847 1.18; } 41.44% { animation-timing-function: cubic-bezier(0, 0, 0.15, 1); scale: 1.25 0.8; } 48.16% { animation-timing-function: cubic-bezier(0.55, 0, 1, 1); scale: 0.926 1.08; } 52.08% { animation-timing-function: ease-out; scale: 1.087 0.92; } 56% { scale: 1 1; } 100% { scale: 1 1; } } @media (prefers-reduced-motion: reduce) { .services-diamond-wrap, .services-triangle, .services-circle { animation: none; } } /* Work Section */ .work-section { padding: 20px 15px 50px; display: flex; flex-direction: column; gap: 10px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .section-label { display: inline-block; align-self: flex-start; font-size: small; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; background: var(--bg-brand); color: var(--accent-ink); padding: 4px 8px; border-radius: 2px; margin-bottom: 133px; } .work-section-footer { display: flex; justify-content: center; margin-top: 40px; } .view-work-cta { font-size: 20px; text-decoration: none; } /* Reel */ .reel-section { padding: 20px 15px 120px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .reel-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid var(--border-rule); } .reel-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Project */ .project { display: flex; flex-direction: column; gap: 20px; padding: 0 15px 50px; max-width: 1920px; } .project-images { margin-right: -15px; overflow: visible; } .image-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-right: 15px; cursor: grab; scrollbar-width: none; } .image-grid::-webkit-scrollbar { display: none; } .image-grid.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .image-grid img { flex: 0 0 calc(42% - 5px); width: calc(42% - 5px); object-fit: cover; aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--border-rule); user-select: none; -webkit-user-drag: none; } .project-info { display: flex; justify-content: space-between; align-items: flex-start; font-size: 16px; letter-spacing: -0.48px; } .project-title { display: flex; gap: 16px; font-weight: 600; font-size: 24px; width: 682px; line-height: 1; } .project-label { color: var(--text-accent); flex-shrink: 0; } .project-names { display: flex; flex-direction: column; gap: 4px; width: 572px; } .project-name { color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.0; } .project-subtitle { color: var(--text-muted); font-weight: 500; } .project-body { display: flex; flex-direction: column; gap: 30px; max-width: 360px; width: 316px; line-height: 1.1; } /* Text Link */ .text-link { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); font-size: 20px; font-weight: 500; transition: color 0.2s; } .text-link:hover { color: var(--text-primary); } .text-link .arrow { color: var(--text-accent); } .text-link-large { font-size: 20px; letter-spacing: -0.6px; } /* Stats Section */ .stats-section { padding: 0 15px 50px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .stats-section .section-label { margin-top: 20px; margin-bottom: 133px; } .stats-content { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 40px; } .stats-badge { flex-shrink: 0; width: 250px; height: 250px; border-radius: 2px; overflow: hidden; } .stats-intro { width: 633px; flex-shrink: 0; padding-top: 12px; } .stats-intro-text { font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.6px; max-width: 325px; margin-bottom: 24px; } .stats-intro-bio { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--text-primary); max-width: 500px; } .stats-contain { flex: 1; display: flex; flex-direction: column; gap: 73px; padding-bottom: 30px; } .stats-list { display: flex; flex-direction: column; gap: 20px; width: 417px; } .stat { display: flex; flex-direction: column; gap: 17px; line-height: 1.1; } .stat-number { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-variation-settings: 'SOFT' 0, 'WONK' 1; font-size: 105px; letter-spacing: -0.03em; line-height: 0.9; color: var(--text-accent); } .stat-description { font-size: 16px; letter-spacing: -0.48px; line-height: 1.1; color: var(--text-muted); } .divider { border: none; border-top: 1px solid var(--border-rule); width: 100%; } /* FAQs Section */ .faq-section { padding: 24px 16px 96px; max-width: 1920px; border-top: 1px solid var(--border-rule); } .faq-section .section-label { margin-bottom: 48px; } .faq-grid { display: flex; flex-direction: column; gap: 48px; width: 100%; } .faq-row { display: flex; align-items: flex-start; gap: 60px; width: 100%; } .faq-item { display: flex; flex-direction: column; gap: 16px; flex: 1 0 0; min-width: 0; } .faq-question { font-size: 28px; line-height: 1; color: var(--text-primary); font-weight: 400; } .faq-answer { font-size: 16px; line-height: 1.5; color: var(--text-primary); } /* Connect Section */ .connect-section { padding: 0 30px 50px; display: flex; flex-direction: column; gap: 34px; max-width: 1920px; } .connect-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .connect-cta-group { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; flex: 1 1 auto; } .connect-heading { font-size: 37px; line-height: 0.95; letter-spacing: -0.025em; } .cta-accent { color: var(--text-accent); } .scan-cta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 20px 30px; border: 1px solid var(--border-button); border-radius: 999px; background: none; color: var(--text-primary); font-family: inherit; font-size: 18px; font-weight: 400; cursor: pointer; transition: background 0.2s, color 0.2s; } .scan-cta:hover { background: var(--bg-brand); color: var(--accent-ink); } .scan-cta-arrow { font-weight: 700; } /* Contact Modal */ .contact-modal-overlay { display: none; position: fixed; inset: 0; z-index: 950; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.2s ease-out; } [data-theme="light"] .contact-modal-overlay { background: rgba(165, 165, 165, 0.5); } .contact-modal-overlay.active { display: flex; } .contact-modal-overlay.visible { opacity: 1; } .contact-modal { width: 100%; max-width: 540px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-canvas); border: 1px solid var(--border-rule); border-radius: 4px; transform: scale(0.96); opacity: 0; transition: transform 0.2s ease-out, opacity 0.2s ease-out; } .contact-modal-overlay.visible .contact-modal { transform: scale(1); opacity: 1; } .contact-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 32px 32px 25px; border-bottom: 1px solid var(--border-rule); } .contact-modal-header-text { display: flex; flex-direction: column; gap: 8px; } .contact-modal-header-text .section-label { margin-bottom: 0; } .contact-modal-headline { font-size: 22px; line-height: 1.25; letter-spacing: -0.5px; color: var(--text-primary); } .contact-modal-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--border-rule); border-radius: 999px; background: none; color: var(--text-primary); cursor: pointer; transition: background 0.2s; } .contact-modal-close:hover { background: var(--border-rule); } .contact-modal-close svg { width: 14px; height: 14px; } .contact-modal-body { padding: 32px; } .contact-modal-form { display: flex; flex-direction: column; gap: 24px; } .contact-modal-field { display: flex; flex-direction: column; gap: 8px; } .contact-modal-field label { font-size: 12px; font-weight: 500; letter-spacing: 0.48px; text-transform: uppercase; color: var(--text-muted); } .contact-modal-field input, .contact-modal-field textarea { width: 100%; padding: 13px 17px; background: rgba(44, 71, 54, 0.35); border: 1px solid var(--border-rule); border-radius: 2px; font-family: inherit; font-size: 16px; color: var(--text-primary); transition: border-color 0.2s; } .contact-modal-field input { height: 50px; } .contact-modal-field textarea { height: 122px; line-height: 1.5; resize: vertical; } .contact-modal-field input::placeholder, .contact-modal-field textarea::placeholder { color: #3C6149; } [data-theme="light"] .contact-modal-field input::placeholder, [data-theme="light"] .contact-modal-field textarea::placeholder { color: #CFE5D7; } .contact-modal-field input:focus, .contact-modal-field textarea:focus { outline: none; border-color: var(--border-button); } .contact-modal-field-error { font-size: 13px; color: #FF8A80; min-height: 0; } [data-theme="light"] .contact-modal-field-error { color: #C62828; } .contact-modal-field-error:empty { display: none; } .contact-modal-submit-row { display: flex; justify-content: flex-end; } .contact-modal-submit { font-size: 16px; } [data-fs-success], [data-fs-error] { display: none; } [data-fs-success][data-fs-active], [data-fs-error][data-fs-active] { display: block; } [data-fs-success][data-fs-active] ~ #contact-modal-form { display: none; } .contact-modal-body .contact-modal-success, .contact-modal-body .contact-modal-error-banner { padding: 16px; border: 1px solid var(--border-rule); border-radius: 2px; /* !important: overrides a background-color the @formspree/ajax runtime injects into its own