:root { --bg-main: #FfFfFf; --bg-surface: #FFFFFF; --bg-dark: #000000; --bg-dark-soft: #171717; --text-primary: #000000; --text-muted: #525252; --text-on-dark: #f5f5f5; --text-muted-on-dark: #a1a1a1; --accent-orange: #000000; --accent-orange-hover: #262626; --accent-orange-rgb: 0, 0, 0; --border: #e5e5e5; --border-strong: #d4d4d4; --midnight: #f5f5f5; --slate: #FFFFFF; --slate-2: #f5f5f5; --gold: #000000; --gold-dim: #262626; --warm-white: #FFFFFF; --off-white: #000000; --muted: #525252; --line: #e5e5e5; --line-strong: #d4d4d4; --font-head: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-label: "Inter", system-ui, sans-serif; --container: 1180px; --radius: 14px; --radius-sm: 8px; --radius-pill: 999px; --radius-round: 50%; --ease: cubic-bezier(0.16, 1, 0.3, 1); --fs-h1: 4rem; --fs-h2: 3rem; --fs-h3: 1.75rem; --fs-h4: 1.375rem; --fs-body-lg: 1.25rem; --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-micro: 0.8125rem; --fs-nav: 1rem; --fs-btn: 1rem; } @media only screen and (max-width: 1023.5px) { :root { --fs-h1: 3.25rem; --fs-h2: 2.5rem; --fs-h3: 1.625rem; --fs-h4: 1.3125rem; --fs-body-lg: 1.1875rem; --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-nav: 1rem; --fs-btn: 1rem; } } @media only screen and (max-width: 600px) { :root { --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-nav: 0.9375rem; --fs-btn: 0.9375rem; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--bg-main); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--text-primary); } h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 700; } h4 { font-size: var(--fs-h4); font-weight: 600; } p { margin: 0; color: var(--text-muted); } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-orange); font-weight: 600; } .label::before { content: ""; width: 22px; height: 1px; background: var(--accent-orange); display: inline-block; } .label--phrase { text-transform: none; letter-spacing: 0.04em; } .section { padding: 100px 0; position: relative; } .section--tight { padding: 64px 0; } .section--surface { background: var(--bg-main); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .eyebrow-block { margin-bottom: 20px; } .section-head { max-width: 640px; margin-bottom: 52px; } .section-head h2 { margin-top: 18px; } .section-head .sub { margin-top: 16px; font-size: var(--fs-body-lg); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-btn); cursor: pointer; border: none; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); min-height: 48px; touch-action: manipulation; } .btn-primary { background: var(--accent-orange); color: #FFFFFF; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); } .btn-primary:hover { background: var(--accent-orange-hover); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); } .btn-ghost:hover { border-color: var(--accent-orange); color: var(--accent-orange); } .btn-text { background: none; color: var(--text-primary); font-weight: 500; padding: 0; min-height: auto; border-bottom: 1px solid var(--border-strong); border-radius: 0; } .btn-text:hover { color: var(--accent-orange); border-color: var(--accent-orange); } .skip-link { position: absolute; top: -100px; left: 24px; background: var(--accent-orange); color: #FFFFFF; font-weight: 700; font-size: var(--fs-small); padding: 10px 18px; border-radius: var(--radius-sm); z-index: 9999; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transition: top 0.2s var(--ease); } .skip-link:focus { top: 16px; outline: 2px solid var(--text-primary); outline-offset: 2px; } @media only screen and (max-width: 1023.5px) { body.cs-open { overflow: hidden; } body.scroll #cs-navigation { width: 100%; max-width: 100%; top: 0; } body.scroll #cs-navigation:before { border-radius: 0; } body.scroll #cs-navigation .cs-ul-wrapper { top: 100%; } #cs-navigation { width: 94%; max-width: 80rem; box-sizing: border-box; padding: clamp(0.75rem, 2vw, 1.5rem); border-radius: clamp(0.75rem, 2vw, 1.5rem); position: fixed; top: 2rem; left: 50%; z-index: 10000; transform: translateX(-50%); transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s; } #cs-navigation:before { content: ""; width: 100%; height: 100%; background: #fff; box-shadow: rgba(115, 115, 115, 0.2) 0px 8px 24px; opacity: 1; border-radius: clamp(0.75rem, 2vw, 1.5rem); display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); transition: transform 0.2s, border-radius 0.3s ease-in-out; } #cs-navigation.cs-active:before { transform: translateX(-50%) scale(1.03); } #cs-navigation.cs-active .cs-toggle { transform: rotate(180deg); } #cs-navigation.cs-active .cs-ul-wrapper { opacity: 1; transform: scaleY(1); transition-delay: 0.15s; } #cs-navigation.cs-active .cs-li { opacity: 1; transform: translateY(0); } #cs-navigation .cs-container { width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; } #cs-navigation .cs-logo { width: auto; max-width: 12.5rem; height: 100%; margin: 0 auto 0 0; box-sizing: border-box; padding: 0; display: flex; justify-content: flex-start; align-items: center; z-index: 10; } #cs-navigation .cs-logo img { width: 100%; height: 100%; object-fit: contain; } #cs-navigation .cs-toggle { width: 3.5rem; height: 3.5rem; margin: 0 0 0 auto; background-color: #1a1a1a; border: none; border-radius: var(--radius-sm); display: flex; justify-content: center; align-items: center; position: relative; z-index: 10; transition: transform 0.6s; } #cs-navigation .cs-nav { order: 3; } #cs-navigation .cs-contact-group { display: none; position: relative; z-index: 10; } #cs-navigation .cs-phone { font-size: 1rem; line-height: 1.5em; text-decoration: none; margin: 0; color: var(--headerColor); display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; transition: opacity 0.3s, color 0.3s; } #cs-navigation .cs-phone-icon { width: 1.5rem; height: auto; display: block; } #cs-navigation .cs-social { display: none; } #cs-navigation .cs-active .cs-line1 { top: 50%; transform: translate(-50%, -50%) rotate(225deg); } #cs-navigation .cs-active .cs-line2 { top: 50%; transform: translate(-50%, -50%) translateY(0) rotate(-225deg); transform-origin: center; } #cs-navigation .cs-active .cs-line3 { opacity: 0; bottom: 100%; } #cs-navigation .cs-box { width: clamp(1.5rem, 2vw, 1.75rem); height: 1rem; position: relative; } #cs-navigation .cs-line { width: 100%; height: 2px; background-color: #fafafa; border-radius: var(--radius-sm); position: absolute; left: 50%; transform: translateX(-50%); } #cs-navigation .cs-line1 { top: 0; transition: transform 0.5s, top 0.3s, left 0.3s; animation-duration: 0.7s; animation-timing-function: ease; animation-direction: normal; animation-fill-mode: forwards; transform-origin: center; } #cs-navigation .cs-line2 { top: 50%; transform: translateX(-50%) translateY(-50%); transition: top 0.3s, left 0.3s, transform 0.5s; animation-duration: 0.7s; animation-timing-function: ease; animation-direction: normal; animation-fill-mode: forwards; } #cs-navigation .cs-line3 { bottom: 0; transition: bottom 0.3s, opacity 0.3s; } } @media only screen and (min-width: 768px) { #cs-navigation .cs-contact-group { display: block; } } @media only screen and (max-width: 1023.5px) { #cs-navigation .cs-ul-wrapper { width: 100%; height: auto; padding-bottom: 2.4em; background-color: #fff; border-radius: 0 0 1.5rem 1.5rem; position: absolute; top: 85%; left: 0; z-index: -1; overflow: hidden; transform: scaleY(0); transition: transform 0.4s; transform-origin: top; } #cs-navigation .cs-ul { width: 100%; height: auto; max-height: 65vh; margin: 0; padding: 4rem 0 0 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.25rem; overflow: auto; } #cs-navigation .cs-li { text-align: center; list-style: none; width: 100%; margin-right: 0; opacity: 0; transform: translateY(-70/16rem); transition: transform 0.6s, opacity 0.9s; } #cs-navigation .cs-li:nth-of-type(1) { transition-delay: 0.05s; } #cs-navigation .cs-li:nth-of-type(2) { transition-delay: 0.1s; } #cs-navigation .cs-li:nth-of-type(3) { transition-delay: 0.15s; } #cs-navigation .cs-li:nth-of-type(4) { transition-delay: 0.2s; } #cs-navigation .cs-li:nth-of-type(5) { transition-delay: 0.25s; } #cs-navigation .cs-li:nth-of-type(6) { transition-delay: 0.3s; } #cs-navigation .cs-li:nth-of-type(7) { transition-delay: 0.35s; } #cs-navigation .cs-li:nth-of-type(8) { transition-delay: 0.4s; } #cs-navigation .cs-li:nth-of-type(9) { transition-delay: 0.45s; } #cs-navigation .cs-li:nth-of-type(10) { transition-delay: 0.5s; } #cs-navigation .cs-li:nth-of-type(11) { transition-delay: 0.55s; } #cs-navigation .cs-li:nth-of-type(12) { transition-delay: 0.6s; } #cs-navigation .cs-li:nth-of-type(13) { transition-delay: 0.65s; } #cs-navigation .cs-li-link { font-size: clamp(1rem, 2.5vw, 1.5rem); line-height: 1.2em; text-decoration: none; margin: 0; color: var(--headerColor); display: inline-block; position: relative; padding: 0.25rem; } #cs-navigation .cs-li-link.cs-active { color: var(--primary); } #cs-navigation .cs-li-link:hover { color: var(--primary); } #cs-navigation .cs-button-solid { display: none; } } @media only screen and (max-width: 1023.5px) { #cs-navigation .cs-li { text-align: center; width: 100%; display: block; } #cs-navigation .cs-dropdown { color: var(--bodyTextColorWhite); position: relative; } #cs-navigation .cs-dropdown .cs-dropdown-toggle { background: none; border: none; text-align: inherit; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #cs-navigation .cs-dropdown.cs-active .cs-drop-ul { height: auto; margin: 0.75rem 0 0 0; padding: 0.75rem 0; opacity: 1; visibility: visible; } #cs-navigation .cs-dropdown.cs-active .cs-drop-link { opacity: 1; } #cs-navigation .cs-dropdown .cs-li-link { position: relative; transition: opacity 0.3s; } #cs-navigation .cs-drop-icon { width: 0.9375rem; height: auto; position: absolute; top: 50%; right: -1.25rem; transform: translateY(-50%); } #cs-navigation .cs-drop-ul { width: 100%; height: 0; margin: 0; padding: 0; background-color: var(--primary); opacity: 0; display: flex; visibility: hidden; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0.75rem; overflow: hidden; transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s; } #cs-navigation .cs-drop-li { list-style: none; } #cs-navigation .cs-li-link.cs-drop-link { font-size: clamp(0.875rem, 2vw, 1.25rem); color: #fff; } } @media only screen and (min-width: 1024px) { #cs-navigation .cs-dropdown { position: relative; } #cs-navigation .cs-dropdown .cs-dropdown-toggle { background: none; border: none; text-align: inherit; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #cs-navigation .cs-dropdown:hover, #cs-navigation .cs-dropdown.cs-active { cursor: pointer; } #cs-navigation .cs-dropdown:hover .cs-drop-ul, #cs-navigation .cs-dropdown.cs-active .cs-drop-ul { opacity: 1; visibility: visible; transform: scaleY(1); } #cs-navigation .cs-dropdown:hover .cs-drop-li, #cs-navigation .cs-dropdown.cs-active .cs-drop-li { opacity: 1; transform: translateY(0); } #cs-navigation .cs-drop-icon { width: 0.9375rem; height: auto; display: inline-block; } #cs-navigation .cs-drop-ul { min-width: 12.5rem; margin: 0; padding: 0; background-color: #fff; box-shadow: inset rgba(115, 115, 115, 0.1) 0px 8px 10px; opacity: 0; border-bottom: 5px solid var(--primary); border-radius: 0 0 1.5rem 1.5rem; visibility: hidden; position: absolute; top: calc(100% - 2px); z-index: 100; overflow: hidden; transform: scaleY(0); transition: transform 0.3s, visibility 0.3s, opacity 0.3s; transform-origin: top; } #cs-navigation .cs-drop-li { font-size: 1rem; text-decoration: none; list-style: none; width: 100%; height: auto; opacity: 0; display: block; transform: translateY(-0.625rem); transition: opacity 0.6s, transform 0.6s; } #cs-navigation .cs-drop-li:nth-of-type(1) { transition-delay: 0.05s; } #cs-navigation .cs-drop-li:nth-of-type(2) { transition-delay: 0.1s; } #cs-navigation .cs-drop-li:nth-of-type(3) { transition-delay: 0.15s; } #cs-navigation .cs-drop-li:nth-of-type(4) { transition-delay: 0.2s; } #cs-navigation .cs-drop-li:nth-of-type(5) { transition-delay: 0.25s; } #cs-navigation .cs-drop-li:nth-of-type(6) { transition-delay: 0.3s; } #cs-navigation .cs-drop-li:nth-of-type(7) { transition-delay: 0.35s; } #cs-navigation .cs-drop-li:nth-of-type(8) { transition-delay: 0.4s; } #cs-navigation .cs-drop-li:nth-of-type(9) { transition-delay: 0.45s; } #cs-navigation .cs-li-link.cs-drop-link { font-size: 1rem; line-height: 1.5em; text-transform: capitalize; text-decoration: none; white-space: nowrap; width: 100%; box-sizing: border-box; padding: 0.75rem; color: var(--headerColor); display: block; transition: color 0.3s, background-color 0.3s; } #cs-navigation .cs-li-link.cs-drop-link:hover { color: var(--bodyTextColorWhite); background-color: var(--primary); } #cs-navigation .cs-li-link.cs-drop-link:before { display: none; } #cs-navigation .cs-li-link.cs-drop-link:focus-visible { outline-offset: -2px; } } @media only screen and (min-width: 1024px) { body.dark-mode #cs-navigation .cs-drop-ul { background-color: var(--dark); } body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover { color: var(--bodyTextColorWhite); } } @media only screen and (min-width: 1024px) { body.scroll #cs-navigation { width: 100%; max-width: 100%; border-radius: 0; top: 0; } #cs-navigation { width: 94%; max-width: 90rem; height: 6rem; box-sizing: border-box; padding: clamp(0.75rem, 2vw, 1.5rem) 0; background-color: #fff; box-shadow: rgba(115, 115, 115, 0.2) 0px 8px 24px; border-radius: clamp(0.75rem, 2vw, 1.5rem); display: flex; align-items: center; position: fixed; top: 2rem; left: 50%; z-index: 10000; transform: translateX(-50%); transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s; } #cs-navigation .cs-container { width: 100%; max-width: 90rem; margin: auto; box-sizing: border-box; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } #cs-navigation .cs-toggle { display: none; } #cs-navigation .cs-logo { width: 18.4%; max-width: 21.875rem; height: 2rem; margin: 0 auto 0 0; padding: 0; display: flex; justify-content: flex-start; align-items: center; z-index: 100; } #cs-navigation .cs-logo img { width: auto; height: 100%; object-fit: contain; } #cs-navigation .cs-contact-group { display: flex; justify-content: center; align-items: center; gap: 1.5rem; } #cs-navigation .cs-phone { font-size: 1rem; line-height: 1.5em; text-decoration: none; margin: 0; color: var(--headerColor); display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; transition: opacity 0.3s, color 0.3s; } #cs-navigation .cs-phone-icon { width: 1.5rem; height: auto; display: block; } #cs-navigation .cs-social { height: 2rem; opacity: 1; display: none; visibility: visible; justify-content: center; align-items: center; gap: 0.5rem; transition: opacity 0.3s, visibility 0.3s, height 0.3s; } #cs-navigation .cs-social-link { text-decoration: none; width: 2rem; height: 2rem; background-color: #f7f7f7; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s; } #cs-navigation .cs-social-link:hover { background-color: var(--primary); } #cs-navigation .cs-social-link:hover .cs-social-icon { filter: grayscale(1) brightness(10000%); opacity: 1; } #cs-navigation .cs-social-icon { width: 0.75rem; height: auto; opacity: 0.6; display: block; transition: opacity 0.3s; } #cs-navigation .cs-ul-wrapper { height: 100%; display: flex; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #cs-navigation .cs-ul { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; justify-content: flex-start; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.25rem); } #cs-navigation .cs-li { list-style: none; height: 100%; padding: 0; display: flex; align-items: center; flex: none; } #cs-navigation .cs-li-link { font-size: var(--fs-nav); line-height: 1.5em; text-decoration: none; margin: 0; color: var(--headerColor); display: block; position: relative; transition: color 0.3s; } #cs-navigation .cs-li-link:hover { color: var(--primary); } #cs-navigation .cs-li-link.cs-active { color: var(--primary); } #cs-navigation .cs-button-solid { font-size: var(--fs-btn); font-weight: 600; line-height: clamp(2.875em, 5.5vw, 3.5em); text-align: center; text-decoration: none; min-width: 9.375rem; margin: 0; box-sizing: border-box; padding: 0 2rem; background-color: var(--primary); color: #fff; display: inline-block; position: relative; z-index: 1; transition: color 0.3s; } #cs-navigation .cs-button-solid:before { content: ""; width: 0%; height: 100%; background: #fff; opacity: 1; position: absolute; top: 0; left: 0; z-index: -1; transition: width 0.3s; } #cs-navigation .cs-button-solid:hover { color: #1a1a1a; } #cs-navigation .cs-button-solid:hover:before { width: 100%; } } @media only screen and (min-width: 1300px) { #cs-navigation .cs-social { display: flex; } } .hero { min-height: 78vh; position: relative; overflow: hidden; padding-top: 180px; padding-bottom: 90px; display: flex; align-items: flex-start; background: var(--bg-dark); } @media (max-width: 900px) { .hero { min-height: auto; padding-top: 180px; padding-bottom: 60px; } } .hero-canvas { position: absolute; inset: 0; z-index: 0; opacity: 0.9; } .hero-canvas canvas { display: block; } .hero-fallback { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 50% at 75% 30%, rgba(0, 0, 0, 0.08), transparent 60%), radial-gradient(ellipse 50% 60% at 20% 70%, rgba(50, 50, 50, 0.2), transparent 60%); } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero-copy { max-width: 540px; } .hero h1 { margin-top: 20px; color: #FFFFFF; } .hero .sub { margin-top: 24px; font-size: var(--fs-body-lg); max-width: 520px; color: var(--text-muted-on-dark); opacity: 0.9; } .hero-cta { margin-top: 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .hero .btn-text { color: var(--text-on-dark); border-bottom-color: rgba(255, 255, 255, 0.25); } .hero .btn-text:hover { color: var(--accent-orange); border-color: var(--accent-orange); } .hero .wrap { max-width: none; margin-left: 0; padding-left: 60px; } .word { display: inline-block; } .hero-badges { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; } @media (min-width: 901px) { .hero-badges { display: block; } } .stat-badge { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(21, 21, 21, 0.88); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; padding: 13px 18px; box-shadow: 0 24px 44px rgba(0, 0, 0, 0.35); animation: heroFloat 5.5s ease-in-out infinite; } .stat-badge .icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: rgba(var(--accent-orange-rgb), 0.15); color: var(--accent-orange); display: flex; align-items: center; justify-content: center; } .stat-badge .value { font-family: var(--font-head); font-weight: 700; color: #FFFFFF; font-size: 1.05rem; line-height: 1.1; white-space: nowrap; } .stat-badge .caption { font-size: var(--fs-micro); color: var(--text-muted-on-dark); font-family: var(--font-label); letter-spacing: 0.03em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; } .badge-1 { top: 10%; right: 9%; animation-delay: 0s; } .badge-2 { top: 46%; right: 4%; animation-delay: 1.3s; } .badge-3 { top: 76%; right: 15%; animation-delay: 2.4s; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .stat-badge { animation: none; } } .marquee-strip { border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: var(--bg-dark-soft); overflow: hidden; position: relative; z-index: 1; } .marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-item { display: flex; align-items: center; gap: 10px; padding: 20px 40px; white-space: nowrap; font-family: var(--font-label); font-size: var(--fs-small); letter-spacing: 0.06em; color: var(--text-on-dark); border-right: 1px solid rgba(255, 255, 255, 0.08); } .marquee-item svg { color: var(--accent-orange); width: 16px; height: 16px; flex-shrink: 0; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .grid-3, .grid-2, .grid-6 { grid-template-columns: 1fr; } } .pain-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; transform-style: preserve-3d; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .pain-card:hover { transform: perspective(800px) rotateY(-4deg) rotateX(2deg) translateY(-4px); border-color: var(--border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); } .pain-card .num { font-family: var(--font-label); color: var(--accent-orange); font-size: var(--fs-small); letter-spacing: 0.08em; margin-bottom: 16px; display: block; } .pain-card p { color: var(--text-primary); font-size: var(--fs-body-lg); line-height: 1.5; } .service-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; transform-style: preserve-3d; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); display: flex; flex-direction: column; gap: 16px; height: 100%; } .service-card:hover { transform: perspective(800px) rotateY(6deg) translateY(-4px); border-color: var(--accent-orange); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06); } .icon-box { width: 46px; height: 46px; border-radius: 12px; background: rgba(var(--accent-orange-rgb), 0.08); border: 1px solid rgba(var(--accent-orange-rgb), 0.2); display: flex; align-items: center; justify-content: center; color: var(--accent-orange); } .service-card h3 { color: var(--text-primary); } .service-card p { font-size: var(--fs-small); color: var(--text-muted); } .service-card .go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-orange); font-size: var(--fs-micro); font-weight: 600; font-family: var(--font-label); letter-spacing: 0.04em; text-transform: uppercase; transition: gap 0.2s var(--ease); } .service-card:hover .go { gap: 10px; } .industry-tile { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px; border: 1px solid var(--border); display: flex; align-items: flex-end; padding: 28px; transition: transform 0.4s var(--ease); } .industry-tile:hover { transform: scale(1.015); } .industry-tile .bg-illustration { position: absolute; inset: 0; opacity: 0.4; transition: transform 0.5s var(--ease); } .industry-tile:hover .bg-illustration { transform: rotateX(6deg) rotateY(-6deg) scale(1.05); } .industry-tile .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.5)); } .industry-tile .content { position: relative; z-index: 1; } .industry-tile .icon-box { margin-bottom: 14px; background: rgba(var(--accent-orange-rgb), 0.15); color: var(--accent-orange); } .industry-tile h3 { margin-bottom: 6px; color: #FFFFFF; } .industry-tile p { font-size: var(--fs-small); color: var(--text-muted-on-dark); } .founder-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 24px; text-align: center; } .founder-photo { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 18px; background: var(--bg-dark-soft); border: 2px solid var(--accent-orange); display: flex; align-items: center; justify-content: center; color: var(--accent-orange); font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; overflow: hidden; } .founder-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .founder-card h3 { margin-bottom: 4px; color: var(--text-primary); } .founder-card .title { color: var(--accent-orange); font-size: var(--fs-small); font-family: var(--font-label); letter-spacing: 0.03em; margin-bottom: 8px; display: block; } .founder-card .skill { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 16px; } .badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(var(--accent-orange-rgb), 0.25); background: rgba(var(--accent-orange-rgb), 0.08); color: var(--accent-orange); font-size: var(--fs-micro); font-weight: 600; padding: 6px 14px; border-radius: 999px; } .founder-flip { perspective: 1200px; height: 380px; } .founder-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s var(--ease); transform-style: preserve-3d; } .founder-flip:hover .founder-flip-inner { transform: rotateY(180deg); } .founder-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-surface); padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .founder-back { transform: rotateY(180deg); text-align: left; justify-content: flex-start; } .founder-back p { color: var(--text-primary); font-size: var(--fs-small); margin-top: 14px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .testimonials-marquee { position: relative; width: 100%; overflow: hidden; } .testimonials-track { display: flex; width: max-content; gap: 20px; padding: 4px 24px; animation: marquee 42s linear infinite; } .testimonials-marquee:hover .testimonials-track { animation-play-state: paused; } .testimonial-card { display: flex; flex: none; flex-direction: column; gap: 16px; width: 300px; padding: 26px; text-align: left; background: var(--bg-surface); border: 1px solid var(--border); border-top: 2px solid var(--accent-orange); border-radius: var(--radius); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } a.testimonial-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05); } .testimonial-card__head { display: flex; align-items: center; gap: 12px; } .testimonial-card__avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; overflow: hidden; background: var(--bg-dark-soft); color: var(--accent-orange); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; } .testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .testimonial-card__name { font-family: var(--font-head); font-weight: 700; color: var(--text-primary); font-size: var(--fs-small); line-height: 1.2; } .testimonial-card__role { margin-top: 2px; font-size: var(--fs-micro); color: var(--text-muted); } .testimonial-card__quote { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-primary); } .testimonials { background: var(--bg-dark); border-color: rgba(255, 255, 255, 0.08); } .testimonials .section-head h2 { color: #FFFFFF; } .testimonials .label { color: var(--accent-orange); } .testimonial-card { background: var(--bg-dark-soft); border-color: rgba(255, 255, 255, 0.1); border-top-color: var(--accent-orange); } a.testimonial-card:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); } .testimonial-card__avatar { background: rgba(255, 255, 255, 0.06); } .testimonial-card__name { color: #FFFFFF; } .testimonial-card__role { color: var(--text-muted-on-dark); } .testimonial-card__quote { color: var(--text-on-dark); } .testimonials-fade--left { background: linear-gradient(90deg, var(--bg-dark), transparent); } .testimonials-fade--right { background: linear-gradient(270deg, var(--bg-dark), transparent); } @media (max-width: 640px) { .testimonials-fade { display: none; } .testimonial-card { width: 248px; padding: 20px; } .testimonials-track { gap: 14px; padding: 4px 16px; } } @media (prefers-reduced-motion: reduce) { .testimonials-track { animation: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .testimonial-card { scroll-snap-align: start; } } .ic-arrow, .work__arrow { border-radius: var(--radius-round); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease); } .work__arrow:hover { border-color: var(--accent-orange); color: var(--accent-orange); } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; max-width: 640px; display: flex; align-items: center; justify-content: space-between; background: none; border: none; text-align: left; padding: 22px 0; cursor: pointer; color: var(--text-primary); font-family: var(--font-head); font-size: var(--fs-body); font-weight: 600; transition: color 0.2s; } .faq-q:hover { color: var(--accent-orange); } .faq-icon { flex-shrink: 0; margin-left: 20px; transition: transform 0.3s var(--ease), color 0.2s; color: var(--accent-orange); } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); } .faq-a-inner { padding-bottom: 22px; font-size: var(--fs-body); max-width: 640px; color: var(--text-muted); } .form-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: var(--fs-micro); color: var(--text-muted); margin-bottom: 6px; font-family: var(--font-label); letter-spacing: 0.03em; } .field input, .field select, .field textarea { width: 100%; background: var(--bg-main); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; min-height: 48px; transition: border-color 0.2s, outline-color 0.2s; } .field textarea { min-height: 100px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-orange); outline-offset: 1px; border-color: var(--accent-orange); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } } .form-note { font-size: var(--fs-small); color: var(--text-muted); margin-top: 14px; text-align: center; } .form-success { display: none; text-align: center; padding: 40px 20px; } .form-success.show { display: block; } .form-success svg { color: var(--accent-orange); width: 44px; height: 44px; margin: 0 auto 14px; } .process-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 50px; } @media (max-width: 900px) { .process-row { grid-template-columns: 1fr; gap: 36px; } } .process-step { position: relative; padding-right: 20px; } .process-step .step-num { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--accent-orange); color: var(--accent-orange); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; margin-bottom: 18px; background: var(--bg-surface); position: relative; z-index: 2; } .process-connector { position: absolute; top: 23px; left: 46px; right: -20px; height: 1px; background: var(--border); z-index: 1; overflow: hidden; } .process-connector::after { content: ""; position: absolute; inset: 0; background: var(--accent-orange); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); } .process-connector.filled::after { transform: scaleX(1); } @media (max-width: 900px) { .process-connector { display: none; } } .timeline { position: relative; padding-left: 28px; border-left: 1px solid var(--border); } .timeline-item { position: relative; padding-bottom: 34px; } .timeline-item::before { content: ""; position: absolute; left: -33px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-orange); } .timeline-item .year { font-family: var(--font-label); color: var(--accent-orange); font-size: var(--fs-small); letter-spacing: 0.04em; } .timeline-item h4 { margin: 6px 0 6px; font-family: var(--font-head); color: var(--text-primary); } .timeline-item p { font-size: var(--fs-small); color: var(--text-muted); } .value-tile { padding: 28px 0; border-top: 1px solid var(--border); } .value-tile .icon-box { margin-bottom: 16px; } .value-tile h3 { margin-bottom: 8px; color: var(--text-primary); } .value-tile p { font-size: var(--fs-small); color: var(--text-muted); } .cta-banner { background: var(--bg-dark); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 90px 0; text-align: center; } .cta-banner .section-head { margin: 0 auto 40px; text-align: center; } .cta-banner h2 { color: #FFFFFF; } .cta-banner .sub { color: var(--text-muted-on-dark); } .cta-banner .label { justify-content: center; } .cta-banner .label::before { display: none; } footer { background: var(--bg-dark); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 70px 0 0; position: relative; overflow: hidden; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid h4 { font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-orange); margin-bottom: 16px; font-weight: 600; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-grid ul a { font-size: var(--fs-small); color: var(--text-muted-on-dark); transition: color 0.2s; } .footer-grid ul a:hover { color: #FFFFFF; } .footer-contact li { display: flex; gap: 10px; font-size: var(--fs-small); color: var(--text-muted-on-dark); align-items: flex-start; } .footer-contact svg { color: var(--accent-orange); flex-shrink: 0; margin-top: 2px; } .footer-brand p { margin-top: 14px; font-size: var(--fs-small); max-width: 280px; color: var(--text-muted); } .social-row { display: flex; gap: 10px; margin-top: 20px; } .social-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; color: var(--text-muted-on-dark); transition: border-color 0.2s, color 0.2s; } .social-row a:hover { border-color: var(--accent-orange); color: var(--accent-orange); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--fs-small); color: var(--text-muted); } .footer-wordmark { font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 16vw, 11rem); color: rgba(255, 255, 255, 0.035); text-align: center; line-height: 0.8; margin-top: 10px; user-select: none; letter-spacing: -0.02em; } .wa-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 90; box-shadow: 0 8px 24px rgba(0,0,0,0.2); transition: transform 0.25s var(--ease); } .wa-float:hover { transform: scale(1.08); } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: translateY(0); } .center { text-align: center; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .hidden { display: none !important; } .breadcrumb { font-size: var(--fs-small); color: var(--text-muted); padding: 24px 0 0; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--accent-orange); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } } .split.reverse .split-visual { order: -1; } @media (max-width: 900px) { .split.reverse .split-visual { order: 0; } } .service-detail-block { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 60px 0; border-bottom: 1px solid var(--border); } .service-detail-block:last-child { border-bottom: none; } .service-detail-block.reverse .sd-visual { order: -1; } @media (max-width: 900px) { .service-detail-block, .service-detail-block.reverse .sd-visual { grid-template-columns: 1fr; order: 0; } .service-detail-block { grid-template-columns: 1fr; } } .sd-visual { aspect-ratio: 4/3; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-surface); display: flex; align-items: center; justify-content: center; } .sd-visual .icon-box { width: 88px; height: 88px; border-radius: 22px; } .sd-visual .icon-box svg { width: 38px; height: 38px; } .sd-meta { display: flex; gap: 30px; margin-top: 22px; flex-wrap: wrap; } .sd-meta div span { display: block; font-family: var(--font-label); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-orange); margin-bottom: 6px; } .sd-meta div p { font-size: var(--fs-small); color: var(--text-primary); } .callout-box { border: 1px solid var(--accent-orange); border-radius: var(--radius); padding: 40px; background: rgba(var(--accent-orange-rgb), 0.04); } .callout-box h3 { color: var(--text-primary); } .chip-strip { display: flex; flex-wrap: wrap; gap: 12px; } .chip-strip .chip { padding: 10px 18px; font-size: var(--fs-small); background: var(--bg-surface); border: 1px solid var(--border); } .industries-strip { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; } .industries-strip .item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .industries-strip .icon-box { width: 56px; height: 56px; border-radius: 16px; } .map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .map-embed iframe { width: 100%; height: 260px; border: 0; filter: grayscale(0.2) contrast(0.95); } .expand-btn { background: none; border: none; color: var(--accent-orange); font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; gap: 8px; } .case-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .case-body-inner { padding-top: 24px; border-top: 1px solid var(--border); margin-top: 24px; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; } @media (max-width: 800px) { .case-body-inner { grid-template-columns: 1fr 1fr; } } .case-body-inner h5 { font-family: var(--font-label); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--accent-orange); margin-bottom: 8px; } .case-body-inner p { font-size: var(--fs-small); color: var(--text-muted); } .case-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; } .case-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } @keyframes hero-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hero-marquee { position: relative; overflow: hidden; padding: 120px 0 90px; background: var(--bg-main); border-bottom: 1px solid var(--border); } .hero-marquee-bg { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; user-select: none; } .hero-marquee-track { display: flex; width: max-content; flex-shrink: 0; white-space: nowrap; animation: hero-marquee-scroll 40s linear infinite; } .hero-marquee-track span { font-family: var(--font-head); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-size: 18vw; color: rgba(0, 0, 0, 0.035); } @media (min-width: 768px) { .hero-marquee-track span { font-size: 12vw; } } .hero-marquee-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; } .hero-marquee-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-orange); background: rgba(var(--accent-orange-rgb), 0.08); } .hero-marquee-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-orange); display: inline-block; } .hero-marquee-heading { margin-top: 28px; font-size: var(--fs-h1); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; color: var(--text-primary); } .hero-marquee-note { margin: 20px auto 0; max-width: 560px; font-size: var(--fs-body-lg); color: var(--text-muted); } .hero-marquee-actions { margin-top: 40px; } .hero-marquee-footnote { margin-top: 28px; font-size: var(--fs-small); color: var(--text-muted); } .blog-hero { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: 40px; } .blog-hero img { width: 100%; max-height: 440px; object-fit: cover; display: block; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .blog-card:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .blog-card-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-main); } .blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .blog-card-meta { font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .blog-card-title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; color: var(--text-primary); } .blog-card-title a { color: inherit; text-decoration: none; } .blog-card-title a:hover { color: var(--accent-orange); } .blog-card-excerpt { color: var(--text-muted); font-size: var(--fs-small); flex: 1; } .blog-post-meta { font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .blog-post-content { max-width: 760px; margin: 0 auto; color: var(--text-primary); line-height: 1.75; } .blog-post-content h2, .blog-post-content h3 { font-family: var(--font-head); color: var(--text-primary); margin-top: 2em; } .blog-post-content p { margin: 1.2em 0; color: var(--text-primary); } .blog-post-content img { max-width: 100%; height: auto; border-radius: var(--radius); } .blog-post-content a { color: var(--accent-orange); } .blog-post-content a:hover { color: var(--accent-orange-hover); } .blog-post-content ul, .blog-post-content ol { padding-left: 1.4em; margin: 1.2em 0; } .blog-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 50px; } .blog-pagination a, .blog-pagination span { padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); text-decoration: none; font-family: var(--font-label); font-size: 0.85rem; background: var(--bg-surface); } .blog-pagination .current { border-color: var(--accent-orange); color: var(--accent-orange); } .blog-pagination a:hover { border-color: var(--accent-orange); color: var(--accent-orange); } .work { --work-gutter: clamp(20px, 5vw, 72px); --work-gap: clamp(16px, 1.6vw, 24px); --work-visible: 4; background: var(--bg-main); color: var(--text-primary); padding: clamp(56px, 8vw, 128px) 0; font-family: var(--font-body); -webkit-font-smoothing: antialiased; } .work *, .work *::before, .work *::after { box-sizing: border-box; } .work__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--work-gutter); } .work__head { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--border); } .work__eyebrow { margin: 0 0 16px; font-family: var(--font-label); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; color: var(--accent-orange); } .work__title { margin: 0 0 16px; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em; color: var(--text-primary); } .work__lead { margin: 0; max-width: 44ch; font-size: var(--fs-body); line-height: 1.65; color: var(--text-muted); } .work__link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label); color: var(--accent-orange); text-decoration: none; font-weight: 600; font-size: var(--fs-btn); white-space: nowrap; transition: color 0.25s var(--ease); } .work__link svg { flex: none; transition: transform 0.32s var(--ease); } .work__link:hover, .work__card:hover .work__link { color: var(--accent-orange-hover); } .work__link:hover svg, .work__card:hover .work__link svg { transform: translateX(5px); } .work__link:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 4px; border-radius: 3px; } .work__link--all { font-size: 1.0625rem; font-weight: 700; } .work__slider { display: flex; align-items: flex-start; gap: 14px; } .work__arrow { margin-top: calc( (100% - (var(--work-visible) - 1) * var(--work-gap)) / var(--work-visible) / 1.05 / 2 - 23px ); } .work__arrow { flex: none; width: 46px; height: 46px; padding: 0; } .work__arrow:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; } .work__arrow.is-disabled { opacity: 0.35; pointer-events: none; } .work__arrow svg { width: 18px; height: 18px; } .work__grid { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--work-visible) - 1) * var(--work-gap)) / var(--work-visible)); gap: var(--work-gap); margin: 0; padding: 0; padding-bottom: 4px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .work__grid::-webkit-scrollbar { display: none; } @media (max-width: 1080px) { .work { --work-visible: 2.3; } } .work__card { display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; } .work__media { position: relative; display: block; overflow: hidden; background: var(--bg-surface); aspect-ratio: 1 / 1.05; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 20px; } .work__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); } .work__card:hover .work__media img { transform: scale(1.045); } .work__category { margin: 0 0 8px; font-family: var(--font-label); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); } .work__name { margin: 0 0 10px; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.01em; color: var(--text-primary); } .work__name a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease); } .work__name a:hover { color: var(--accent-orange); } .work__desc { margin: 0 0 18px; font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); } .work__card .work__link { margin-top: auto; } @media (max-width: 720px) { .work { --work-visible: 1.15; } .work__head { grid-template-columns: 1fr; align-items: start; } .work__link--all { justify-self: start; } .work__arrow { display: none; } .work__media { aspect-ratio: 4 / 3.2; } } .work__dots { display: none; } @media (max-width: 720px) { .work__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; } .work__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .work__dot.is-active { background: var(--accent-orange); transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { .work__media img, .work__link svg, .work__dot, .work__arrow { transition: none; } } @media only screen and (min-width: 0rem) { #stats-1687 { width: 100%; padding: 100px 0; background: var(--bg-main); position: relative; } #stats-1687 .cs-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: stretch; gap: 48px; } #stats-1687 .cs-wrapper { width: 100%; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 48px; } #stats-1687 .cs-content { width: 100%; max-width: 640px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; } #stats-1687 .cs-content .cs-eyebrow, #stats-1687 .cs-content .label { margin-bottom: 20px; } #stats-1687 .cs-content h2 { margin: 0; color: var(--text-primary); font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } #stats-1687 .cs-text { max-width: 600px; margin: 16px 0 0; color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: 1.6; } #stats-1687 .cs-text:last-of-type { margin-bottom: 28px; } #stats-1687 .cs-button-solid { min-width: 150px; } #stats-1687 .cs-picture { width: 100%; max-width: none; min-height: 360px; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-dark-soft); border: 1px solid var(--border); display: block; position: relative; z-index: 1; } #stats-1687 .cs-picture img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } #stats-1687 .cs-card-group { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } #stats-1687 .cs-item { width: 100%; min-height: 190px; padding: 28px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; position: relative; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } #stats-1687 .cs-item:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06); } #stats-1687 .cs-h3 { margin: 0; color: var(--accent-orange); font-family: var(--font-label); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; text-transform: none; position: relative; z-index: 1; } #stats-1687 .cs-number { margin: 0; color: var(--text-primary); font-family: var(--font-head); font-size: clamp(2.8rem, 7vw, 3.8rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; position: relative; z-index: 1; } #stats-1687 .cs-graphic { width: clamp(110px, 18vw, 180px); height: clamp(110px, 18vw, 180px); position: absolute; right: -42px; bottom: -42px; z-index: 0; opacity: 0.9; color: var(--accent-orange); pointer-events: none; } } @media only screen and (min-width: 48rem) { #stats-1687 { padding: 110px 0; } #stats-1687 .cs-container { max-width: var(--container); padding: 0 24px; gap: 56px; } #stats-1687 .cs-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 48px; } #stats-1687 .cs-content { padding: 24px 0; align-self: center; } #stats-1687 .cs-picture { min-height: 430px; } #stats-1687 .cs-card-group { grid-template-columns: repeat(2, 1fr); gap: 20px; } #stats-1687 .cs-item { min-height: 210px; padding: 32px; } } @media only screen and (min-width: 64rem) { #stats-1687 { padding: 120px 0; } #stats-1687 .cs-container { max-width: var(--container); padding: 0 24px; gap: 64px; } #stats-1687 .cs-wrapper { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; } #stats-1687 .cs-content { padding: 48px 0; } #stats-1687 .cs-picture { min-height: 520px; } #stats-1687 .cs-card-group { grid-template-columns: repeat(4, 1fr); gap: 20px; } #stats-1687 .cs-item { min-height: 220px; padding: 30px 26px; } } @media only screen and (min-width: 81.25rem) { #stats-1687 .cs-container { max-width: var(--container); } #stats-1687 .cs-wrapper { gap: 80px; } #stats-1687 .cs-picture { min-height: 560px; } } @media (prefers-reduced-motion: reduce) { #stats-1687 .cs-item, #stats-1687 .cs-button-solid, #stats-1687 .cs-button-solid::before { transition: none; } } :root { --c-ink: #000000; --c-paper: #ffffff; --btn-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); --btn-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); --c-text-icon: var(--btn-arrow-light); } .cta-banner, footer, .hero { --c-ink: #ffffff; --c-paper: #000000; --c-text-icon: var(--btn-arrow-dark); } .form-card { --c-ink: #000000; --c-paper: #ffffff; --c-text-icon: var(--btn-arrow-light); } .btn { --btn-h: 48px; --btn-circle: 40px; --btn-pad: 4px; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; min-height: var(--btn-h); padding: var(--btn-pad) calc(var(--btn-circle) + var(--btn-pad) + 14px) var(--btn-pad) 24px; border: 1.5px solid var(--c-ink); border-radius: 999px; overflow: hidden; font-family: var(--font-body, sans-serif); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: padding 0.5s ease, background-color 0.3s, color 0.3s, box-shadow 0.3s; } .btn::before { content: ""; position: absolute; top: 50%; right: var(--btn-pad); width: var(--btn-circle); height: var(--btn-circle); margin-top: calc(var(--btn-circle) / -2); border-radius: 50%; background: var(--btn-circle-bg, var(--c-paper)); transition: right 0.5s ease, transform 0.5s ease, background-color 0.3s; } .btn::after { content: ""; position: absolute; top: 50%; right: calc(var(--btn-pad) + (var(--btn-circle) - 16px) / 2); width: 16px; height: 16px; margin-top: -8px; background: var(--btn-arrow-color, var(--c-ink)); -webkit-mask: var(--btn-arrow-dark) center / contain no-repeat; mask: var(--btn-arrow-dark) center / contain no-repeat; transition: right 0.5s ease, transform 0.5s ease, background-color 0.3s; } .btn:hover, .btn:focus-visible { padding-left: calc(var(--btn-circle) + var(--btn-pad) + 14px); padding-right: 24px; } .btn:hover::before, .btn:focus-visible::before { right: calc(100% - var(--btn-circle) - var(--btn-pad)); transform: rotate(45deg); } .btn:hover::after, .btn:focus-visible::after { right: calc(100% - var(--btn-circle) - var(--btn-pad) + (var(--btn-circle) - 16px) / 2); transform: rotate(45deg); } .btn:focus-visible { outline: 2px solid var(--accent-orange, #000000); outline-offset: 3px; } .btn--lg { --btn-h: 56px; --btn-circle: 46px; --btn-pad: 4px; font-size: 1rem; padding-left: 30px; } .btn[style*="width:100%"], .btn[style*="width: 100%"] { display: flex; } .btn-primary { background: var(--c-ink); color: var(--c-paper); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); --btn-circle-bg: var(--c-paper); --btn-arrow-color: var(--c-ink); } .btn-primary:hover, .btn-primary:active { background: var(--c-ink); color: var(--c-paper); transform: none; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26); } .btn-accent { background: var(--accent-orange, #000000); border-color: var(--accent-orange, #000000); color: #fff; box-shadow: 0 10px 26px rgba(var(--accent-orange-rgb, 0, 0, 0), 0.28); --btn-circle-bg: #fff; --btn-arrow-color: var(--accent-orange, #000000); } .btn-accent:hover, .btn-accent:active { background: var(--accent-orange-hover, #262626); border-color: var(--accent-orange-hover, #262626); color: #fff; transform: none; box-shadow: 0 14px 30px rgba(var(--accent-orange-rgb, 0, 0, 0), 0.36); } .btn-ghost { background: transparent; color: var(--c-ink); box-shadow: none; --btn-circle-bg: var(--c-ink); --btn-arrow-color: var(--c-paper); } .btn-ghost:hover { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); transform: none; --btn-circle-bg: var(--c-paper); --btn-arrow-color: var(--c-ink); } .btn-text { display: inline-flex !important; align-items: center; gap: 10px; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; color: var(--c-ink); font-weight: 600; cursor: pointer; transition: color 0.2s; } .btn-text::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c-text-icon) center / 12px 12px no-repeat, var(--c-ink); transition: transform 0.4s ease, background-color 0.25s; } .btn-text:hover { color: var(--accent-orange, #000000); border: 0; } .btn-text:hover::after { transform: rotate(45deg); background-color: var(--accent-orange, #000000); } .btn-text:focus-visible, .expand-btn:focus-visible { outline: 2px solid var(--accent-orange, #000000); outline-offset: 4px; } .expand-btn { padding: 9px 18px; border: 1.5px solid #000000; border-radius: 999px; color: #000000; font-weight: 600; transition: background-color 0.25s, color 0.25s; } .expand-btn:hover { background: #000000; color: #fff; } .work__link--all { padding: 12px 22px; border: 1.5px solid #000000; border-radius: 999px; color: #000000; transition: background-color 0.25s, color 0.25s; } .work__link--all:hover { background: #000000; color: #fff; } .work__arrow { background: #000000; border: 1.5px solid #000000; color: #fff; } .work__arrow:hover { background: #fff; color: #000000; border-color: #000000; } .ic-arrow { background: #fff; border: 1.5px solid #fff; color: #000000; } .ic-arrow:hover { background: var(--accent-orange, #000000); border-color: var(--accent-orange, #000000); color: #fff; } @media (max-width: 600px) { .btn { padding-left: 20px; } .btn--lg { padding-left: 24px; } } @media (prefers-reduced-motion: reduce) { .btn, .btn::before, .btn::after, .btn-text::after { transition: none; } } *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(0 0 0 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(0 0 0 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e5e5}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}#gateway-flow-root h1,#gateway-flow-root h2,#gateway-flow-root h3,#gateway-flow-root h4,#gateway-flow-root h5,#gateway-flow-root h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a3a3a3}input::placeholder,textarea::placeholder{opacity:1;color:#a3a3a3}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.inset-0{inset:0}.z-0{z-index:0}.mt-16{margin-top:4rem}.mt-40{margin-top:10rem}.mt-8{margin-top:2rem}.block{display:block}.table{display:table}.h-full{height:100%}.w-full{width:100%}.grow{flex-grow:1}.resize{resize:both}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}#gateway-flow-root{position:absolute;inset:0;z-index:0;pointer-events:none}#gateway-flow-root canvas{pointer-events:auto} .abs-hero .btn--lg { --btn-h: 60px; --btn-circle: 50px; --btn-pad: 5px; font-size: 1.0625rem; padding-left: 32px; } .abs-hero .btn--lg:hover, .abs-hero .btn--lg:focus-visible { padding-left: calc(var(--btn-circle) + var(--btn-pad) + 14px); padding-right: 24px; } .abs-hero .btn-ghost:not(:hover):not(:focus-visible) { background: rgba(255, 255, 255, 0.5); } .abs-hero { --hero-ink: #000000; --hero-muted: #4a4a4a; --hero-line: #d0d0d0; --hero-bg: #f4f4f4; --px: 0; --py: 0; position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); padding-block: clamp(150px, 11vw, 176px) clamp(56px, 6vw, 88px); padding-inline: 24px; } .abs-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 78% 45%, #fbfbfb 0%, rgba(251, 251, 251, 0) 70%), linear-gradient(180deg, #f6f6f6 0%, #f1f1f1 100%); } .abs-hero__aurora { position: absolute; width: 62vmax; aspect-ratio: 1; right: -16vmax; bottom: -30vmax; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(98, 32, 76, 0.22) 0%, rgba(98, 32, 76, 0.1) 38%, rgba(98, 32, 76, 0) 68%); filter: blur(20px); } .abs-hero__aurora--two { width: 40vmax; right: auto; left: -14vmax; bottom: auto; top: -18vmax; background: radial-gradient(circle at 50% 50%, rgba(57, 5, 31, 0.08) 0%, rgba(57, 5, 31, 0) 66%); } .abs-hero__orbits { position: absolute; top: 50%; left: 72%; width: min(1100px, 96vw); aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; } .abs-hero__ring { fill: none; stroke: #cfcfcf; stroke-width: 1; vector-effect: non-scaling-stroke; } .abs-hero__ring--dash { stroke-dasharray: 2 6; stroke: #c4c4c4; } .abs-hero__ring--long { stroke-dasharray: 60 14 2 14; stroke: #d6d6d6; } .abs-hero__disc { fill: #fafafa; } .abs-hero__spin { transform-box: view-box; transform-origin: 500px 500px; } .abs-hero__dot { fill: #000; } .abs-hero__dot--soft { fill: #c9c9c9; } .abs-hero__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.22; mix-blend-mode: overlay; } .abs-hero__layer { transform: translate(calc(var(--px) * -14px), calc(var(--py) * -10px)); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .abs-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 3vw, 48px); max-width: 1360px; margin-inline: auto; } .abs-hero__copy { min-width: 0; max-width: 640px; } .abs-hero__label { display: inline-flex; align-items: center; gap: 16px; margin: 0; font-family: var(--font-body, "Geist", system-ui, sans-serif); font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: #2b2b2b; } .abs-hero__label::before { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; } .abs-hero__title { margin: 26px 0 0; font-family: var(--font-head, "Geist", system-ui, sans-serif); font-size: clamp(2.6rem, 5.1vw, 5rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.05em; color: var(--hero-ink); text-wrap: balance; } .abs-hero__title em { font-family: "Instrument Serif", "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -0.02em; line-height: 0.9; } .abs-hero__sub { max-width: 36em; margin: 26px 0 0; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: var(--hero-muted); text-wrap: pretty; } .abs-hero__sub strong { font-weight: 600; color: #2b2b2b; } .abs-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; } .abs-hero__stats { display: flex; flex-wrap: wrap; margin: 44px 0 0; padding: 0; list-style: none; } .abs-hero__stats li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px clamp(18px, 2.6vw, 40px); border-left: 1px solid var(--hero-line); text-align: center; } .abs-hero__stats li:first-child { padding-left: 10px; border-left: 0; } .abs-hero__stats strong { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head, "Geist", system-ui, sans-serif); font-size: clamp(1.4rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .abs-hero__stats span { font-size: 0.9375rem; color: var(--hero-muted); } .abs-hero__stars { display: inline-flex; gap: 3px; } .abs-hero__stars svg { width: 17px; height: 17px; } .abs-hero__visual { position: relative; min-width: 0; margin-right: clamp(-48px, -2vw, 0px); } .abs-hero__float { transform: translate(calc(var(--px) * 12px), calc(var(--py) * 8px)); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .abs-hero__img { display: block; width: 100%; max-width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.12)); } .abs-hero__visual::after { content: ""; position: absolute; left: 14%; right: 10%; bottom: 2%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 70%); z-index: -1; } @media (prefers-reduced-motion: no-preference) { .abs-hero__copy > * { animation: abs-hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .abs-hero__copy > :nth-child(2) { animation-delay: 0.08s; } .abs-hero__copy > :nth-child(3) { animation-delay: 0.16s; } .abs-hero__copy > :nth-child(4) { animation-delay: 0.24s; } .abs-hero__copy > :nth-child(5) { animation-delay: 0.32s; } .abs-hero__visual { animation: abs-hero-arrive 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; } .abs-hero__img { animation: abs-hero-hover 7s ease-in-out 1.6s infinite alternate; } .abs-hero__spin--a { animation: abs-hero-turn 140s linear infinite; } .abs-hero__spin--b { animation: abs-hero-turn 90s linear infinite reverse; } .abs-hero__spin--c { animation: abs-hero-turn 60s linear infinite; } .abs-hero__spin--d { animation: abs-hero-turn 45s linear infinite reverse; } .abs-hero__aurora { animation: abs-hero-drift 22s ease-in-out infinite alternate; } .abs-hero__aurora--two { animation-duration: 28s; animation-direction: alternate-reverse; } .abs-hero__disc-g { animation: abs-hero-breathe 9s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 500px 500px; } .abs-hero__rings-in .abs-hero__ring { stroke-dashoffset: 0; animation: abs-hero-fade 1.6s ease 0.3s both; } } @keyframes abs-hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes abs-hero-arrive { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes abs-hero-hover { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-14px) rotate(-0.4deg); } } @keyframes abs-hero-turn { to { transform: rotate(360deg); } } @keyframes abs-hero-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vmax, -4vmax, 0) scale(1.12); } } @keyframes abs-hero-breathe { from { transform: scale(1); } to { transform: scale(1.035); } } @keyframes abs-hero-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 1080px) { .abs-hero { padding-top: 160px; } .abs-hero__inner { grid-template-columns: 1fr; gap: 24px; } .abs-hero__copy { max-width: 720px; } .abs-hero__visual { margin: 0 -24px 0 4%; max-width: 860px; } .abs-hero__orbits { left: 70%; top: 72%; width: 130vw; } } @media (max-width: 640px) { .abs-hero { padding-top: 140px; padding-bottom: 28px; } .abs-hero__label { gap: 0; padding: 9px 16px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 12px; letter-spacing: 0.02em; text-transform: none; } .abs-hero__label::before { display: none; } .abs-hero__title { margin-top: 22px; font-size: clamp(2.5rem, 11.5vw, 3.2rem); } .abs-hero__sub { margin-top: 18px; font-size: 1.0625rem; } .abs-hero__cta { flex-direction: column; gap: 12px; margin-top: 28px; } .abs-hero__cta .btn { width: 100%; justify-content: flex-start; } .abs-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; } .abs-hero__stats li, .abs-hero__stats li:first-child { padding: 2px 6px; } .abs-hero__stats strong { font-size: 1.3rem; gap: 6px; } .abs-hero__stats span { font-size: 0.8125rem; } .abs-hero__stars svg { width: 12px; height: 12px; } .abs-hero__stars { gap: 1px; } .abs-hero__visual { margin: 12px -96px 0 -40px; } .abs-hero__aurora { width: 120vw; right: -40vw; bottom: -50vw; } } @media (prefers-reduced-motion: reduce) { .abs-hero__layer, .abs-hero__float { transition: none; } } .ic-carousel { position: relative; margin-top: 8px; } .ic-stage { position: relative; width: 100%; height: 460px; display: flex; align-items: center; justify-content: center; perspective: 1400px; margin-bottom: 28px; } .ic-slide { position: absolute; width: 300px; height: 420px; border-radius: var(--radius); overflow: hidden; background: var(--bg-dark); border: 1px solid var(--border-strong); transform-origin: center center; transition: transform 700ms var(--ease), opacity 700ms var(--ease), filter 700ms var(--ease); will-change: transform, opacity, filter; } .ic-slide[data-pos="center"] { cursor: default; box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--accent-orange-rgb), 0.15); } .ic-slide:not([data-pos="center"]) { cursor: pointer; } .ic-slide__bg { position: absolute; inset: 0; transition: transform 700ms var(--ease); } .ic-slide__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ic-slide[data-pos="center"] .ic-slide__bg { transform: scale(1.04); } .ic-slide__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.2) 100%); } .ic-slide__content { position: relative; z-index: 1; height: 100%; padding: 26px 24px 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; text-align: left; opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); pointer-events: none; } .ic-slide[data-pos="center"] .ic-slide__content { opacity: 1; transform: translateY(0); pointer-events: auto; } .ic-slide__content .icon-box { margin-bottom: 2px; background: rgba(var(--accent-orange-rgb), 0.18); color: var(--accent-orange); } .ic-slide__content h3 { color: #ffffff; } .ic-slide__content p { font-size: var(--fs-small); color: var(--text-muted-on-dark); line-height: 1.5; } .ic-nav { display: flex; align-items: center; justify-content: center; gap: 18px; } .ic-arrow { flex: none; width: 44px; height: 44px; } .ic-arrow:hover { background: var(--accent-orange); border-color: var(--accent-orange); color: #ffffff; } .ic-dots { display: flex; align-items: center; gap: 8px; } .ic-dot { height: 8px; width: 8px; border-radius: var(--radius-pill); border: none; padding: 0; background: var(--border-strong); cursor: pointer; transition: width 300ms var(--ease), background 300ms var(--ease); } .ic-dot[aria-current="true"] { width: 26px; background: var(--accent-orange); } @media (max-width: 900px) { .ic-stage { height: 400px; } .ic-slide { width: 250px; height: 360px; } } @media (max-width: 560px) { .ic-stage { height: 380px; } .ic-slide { width: 220px; height: 340px; } .ic-slide__content { padding: 20px 18px 22px; } } @media (prefers-reduced-motion: reduce) { .ic-slide, .ic-slide__bg, .ic-slide__content { transition: none; } } .work, .abs-hero__strip, .testimonials-marquee, .ic-carousel { overflow-x: clip; } .work__more { display: flex; justify-content: center; margin: 2rem 0 0; } .ic-slide__scrim { background: linear-gradient(to top, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.65) 45%, rgb(0 0 0 / 0.2) 100%); } .ic-slide__content h3, .ic-slide__content p { text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); } .result-card .meta { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; } .result-card .meta h3 { flex-grow: 1; } .founder-photo { font-size: var(--fs-h4); } .testimonial-card__avatar, .result-card .btn-text { font-size: var(--fs-small); } .testimonial-card__quote { font-size: var(--fs-body); line-height: 1.6; } .field input, .field select, .field textarea { font-size: 1rem; } .abs-stats__eyebrow, .abs-split__eyebrow { font-size: var(--fs-micro); } .abs-stats__heading, .abs-split__heading, .abs-stat__value { font-size: var(--fs-h2); } .abs-stats__intro { font-size: var(--fs-body); } .abs-stat__label { font-size: var(--fs-body-lg); } :root { --radius: 1rem; } .icon-box, .abs-split__image { border-radius: var(--radius); } .work__arrow, .ic-arrow { flex: none; width: 44px; height: 44px; margin-top: 0; padding: 0; background: #000000; border: 1.5px solid #000000; color: #fff; } .work__arrow:hover, .ic-arrow:hover { background: #fff; border-color: #000000; color: #000000; } .work__arrow:focus-visible, .ic-arrow:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; } .work__nav { display: flex; gap: 10px; align-self: end; } @media (max-width: 720px) { .work__nav { display: none; } } .label { text-transform: none; letter-spacing: 0.04em; } .footer-grid .footer-heading { margin: 0 0 16px; font-family: var(--font-label); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-orange); } .testimonial-card__quote p { margin: 0; } .testimonial-card__quote p + p { margin-top: 0.75em; } .testimonials-marquee--static .testimonials-track { width: auto; flex-wrap: wrap; justify-content: center; animation: none; } .testimonials-marquee--static .testimonial-card { width: min(100%, 26rem); } .abs-stats__grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 60rem) { .abs-stats__grid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 26rem) { .abs-stats__grid--quad .abs-stat { padding: 1.25rem 1rem; } } .ic-slide:not([data-pos="center"]) .ic-slide__content { opacity: 1; transform: none; } .ic-slide__content p { transition: opacity 400ms var(--ease); } .ic-slide:not([data-pos="center"]) .ic-slide__content p { opacity: 0; } .footer-contact li { align-items: flex-start; } .footer-contact img { flex: none; width: 18px; height: 18px; margin-top: 3px; margin-top: calc((1lh - 18px) / 2); } #cs-navigation .cs-logo { width: auto; max-width: none; height: auto; flex-shrink: 0; } #cs-navigation .cs-logo img { display: block; width: auto; height: 2.5rem; max-width: 70vw; object-fit: contain; } @media only screen and (min-width: 1024px) { #cs-navigation .cs-logo img { height: 2.875rem; } } .form-consent { font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); margin: 4px 0 14px; } .form-consent a { text-decoration: underline; color: inherit; } .footer-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; } .footer-legal a, .footer-cookie-link { color: inherit; text-decoration: none; } .footer-legal a:hover, .footer-cookie-link:hover { text-decoration: underline; } .footer-cookie-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .blog-post-content ul { list-style: disc; } .blog-post-content ol { list-style: decimal; } .blog-post-content li { margin: 0.4em 0; } .abs-cookie { position: fixed; left: 16px; bottom: 16px; z-index: 10000; max-width: 420px; padding: 18px 20px; background: #111; color: #f5f5f5; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); font-size: 0.875rem; line-height: 1.5; } .abs-cookie[hidden] { display: none; } .abs-cookie__text { margin: 0; } .abs-cookie__text a { color: inherit; text-decoration: underline; margin-left: 4px; } .abs-cookie__actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; } .abs-cookie__btn { border: 1px solid #fff; background: #fff; color: #111; border-radius: 999px; padding: 8px 18px; font: inherit; font-weight: 600; cursor: pointer; } .abs-cookie__btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); } .abs-cookie__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 600px) { .abs-cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; } } .abs-ow { padding: clamp(56px, 9vw, 112px) 0; } .abs-ow__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px 48px; align-items: end; } .abs-ow__title { margin: 18px 0 0; font-size: clamp(2.25rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; max-width: 15ch; } .abs-ow__title em { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -0.01em; } .abs-ow__intro { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.55; } .abs-ow__empty { margin-top: 32px; color: var(--text-muted); } .abs-ow__tabs-scroll { margin-top: clamp(32px, 4vw, 48px); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-strong); } .abs-ow__tabs-scroll::-webkit-scrollbar { display: none; } .abs-ow__tabs { display: flex; gap: clamp(24px, 3.4vw, 44px); width: max-content; } .abs-ow__tab { appearance: none; border: 0; background: none; border-radius: 0; position: relative; padding: 0 0 14px; color: var(--text-muted); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .2s; } .abs-ow__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .abs-ow__tab:hover { color: var(--text-primary); } .abs-ow__tab[aria-selected="true"] { color: var(--text-primary); } .abs-ow__tab[aria-selected="true"]::after { transform: scaleX(1); } .abs-ow__tab:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; } .abs-ow__count { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: 2px; } .abs-ow__panel { margin-top: clamp(24px, 3vw, 36px); } .abs-ow__panel[hidden] { display: none; } .abs-ow__panel-intro { margin: 0 0 28px; color: var(--text-muted); max-width: 64ch; } @media (prefers-reduced-motion: no-preference) { .abs-ow__panel:not([hidden]) { animation: abs-ow-rise .4s ease both; } } @keyframes abs-ow-rise { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: none; } } .abs-ow__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.6vw, 36px); } .abs-ow-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; } .abs-ow-card:hover { color: inherit; } .abs-ow-card:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 6px; } .abs-ow-media { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; max-width: 100%; background: #171717; } .abs-ow-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .abs-ow-link:hover .abs-ow-media img { transform: scale(1.035); } .abs-ow-media.is-result { background: #f5f5f5; } .abs-ow-media.is-result img { object-fit: contain; padding: 18px; } .abs-ow-media.is-empty { background: radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,.12), transparent 60%), #171717; } .abs-ow-media.is-empty.is-result { background: #f5f5f5; } .abs-ow-figure { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: clamp(20px, 2.4vw, 28px); color: var(--text-primary); } .abs-ow-figure__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } .abs-ow-figure__value { font-size: clamp(3rem, 6vw, 4.75rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; } .abs-ow-figure__from { font-size: 0.9375rem; color: var(--text-muted); } .abs-ow-play { position: absolute; left: 18px; bottom: 18px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #fff; color: #fff; display: grid; place-items: center; background: rgba(0,0,0,.12); transition: background-color .2s, color .2s; } .abs-ow-play svg { width: 13px; height: 13px; margin-left: 2px; } .abs-ow-link:hover .abs-ow-play { background: #fff; color: #000; } .abs-ow-views { position: absolute; right: 16px; bottom: 22px; z-index: 1; color: #fff; font-size: 0.8125rem; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; } .abs-ow-kicker { margin-top: 18px; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-variant-numeric: tabular-nums; } .abs-ow-title { margin-top: 8px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } .abs-ow-numbers { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--text-primary); font-variant-numeric: tabular-nums; } .abs-ow-delta { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; background: var(--text-primary); color: #fff; font-variant-numeric: tabular-nums; } .abs-ow-sub { margin-top: 6px; font-size: 0.875rem; color: var(--text-muted); } .abs-ow-cta { align-self: flex-start; margin-top: 14px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.9375rem; color: var(--text-primary); padding-bottom: 3px; border-bottom: 1px solid currentColor; } .abs-ow-cta svg { width: 14px; height: 14px; transition: transform .2s; } .abs-ow-link:hover .abs-ow-cta svg { transform: translate(2px, -2px); } .abs-ow__foot { margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--border-strong); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .abs-ow__foot p { margin: 0; font-size: 0.9375rem; color: var(--text-muted); } .abs-ow-textlink { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; color: var(--text-primary); text-decoration: none; } .abs-ow-textlink svg { width: 15px; height: 15px; transition: transform .2s; } .abs-ow-textlink:hover { color: var(--text-primary); } .abs-ow-textlink:hover svg { transform: translate(2px, -2px); } .abs-ow-textlink:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; } .abs-ow-modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; } .abs-ow-modal::backdrop { background: rgba(0,0,0,.88); } .abs-ow-modal__box { position: relative; width: min(960px, 92vw); margin: 6vh auto 0; } .abs-ow-modal.is-reel .abs-ow-modal__box { width: min(400px, 92vw); margin-top: 3vh; } .abs-ow-modal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .abs-ow-modal.is-reel .abs-ow-modal__frame { aspect-ratio: 9 / 16; max-height: 88vh; margin: 0 auto; } .abs-ow-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .abs-ow-modal__close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #000; font-size: 24px; line-height: 1; cursor: pointer; } .abs-ow-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .abs-ow--home { padding-top: clamp(40px, 6vw, 80px); } @media (max-width: 900px) { .abs-ow__head { grid-template-columns: 1fr; align-items: start; } .abs-ow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .abs-ow__grid { grid-template-columns: 1fr; gap: 36px; } .abs-ow-media { aspect-ratio: 3 / 2; } .abs-ow-card--reel .abs-ow-media { aspect-ratio: 4 / 5; } .abs-ow__tab { font-size: 1rem; } } .abs-tst { --tst-bg: var(--bg-main, #fcfcfc); --tst-card: var(--bg-surface, #ffffff); --tst-line: var(--border, #e5e5e5); --tst-text: var(--text-primary, #000000); --tst-muted: var(--text-muted, #525252); --tst-focus: var(--bg-dark-soft, #171717); --tst-size: 365px; --tst-cut: 50px; background: var(--tst-bg); color: var(--tst-text); padding: clamp(64px, 9vw, 112px) 0 clamp(48px, 7vw, 88px); overflow: hidden; } .abs-tst__head h2 { color: var(--tst-text); } .abs-tst__head .label { justify-content: center; } .abs-tst__list { list-style: none; margin: 0; padding: 0; } .abs-tst__card { position: relative; box-sizing: border-box; width: var(--tst-size); height: var(--tst-size); padding: 32px; background: var(--tst-card); color: var(--tst-text); border: 2px solid var(--tst-line); clip-path: polygon(0 0, calc(100% - var(--tst-cut)) 0, 100% var(--tst-cut), 100% 100%, 0 100%); text-align: left; display: flex; flex-direction: column; } .abs-tst__fold { position: absolute; right: -2px; top: calc(var(--tst-cut) - 2px); width: calc(var(--tst-cut) * 1.4142); height: 2px; background: var(--tst-line); transform: rotate(45deg); transform-origin: right top; pointer-events: none; } .abs-tst__avatar { flex: none; display: grid; place-items: center; width: 48px; height: 56px; margin-bottom: 18px; overflow: hidden; background: #f5f5f5; color: var(--tst-text); font-weight: 600; font-size: 0.95rem; box-shadow: 3px 3px 0 var(--tst-bg); } .abs-tst__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .abs-tst__quote { margin: 0; font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; flex: none; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .abs-tst__by { margin: auto 0 0; padding-top: 14px; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; color: var(--tst-muted); } .abs-tst__by > :first-child { color: inherit; font-weight: 500; } .abs-tst__by a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .abs-tst__role { font-style: italic; } .abs-tst__card.is-center { background: var(--tst-focus); color: #ffffff; border-color: var(--tst-focus); --tst-muted: rgba(255, 255, 255, 0.75); } .abs-tst__card.is-center .abs-tst__fold { background: rgba(255, 255, 255, 0.25); } .abs-tst__card.is-center .abs-tst__avatar { background: rgba(255, 255, 255, 0.12); color: #ffffff; box-shadow: 3px 3px 0 var(--tst-bg); } .abs-tst__stage { position: relative; margin-top: clamp(32px, 4vw, 48px); outline: none; } .abs-tst__list { display: flex; gap: 20px; padding: 4px 24px 8px; overflow-x: auto; scroll-snap-type: x mandatory; } .abs-tst__list .abs-tst__card { flex: none; scroll-snap-align: center; } .abs-tst__list > :first-child { margin-left: auto; } .abs-tst__list > :last-child { margin-right: auto; } .abs-tst__nav { display: none; } .abs-tst__stage.is-ready { height: calc(var(--tst-size) + 200px); } .abs-tst__stage.is-ready .abs-tst__list { display: block; padding: 0; overflow: visible; height: 100%; } .abs-tst__stage.is-ready .abs-tst__list > * { margin: 0; } .abs-tst__stage.is-ready .abs-tst__card { position: absolute; left: 50%; top: calc(50% - 36px); cursor: pointer; transition: transform 0.5s ease-in-out, background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s; will-change: transform; } .abs-tst__stage.is-ready .abs-tst__card:not(.is-center):hover { border-color: var(--border-strong, #d4d4d4); } .abs-tst__stage.is-ready .abs-tst__card.is-center { cursor: default; z-index: 2; box-shadow: 0 8px 0 4px var(--tst-line); } .abs-tst__stage.is-ready .abs-tst__card.is-far { visibility: hidden; } .abs-tst__stage.is-ready .abs-tst__nav { position: absolute; left: 50%; bottom: 0; display: flex; gap: 8px; transform: translateX(-50%); } .abs-tst__btn { display: grid; place-items: center; width: 56px; height: 56px; background: var(--tst-card); color: var(--tst-text); border: 2px solid var(--tst-line); border-radius: 0; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .abs-tst__btn:hover { background: var(--tst-focus); color: #ffffff; border-color: var(--tst-focus); } .abs-tst__btn:focus-visible, .abs-tst__stage:focus-visible { outline: 2px solid var(--tst-text); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .abs-tst__stage.is-ready .abs-tst__card { transition: none; } } @media (max-width: 639px) { .abs-tst { --tst-size: min(290px, 78vw); --tst-cut: 36px; } .abs-tst__card { padding: 24px; } .abs-tst__avatar { width: 40px; height: 46px; margin-bottom: 14px; } .abs-tst__quote { font-size: 0.975rem; -webkit-line-clamp: 5; } .abs-tst__stage.is-ready { height: calc(var(--tst-size) + 170px); } .abs-tst__btn { width: 48px; height: 48px; } } .abs-why { --why-bg: #fcfcfc; --why-ink: #000000; --why-muted: #525252; --why-line: #e5e5e5; --why-art-line: #d6d6d6; --why-disc: #f0f0f0; --px: 0; --py: 0; position: relative; isolation: isolate; overflow: hidden; background: var(--why-bg); color: var(--why-ink); padding: clamp(64px, 6vw, 88px) 24px clamp(64px, 6.5vw, 96px); } .abs-why__art { position: absolute; z-index: -1; top: 50%; height: auto; transform: translateY(-50%); overflow: visible; pointer-events: none; } .abs-why__art--left { left: 0; width: clamp(180px, calc((100vw - 960px) / 2 + 30px), 360px); aspect-ratio: 360 / 744; } .abs-why__art--right { right: 0; width: clamp(200px, calc((100vw - 960px) / 2 + 50px), 425px); aspect-ratio: 425 / 744; } .abs-why__layer { transform: translate(calc(var(--px) * 10px), calc(var(--py) * 8px)); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .abs-why__layer[data-depth="0.4"] { transform: translate(calc(var(--px) * 4px), calc(var(--py) * 3px)); } .abs-why__arc, .abs-why__rule { fill: none; stroke: var(--why-art-line); stroke-width: 1; vector-effect: non-scaling-stroke; } .abs-why__arc--faint { stroke: #e6e6e6; } .abs-why__arc--dotted { stroke: #bdbdbd; stroke-dasharray: 0.0035 0.0045; } .abs-why__rule--h { stroke: #dcdcdc; } .abs-why__dot { fill: var(--why-ink); } .abs-why__dot--soft { fill: #dedede; } .abs-why__pulse { fill: none; stroke: var(--why-ink); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; } .abs-why__orbit { transform-box: view-box; transform-origin: var(--x) var(--y); transform: rotate(var(--from)); } .abs-why__sphere { opacity: 0.95; } @media (prefers-reduced-motion: no-preference) { .abs-why.is-armed .abs-why__arc:not(.abs-why__arc--dotted), .abs-why.is-armed .abs-why__rule { stroke-dasharray: 1; stroke-dashoffset: 1; } .abs-why.is-armed .abs-why__arc--dotted, .abs-why.is-armed .abs-why__dot, .abs-why.is-armed .abs-why__sphere { opacity: 0; } .abs-why.is-armed .abs-why__sphere { transform-box: fill-box; transform-origin: center; transform: scale(0.92); } .abs-why.is-in .abs-why__arc:not(.abs-why__arc--dotted), .abs-why.is-in .abs-why__rule { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1); } .abs-why.is-in .abs-why__rule { transition-duration: 1.4s; } .abs-why.is-in .abs-why__arc--2 { transition-delay: 0.15s; } .abs-why.is-in .abs-why__arc--3 { transition-delay: 0.3s; } .abs-why.is-in .abs-why__sphere { opacity: 0.95; transform: scale(1); transition: opacity 1.6s ease, transform 2.4s cubic-bezier(0.16, 1, 0.3, 1); } .abs-why.is-in .abs-why__arc--dotted, .abs-why.is-in .abs-why__dot { opacity: 1; transition: opacity 0.6s ease 1.3s; } .abs-why.is-in .abs-why__orbit { animation: abs-why-orbit var(--dur) ease-in-out 1.6s infinite alternate; } .abs-why.is-in .abs-why__pulse { animation: abs-why-pulse 3.2s ease-out 2s infinite; } .abs-why.is-in .abs-why__pulse--late { animation-delay: 3.6s; } .abs-why.is-in .abs-why__art--right .abs-why__pulse { animation-delay: 2.8s; } .abs-why.is-in .abs-why__art--right .abs-why__pulse--late { animation-delay: 4.4s; } .abs-why.is-in .abs-why__comet, .abs-why.is-in .abs-why__beam { opacity: 1; animation: abs-why-travel var(--dur) linear var(--delay, 2s) infinite; } .abs-why.is-in .abs-why__comet--rev, .abs-why.is-in .abs-why__beam--rev { animation-direction: reverse; } .abs-why.is-in .abs-why__spin { animation: abs-why-spin var(--dur) linear 1.4s infinite; } .abs-why.is-in .abs-why__float { animation: abs-why-float var(--dur) ease-in-out 1.6s infinite alternate; } .abs-why.is-in .abs-why__slide { animation: abs-why-float var(--dur) cubic-bezier(0.65, 0, 0.35, 1) 1.8s infinite alternate; } } .abs-why__comet, .abs-why__beam { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; } .abs-why__comet { stroke: #000; stroke-width: 1.4; stroke-dasharray: 0.045 0.955; stroke-dashoffset: 0; stroke-opacity: 0.55; } .abs-why__beam { stroke: #000; stroke-width: 1.4; stroke-dasharray: 0.14 0.86; stroke-dashoffset: 0.14; stroke-opacity: 0.6; } .abs-why__spin { transform-box: view-box; transform-origin: var(--x) var(--y); } @keyframes abs-why-travel { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes abs-why-spin { to { transform: rotate(360deg); } } @keyframes abs-why-float { from { transform: translateY(0); } to { transform: translateY(var(--dy)); } } @keyframes abs-why-orbit { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } } @keyframes abs-why-pulse { 0% { opacity: 0.55; transform: scale(1); } 75% { opacity: 0; transform: scale(4); } 100% { opacity: 0; transform: scale(4); } } .abs-why__inner { position: relative; max-width: 960px; margin-inline: auto; } .abs-why__label { display: inline-flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-label, "Geist", system-ui, sans-serif); font-size: 14px; font-weight: 500; line-height: 1; color: #262626; } .abs-why__label::before { content: ""; width: 22px; height: 1px; background: currentColor; } .abs-why__heading { max-width: 13.5em; margin: 18px 0 0; font-family: var(--font-head, "Geist", system-ui, sans-serif); font-size: clamp(32px, 3.75vw, 46px); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; color: var(--why-ink); text-wrap: balance; } .abs-why__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(32px, 3.5vw, 44px) 0 0; padding: 0; list-style: none; } .abs-why__grid::before, .abs-why__grid::after { content: ""; position: absolute; background: var(--why-line); pointer-events: none; } .abs-why__grid::before { top: 0; bottom: 0; left: 50%; width: 1px; } .abs-why__grid::after { top: 50%; left: 0; right: 0; height: 1px; } .abs-why__item { display: flex; align-items: flex-start; gap: clamp(18px, 2.4vw, 28px); margin: 0; padding: 12px 32px 30px 0; } .abs-why__item:nth-child(even) { padding-left: clamp(24px, 3.2vw, 32px); padding-right: 0; } .abs-why__item:nth-child(n + 3) { padding-top: 28px; padding-bottom: 12px; } .abs-why__icon { flex: none; display: grid; place-items: center; width: clamp(60px, 5.2vw, 70px); aspect-ratio: 1; border-radius: 50%; background: var(--why-disc); color: var(--why-ink); } .abs-why__icon .abs-icon { width: 46%; height: 46%; stroke-width: 1.5; object-fit: contain; } .abs-why__body { min-width: 0; padding-top: 2px; } .abs-why__num { display: block; font-family: var(--font-label, "Geist", system-ui, sans-serif); font-size: 14px; line-height: 1; color: #525252; font-variant-numeric: tabular-nums; } .abs-why__title { margin: 10px 0 0; font-family: var(--font-head, "Geist", system-ui, sans-serif); font-size: clamp(20px, 1.6vw, 21px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--why-ink); } .abs-why__text { max-width: 30em; margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--why-muted); } @media (max-width: 1240px) { .abs-why__art { opacity: 0.55; } } @media (max-width: 900px) { .abs-why__art--left { display: none; } .abs-why__art--right { top: 0; width: 240px; transform: translate(38%, -30%); opacity: 0.6; } } @media (max-width: 680px) { .abs-why__grid { grid-template-columns: 1fr; } .abs-why__grid::before, .abs-why__grid::after { display: none; } .abs-why__item, .abs-why__item:nth-child(even), .abs-why__item:nth-child(n + 3) { padding: 24px 0; border-top: 1px solid var(--why-line); } .abs-why__item:last-child { padding-bottom: 0; } } .abs-how { --how-bg: #fcfcfc; --how-ink: #000000; --how-muted: #525252; --how-line: #c4c4c4; --how-art-line: #d4d4d4; --how-disc: #f3f3f3; --how-disc-hover: #ebebeb; --px: 0; --py: 0; position: relative; isolation: isolate; overflow: hidden; background: var(--how-bg); color: var(--how-ink); padding-block: clamp(64px, 6vw, 92px) clamp(72px, 7vw, 104px); padding-inline: 24px; } .abs-how__art { position: absolute; z-index: -2; top: 0; height: auto; overflow: visible; pointer-events: none; } .abs-how__art--left { left: 0; width: clamp(160px, calc((100vw - 1100px) / 2 + 40px), 300px); aspect-ratio: 300 / 640; } .abs-how__art--right { right: 0; width: clamp(160px, calc((100vw - 1100px) / 2 + 40px), 300px); aspect-ratio: 300 / 640; } .abs-how__layer { transform: translate(calc(var(--px) * 10px), calc(var(--py) * 8px)); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .abs-how__layer--deep { transform: translate(calc(var(--px) * 4px), calc(var(--py) * 3px)); } .abs-how__arc { fill: none; stroke: var(--how-art-line); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; } .abs-how__spin { transform-box: view-box; transform-origin: var(--x) var(--y); } .abs-how__art-dot { fill: var(--how-ink); } .abs-how__flow { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .abs-how__path { fill: none; stroke: var(--how-line); stroke-width: 1.3; stroke-linecap: round; } .abs-how__mid { fill: var(--how-ink); } .abs-how__packet { fill: var(--how-ink); opacity: 0; } .abs-how__packet-halo { fill: var(--how-ink); opacity: 0; } .abs-how__plane path { fill: var(--how-ink); } .abs-how__plane .abs-how__plane-fold { fill: none; stroke: var(--how-bg); stroke-width: 1.2; stroke-linecap: round; } .abs-how__inner { position: relative; max-width: 1100px; margin-inline: auto; } .abs-how__label { display: inline-flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-label); font-size: 15px; font-weight: 500; line-height: 1; color: #262626; } .abs-how__label::before { content: ""; width: 28px; height: 1px; background: currentColor; } .abs-how__heading { margin: 20px 0 0; font-family: var(--font-head); font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.045em; text-wrap: balance; } .abs-how__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: clamp(44px, 5vw, 64px) 0 0; padding: 0; list-style: none; } .abs-how__step { min-width: 0; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .abs-how__disc { position: relative; display: grid; place-items: center; width: clamp(84px, 7.2vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--how-disc); box-shadow: 0 0 0 10px var(--how-bg); transition: background-color 0.3s ease; } .abs-how__disc .abs-icon { width: 44%; height: 44%; color: var(--how-ink); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .abs-how__step:hover .abs-how__disc { background: var(--how-disc-hover); } .abs-how__step:hover .abs-how__disc .abs-icon { transform: scale(1.08); } .abs-how__num { position: absolute; right: -10px; bottom: -6px; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border: 1px solid var(--how-ink); border-radius: 50%; background: var(--how-bg); font-family: var(--font-label); font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; transition: background-color 0.35s ease, color 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .abs-how__title { margin: 24px 0 0; font-family: var(--font-head); font-size: clamp(22px, 2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; } .abs-how__text { max-width: 29ch; margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--how-muted); } .abs-how.is-armed .abs-how__step:not(.is-on) { opacity: 0.3; transform: translateY(8px); } .abs-how .abs-how__step.is-lit .abs-how__num { background: var(--how-ink); color: var(--how-bg); transform: scale(1.12); } @media (max-width: 1240px) { .abs-how__art { opacity: 0.6; } } @media (max-width: 900px) { .abs-how__flow, .abs-how__art--left { display: none; } .abs-how__art--right { width: 200px; transform: translateX(40%); opacity: 0.6; } .abs-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } } @media (max-width: 560px) { .abs-how__steps { position: relative; grid-template-columns: 1fr; row-gap: 36px; } .abs-how__steps::before { content: ""; position: absolute; top: 42px; bottom: 42px; left: 41px; width: 1px; background: var(--how-line); } .abs-how__step { display: grid; grid-template-columns: 84px 1fr; column-gap: 24px; align-items: start; } .abs-how__disc { grid-row: span 2; } .abs-how__title { margin-top: 12px; } .abs-how__text { margin-top: 6px; } } @media (prefers-reduced-motion: reduce) { .abs-how__step, .abs-how__num, .abs-how__disc, .abs-how__disc .abs-icon, .abs-how__layer { transition: none; } } @media (prefers-reduced-motion: no-preference) { .abs-how.is-in .abs-how__spin { animation: abs-how-spin var(--dur) linear infinite; } .abs-how.is-in .abs-how__orbit { animation: abs-how-swing var(--dur) ease-in-out infinite alternate; } .abs-how.is-in .abs-how__float { animation: abs-how-float var(--dur) ease-in-out infinite alternate; } } .abs-how__orbit { transform-box: view-box; transform-origin: var(--x) var(--y); transform: rotate(var(--from)); } @keyframes abs-how-spin { to { transform: rotate(360deg); } } @keyframes abs-how-swing { from { transform: rotate(var(--from)); } to { transform: rotate(var(--to)); } } @keyframes abs-how-float { from { transform: translateY(0); } to { transform: translateY(var(--dy)); } } .abs-how__step:focus-within .abs-how__disc { outline: 2px solid var(--how-ink); outline-offset: 4px; } .abs-how__disc .abs-icon { stroke-width: 1.4; object-fit: contain; } .abs-how__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .abs-problem { background: #fafafa; overflow: hidden; } .abs-problem__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; } .abs-problem__copy .label { margin-bottom: 0; } .abs-problem h2 { margin: 22px 0 0; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); } .abs-problem h2 em { display: block; margin-top: 4px; font-family: "Instrument Serif", "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 1.2em; letter-spacing: -0.01em; line-height: 1; color: var(--accent-orange); } .abs-problem__text { margin: 24px 0 0; max-width: 560px; font-size: var(--fs-body); line-height: 1.7; color: #525252; } .abs-problem__visual { position: relative; padding-top: 64px; min-width: 0; } .abs-problem__stats { position: absolute; top: 0; left: 12%; right: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 20px 6px; list-style: none; background: #0a0a0a; border-radius: 20px; box-shadow: 0 28px 56px -20px rgba(10, 10, 10, 0.45); transform: rotate(-2deg); } .abs-problem__stats li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 8px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); } .abs-problem__stats li:last-child { border-right: 0; } .abs-problem__stat-icon { width: 36px; height: 36px; object-fit: contain; } .abs-problem__stats strong { font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; white-space: nowrap; } .abs-problem__stats span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #a3a3a3; } .abs-problem__stats li.is-alert strong { color: #ffffff; } .abs-problem__stats li.is-alert span { color: #d4d4d4; } .abs-problem__media img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .abs-problem__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; } .abs-problem__card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); } .abs-problem__card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); } .abs-problem__card-top { display: flex; justify-content: space-between; align-items: flex-start; } .abs-problem__num { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; color: var(--accent-orange-hover); } .abs-problem__card-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(var(--accent-orange-rgb), 0.12); } .abs-problem__card-icon img { width: 44px; height: 44px; object-fit: contain; } .abs-problem__card h3 { margin: 4px 0 0; font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .abs-problem__card p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: #525252; } @media (max-width: 1023.5px) { .abs-problem__top { grid-template-columns: minmax(0, 1fr); gap: 40px; } .abs-problem__visual { max-width: 640px; width: 100%; margin: 0 auto; } .abs-problem__stats { left: 6%; right: 2%; } } @media (max-width: 900px) { .abs-problem__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; } } @media (max-width: 600px) { .abs-problem__visual { padding-top: 0; } .abs-problem__stats { position: relative; left: auto; right: auto; padding: 16px 2px; margin-bottom: -8px; border-radius: 16px; transform: rotate(-1.5deg); } .abs-problem__stats li { padding: 0 4px; } .abs-problem__stat-icon { width: 28px; height: 28px; } .abs-problem__stats strong { font-size: 1.0625rem; } .abs-problem__stats span { font-size: 0.625rem; letter-spacing: 0.1em; } .abs-problem__text { font-size: 1rem; } .abs-problem__card { padding: 22px; } .abs-problem__card-icon { width: 56px; height: 56px; } .abs-problem__card-icon img { width: 36px; height: 36px; } } @media (prefers-reduced-motion: reduce) { .abs-problem__card, .abs-problem__card:hover { transition: none; transform: none; } } @media (max-width: 359px) { .abs-problem__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .abs-problem__stats li:nth-child(2n) { border-right: 0; } } .abs-ctab { --ctab-card: var(--bg-dark-soft, #171717); --ctab-text: #ffffff; --ctab-body: #d4d4d4; --ctab-muted: #a1a1a1; --ctab-paper: #f5f5f5; --ctab-ink: #0a0a0a; --ctab-rule: #d4d4d4; --ctab-serif: "Instrument Serif", Georgia, "Times New Roman", serif; padding: clamp(48px, 7vw, 96px) 0; } .abs-ctab__wrap { max-width: var(--container, 1180px); margin: 0 auto; padding: 0 24px; } .abs-ctab__card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 6vw, 88px) clamp(28px, 6vw, 88px); background: var(--ctab-card); color: var(--ctab-text); border-radius: 14px; overflow: hidden; } .abs-ctab__copy { min-width: 0; } .abs-ctab__eyebrow { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ctab-text); } .abs-ctab__mark { width: 14px; height: 14px; background: var(--ctab-text); flex: none; } .abs-ctab__title { margin: 22px 0 0; color: var(--ctab-text); font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.045em; text-wrap: balance; } .abs-ctab__hl { display: block; font-family: var(--ctab-serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; margin-top: 4px; } .abs-ctab__text { margin: 26px 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ctab-body); } .abs-ctab__actions { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .abs-ctab__btn { box-sizing: border-box; max-width: 100%; display: inline-flex; align-items: center; gap: 14px; padding: 18px 26px; background: var(--ctab-text); color: var(--ctab-ink); border-radius: 6px; font-size: 1.0625rem; font-weight: 600; text-decoration: none; transition: background-color .2s, transform .2s; } .abs-ctab__btn:hover { background: #e5e5e5; color: var(--ctab-ink); } .abs-ctab__btn svg { transition: transform .2s; } .abs-ctab__btn:hover svg { transform: translate(2px, -2px); } .abs-ctab__btn:focus-visible { outline: 2px solid var(--ctab-text); outline-offset: 4px; } .abs-ctab__note { margin: 0; font-size: 0.9375rem; color: var(--ctab-muted); } .abs-ctab__link { font-size: 0.9375rem; color: var(--ctab-text); text-decoration: underline; text-underline-offset: 3px; } .abs-ctab__sheet-wrap { min-width: 0; display: flex; justify-content: center; } .abs-ctab__sheet { width: 100%; max-width: 440px; padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 26px); background: var(--ctab-paper); color: var(--ctab-ink); border-radius: 3px; transform: rotate(3deg); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.55); } .abs-ctab__sheet p { margin: 0; } .abs-ctab__sheet-brand { padding-bottom: 12px; border-bottom: 1px solid var(--ctab-ink); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; } .abs-ctab__sheet-title { margin-top: 20px !important; font-family: var(--ctab-serif); font-size: clamp(1.75rem, 2.8vw, 2.375rem); line-height: 1.05; letter-spacing: -0.01em; } .abs-ctab__sheet-label { margin-top: 20px !important; padding-bottom: 10px; border-bottom: 1px solid var(--ctab-rule); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } .abs-ctab__sheet-list { list-style: none; margin: 0; padding: 0; } .abs-ctab__sheet-list li { display: flex; align-items: baseline; gap: 22px; padding: 12px 0; border-bottom: 1px solid var(--ctab-rule); font-family: var(--ctab-serif); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); } .abs-ctab__sheet-num { font-size: 1.25em; color: #737373; min-width: 1.8em; font-variant-numeric: tabular-nums; } .abs-ctab__sheet-hl { margin-top: 18px !important; display: inline-block; padding: 6px 10px; background: var(--ctab-ink); color: var(--ctab-paper); font-family: var(--ctab-serif); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.15; } .abs-ctab__sheet-sub { margin-top: 8px !important; font-family: var(--ctab-serif); font-size: 1rem; color: #404040; } .abs-ctab__sheet-foot { margin-top: 22px !important; padding-top: 10px; border-top: 1px solid var(--ctab-rule); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #737373; } .abs-ctab.is-armed .abs-ctab__rise { opacity: 0; transform: translateY(14px); } .abs-ctab.is-armed .abs-ctab__sheet-wrap.abs-ctab__rise { transform: translateY(24px); } .abs-ctab.is-in .abs-ctab__rise { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; } .abs-ctab.is-in .abs-ctab__d2 { transition-delay: .08s; } .abs-ctab.is-in .abs-ctab__d3 { transition-delay: .16s; } .abs-ctab.is-in .abs-ctab__d4 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .abs-ctab .abs-ctab__rise { opacity: 1 !important; transform: none !important; transition: none !important; } } @media (max-width: 900px) { .abs-ctab__card { grid-template-columns: 1fr; } .abs-ctab__sheet-wrap { justify-content: flex-start; padding: 8px 6px 4px; } .abs-ctab__sheet { transform: rotate(1.5deg); } } @media (max-width: 520px) { .abs-ctab__wrap { padding: 0 16px; } .abs-ctab__card { padding: 36px 22px 40px; border-radius: 12px; } .abs-ctab__title { font-size: clamp(2rem, 9.4vw, 2.5rem); } .abs-ctab__btn { width: 100%; justify-content: space-between; padding: 17px 20px; } .abs-ctab__sheet-list li { gap: 14px; } } .abs-fdr { --fdr-ink: var(--abs-fdr-ink, #0a0a0a); --fdr-text: var(--abs-fdr-text, #f5f5f5); --fdr-body: var(--abs-fdr-body, #a1a1a1); --fdr-soft: #d4d4d4; --fdr-line: rgba(255, 255, 255, 0.12); background: var(--fdr-ink); color: var(--fdr-text); padding: clamp(64px, 10vw, 128px) 0; overflow: hidden; } .abs-fdr__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--fdr-line); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fdr-body); } .abs-fdr__label { color: var(--fdr-text); font-weight: 500; } .abs-fdr__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); margin-top: clamp(40px, 5vw, 64px); align-items: start; } .abs-fdr__portrait { margin: 0; position: sticky; top: 110px; } .abs-fdr__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 14px; background: radial-gradient(90% 70% at 50% 35%, #2e2e2e, #141414 70%); } .abs-fdr__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .abs-fdr__caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 0.875rem; color: var(--fdr-body); } .abs-fdr__caption span:first-child { color: var(--fdr-text); } .abs-fdr__content { min-width: 0; } .abs-fdr__eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fdr-body); } .abs-fdr__title { margin: 14px 0 0; color: var(--fdr-text); font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; } .abs-fdr__title em { display: block; margin-top: 6px; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -0.01em; color: var(--fdr-soft); } .abs-fdr__bio { margin: 28px 0 0; max-width: 56ch; font-size: 1.0625rem; line-height: 1.7; color: var(--fdr-body); } .abs-fdr__quote { margin: 36px 0 0; padding: 0 0 0 22px; border-left: 1px solid var(--fdr-soft); } .abs-fdr__quote p { margin: 0; color: var(--fdr-text); font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; } .abs-fdr__quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 0.8125rem; color: var(--fdr-body); } .abs-fdr__proof { margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--fdr-line); border-bottom: 1px solid var(--fdr-line); } .abs-fdr__proof--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .abs-fdr__proof--1 { grid-template-columns: 1fr; } .abs-fdr__proof div { padding: 22px 20px 22px 0; min-width: 0; } .abs-fdr__proof div + div { padding-left: 20px; border-left: 1px solid var(--fdr-line); } .abs-fdr__proof dt { color: var(--fdr-text); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .abs-fdr__proof dd { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--fdr-body); } .abs-fdr__footer { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; } .abs-fdr__brands { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; font-size: 0.9375rem; color: var(--fdr-soft); } .abs-fdr__brands small { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fdr-body); margin-right: 4px; } .abs-fdr__social { display: flex; gap: 10px; } .abs-fdr__social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--fdr-line); color: var(--fdr-text); transition: background-color .2s, color .2s, border-color .2s; } .abs-fdr__social a:hover { background: var(--fdr-text); color: var(--fdr-ink); border-color: var(--fdr-text); } .abs-fdr__social a:focus-visible { outline: 2px solid var(--fdr-text); outline-offset: 3px; } .abs-fdr__icon { width: 20px; height: 20px; } @media (max-width: 860px) { .abs-fdr__grid { grid-template-columns: 1fr; } .abs-fdr__portrait { position: static; max-width: 460px; } } @media (max-width: 520px) { .abs-fdr__proof { grid-template-columns: 1fr; } .abs-fdr__proof div, .abs-fdr__proof div + div { padding: 18px 0; border-left: 0; } .abs-fdr__proof div + div { border-top: 1px solid var(--fdr-line); } .abs-fdr__location { display: none; } } :root { --bg-main: #fcfcfc; --bg-surface: #ffffff; --bg-dark: #000000; --bg-dark-soft: #171717; --text-primary: #000000; --text-muted: #525252; --text-on-dark: #ffffff; --text-muted-on-dark: #a1a1a1; --accent-orange: #000000; --accent-orange-hover: #262626; --accent-orange-rgb: 0, 0, 0; --border: #e5e5e5; --border-strong: #d4d4d4; --midnight: #f5f5f5; --slate: #ffffff; --slate-2: #f5f5f5; --gold: #000000; --gold-dim: #262626; --flare: #000000; --warm-white: #ffffff; --off-white: #000000; --muted: #525252; --line: #e5e5e5; --line-strong: #d4d4d4; --c-ink: #000000; --c-paper: #ffffff; --font-head: "Geist", system-ui, sans-serif; --font-body: "Geist", system-ui, sans-serif; --font-label: "Geist", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --radius: 0.5rem; --radius-sm: 0.25rem; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.18); --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 1px 3px -1px rgb(0 0 0 / 0.18); --shadow-lg: 0 4px 12px -2px rgb(0 0 0 / 0.18); --destructive: #e7000b; } body { background: var(--bg-main); color: var(--text-primary); } ::selection { background: #000000; color: #ffffff; } .hero, .marquee-strip, .testimonials, .cta-banner, footer, .ic-slide, .abs-fdr, .abs-problem__stats, .abs-ctab__card { --accent-orange: #ffffff; --accent-orange-hover: #e5e5e5; --accent-orange-rgb: 255, 255, 255; } :is(.hero, .testimonials, .cta-banner, footer, .abs-fdr, .abs-ctab__card) .btn-accent { color: #000000; --btn-circle-bg: #000000; --btn-arrow-color: #ffffff; } .abs-ctab { --ctab-accent: #ffffff !important; --ctab-ink: #000000; --ctab-paper: #f5f5f5; --ctab-muted: #a1a1a1; --ctab-soft: #d4d4d4; } .abs-fdr { --abs-fdr-accent: #ffffff; --abs-fdr-ink: #0a0a0a; --abs-fdr-panel: #171717; --abs-fdr-text: #f5f5f5; --abs-fdr-body: #a1a1a1; --abs-fdr-muted: #8a8a8a; --abs-fdr-display: "Geist", system-ui, sans-serif; } .abs-ctab__btn-icon, .abs-fdr .abs-fdr__btn-icon { background: #000000; color: #ffffff; } .abs-stats { --abs-fg: #000000; --abs-muted-fg: #525252; --abs-primary: #000000; --abs-radius: 0.5rem; } .abs-stat, .abs-stat--navy, .abs-stat--sky, .abs-stat--teal, .abs-stat--green, .abs-stat--magenta, .abs-stat--rust { --c: #000000; }