/* ===== reset.css ===== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; line-height: 1.2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { font: inherit; } ul[role="list"], ol[role="list"], ul.plain, ol.plain { list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; } :where([hidden]) { display: none !important; } /* ===== tokens.css ===== */ /* ========================================================================== Design tokens — extracted from the Palmer® reference (see docs/REFERENCE_AUDIT.md) ========================================================================== */ :root { --color-black: #000; --color-white: #fff; --color-muted: #999; --color-grey: #bbb; --color-line: rgba(187, 187, 187, 0.2); --color-surface: #222; --color-reveal-dim: #666; --color-focus: #fff; --font-display: "Inter Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-features-display: "ss01", "ss02", "ss03", "ss04", "ss07", "salt"; --font-features-statement: "ss02", "ss03", "ss07", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv08", "cv10", "cv12", "cv13"; --fs-h1: 208px; --lh-h1: 168px; --ls-h1: -8px; --fs-h2: 79px; --lh-h2: 78.6px; --ls-h2: -2.1px; --fs-h3: 49px; --lh-h3: 50.6px; --ls-h3: -0.8px; --fs-body-lg: 19px; --lh-body-lg: 25.2px; --fs-body: 17px; --lh-body: 21.2px; --fs-tag: 16px; --lh-tag: 24px; --fs-small: 14px; --lh-small: 17px; --ls-small: 0.1px; --fs-label: 13px; --lh-label: 13px; --fs-button: 23px; --lh-button: 20px; --ls-button: -0.3px; --fs-menu: clamp(40px, 11vw, 51px); --lh-menu: 0.96; --container-max: 1480px; --page-gutter: 24px; --header-h: 90px; --section-pt: 180px; --section-gap: 80px; --grid-gap: 24px; --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 14px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 30px; --space-9: 40px; --space-10: 50px; --space-11: 80px; --space-12: 120px; --space-13: 160px; --space-14: 180px; --radius-media: 10px; --radius-card: 10px; --radius-small: 6px; --radius-pill: 259px; --radius-article: 24px; --ease-spring-300-40: linear(0, 0.157 4%, 0.44 10%, 0.715 18%, 0.877 26%, 0.955 34%, 0.988 44%, 0.998 56%, 1); --ease-spring-200-40: linear(0, 0.11 5%, 0.31 12%, 0.545 22%, 0.73 32%, 0.85 42%, 0.925 52%, 0.968 64%, 0.99 80%, 1); --ease-spring-300-30: linear(0, 0.22 6%, 0.6 14%, 0.9 24%, 1.03 34%, 1.045 42%, 1.02 54%, 1.002 70%, 1); --ease-spring-bounce20: linear(0, 0.35 10%, 0.8 25%, 1.06 40%, 1.04 52%, 0.99 66%, 1); --ease-intro-drop: cubic-bezier(0.69, 0, 0.05, 0.98); --ease-intro-pop: cubic-bezier(0.95, -0.02, 0.38, 1); --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-spring: 600ms; --duration-spring-long: 900ms; --duration-image: 1200ms; --duration-appear: 1100ms; --menu-reveal-delay: 180ms; --menu-stagger: 45ms; --ticker-speed-heading: 100; --ticker-speed-images: 40; --z-cursor: 13; --z-header: 10; --z-fixed-ui: 9; --z-sticky: 1; --z-cards: 2; --z-loader: 12; } @media (min-width: 1200px) and (max-width: 1439.98px) { :root { --fs-h1: 166px; --lh-h1: 168px; --ls-h1: -8px; } } @media (min-width: 810px) and (max-width: 1199.98px) { :root { --fs-h1: 128px; --lh-h1: 108px; --ls-h1: -6px; --fs-h2: 63px; --lh-h2: 62.6px; --fs-h3: 31px; --lh-h3: 33.6px; --section-pt: 120px; } } @media (max-width: 809.98px) { :root { --fs-h1: 76px; --lh-h1: 68px; --ls-h1: -4px; --fs-h2: 51px; --lh-h2: 50.6px; --fs-h3: 24px; --lh-h3: 24.6px; --page-gutter: 20px; --header-h: 72px; --section-pt: 80px; --section-gap: 60px; } } /* ===== base.css ===== */ /* ========================================================================== Base — fonts, document, focus, selection, utilities ========================================================================== */ @font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } html { background: var(--color-black); color: var(--color-white); font-family: var(--font-display); font-size: 16px; scroll-behavior: auto; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--color-black); color: var(--color-white); font-weight: 500; overflow-x: clip; } body.has-cursor, body.has-cursor * { cursor: none !important; } ::selection { background: var(--color-white); color: var(--color-black); } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--color-white); color: var(--color-black); font-size: 14px; font-weight: 600; border-radius: 6px; transform: translateY(-200%); } .skip-link:focus { transform: none; outline: 2px solid var(--color-black); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; } .button:focus-visible, .nav-link:focus-visible { outline-offset: 4px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .media-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; } .media-contain { width: 100%; height: 100%; object-fit: contain; } .line { flex: none; width: 100%; height: 1px; background: var(--color-line); } .muted { color: var(--color-muted); } .blend { mix-blend-mode: difference; } .fit-text { display: block; width: 100%; height: auto; overflow: visible; } .fit-text text { fill: currentColor; } html.no-js .appear, html.no-js [data-appear] { opacity: 1 !important; transform: none !important; } picture { display: block; width: 100%; height: 100%; } .frame picture, .frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .plain { list-style: none; margin: 0; padding: 0; } .stack { display: flex; flex-direction: column; width: 100%; } .tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; } .tag { padding: 5px 11px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-white); } .tag--status { color: var(--color-muted); } /* ===== typography.css ===== */ /* ========================================================================== Typography presets — exact Palmer® values (docs/REFERENCE_AUDIT.md §0.1) ========================================================================== */ .t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 600; font-feature-settings: var(--font-features-display); white-space: pre; text-align: center; } .t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 500; } .t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 500; font-feature-settings: var(--font-features-statement); } .t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 500; } .t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; } .t-tag { font-size: var(--fs-tag); line-height: var(--lh-tag); font-weight: 600; } .t-small { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-small); font-weight: 600; } .t-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 400; text-transform: uppercase; } .t-button { font-size: var(--fs-button); line-height: var(--lh-button); letter-spacing: var(--ls-button); font-weight: 700; text-transform: uppercase; } .t-letters { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 600; font-feature-settings: var(--font-features-display); } .t-h1 strong, .t-h2 strong, .t-h3 strong { font-weight: inherit; } .t-body-lg strong, .t-body strong, .t-small strong { font-weight: 700; } .prose { max-width: 720px; } .prose > * + * { margin-top: 18px; } .prose h2 { font-size: 27px; line-height: 1.2; letter-spacing: -0.4px; font-weight: 500; margin-top: 56px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 500; margin-top: 40px; } .prose p, .prose li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .prose ul { padding-left: 20px; } .prose li + li { margin-top: 6px; } .prose strong { color: var(--color-white); font-weight: 600; } .prose a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; } .prose table { width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 24px 14px 0; border-bottom: 1px solid var(--color-line); } .prose th { color: var(--color-white); font-weight: 600; } /* ===== layout.css ===== */ /* ========================================================================== Layout — page shell, sections, label rows, grids (values from REFERENCE_AUDIT) ========================================================================== */ .page { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 100vh; background: var(--color-black); } .section { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--container-max); padding-top: var(--section-pt); gap: var(--section-gap); background: var(--color-black); overflow: hidden; } .section--visible { overflow: visible; } .section--start { align-items: flex-start; } .section--end { align-items: flex-end; } .section--gap-0 { gap: 0; } .section--gap-10 { gap: 10px; } .section--gap-30 { gap: 30px; } .section--gap-50 { gap: 50px; } .section--gap-120 { gap: 120px; } .section--pt-50 { padding-top: 50px; } .section--pt-80 { padding-top: 80px; } .section--pt-140 { padding-top: 140px; } .section--pt-0 { padding-top: 0; } .section--pt-120 { padding-top: 120px; } .gutter { padding-left: var(--page-gutter); padding-right: var(--page-gutter); } .w-full { width: 100%; } .stack { display: flex; flex-direction: column; width: 100%; } .row { display: flex; width: 100%; } .section-label { display: flex; flex-direction: column; width: 100%; gap: 10px; overflow: hidden; } .section-label__row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 var(--page-gutter); } .section-label__left { display: flex; align-items: center; gap: 350px; } .section-label__left, .section-label__right { white-space: pre; } .section-label .t-label { color: var(--color-white); } .section-label__mid, .section-label__right { color: var(--color-grey); } .heading-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 0 var(--page-gutter); overflow: visible; } .heading-row--end { justify-content: flex-end; padding-right: 100px; } .heading-row__counter { display: flex; flex-direction: column; align-items: center; gap: 10px; white-space: pre; } .heading-row .t-h1 { white-space: pre; text-align: left; } .heading-row--max { max-width: 870px; align-self: flex-start; } .heading-block { display: flex; align-items: flex-start; gap: 10px; flex: 1 0 0; max-width: 870px; } .cols { display: flex; width: 100%; gap: 30px; padding: 0 var(--page-gutter); align-items: flex-start; } .tagbar { position: relative; width: 100%; height: 24px; background: var(--color-white); overflow: hidden; } .tagbar__inner { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; width: 1440px; height: 24px; } .tagbar__item { text-align: center; } .tagbar__item { color: var(--color-black); white-space: pre; } .line--block { display: block; } .sticky-top { position: sticky; top: 0; } .sticky-130 { position: sticky; top: 130px; } .frame { position: relative; overflow: hidden; border-radius: var(--radius-media); background: var(--color-black); } .frame > img, .frame > picture, .frame > picture > img, .frame > video { width: 100%; height: 100%; object-fit: cover; } .site-footer { width: 100%; max-width: 1440px; } /* ===== components.css ===== */ /* ========================================================================== Components — header, buttons, rolling text, cards, tickers, lists, footer, cursor, forms. All measurements from docs/REFERENCE_AUDIT.md. ========================================================================== */ .site-header { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--container-max); z-index: var(--z-header); background: var(--color-black); display: flex; flex-direction: column; } .site-header__nav { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 26px 140px 26px 24px; overflow: hidden; } .site-header__logo { display: flex; align-items: center; height: 30px; mix-blend-mode: difference; } .site-header__logo svg { height: 17px; width: auto; fill: currentColor; } .site-header__items { display: flex; align-items: center; gap: 270px; } .nav-group { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 300px; } .nav-group__label { white-space: pre; } .nav-group__info { color: var(--color-muted); white-space: pre; } .nav-links { display: flex; align-items: center; } .nav-link { display: block; color: var(--color-muted); white-space: pre; } .nav-link[aria-current="page"] { color: var(--color-white); } .site-header__line { width: 100%; height: 1px; background: var(--color-line); } .site-header__menu-toggle, .mobile-menu { display: none; } .roll { display: inline-flex; overflow: hidden; height: var(--roll-lh, 17px); line-height: var(--roll-lh, 17px); vertical-align: top; } .roll__char { display: block; position: relative; height: var(--roll-lh, 17px); will-change: transform; transition: transform var(--duration-spring) var(--ease-spring-300-30); transition-delay: calc(var(--i, 0) * 25ms); } .roll__char > span { display: block; height: var(--roll-lh, 17px); line-height: var(--roll-lh, 17px); white-space: pre; } .roll--lg { --roll-lh: 20px; } .roll--tag { --roll-lh: 24px; } .roll--body { --roll-lh: 25.2px; } a:hover .roll .roll__char, .roll-host:hover .roll .roll__char, .roll-host.is-hover .roll .roll__char, button:hover .roll .roll__char { transform: translateY(-100%); } .button { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-white); border-radius: var(--radius-pill); overflow: hidden; color: var(--color-white); background: transparent; white-space: pre; isolation: isolate; } .button__fill { position: absolute; left: 0; right: 0; top: calc(115.909% - 3px); height: 6px; background: var(--color-white); transform-origin: 50% 50%; transition: transform var(--duration-spring) var(--ease-spring-300-40); will-change: transform; } .button:hover .button__fill, .button:focus-visible .button__fill, .button.is-hover .button__fill { transform: scaleY(31); } .button__label { position: relative; z-index: 1; display: block; padding: 12px 18px; mix-blend-mode: difference; } .button__label .roll { --roll-lh: 20px; } .button--small .button__label { padding: 10px 14px; } .button--small .t-button { font-size: 17px; } .link__arrow { width: 10px; height: 10px; } .text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-white); } .text-link svg { width: 10px; height: 10px; } .text-link:hover { text-decoration: underline; text-underline-offset: 4px; } .ticker { position: relative; display: flex; align-items: center; width: 100%; height: 200px; overflow: hidden; } .ticker--tablet { height: 120px; } .ticker__track { display: flex; align-items: center; gap: var(--ticker-gap, 0px); width: max-content; will-change: transform; animation: ticker-move var(--ticker-duration, 20s) linear infinite; transform: translate3d(0,0,0); } .ticker__item { flex: none; white-space: pre; } .ticker__item .t-h1 { display: block; mix-blend-mode: difference; } .ticker--images { height: 260px; } .ticker--images .ticker__track { align-items: flex-start; --ticker-gap: 10px; height: 240px; } .ticker--images .ticker__item { border-radius: var(--radius-small); overflow: hidden; } .ticker--images .ticker__item img { width: 100%; height: 100%; object-fit: cover; } .ticker.is-paused .ticker__track { animation-play-state: paused; } @keyframes ticker-move { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--ticker-shift, -50%),0,0); } } .project-card { --media-h: 710px; position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; overflow: hidden; color: var(--color-white); } .project-card__media { position: relative; width: 100%; height: var(--media-h); border-radius: var(--radius-media); overflow: hidden; background: var(--color-black); display: flex; align-items: center; justify-content: center; } .project-card__image { position: absolute; inset: 0; z-index: 1; transition: opacity var(--duration-image) var(--ease-out-soft); } .project-card__image img, .project-card__image picture, .project-card__image picture img { width: 100%; height: 100%; object-fit: cover; } .project-card__inner { position: relative; z-index: 2; width: 50%; height: 50%; border-radius: var(--radius-media); overflow: hidden; } .project-card__inner img, .project-card__inner picture, .project-card__inner picture img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--duration-image) var(--ease-out-soft); will-change: transform; } .project-card__banner { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; display: flex; justify-content: center; align-items: center; min-height: 24px; transform: translateY(-50%); opacity: 0; transition: opacity var(--duration-spring) var(--ease-spring-300-40); pointer-events: none; } .project-card__bar { position: absolute; left: 0; right: 0; top: 50%; height: 24px; margin-top: -12px; background: var(--color-white); transform: scaleY(0.0417); transform-origin: 50% 50%; transition: transform var(--duration-spring) var(--ease-spring-300-40); } .project-card__category { position: relative; z-index: 1; color: var(--color-black); transform: rotateX(90deg); transform-origin: 50% 50%; transition: transform 400ms var(--ease-spring-bounce20) 100ms; } .project-card__meta { display: flex; justify-content: space-between; align-items: center; width: 100%; } .project-card__title { height: 25px; overflow: hidden; } .project-card__title-inner { display: flex; flex-direction: column; transition: transform var(--duration-spring) var(--ease-spring-300-40); } .project-card__title-inner span { display: block; height: 25px; white-space: pre; } .project-card__count { white-space: pre; } .project-card:hover .project-card__image, .project-card.is-hover .project-card__image, .project-card:focus-visible .project-card__image { opacity: 0.4; } .project-card:hover .project-card__inner img, .project-card.is-hover .project-card__inner img, .project-card:focus-visible .project-card__inner img { transform: scale(1.2); } .project-card:hover .project-card__banner, .project-card.is-hover .project-card__banner, .project-card:focus-visible .project-card__banner { opacity: 1; } .project-card:hover .project-card__bar, .project-card.is-hover .project-card__bar, .project-card:focus-visible .project-card__bar { transform: scaleY(1); } .project-card:hover .project-card__category, .project-card.is-hover .project-card__category, .project-card:focus-visible .project-card__category { transform: rotateX(0); } .project-card:hover .project-card__title-inner, .project-card.is-hover .project-card__title-inner, .project-card:focus-visible .project-card__title-inner { transform: translateY(-25px); } .project-card__type { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #0a0a0a; } .project-card__type span { display: block; font-size: 49px; line-height: 50.6px; letter-spacing: -0.8px; font-weight: 500; } @media (hover: none) { .project-card__banner { opacity: 1; } .project-card__bar { transform: scaleY(1); } .project-card__category { transform: none; } } .work-grid { display: flex; flex-direction: column; align-items: center; gap: 160px; width: 100%; padding: 0 var(--page-gutter); margin-top: -50px; } .work-grid__row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .work-grid__row--center { justify-content: center; } .work-grid__row--end { align-items: flex-end; margin-top: 100px; } .work-grid__col { display: flex; flex-direction: column; } .work-grid__col--50 { width: 50%; padding-top: 100px; } .work-grid__col--35 { width: 35%; } .work-grid__col--32 { width: 32%; } .work-grid__col--32-offset { width: 32%; padding-top: 100px; } .work-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: 570px; padding: 0 var(--page-gutter); } .work-intro p { max-width: 540px; } .logo-grid { display: flex; flex-direction: column; width: 100%; } .logo-grid__row { display: flex; width: 100%; overflow: hidden; } .logo-cell { flex: 1 0 0; display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 65px 24px; color: var(--color-white); } .logo-cell--logo { border: 1px solid var(--color-line); border-radius: var(--radius-media); } .logo-cell a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; } .logo-cell img { display: block; height: 40px; width: auto; max-width: 120px; object-fit: contain; } .logo-cell svg { height: 24px; } .logo-cell--text { font-size: 15px; font-weight: 600; letter-spacing: 0; text-align: center; } .logo-cell--empty { visibility: hidden; } .about { display: flex; align-items: flex-start; gap: 30px; width: 100%; padding: 0 var(--page-gutter); } .about__image { position: relative; flex: none; width: 473px; height: 797px; border-radius: var(--radius-media); overflow: hidden; } .about__image .parallax { width: 100%; height: 150%; } .about__image img { width: 100%; height: 100%; object-fit: cover; } .about__text { flex: 1 0 0; display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding-top: 50px; } .about__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; } .about__heading .t-h3 { mix-blend-mode: difference; } .about__bottom { display: flex; flex-direction: column; width: 100%; } .about__tagbar { position: absolute; left: 0; top: 517px; z-index: 0; } .about--relative { position: relative; } .services-list { display: flex; flex-direction: column; align-items: center; width: 873px; max-width: 100%; padding: 0 var(--page-gutter); } .service-row { display: flex; flex-direction: column; gap: 40px; width: 100%; padding-bottom: 40px; color: var(--color-white); } .service-row__content { display: flex; align-items: flex-start; gap: 227px; width: 100%; } .service-row__left { flex: 1 0 0; display: flex; align-items: center; gap: 124px; max-width: 300px; } .service-row__no { flex: 1 0 0; max-width: 30px; padding-top: 3px; } .service-row__title { flex: 1 0 0; max-width: 312px; } .service-row__body { flex: 1 0 0; max-width: 320px; padding-top: 3px; color: var(--color-muted); } .service-row__title { transition: opacity var(--duration-base) ease; } .profile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 264px; width: 100%; padding: 280px var(--page-gutter) 0; overflow: hidden; } .profile__img { position: absolute; border-radius: var(--radius-media); overflow: hidden; } .profile__img picture, .profile__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .profile__img--1 { width: 326px; height: 473px; top: 1356px; left: 116px; } .profile__img--2 { width: 454px; height: 659px; top: 896px; right: 24px; } .profile__img--3 { width: 326px; height: 473px; top: 670px; left: 116px; } .profile__text { position: relative; z-index: 1; width: 100%; max-width: 1000px; mix-blend-mode: difference; } .reveal-text { display: flex; flex-wrap: wrap; justify-content: flex-start; color: var(--color-reveal-dim); } .reveal-text .word { display: inline-flex; white-space: pre; } .reveal-text .ch { color: var(--color-reveal-dim); } .reveal-text .ch.is-on { color: var(--color-white); } .profile__cta { display: flex; flex-direction: column; align-items: flex-end; width: 100%; padding-right: 356px; } .profile__cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: 450px; mix-blend-mode: difference; } .profile__cta-inner p { color: var(--color-muted); } .profile__cta-inner strong { color: var(--color-white); } .table { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; padding: 0 var(--page-gutter); } .table-row { display: flex; flex-direction: column; gap: 16px; width: 100%; } .table-row__content { display: flex; align-items: flex-start; gap: 227px; width: 100%; } .table-row__half { flex: 1 0 0; display: flex; align-items: center; gap: 227px; } .table-row__cell { flex: 1 0 0; max-width: 300px; } .table-row__cell:last-child { text-align: right; } .table-row__cell p { max-width: 312px; } .exp-head { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 0 var(--page-gutter); } .exp-head__heading { flex: 1 0 0; display: flex; flex-direction: column; gap: 40px; max-width: 1000px; } .exp-head__image { position: relative; flex: none; } .exp-head__image .frame { width: 136px; height: 198px; } .exp-head__mark { position: absolute; left: -40px; bottom: 2px; z-index: 1; width: 64px; height: 58px; mix-blend-mode: difference; } .exp-head__mark svg { width: 100%; height: 100%; fill: var(--color-white); } .letters { display: flex; flex-wrap: wrap; } .letters > span { display: block; white-space: pre; } .sticky-stage { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: visible; } .sticky-stage__content { flex: 1 0 0; display: flex; flex-direction: column; align-items: center; gap: 40px; overflow: hidden; } .sticky-stage__button { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 540px; } .quote-cards { position: relative; z-index: var(--z-cards); display: flex; flex-direction: column; align-items: center; gap: 200px; width: 100%; overflow: hidden; } .quote-cards__row { display: flex; justify-content: center; align-items: flex-start; gap: 420px; width: 100%; padding: 0 var(--page-gutter); } .quote-cards__row--single { gap: 300px; } .quote-cards__col { display: flex; flex-direction: column; } .quote-cards__col--offset { padding-top: 140px; } .quote-cards__spacer { width: 100%; height: 200px; } .quote-card { display: flex; flex-direction: column; gap: 30px; width: 370px; padding: 20px 20px 24px; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-black); } .quote-card__text { width: 100%; } .quote-card__bottom { display: flex; flex-direction: column; gap: 20px; width: 100%; } .quote-card__user { display: flex; align-items: center; gap: 20px; width: 100%; padding-right: 10px; } .quote-card__avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: var(--radius-small); border: 1px solid var(--color-line); overflow: hidden; font-size: 14px; font-weight: 600; } .quote-card__details { flex: 1 0 0; display: flex; flex-direction: column; } .quote-card__name { display: flex; align-items: center; gap: 5px; } .quote-card__name svg { width: 20px; height: 20px; } .quote-card__role { padding-top: 3px; color: var(--color-muted); } .quote-card__logo { flex: none; width: 65px; height: 25px; display: flex; align-items: center; justify-content: flex-end; } .quote-card__logo svg { height: 22px; width: auto; fill: var(--color-white); } .impact-list { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 var(--page-gutter); } .impact-row { display: flex; flex-direction: column; gap: 40px; width: 100%; } .impact-row--pt { padding-top: 40px; } .impact-row__container { display: flex; align-items: flex-start; gap: 50px; width: 100%; } .impact-row__text { flex: 1 0 0; display: flex; align-items: flex-start; gap: 160px; } .impact-row__no, .impact-row__name { flex: 1 0 0; max-width: 150px; } .impact-row__body { flex: 1 0 0; max-width: 270px; padding-top: 3px; color: var(--color-muted); } .impact-row__images { display: flex; align-items: flex-start; gap: 10px; } .impact-row__images .frame { border-radius: var(--radius-small); } .impact-row__images .frame:nth-child(1) { width: 84px; height: 123px; } .impact-row__images .frame:nth-child(2) { width: 102px; height: 96px; } .impact-row__images .frame:nth-child(3) { width: 107px; height: 123px; } .impact-row__images .frame:nth-child(4) { width: 87px; height: 108px; } .space { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; overflow: visible; } .space__sticky { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; width: 100%; height: 100vh; overflow: visible; } .space__content { flex: 1 0 0; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; } .space__stage { display: flex; flex-direction: column; align-items: center; width: min-content; transform-style: preserve-3d; transform: perspective(800px) translateY(240px) rotateY(90deg); will-change: transform; } .space__row { position: relative; display: flex; align-items: center; justify-content: center; width: 865px; height: 151px; transform-style: preserve-3d; overflow: visible; } .space__card { position: absolute; left: 0; top: calc(50% - 107.5px); width: 320px; height: 215px; transform: rotateY(-90deg); border-radius: var(--radius-media); overflow: hidden; background: #111; } .space__card img, .space__card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .space__card-mark { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; } .space__card-mark img, .space__card-mark svg { width: auto; max-width: 110px; height: 25px; } .space__card-mark--text { flex-direction: column; gap: 6px; text-align: center; padding: 20px; } .space__trigger { width: 100%; height: 1400px; } .plans { display: flex; align-items: stretch; gap: 24px; width: 100%; padding: 0 var(--page-gutter); } .plan { flex: 1 0 0; display: flex; flex-direction: column; border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; } .plan__top { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; width: 100%; padding: 30px 20px; } .plan__head { display: flex; align-items: flex-end; width: 100%; } .plan__name { mix-blend-mode: difference; white-space: pre; } .plan__unit { flex: 1 0 0; padding-bottom: 4px; padding-left: 4px; color: var(--color-muted); } .plan__content { display: flex; flex-direction: column; gap: 10px; width: 100%; } .plan__desc { color: var(--color-muted); } .plan__sep { width: 100%; padding: 0 1px; } .plan__bottom { display: flex; flex-direction: column; gap: 30px; width: 100%; padding: 30px 20px; } .plan__points { display: flex; flex-direction: column; gap: 12px; width: 100%; } .plan__point { display: flex; align-items: center; gap: 14px; width: 100%; } .plan__point svg { flex: none; width: 16px; height: 16px; } .plan__point--muted { opacity: 0.5; } .feature-cards { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; padding: 0 var(--page-gutter); overflow: visible; } .feature-cards__item { position: sticky; top: 20px; z-index: 1; width: 100%; } .feature-cards__item:last-child { position: relative; top: 0; } .feature-card { display: flex; flex-direction: column; width: 100%; color: var(--color-white); background: var(--color-black); overflow: hidden; } .feature-card__container { display: flex; align-items: flex-start; width: 100%; } .feature-card__left { position: relative; flex: 1 0 0; display: flex; flex-direction: column; height: 600px; overflow: hidden; border-radius: var(--radius-media); } .feature-card__left picture, .feature-card__left img { width: 100%; height: 100%; object-fit: cover; } .feature-card__banner { position: absolute; left: 0; right: 0; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 24px; transform: translateY(-50%); opacity: 0; transition: opacity var(--duration-spring) var(--ease-spring-300-40); pointer-events: none; } .feature-card__bar { position: absolute; left: 0; right: 0; top: 50%; height: 24px; margin-top: -12px; background: var(--color-white); transform: scaleY(0.0417); transition: transform var(--duration-spring) var(--ease-spring-300-40); } .feature-card__category { position: relative; z-index: 1; color: var(--color-black); transform: rotateX(90deg); transition: transform 400ms var(--ease-spring-bounce20) 100ms; } .feature-card__right { flex: 1 0 0; display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch; gap: 110px; background: var(--color-black); } .feature-card__top { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .feature-card__thumb { width: 215px; height: 226px; border-radius: var(--radius-media); overflow: hidden; } .feature-card__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--duration-image) var(--ease-out-soft); will-change: transform; } .feature-card__title { position: absolute; left: 50%; top: 54%; z-index: 1; transform: translate(-50%, -50%); white-space: pre; mix-blend-mode: difference; } .feature-card__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; padding: 0 24px 40px; } .feature-card__date { max-width: 300px; } .feature-card__body { max-width: 320px; color: var(--color-muted); } .feature-card:hover .feature-card__banner, .feature-card.is-hover .feature-card__banner { opacity: 1; } .feature-card:hover .feature-card__bar, .feature-card.is-hover .feature-card__bar { transform: scaleY(1); } .feature-card:hover .feature-card__category, .feature-card.is-hover .feature-card__category { transform: rotateX(0); } .feature-card:hover .feature-card__thumb img, .feature-card.is-hover .feature-card__thumb img { transform: scale(1.2); } @media (hover: none) { .feature-card__banner { opacity: 1; } .feature-card__bar { transform: scaleY(1); } .feature-card__category { transform: none; } } .faq-layout { display: flex; align-items: center; gap: 80px; width: 100%; padding: 0 var(--page-gutter); } .faq-layout__title { display: none; } .faq-layout__statement { position: sticky; top: 0; z-index: 1; flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; max-width: 540px; } .faq-layout__statement .frame { width: 136px; height: 198px; } .faq-layout__statement .t-h3 { mix-blend-mode: difference; white-space: pre-wrap; } .faq { display: flex; flex-direction: column; width: 772px; max-width: 100%; } .faq__item { display: flex; flex-direction: column; width: 100%; } .faq__trigger { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 42px 0; text-align: left; color: var(--color-white); } .faq__content { display: flex; align-items: flex-start; gap: 0; width: 100%; } .faq__no { flex: none; width: 30px; margin-right: 160px; padding-top: 3px; } .faq__qa { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .faq__question { max-width: 560px; } .faq__answer { display: grid; grid-template-rows: 0fr; max-width: 560px; transition: grid-template-rows var(--duration-spring) var(--ease-spring-300-40); } .faq__answer-inner { overflow: hidden; } .faq__answer p { padding: 0 0 42px; color: var(--color-muted); } .faq__item.is-open .faq__trigger { padding-bottom: 13px; } .faq__item.is-open .faq__answer { grid-template-rows: 1fr; } .faq__icon { flex: none; width: 18px; height: 18px; margin-top: 3px; margin-left: 20px; position: relative; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; border-radius: 1px; transform: translate(-50%, -50%); transition: transform var(--duration-spring) var(--ease-spring-300-40); } .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .faq__item:last-child .line--end { margin-top: 40px; } .site-footer { display: flex; flex-direction: column; align-items: center; gap: 50px; width: 100%; max-width: 1440px; padding-top: 180px; overflow: hidden; } .site-footer__top { display: flex; flex-direction: column; align-items: center; gap: 80px; width: 100%; } .site-footer__content { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; padding: 0 var(--page-gutter); } .site-footer__content p { max-width: 550px; text-align: center; } .site-footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .site-footer__nav { display: flex; align-items: center; gap: 10px; width: 100%; padding: 24px; } .site-footer__nav-inner { flex: 1 0 0; display: flex; justify-content: space-between; align-items: center; } .site-footer__group { display: flex; flex-direction: column; gap: 3px; max-width: 300px; } .site-footer__group--end { align-items: flex-end; } .site-footer__group .nav-links { flex-wrap: wrap; } .site-footer__giant { width: 100%; padding: 110px var(--page-gutter) 0; } .site-footer__giant svg { width: 100%; height: auto; mix-blend-mode: difference; } .mail-button { position: fixed; right: 12px; top: 50%; z-index: var(--z-fixed-ui); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface); color: var(--color-white); transform: translateY(-50%); transition: background var(--duration-base) ease, color var(--duration-base) ease; } .mail-button svg { width: 14px; height: 14px; } .mail-button:hover { background: var(--color-white); color: var(--color-black); } .cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; opacity: 0; transform: translate(-50%, -50%); will-change: transform; } .cursor.is-visible { opacity: 1; } .cursor__inner { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-black); mix-blend-mode: difference; overflow: hidden; transition: width var(--duration-spring) var(--ease-spring-300-40), height var(--duration-spring) var(--ease-spring-300-40), border-radius var(--duration-spring) var(--ease-spring-300-40); } .cursor__label { display: none; padding: 0 18px; white-space: pre; color: var(--color-black); } .cursor__image { display: none; width: 100%; height: 100%; object-fit: cover; } .cursor--label .cursor__inner { width: auto; height: 44px; min-width: 94px; mix-blend-mode: normal; } .cursor--label .cursor__label { display: block; } .cursor--image .cursor__inner { width: 160px; height: 230px; border-radius: 5px; mix-blend-mode: normal; background: #111; } .cursor--image .cursor__image { display: block; } .cursor.is-pressed .cursor__inner { width: 10px; height: 10px; } .cursor--image.is-pressed .cursor__inner { width: 150px; height: 216px; } body.has-cursor .cursor { display: block; } @media (hover: none), (pointer: coarse) { .cursor { display: none !important; } body.has-cursor, body.has-cursor * { cursor: auto !important; } } .hero { padding-top: var(--header-h); gap: 0; } .hero__top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 24px; overflow: hidden; } .hero__heading { position: relative; z-index: 1; flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; max-width: 540px; padding-top: 16px; } .hero__heading-line { display: block; width: 100%; overflow: hidden; } .hero__heading-line .t-h3 { display: block; } .hero__heading-line .t-h3 { mix-blend-mode: difference; white-space: pre-wrap; } .hero__tagbar { position: absolute; left: 0; right: 0; top: 318px; z-index: 2; margin-top: -12px; } .hero__reel { position: relative; z-index: 3; flex: none; width: 390px; height: 379px; border-radius: var(--radius-media); overflow: hidden; background: #111; } .hero__reel img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .hero__reel img.is-prev { z-index: 1; } .hero__reel img.is-active { z-index: 2; animation: reel-in 1200ms ease both; } @keyframes reel-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero__reel img.is-active { animation: none; } } .hero__bottom { position: relative; display: flex; flex-direction: column; width: 100%; } .hero__line { width: 100%; height: 1px; background: var(--color-line); } .hero__title { position: relative; display: flex; align-items: center; width: 100%; height: 350px; padding: 0 var(--page-gutter); overflow: hidden; } .hero__name { width: 100%; mix-blend-mode: difference; transform-origin: 50% 50%; } .hero__name svg { width: 100%; height: auto; fill: var(--color-white); } .hero__loader { position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; background: var(--color-black); opacity: 0.9; transform: translateX(100%); } html.is-intro .hero__loader { transform: translateX(0); } .work-index { display: flex; align-items: flex-start; gap: 50px; width: 100%; padding: 90px var(--page-gutter) 0; overflow: visible; } .work-index__heading { position: sticky; top: 130px; z-index: 1; flex: 1 0 0; display: flex; align-items: flex-end; gap: 10px; padding: 252px 0 24px; overflow: hidden; } .work-index__heading .t-h1 { text-align: left; } .work-index__counter { display: flex; flex-direction: column; align-items: center; padding-bottom: 118px; } .work-index__list { display: flex; flex-direction: column; gap: 10px; width: 50%; padding: 24px 0 24px 24px; border-left: 1px solid var(--color-line); } .work-index__list .project-card { --media-h: 531px; } .case { display: flex; align-items: flex-start; gap: 50px; width: 100%; padding: 0 var(--page-gutter); overflow: visible; } .case__info { position: sticky; top: 130px; z-index: 1; flex: 1 0 0; display: flex; align-items: flex-start; padding: 50px 0 24px; overflow: hidden; } .case__info-inner { display: flex; flex-direction: column; gap: 44px; width: 100%; max-width: 500px; } .case__intro { display: flex; flex-direction: column; gap: 24px; } .case__desc { color: var(--color-muted); } .case__meta { display: flex; flex-direction: column; gap: 10px; width: 100%; } .meta-row { display: flex; flex-direction: column; gap: 10px; width: 100%; } .meta-row__content { display: flex; align-items: center; gap: 6px; width: 100%; } .meta-row__label { white-space: pre; } .meta-row__value { flex: 1 0 0; color: var(--color-muted); } .case__media { display: flex; flex-direction: column; gap: 24px; width: 60%; padding: 24px 0 24px 24px; border-left: 1px solid var(--color-line); } .case__figure { display: flex; flex-direction: column; gap: 12px; width: 100%; } .case__figure .frame { width: 100%; height: 680px; } .case__figure .frame--logo { display: flex; align-items: center; justify-content: center; height: 420px; background: #0a0a0a; padding: 60px; } .case__figure .frame--logo img, .case__figure .frame--logo svg { width: 60%; height: auto; max-height: 200px; object-fit: contain; } .case__figure figcaption { color: var(--color-muted); } .case__text { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 640px; padding: 40px 0 16px; } .case__text p { color: var(--color-muted); } .dezoom { overflow: hidden; } .dezoom img { transform: scale(1.3); transform-origin: 50% 50%; will-change: transform; } .more-works { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 0 var(--page-gutter); } .more-works .project-card { flex: 1 0 0; --media-h: 640px; } .article-hero { display: flex; flex-direction: column; gap: 60px; width: 100%; max-width: var(--container-max); padding: 140px var(--page-gutter) 24px; } .article-hero__top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .article-hero__left { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 500px; } .article-hero__left .t-h2 { white-space: pre-wrap; } .article-hero__intro { color: var(--color-muted); } .article-hero__right { flex: 1 0 0; display: flex; flex-direction: column; gap: 44px; max-width: 500px; } .article-body { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: var(--container-max); padding: 0 var(--page-gutter); } .article-images { display: flex; align-items: flex-start; gap: 10px; width: 100%; } .article-images__sticky { position: sticky; top: 0; z-index: 1; flex: 1 0 0; display: flex; height: 100vh; padding: 10px 0; overflow: hidden; } .article-images__sticky .frame { width: 100%; height: 100%; border-radius: var(--radius-article); } .article-images__col { flex: 1 0 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 0; } .article-images__col .frame { height: 600px; border-radius: var(--radius-article); } .article-images__single .frame { width: 100%; height: 700px; border-radius: var(--radius-article); } .article-text { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 1000px; padding: 80px 0; } .article-text .t-body { color: var(--color-muted); } .article-text--last { padding-bottom: 0; } .article-text .t-body-lg { mix-blend-mode: difference; } .gallery { display: flex; align-items: center; justify-content: center; width: 100%; max-width: var(--container-max); padding-bottom: 180px; overflow: hidden; } .gallery__content { position: relative; flex: 1 0 0; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: visible; } .gallery__text { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: 77px; mix-blend-mode: difference; } .gallery__images { position: absolute; z-index: 2; left: calc(50% - 654.5px); top: calc(55% - 449px); width: 1309px; height: 898px; overflow: visible; } .gallery__item { position: absolute; display: block; border-radius: var(--radius-media); overflow: hidden; transform: translate(-50%, -50%); will-change: transform; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; } .gallery__item--shadow { box-shadow: -46px -35px 104px -3.75px rgba(0,0,0,.02), -25px -19px 57px -3.3px rgba(0,0,0,.04), -9px -7px 20px -2.3px rgba(0,0,0,.06); } .contact { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: var(--container-max); padding-top: 116px; mix-blend-mode: difference; } .contact__top { position: relative; display: flex; justify-content: space-between; align-items: flex-end; width: 100%; padding: 0 var(--page-gutter); } .contact__image { flex: 1 0 0; width: 100%; max-width: 490px; height: 336px; border-radius: var(--radius-media); overflow: hidden; } .contact__image img { width: 100%; height: 100%; object-fit: cover; } .contact__lists { flex: 1 0 0; display: flex; flex-direction: column; gap: 10px; max-width: 500px; padding-bottom: 120px; } .contact__tagbar { position: absolute; left: 0; right: 0; bottom: 32px; z-index: -1; } .contact-row { display: flex; flex-direction: column; gap: 10px; width: 100%; color: var(--color-white); } .contact-row__content { display: flex; align-items: center; gap: 10px; width: 100%; } .contact-row__text { flex: 1 0 0; height: 24px; overflow: hidden; } .contact-row__text-inner { display: flex; flex-direction: column; gap: 10px; transition: transform var(--duration-spring) var(--ease-spring-300-40); } .contact-row__text-inner span { display: block; height: 24px; white-space: pre; } .contact-row__icon { flex: none; width: 24px; height: 24px; } .contact-row__line { position: relative; width: 100%; height: 1px; background: var(--color-line); overflow: visible; } .contact-row__fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--color-white); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duration-spring) var(--ease-spring-300-40); } .contact-row:hover .contact-row__text-inner { transform: translateY(-34px); } .contact-row:hover .contact-row__fill { transform: scaleX(1); } .contact__bottom { display: flex; flex-direction: column; gap: 10px; width: 100%; } .contact__giant { width: 100%; } .contact__giant svg { width: 100%; height: auto; fill: var(--color-white); } .form-section { display: flex; flex-direction: column; gap: 50px; width: 100%; max-width: var(--container-max); padding: 120px var(--page-gutter) 0; } .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; width: 100%; max-width: 1000px; } .form__field { display: flex; flex-direction: column; gap: 10px; } .form__field--full { grid-column: 1 / -1; } .form__label { font-size: 16px; line-height: 24px; font-weight: 600; } .form__hint { color: var(--color-muted); } .form__input { width: 100%; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--color-line); color: var(--color-white); font-size: 19px; line-height: 25.2px; font-weight: 500; border-radius: 0; transition: border-color var(--duration-base) ease; } .form__input::placeholder { color: #666; } .form__input:focus { outline: none; border-bottom-color: var(--color-white); } textarea.form__input { min-height: 120px; resize: vertical; } select.form__input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 28px; } select.form__input option { color: var(--color-black); } .form__checks { display: flex; flex-wrap: wrap; gap: 12px 28px; } .form__check { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; line-height: 21.2px; } .form__check input { width: 18px; height: 18px; accent-color: var(--color-white); } .form__actions { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 16px; } .form__status { color: var(--color-muted); } .form__status.is-error { color: #ff6b6b; } .form__status.is-success { color: var(--color-white); } .form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .steps { display: flex; flex-direction: column; width: 100%; max-width: 772px; } .services-full { display: flex; flex-direction: column; width: 100%; max-width: 1000px; padding: 0 var(--page-gutter); } .service-block { display: flex; flex-direction: column; gap: 40px; width: 100%; padding: 40px 0; } .service-block__head { display: flex; align-items: flex-start; gap: 60px; width: 100%; } .service-block__no { flex: none; width: 60px; color: var(--color-muted); } .service-block__body { flex: 1 0 0; display: flex; flex-direction: column; gap: 16px; } .service-block__lead { color: var(--color-white); } .service-block__text { color: var(--color-muted); max-width: 640px; } .service-block__scope { display: flex; flex-wrap: wrap; gap: 8px 10px; } .service-block__scope li { padding: 6px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); font-size: 14px; line-height: 17px; font-weight: 600; color: var(--color-muted); } .grid-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 1000px; } .grid-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--color-line); border-radius: var(--radius-card); } .grid-card__no { color: var(--color-muted); } .grid-card p { color: var(--color-muted); } .grid-card__result { color: var(--color-white); } .notfound { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: var(--container-max); overflow: visible; } .notfound__scroll { flex: 1 0 0; display: flex; flex-direction: column; align-items: center; height: 100vh; overflow: visible; } .notfound__sticky { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; } .notfound__content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 1100px; padding-top: 77px; } .notfound__content .t-h1 { white-space: pre-wrap; } .notfound__bg { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; opacity: 0.55; } .simple { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; max-width: var(--container-max); padding: 140px var(--page-gutter) 0; } .button-row { display: flex; flex-wrap: wrap; gap: 16px; } .eyebrow { color: var(--color-muted); } @media (hover: none) { .hover-only { display: none !important; } } .work-index__heading-inner { display: flex; flex-direction: column; gap: 32px; max-width: 560px; } .work-index__heading .t-h1 { font-size: 150px; line-height: 0.9; letter-spacing: -6px; white-space: pre; } .work-index__intro { max-width: 420px; } .case__intro .eyebrow { margin-bottom: -8px; } .case__figure .frame { height: auto; aspect-ratio: 4 / 3; } .case__figure .frame--wide { aspect-ratio: 16 / 9; } .case__figure .frame--logo { aspect-ratio: auto; height: 420px; } .case__type { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--color-line); border-radius: var(--radius-media); background: #0a0a0a; } .case__text .eyebrow { margin-bottom: -2px; } .cta-wrap { width: 100%; padding: 0 var(--page-gutter); display: flex; justify-content: center; } .article-text--center { align-items: center; text-align: center; max-width: 760px; padding: 40px 0 0; } .article-text--center .button-row { justify-content: center; } .article-hero--wide .article-hero__left { max-width: 640px; } .article-hero .eyebrow { margin-bottom: -8px; } .article-text .eyebrow { margin-bottom: -10px; } .article-text--cta .button-row { padding-top: 12px; } .article-text blockquote { margin: 16px 0 0; padding-left: 24px; border-left: 1px solid var(--color-line); } .article-text blockquote p { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 500; color: var(--color-white); } .article-text blockquote cite { display: block; margin-top: 16px; font-style: normal; color: var(--color-muted); font-size: 14px; line-height: 17px; } .article-text blockquote cite strong { color: var(--color-white); } .article-text .grid-cards, .article-text .table-simple, .article-text .services-full { margin-top: 24px; } .grid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-card__list { display: flex; flex-direction: column; gap: 6px; color: var(--color-muted); } .grid-card__list li::before { content: "\2014 "; color: var(--color-muted); } .table-simple { width: 100%; overflow-x: auto; } .table-simple table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); } .table-simple th, .table-simple td { text-align: left; vertical-align: top; padding: 14px 24px 14px 0; border-bottom: 1px solid var(--color-line); } .table-simple tbody th { color: var(--color-white); font-weight: 500; width: 50%; } .table-simple thead th { color: var(--color-muted); font-weight: 400; font-size: 13px; line-height: 13px; text-transform: uppercase; letter-spacing: 0.02em; padding-top: 0; } .scope-list { display: flex; flex-wrap: wrap; gap: 8px 10px; } .scope-list li { padding: 6px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-white); } .services-full { padding: 0; } .service-block__head { align-items: flex-start; } .service-block__body h2 { color: var(--color-white); } .service-block .text-link { margin-top: 4px; } .service-block__scope-label { color: var(--color-white); font-weight: 600; } .form-section__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; width: 100%; } .form-section__title { display: flex; flex-direction: column; gap: 24px; max-width: 640px; } .form-section__aside { display: flex; flex-direction: column; gap: 8px; max-width: 300px; color: var(--color-muted); } .form-section__aside a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; } .form__error-target { display: none; width: 100%; max-width: 1000px; padding: 16px 20px; border: 1px solid #ff6b6b; border-radius: 10px; color: var(--color-white); } .form__error-target:target { display: block; } .form__error-target a { text-decoration: underline; text-underline-offset: 3px; } .form__input--area { min-height: 130px; resize: vertical; font-family: inherit; } select.form__input { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml;utf8,") no-repeat right 4px center; padding-right: 28px; cursor: pointer; } select.form__input option { color: #000; background: #fff; } .form__required { color: var(--color-muted); font-weight: 400; } .form__consent { max-width: 640px; color: var(--color-muted); } .form__consent a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; } .form__steps { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 24px; padding-top: 40px; } fieldset.form__field { border: 0; margin: 0; padding: 0; min-width: 0; } fieldset.form__field legend { padding: 0; } .simple .prose { max-width: 760px; } .simple .prose h2 { margin-top: 56px; } .simple .prose h2:first-child { margin-top: 0; } .simple__head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; } .notfound__content p { max-width: 560px; text-align: center; color: var(--color-muted); } .notfound__content .button-row { justify-content: center; } /* ===== motion.css ===== */ /* ========================================================================== Motion — appear states, intro sequence, reduced motion (timings from docs/MOTION_SYSTEM.md) ========================================================================== */ [data-appear] { will-change: transform, opacity; } html.js [data-appear="up"] { opacity: 0; transform: translateY(140px); } html.js [data-appear="up-30"] { opacity: 0; transform: translateY(30px); } html.js [data-appear="fade"] { opacity: 0; } html.js [data-appear].is-inview { opacity: 1; transform: none; transition: transform var(--duration-appear) var(--ease-spring-200-40), opacity var(--duration-appear) var(--ease-spring-200-40); } html.js [data-appear="letters"] > span { opacity: 0; transform: translateY(140px); } html.js [data-appear="letters"].is-inview > span { opacity: 1; transform: none; transition: transform var(--duration-appear) var(--ease-spring-200-40), opacity var(--duration-appear) var(--ease-spring-200-40); transition-delay: calc(var(--i, 0) * 40ms); } html.is-intro .hero__title { opacity: 0; transform: translateY(-520px); animation: intro-drop 2800ms var(--ease-intro-drop) 0ms forwards; } html.is-intro .hero__name { transform: translateY(-350px) scale(0.6); animation: intro-name 1400ms var(--ease-intro-pop) 2900ms forwards; } html.is-intro .hero__loader { transform: translateX(0); animation: intro-loader 2500ms var(--ease-spring-bounce20) 3000ms forwards; } html.is-intro .hero__reel { opacity: 0.1; transform: translate(280px, -270px) scale(0.3); animation: intro-reel 1400ms var(--ease-intro-pop) 2900ms forwards; } html.is-intro .hero__line, html.is-intro .site-header__line { transform: translateX(-1520px); animation: intro-line 1600ms var(--ease-spring-200-40) 4000ms forwards; } html.is-intro .hero__heading-line .t-h3 { opacity: 0; transform: translateY(45px); animation: intro-up 900ms var(--ease-spring-300-40) forwards; } html.is-intro .hero__heading-line:nth-child(1) .t-h3 { animation-delay: 4300ms; } html.is-intro .hero__heading-line:nth-child(2) .t-h3 { animation-delay: 4350ms; } html.is-intro .hero__heading-line:nth-child(3) .t-h3 { animation-delay: 4400ms; } html.is-intro .hero__heading-line:nth-child(4) .t-h3 { animation-delay: 4450ms; } html.is-intro .site-header__nav { opacity: 0; transform: translateY(-90px); animation: intro-nav 900ms var(--ease-spring-300-40) 4500ms forwards; } html.is-intro .hero__tagbar { opacity: 0; transform: scaleY(0.0417); animation: intro-bar 900ms var(--ease-spring-300-40) 4800ms forwards; } html.is-intro .mail-button { opacity: 0; animation: intro-fade 900ms var(--ease-spring-300-40) 4800ms forwards; } html.is-intro .hero .section-label, html.is-intro .about, html.is-intro .about__tagbar { opacity: 0; animation: intro-fade 600ms ease 4600ms forwards; } @keyframes intro-drop { to { opacity: 1; transform: translateY(0); } } @keyframes intro-name { to { transform: translateY(0) scale(1); } } @keyframes intro-loader { to { transform: translateX(100%); } } @keyframes intro-reel { to { opacity: 1; transform: translate(0, 0) scale(1); } } @keyframes intro-line { to { transform: translateX(0); } } @keyframes intro-up { to { opacity: 1; transform: translateY(0); } } @keyframes intro-nav { to { opacity: 1; transform: translateY(0); } } @keyframes intro-bar { to { opacity: 1; transform: scaleY(1); } } @keyframes intro-fade { to { opacity: 1; } } html.js:not(.is-intro) .site-header__nav.appear-nav { animation: intro-nav 700ms var(--ease-spring-300-40) 100ms both; } @media (prefers-reduced-motion: reduce) { html.is-intro .hero__title, html.is-intro .hero__name, html.is-intro .hero__loader, html.is-intro .hero__reel, html.is-intro .hero__line, html.is-intro .site-header__line, html.is-intro .hero__heading-line .t-h3, html.is-intro .site-header__nav, html.is-intro .hero__tagbar, html.is-intro .mail-button, html.is-intro .hero .section-label, html.is-intro .about, html.is-intro .about__tagbar { animation: none !important; opacity: 1 !important; transform: none !important; } html.is-intro .hero__loader { transform: translateX(100%) !important; } html.js [data-appear], html.js [data-appear] > span { opacity: 1 !important; transform: none !important; transition: none !important; } .ticker__track { animation: none !important; } .mobile-menu, .mobile-menu__eyebrow, .mobile-menu__link, .mobile-menu__meta, .menu-toggle__text-track, .menu-toggle__line { transition-duration: 1ms !important; transition-delay: 0ms !important; } .roll__char, .button__fill, .project-card__inner img, .project-card__image, .feature-card__thumb img { transition-duration: 1ms !important; } .parallax, .dezoom img, .space__stage { transform: none !important; } .reveal-text .ch { color: var(--color-white) !important; } } /* ===== responsive.css ===== */ /* ========================================================================== Responsive — tablet (810–1199) and mobile (≤809) component states ========================================================================== */ @media (max-width: 1199.98px) { .site-header__nav { padding: 26px 24px; } .site-header__info { display: none; } .site-header__items { gap: 0; } .section-label__left { gap: 40px; } .section-label__mid { display: none; } .hero__top { justify-content: flex-start; gap: 20px; } .hero__tagbar { top: 396px; } .about { flex-direction: column; } .about__image { width: 100%; height: 640px; } .about__text { align-self: auto; padding-top: 0; gap: 80px; } .about__tagbar { top: 700px; } .work-grid { gap: 24px; } .work-grid__row { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 24px; } .work-grid__col, .work-grid__col--50, .work-grid__col--35, .work-grid__col--32, .work-grid__col--32-offset { width: 100%; padding-top: 0; } .work-grid__col--35 .project-card { width: 100%; } .work-grid .project-card { --media-h: 561px !important; } .services-list { width: 100%; padding: 0 20px; } .service-row__content { gap: 40px; } .service-row__no { display: none; } .service-row__left, .service-row__title, .service-row__body { max-width: none; } .profile { align-items: flex-start; gap: 50px; padding: 40px var(--page-gutter) 0; } .profile__img--1 { width: 147px; height: 213px; top: 1126px; } .profile__img--2 { width: 204px; height: 296px; } .profile__img--3 { width: 156px; height: 227px; top: 590px; left: 36px; } .profile__cta { align-items: flex-start; padding-right: 0; } .exp-head__heading { max-width: none; } .quote-cards__row { gap: 80px; } .impact-row__container { flex-direction: column; gap: 30px; } .impact-row__text { width: 100%; } .impact-row__images { width: 100%; max-width: 410px; } .impact-row__images .frame, .impact-row--alt .impact-row__images .frame { flex: 1 0 0; width: auto !important; height: 160px !important; } .space__sticky { position: relative; height: auto; padding: 0 24px; } .space__content { overflow: visible; } .space__stage { width: 100%; gap: 24px; transform: none !important; transform-style: flat; } .space__row { width: 100%; height: 360px; transform: none !important; transform-style: flat; } .space__card { position: relative; left: auto; top: auto; width: 100%; height: 100%; transform: none !important; } .space__trigger { display: none; } .heading-row--max { max-width: none; } .plans { flex-direction: column; } .feature-card__left { height: 560px; } .faq-layout { flex-direction: column; align-items: flex-start; } .faq-layout__title { display: flex; width: 100%; order: 1; } .faq-layout__statement { position: relative; width: 100%; max-width: none; } .faq { width: 100%; } .work-index { flex-direction: column; padding: 130px 24px 0; } .work-index__heading { position: relative; top: auto; width: 100%; padding: 0; } .work-index__counter { padding-bottom: 0; } .work-index__list { width: 100%; padding: 0; border-left: 0; } .work-index__list .project-card { --media-h: 561px !important; } .case { flex-direction: column; padding: 50px 24px 0; } .case__info { position: relative; top: auto; width: 100%; padding: 0; } .case__media { width: 100%; padding: 0; border-left: 0; } .case__figure .frame { height: 560px; } .more-works { flex-direction: column; gap: 24px; } .more-works .project-card { --media-h: 560px; } .article-hero__top { flex-direction: column; gap: 50px; } .article-hero__left, .article-hero__right { max-width: none; } .article-images { flex-direction: column; } .article-images__sticky { position: relative; height: 600px; width: 100%; } .article-images__col { width: 100%; } .gallery__content { flex-direction: column; gap: 80px; height: auto; padding-top: 130px; } .gallery__text { order: 0; } .gallery__images { position: relative; left: auto; top: auto; width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: 24px; padding: 0 24px; order: 1; } .gallery__item { position: relative; left: auto !important; top: auto !important; width: 100% !important; height: 360px !important; transform: none !important; } .contact { padding-top: 130px; gap: 80px; } .contact__top { flex-direction: column; align-items: flex-start; gap: 60px; } .contact__image, .contact__lists { max-width: none; width: 100%; flex: none; } .contact__lists { padding-bottom: 0; } .contact__tagbar { position: relative; bottom: auto; z-index: 0; } .form { grid-template-columns: 1fr; } .grid-cards { grid-template-columns: 1fr; } } @media (max-width: 809.98px) { html.is-menu-open, html.is-menu-open body { overflow: hidden; overscroll-behavior: none; } .site-header { position: fixed; inset: 0 0 auto; left: 0; transform: none; max-width: none; height: var(--header-h); } .site-header__nav { position: relative; z-index: 2; min-height: var(--header-h); padding: var(--space-4) var(--page-gutter); overflow: visible; background: var(--color-black); } .site-header__line { position: relative; z-index: 3; } html.js .site-header__items { display: none; } html.js .site-header__menu-toggle { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-4); min-width: calc(var(--space-11) + var(--space-7)); height: calc(var(--space-9) + var(--space-1)); padding: 0; border: 0; background: transparent; color: var(--color-white); } .menu-toggle__text { display: block; width: calc(var(--space-10) + var(--space-4) + var(--space-1)); height: var(--lh-small); overflow: hidden; text-align: right; } .menu-toggle__text-track { display: flex; flex-direction: column; transition: transform var(--duration-spring) var(--ease-spring-300-40); } .menu-toggle__text-track > span { display: block; height: var(--lh-small); line-height: var(--lh-small); } .menu-toggle__icon { position: relative; display: block; width: var(--space-6); height: calc(var(--space-2) + 1px); } .menu-toggle__line { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform var(--duration-spring) var(--ease-spring-300-40); } .menu-toggle__line:first-child { top: 0; } .menu-toggle__line:last-child { bottom: 0; } .site-header__menu-toggle[aria-expanded="true"] .menu-toggle__text-track { transform: translateY(calc(var(--lh-small) * -1)); } .site-header__menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child { transform: translateY(var(--space-1)) rotate(45deg); } .site-header__menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child { transform: translateY(calc(var(--space-1) * -1)) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 1; display: flex; width: 100%; height: 100vh; height: 100dvh; padding: calc(var(--header-h) + var(--space-8)) var(--page-gutter) max(var(--space-7), env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--color-black); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, -100%, 0); transition: transform var(--duration-spring-long) var(--ease-spring-200-40), opacity var(--duration-base) var(--ease-out-soft), visibility 0s linear var(--duration-spring-long); will-change: transform; } .mobile-menu::-webkit-scrollbar { display: none; } html.is-menu-open .mobile-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition-delay: 0s; } .mobile-menu__inner { display: flex; flex-direction: column; width: 100%; min-height: 100%; } .mobile-menu__eyebrow { display: flex; justify-content: space-between; color: var(--color-muted); opacity: 0; transform: translateY(var(--space-9)); transition: transform var(--duration-spring) var(--ease-spring-300-40), opacity var(--duration-base) var(--ease-out-soft); } .mobile-menu__nav { margin-top: var(--space-8); border-bottom: 1px solid var(--color-line); } .mobile-menu__link.nav-link { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr) var(--space-6); align-items: center; column-gap: var(--space-4); min-height: calc(var(--space-10) + var(--space-2)); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); white-space: normal; opacity: 0; transform: translateY(var(--space-9)); transition: transform var(--duration-spring) var(--ease-spring-300-40), opacity var(--duration-base) var(--ease-out-soft); } .mobile-menu__count { color: var(--color-muted); } .mobile-menu__label { overflow: hidden; font-size: var(--fs-menu); line-height: var(--lh-menu); font-weight: 500; letter-spacing: -0.04em; transition: transform var(--duration-spring) var(--ease-spring-300-40); } .mobile-menu__link .link__arrow { width: var(--space-4); height: var(--space-4); justify-self: end; transition: transform var(--duration-spring) var(--ease-spring-300-40); } .mobile-menu__link:hover .mobile-menu__label, .mobile-menu__link:focus-visible .mobile-menu__label { transform: translateX(var(--space-2)); } .mobile-menu__link:hover .link__arrow, .mobile-menu__link:focus-visible .link__arrow { transform: translate3d(var(--space-1), calc(var(--space-1) * -1), 0); } .mobile-menu__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-top: auto; padding-top: var(--space-8); opacity: 0; transform: translateY(var(--space-9)); transition: transform var(--duration-spring) var(--ease-spring-300-40), opacity var(--duration-base) var(--ease-out-soft); } .mobile-menu__meta p { display: flex; flex-direction: column; } .mobile-menu__mail { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; } .mobile-menu__mail .link__arrow { width: var(--space-3); height: var(--space-3); } html.is-menu-open .mobile-menu__eyebrow, html.is-menu-open .mobile-menu__link, html.is-menu-open .mobile-menu__meta { opacity: 1; transform: translateY(0); transition-delay: calc(var(--menu-reveal-delay) + var(--i) * var(--menu-stagger)); } html:not(.js) .site-header { position: absolute; height: auto; } html:not(.js) .site-header__nav { align-items: flex-start; } html:not(.js) .site-header__items { display: flex; margin-left: auto; } html:not(.js) .site-header__items .nav-group__label { display: none; } html:not(.js) .site-header__items .nav-links { flex-wrap: wrap; justify-content: flex-end; max-width: 180px; } .section { gap: 60px; } .section--gap-0 { gap: 0; } .section-label__left { gap: 20px; } .hero__top { flex-direction: column; gap: 30px; padding: 30px 20px; } .hero__heading { flex: none; width: 100%; max-width: none; padding-top: 0; } .hero__reel { width: 100%; height: 220px; } .hero__tagbar { top: 330px; } .hero__title { height: auto; padding: 24px 20px; } .about { gap: 0; padding: 0 20px; } .about__image { height: 380px; } .about__text { gap: 60px; padding-top: 60px; } .about__heading { gap: 30px; } .about__bottom { gap: 10px; } .logo-grid__row { flex-direction: column; gap: 10px; overflow: visible; } .logo-cell--empty { display: none; } .about__tagbar { top: 440px; } .work-intro { gap: 30px; padding: 0 20px; } .work-grid { padding: 0 20px; } .work-grid .project-card { --media-h: 351px !important; } .heading-row { padding: 0 20px; } .services-list { padding: 0 20px; } .profile { gap: 60px; padding: 0 20px; } .profile__img--1 { width: 76px; height: 111px; top: 686px; left: 16px; } .profile__img--2 { width: 144px; height: 209px; top: 936px; } .profile__img--3 { width: 85px; height: 124px; top: 440px; left: 286px; } .profile__cta-inner { gap: 30px; } .table { padding: 0 20px; } .table-row__content { flex-direction: column; gap: 30px; } .table-row__half { flex: none; width: 100%; gap: 40px; } .table-row__cell, .table-row__cell p { max-width: none; } .exp-head { padding: 0 20px; } .sticky-stage__content { gap: 30px; } .quote-cards { gap: 30px; } .quote-cards__row { flex-direction: column; gap: 30px; padding: 0 20px; } .quote-cards__col--offset { padding-top: 0; } .quote-card { width: 100%; } .impact-list { padding: 0 20px; } .impact-row__images .frame, .impact-row--alt .impact-row__images .frame { height: 96px !important; } .impact-row__text { flex-wrap: wrap; gap: 20px; } .space__sticky { padding: 0 20px; } .space__row { height: 240px; } .plans { padding: 0 20px; } .feature-cards { gap: 24px; padding: 0 20px; } .feature-card__container { flex-direction: column; } .feature-card__left { display: none; } .feature-card__right { align-self: auto; flex: none; width: 100%; height: 600px; border: 1px solid var(--color-line); border-radius: var(--radius-media); } .feature-card__bottom { padding: 0 20px 30px; } .faq-layout { gap: 60px; padding: 0 20px; } .faq__content { gap: 100px; } .faq__no { display: none; } .site-footer { gap: 60px; padding-top: 80px; } .site-footer__top { gap: 60px; } .site-footer__content { padding: 0 20px; } .site-footer__nav { padding: 20px; } .site-footer__nav-inner { flex-direction: column; align-items: flex-start; gap: 20px; } .site-footer__group--end { align-items: flex-start; } .site-footer__giant { padding: 0 20px 10px; } .work-index { padding: 120px 20px 0; gap: 30px; } .work-index__list .project-card { --media-h: 351px !important; } .case { padding: 50px 20px 0; gap: 60px; } .case__figure .frame { height: 360px; } .more-works { padding: 0 20px; } .more-works .project-card { --media-h: 351px; } .article-hero { padding: 140px 20px 24px; gap: 40px; } .article-hero__top { gap: 30px; } .article-body { padding: 0 20px; } .article-images__sticky { height: 300px; } .article-images__col .frame { height: 300px; } .article-images__single .frame { height: 300px; } .article-text { padding: 40px 0; } .gallery__content { gap: 60px; padding-top: 120px; } .gallery__text { gap: 30px; padding-top: 30px; } .gallery__images { gap: 10px; padding: 0 20px; } .gallery__item { height: 160px !important; } .contact { padding-top: 120px; gap: 60px; } .contact__top { gap: 40px; padding: 0 20px; } .contact__image { height: 240px; } .form-section { padding: 80px 20px 0; } .simple { padding: 120px 20px 0; } .mail-button { right: 10px; } } @media (max-width: 1199.98px) { .form-section__head { flex-direction: column; gap: 30px; } .grid-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .work-index__heading .t-h1 { font-size: 108px; letter-spacing: -4px; } .article-text--center { text-align: left; align-items: flex-start; } .article-text--center .button-row { justify-content: flex-start; } } @media (max-width: 809.98px) { .grid-cards, .grid-cards--3, .grid-cards--4 { grid-template-columns: 1fr; } .work-index__heading .t-h1 { font-size: 68px; letter-spacing: -2px; } .case__figure .frame--logo { height: 240px; padding: 30px; } .table-simple tbody th { width: 55%; padding-right: 12px; } .form { grid-template-columns: 1fr; } } @media (max-width: 1199.98px) { .about__tagbar { display: none; } .project-card__banner { opacity: 1; } .project-card__bar { transform: scaleY(1); } .project-card__category { transform: none; } .plans { align-items: stretch; } .plan { flex: none; width: 100%; } .table-row__content { flex-direction: column; gap: 24px; } .table-row__half { flex: none; display: flex; justify-content: space-between; width: 100%; gap: 40px; } .table-row__cell { flex: none; max-width: none; } .table-row__cell p { max-width: none; } .table-row__half .table-row__cell:last-child { text-align: right; } .impact-row__text { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; align-items: start; } .impact-row__no { grid-column: 1; grid-row: 1; } .impact-row__name { grid-column: 2; grid-row: 1; } .impact-row__body { grid-column: 2; grid-row: 2; max-width: 360px; } .impact-row__images { max-width: none; } } @media (max-width: 809.98px) { .impact-row__text { grid-template-columns: 40px 1fr; } .table-row__content { gap: 16px; } } @media (max-width: 809.98px) { .hero__tagbar { display: none; } .site-header__logo svg { height: 13px; } .service-row__content { flex-direction: column; align-items: flex-start; gap: 10px; } .service-row__body { max-width: none; } .more-works .project-card { --media-h: 351px !important; } } @media (min-width: 810px) and (max-width: 1199.98px) { .more-works .project-card { --media-h: 400px !important; } }