:root {--black: #0b1220;--charcoal: #1d2533;--graphite: #586072;--mist: #d4d1c8;--paper: #f4f1ea;--white: #fffdf9;--klein: #2b2be6;--klein-deep: #1c1cb8;--klein-tint: #e6e6fb;--font: "Archivo", "Helvetica Neue", Arial, sans-serif;--wide: 125%;--semi: 112%;--step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);--step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.42rem);--step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);--step-3: clamp(2rem, 1.6rem + 1.8vw, 3rem);--step-4: clamp(2.5rem, 1.8rem + 3.4vw, 4.6rem);--step-5: clamp(2.9rem, 1.9rem + 5vw, 6.4rem);--gutter: clamp(1.25rem, 0.8rem + 2.4vw, 3rem);--max: 1320px;--radius: 4px;--ease: cubic-bezier(.2,.7,.1,1);}*, *::before, *::after { box-sizing: border-box; }html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }body {margin: 0;font-family: var(--font);font-size: var(--step-0);line-height: 1.6;color: var(--charcoal);background: var(--paper);text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}img { max-width: 100%; height: auto; display: block; }a { color: inherit; }p { margin: 0 0 1em; max-width: 68ch; }h1, h2, h3, h4 { margin: 0; line-height: 1.04; color: var(--black); font-weight: 800; font-stretch: var(--wide); letter-spacing: -0.025em; }h1 { font-size: var(--step-5); }h2 { font-size: var(--step-4); }h3 { font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.12; }h4 { font-size: var(--step-1); font-stretch: var(--semi); letter-spacing: -0.01em; line-height: 1.2; }:focus-visible { outline: 3px solid var(--klein); outline-offset: 3px; }.skip { position: absolute; left: -999px; top: 0; background: var(--black); color: var(--white); padding: .8rem 1.2rem; z-index: 100; }.skip:focus { left: 1rem; top: 1rem; }.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }.lede { font-size: var(--step-1); line-height: 1.5; color: var(--charcoal); max-width: 60ch; }.muted { color: var(--graphite); }.small { font-size: var(--step--1); }.btn {display: inline-flex; align-items: center; justify-content: center; gap: .6em;font: 600 var(--step-0)/1 var(--font); font-stretch: var(--semi);padding: 1.05em 1.6em; border-radius: var(--radius); border: 2px solid transparent;text-decoration: none; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);min-height: 48px;}.btn-primary { background: var(--klein); color: var(--white); }.btn-primary:hover { background: var(--klein-deep); }.btn-dark { background: var(--black); color: var(--white); }.btn-dark:hover { background: var(--charcoal); }.btn-line { border-color: currentColor; color: var(--black); background: transparent; }.btn-line:hover { background: var(--black); color: var(--white); border-color: var(--black); }.btn-light { background: var(--white); color: var(--black); }.btn-light:hover { background: var(--paper); }.btn-line-light { border-color: var(--white); color: var(--white); }.btn-line-light:hover { background: var(--white); color: var(--klein); }.btn svg { width: 1.1em; height: 1.1em; flex: none; }.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }.textlink { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; text-decoration-color: var(--klein); }.textlink:hover { color: var(--klein); }.site-header { position: sticky; top: 0; z-index: 50; background: rgba(244,241,234,.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }.site-header.scrolled { border-bottom-color: var(--mist); }.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 2rem; }.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--black); }.brand svg { height: 22px; width: auto; }.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }.nav-links a { text-decoration: none; font-weight: 500; font-size: .98rem; padding: .4rem 0; border-bottom: 2px solid transparent; }.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--klein); }.nav-cta { padding: .8em 1.2em; min-height: 44px; font-size: .95rem; }.menu-toggle { display: none; background: none; border: 0; padding: .6rem; margin-right: -.6rem; cursor: pointer; color: var(--black); }.menu-toggle svg { width: 28px; height: 28px; }@media (max-width: 900px) {.menu-toggle { display: inline-flex; }.nav-panel { position: fixed; inset: 76px 0 0 0; background: var(--paper); padding: 2rem var(--gutter); display: none; flex-direction: column; gap: 2rem; overflow-y: auto; }.nav-panel.open { display: flex; }.nav-links { flex-direction: column; align-items: flex-start; gap: 0; }.nav-links li { width: 100%; border-bottom: 1px solid var(--mist); }.nav-links a { display: block; font-size: var(--step-2); font-stretch: var(--wide); font-weight: 700; padding: 1rem 0; border: 0; }.nav-cta { width: 100%; }body.menu-open { overflow: hidden; }}@media (min-width: 901px) { .nav-panel { display: flex; align-items: center; gap: 2rem; } }.section { padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem); }.section-tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }.section-dark { background: var(--black); color: var(--mist); }.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }.section-white { background: var(--white); }.section-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }@media (min-width: 900px) { .section-head.split { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 4rem; } }.kicker { font-size: var(--step--1); color: var(--graphite); font-weight: 500; margin: 0 0 1rem; }.section-dark .kicker { color: #8c94a6; }.hero { padding-top: clamp(2.5rem, 2rem + 3vw, 5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }.hero h1 { max-width: 13ch; }.hero-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }@media (min-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; } }.hero .lede { margin-top: 1.6rem; }.hero .btn-row { margin-top: 2.2rem; }.hero-email { margin-top: 1.4rem; font-size: var(--step--1); color: var(--graphite); }.hero-email a { color: var(--black); }.compare { position: relative; border-radius: 8px; overflow: hidden; background: var(--white); box-shadow: 0 30px 60px -30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08); aspect-ratio: 16 / 11; user-select: none; touch-action: pan-y; }.compare-pane { position: absolute; inset: 0; }.compare-after { clip-path: inset(0 0 0 var(--pos, 50%)); }.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 0; pointer-events: none; }.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--klein); }.compare-handle span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--klein); color: var(--white); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(42,42,224,.45); }.compare-handle svg { width: 22px; height: 22px; }.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }.compare input[type=range]:focus-visible + .compare-handle span { outline: 3px solid var(--black); outline-offset: 3px; }.compare-tag { position: absolute; top: 14px; font: 600 .74rem/1 var(--font); padding: .5em .75em; border-radius: 3px; background: rgba(0,0,0,.78); color: var(--white); z-index: 2; pointer-events: none; }.compare-tag.before { left: 14px; }.compare-tag.after { right: 14px; background: var(--klein); }.compare-caption { margin-top: .9rem; font-size: var(--step--1); color: var(--graphite); }.hero-visual.intro .compare { --pos: 92%; }.hero-visual.intro.go .compare-after, .hero-visual.intro.go .compare-handle { transition: clip-path 1.6s var(--ease), left 1.6s var(--ease); }.old-site { position: absolute; inset: 0; background: #d8d8d0; font-family: "Times New Roman", Times, serif; color: #000; font-size: clamp(7px, .9vw, 11px); line-height: 1.25; }.old-site .old-top { background: #003366; color: #ffff66; padding: 2.2% 3%; font-size: 2em; font-weight: bold; text-align: center; font-family: "Comic Sans MS", "Times New Roman", serif; }.old-site .old-nav { background: #c0c0c0; border-bottom: 2px outset #fff; display: flex; gap: 1.2em; padding: .6em 3%; color: #0000ee; text-decoration: underline; }.old-site .old-body { display: grid; grid-template-columns: 30% 1fr; gap: 3%; padding: 3%; }.old-site .old-side { background: #fff; border: 2px inset #999; padding: 6%; }.old-site .old-side b { color: #cc0000; }.old-site .old-main { background: #fff; padding: 4%; border: 1px solid #999; }.old-site .old-main h5 { font-size: 1.5em; margin: 0 0 .4em; color: #990000; text-decoration: underline; }.old-site .old-main p { margin: 0 0 .7em; max-width: none; }.old-site .old-img { height: 5.5em; background: repeating-linear-gradient(45deg,#bbb 0 6px,#ccc 6px 12px); border: 1px solid #888; display: grid; place-items: center; color: #555; margin-bottom: .7em; }.old-site .old-counter { margin-top: 1em; display: inline-block; background: #000; color: #0f0; font-family: "Courier New", monospace; padding: .2em .5em; letter-spacing: .2em; }.old-site blink { color: #cc0000; font-weight: bold; }.new-site { position: absolute; inset: 0; background: #0f1a17; color: #f3f1ea; font-family: var(--font); font-size: clamp(6px, .82vw, 11px); overflow: hidden; }.new-site .ns-bar { display: flex; align-items: center; justify-content: space-between; padding: 3.2% 5%; }.new-site .ns-logo { font-weight: 800; font-stretch: var(--semi); letter-spacing: -.01em; font-size: 1.35em; }.new-site .ns-logo i { font-style: normal; color: #f5a524; }.new-site .ns-links { display: flex; gap: 1.6em; opacity: .8; }.new-site .ns-call { background: #f5a524; color: #0f1a17; font-weight: 700; padding: .7em 1.1em; border-radius: 2px; }.new-site .ns-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4%; padding: 2% 5% 0; align-items: end; }.new-site .ns-hero h5 { font-size: 3.4em; line-height: .98; margin: 0 0 .5em; font-weight: 800; font-stretch: var(--wide); letter-spacing: -.03em; color: #fff; }.new-site .ns-hero p { opacity: .78; margin: 0 0 1.2em; max-width: 30em; }.new-site .ns-ctas { display: flex; gap: .8em; flex-wrap: wrap; }.new-site .ns-ctas span { padding: .9em 1.3em; border-radius: 2px; font-weight: 700; }.new-site .ns-ctas .a { background: #f5a524; color: #0f1a17; }.new-site .ns-ctas .b { border: 1px solid rgba(255,255,255,.4); }.new-site .ns-photo { aspect-ratio: 4/4.4; background-size: cover; background-position: center; border-radius: 3px 3px 0 0; }.new-site .ns-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #f3f1ea; color: #0f1a17; }.new-site .ns-strip div { padding: 4% 6%; border-right: 1px solid #d8d4c8; font-weight: 700; font-stretch: var(--semi); }.new-site .ns-strip small { display: block; font-weight: 400; opacity: .65; font-stretch: 100%; }.three { display: grid; gap: 2.5rem; }@media (min-width: 820px) { .three { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }.pillar { border-top: 3px solid var(--black); padding-top: 1.4rem; }.pillar h3 { margin-bottom: .8rem; }.pillar p { color: var(--graphite); }.problem-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); }@media (min-width: 960px) { .problem-grid { grid-template-columns: 1fr 1fr; align-items: start; } }.problem-photo { position: relative; }.problem-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); filter: grayscale(.15) contrast(1.05); }.problem-list { list-style: none; margin: 0; padding: 0; }.problem-list li { padding: 1.5rem 0; border-bottom: 1px solid #26304a; display: grid; gap: .45rem; }.problem-list li:first-child { border-top: 1px solid #26304a; }.problem-list strong { color: var(--white); font-size: var(--step-1); font-stretch: var(--semi); font-weight: 700; letter-spacing: -.01em; }.problem-list span { color: #a9b0bf; }.service-rows { border-top: 2px solid var(--black); }.service-row { display: grid; gap: .6rem 2rem; padding: 1.8rem 0; border-bottom: 1px solid var(--mist); text-decoration: none; align-items: baseline; transition: background .2s; }@media (min-width: 820px) { .service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; padding: 2.2rem 0; } }.service-row h3 { font-size: var(--step-2); }.service-row p { margin: 0; color: var(--graphite); }.service-row .go { font-weight: 600; white-space: nowrap; color: var(--klein); }a.service-row:hover h3 { color: var(--klein); }.industry-feature { display: grid; gap: 2rem; margin-bottom: 3.5rem; }@media (min-width: 960px) { .industry-feature { grid-template-columns: 1.2fr .8fr; gap: 3.5rem; align-items: center; } }.industry-feature img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); }.focus-tag { display: inline-block; background: var(--klein); color: var(--white); font-weight: 600; font-size: var(--step--1); padding: .35em .7em; border-radius: 3px; margin-bottom: 1rem; }.industry-list { display: grid; gap: 1.5rem; }@media (min-width: 700px) { .industry-list { grid-template-columns: repeat(2, 1fr); } }@media (min-width: 1100px) { .industry-list { grid-template-columns: repeat(5, 1fr); } }.industry-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); margin-bottom: .9rem; }.industry-item h4 { margin-bottom: .35rem; }.industry-item p { font-size: var(--step--1); color: var(--graphite); margin: 0; }.showcase { display: grid; gap: 3rem; }@media (min-width: 1040px) { .showcase { grid-template-columns: 1.35fr .65fr; align-items: center; gap: 4rem; } }.devices { position: relative; padding-bottom: 8%; }.browser { background: #1f2024; border-radius: 10px; padding: 0 0 0; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #2a2b30; }.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #55575f; display: block; }.browser-bar b { margin-left: 12px; font-weight: 400; font-size: .72rem; color: #a9b0bf; background: #1f2024; padding: 4px 12px; border-radius: 4px; flex: 1; max-width: 300px; }.browser-screen { position: relative; aspect-ratio: 16/10; }.phone { position: absolute; right: -2%; bottom: 0; width: 26%; aspect-ratio: 9/19; background: #111; border-radius: 22px; padding: 7px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #0f1a17; }.mini { position: absolute; inset: 0; color: #f3f1ea; font-family: var(--font); font-size: clamp(5px, .6vw, 8px); padding: 10% 9%; }.mini .ml { font-weight: 800; font-size: 1.4em; margin-bottom: 18%; }.mini .ml i { font-style: normal; color: #f5a524; }.mini h6 { margin: 0 0 8%; font-size: 2.6em; line-height: .98; font-weight: 800; font-stretch: var(--wide); letter-spacing: -.03em; color: #fff; }.mini p { opacity: .75; margin: 0 0 10%; }.mini .mb { background: #f5a524; color: #0f1a17; padding: .9em 1em; border-radius: 2px; font-weight: 700; text-align: center; margin-bottom: 6%; }.mini .mph { aspect-ratio: 1/1.05; background-size: cover; background-position: center; border-radius: 3px; }.concept-note { display: inline-block; font-size: var(--step--1); color: var(--graphite); border: 1px solid var(--mist); padding: .45em .8em; border-radius: 3px; margin-bottom: 1.2rem; }.feature-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .65rem; }.feature-list li { padding-left: 1.6rem; position: relative; }.feature-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .8rem; height: 2px; background: var(--klein); }.process { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }@media (min-width: 1000px) { .process { grid-template-columns: repeat(5, 1fr); } }.process li { counter-increment: step; padding: 2rem 1.5rem 2rem 0; border-top: 2px solid #26304a; position: relative; }@media (min-width: 1000px) { .process li { padding-right: 2rem; } }.process li::before { content: counter(step); display: block; font-size: var(--step-3); font-weight: 800; font-stretch: var(--wide); color: var(--klein); line-height: 1; margin-bottom: 1.2rem; }.section-dark .process li::before { color: #7c7cff; }.process h3 { font-size: var(--step-1); font-stretch: var(--semi); margin-bottom: .6rem; }.process p { font-size: .97rem; color: #a9b0bf; margin: 0; }.section-white .process li, .section .process.light li { border-top-color: var(--black); }.process.light p { color: var(--graphite); }.process.light li::before { color: var(--klein); }.commit-grid { display: grid; gap: 2.5rem 3rem; }@media (min-width: 820px) { .commit-grid { grid-template-columns: repeat(2, 1fr); } }.commit h3 { font-size: var(--step-2); margin-bottom: .7rem; }.commit p { color: var(--graphite); margin: 0; }.faq { border-top: 2px solid var(--black); max-width: 920px; }.faq details { border-bottom: 1px solid var(--mist); }.faq summary { list-style: none; cursor: pointer; padding: 1.5rem 3rem 1.5rem 0; position: relative; font-weight: 700; font-size: var(--step-1); font-stretch: var(--semi); letter-spacing: -.01em; color: var(--black); }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { content: ""; position: absolute; right: .3rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: linear-gradient(var(--klein),var(--klein)) center/16px 2px no-repeat, linear-gradient(var(--klein),var(--klein)) center/2px 16px no-repeat; transition: transform .25s var(--ease); }.faq details[open] summary::after { transform: rotate(45deg); }.faq details > div { padding: 0 0 1.6rem; color: var(--graphite); }.cta-band { background: var(--klein); color: var(--white); }.cta-band h2 { color: var(--white); max-width: 16ch; }.cta-band p { color: #dcdcff; font-size: var(--step-1); }.cta-grid { display: grid; gap: 2rem; }@media (min-width: 960px) { .cta-grid { grid-template-columns: 1.2fr .8fr; align-items: end; } }.cta-band .btn-row { justify-content: flex-start; }.cta-mail { margin-top: 1.2rem; color: #dcdcff; font-size: var(--step--1); }.cta-mail a { color: var(--white); }.site-footer { background: var(--black); color: #a9b0bf; padding: 4.5rem 0 2.5rem; font-size: .95rem; }.footer-grid { display: grid; gap: 2.5rem; }@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }.site-footer .brand { color: var(--white); margin-bottom: 1.2rem; }.site-footer h4 { color: var(--white); font-size: 1rem; font-stretch: 100%; letter-spacing: 0; margin-bottom: 1rem; }.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }.site-footer a { text-decoration: none; }.site-footer a:hover { color: var(--white); text-decoration: underline; }.footer-base { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid #26304a; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .85rem; }.page-head { padding-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }.page-head h1 { font-size: var(--step-5); max-width: 15ch; }.page-head .lede { margin-top: 1.5rem; }.crumbs { font-size: var(--step--1); color: var(--graphite); margin-bottom: 1.5rem; }.crumbs a { text-decoration: none; }.crumbs a:hover { text-decoration: underline; }.svc { display: grid; gap: 2rem; padding: clamp(3rem, 2rem + 3vw, 5rem) 0; border-top: 2px solid var(--black); }@media (min-width: 960px) { .svc { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }.svc h2 { font-size: var(--step-3); }.svc-index { color: var(--graphite); font-size: var(--step--1); margin-bottom: .8rem; }.svc-detail { display: grid; gap: 1.8rem; }@media (min-width: 700px) { .svc-detail { grid-template-columns: 1fr 1fr; } }.svc-detail h4 { font-size: 1.02rem; font-stretch: var(--semi); margin-bottom: .5rem; }.svc-detail p, .svc-detail ul { margin: 0; color: var(--graphite); font-size: .98rem; }.svc-detail ul { padding-left: 1.1rem; }.svc-detail li { margin-bottom: .3rem; }.svc-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }.ind { display: grid; gap: 2rem; padding: clamp(3rem, 2rem + 3vw, 5rem) 0; border-top: 1px solid var(--mist); }.ind:first-of-type { border-top: 2px solid var(--black); }@media (min-width: 960px) { .ind { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .ind.flip .ind-media { order: 2; } }.ind img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius); }.ind h2 { font-size: var(--step-3); margin-bottom: 1rem; }.ind ul { margin: 1rem 0 1.5rem; padding-left: 1.1rem; color: var(--graphite); }.ind li { margin-bottom: .35rem; }.prose { max-width: 70ch; }.prose h2 { font-size: var(--step-3); margin: 3rem 0 1rem; }.prose h2:first-child { margin-top: 0; }.about-grid { display: grid; gap: 3rem; }@media (min-width: 960px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }.about-grid img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); position: sticky; top: 100px; }.contact-grid { display: grid; gap: 3rem; }@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1.25fr .75fr; gap: 5rem; align-items: start; } }.form { display: grid; gap: 1.3rem; background: var(--white); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: 6px; }.form-row { display: grid; gap: 1.3rem; }@media (min-width: 700px) { .form-row { grid-template-columns: 1fr 1fr; } }.field { display: grid; gap: .45rem; }.field label { font-weight: 600; font-size: .95rem; color: var(--black); }.field label .opt { font-weight: 400; color: var(--graphite); }.field input, .field select, .field textarea {font: 400 1rem/1.4 var(--font); color: var(--black); background: var(--paper); border: 1.5px solid transparent; border-radius: var(--radius); padding: .9rem 1rem; width: 100%; min-height: 50px; transition: border-color .15s, background .15s;}.field textarea { min-height: 150px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--klein); background: var(--white); }.field [aria-invalid="true"] { border-color: #c4271b; background: #fff5f4; }.field .err { color: #b3261e; font-size: .88rem; min-height: 0; }.field .hint { color: var(--graphite); font-size: .85rem; }.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--graphite); }.consent input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--klein); flex: none; }.form-status { padding: 1rem 1.2rem; border-radius: var(--radius); font-weight: 500; display: none; }.form-status.show { display: block; }.form-status.ok { background: #e6f4ea; color: #12512a; }.form-status.bad { background: #fdecea; color: #8a1c14; }.form-status.info { background: var(--klein-tint); color: var(--klein-deep); }.hp { position: absolute; left: -5000px; }.side-card { background: var(--black); color: #a9b0bf; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 6px; }.side-card h3 { color: var(--white); font-size: var(--step-2); margin-bottom: .8rem; }.side-card a.mail { color: var(--white); font-weight: 700; font-size: var(--step-1); word-break: break-all; }.side-card .btn { margin-top: 1.2rem; width: 100%; }.next-steps { list-style: none; counter-reset: n; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.2rem; }.next-steps li { counter-increment: n; display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; }.next-steps li::before { content: counter(n); font-weight: 800; font-stretch: var(--wide); color: var(--klein); font-size: 1.3rem; line-height: 1.2; }.next-steps strong { display: block; color: var(--black); }.work-hero img, .work-shot { border-radius: var(--radius); }.work-meta { display: grid; gap: 1.5rem; margin: 2.5rem 0; }@media (min-width: 820px) { .work-meta { grid-template-columns: repeat(3, 1fr); } }.work-meta div { border-top: 2px solid var(--black); padding-top: 1rem; }.work-meta h4 { font-size: 1rem; font-stretch: var(--semi); margin-bottom: .4rem; }.work-meta p { margin: 0; color: var(--graphite); font-size: .97rem; }.disclaimer { background: var(--klein-tint); color: var(--klein-deep); padding: 1rem 1.2rem; border-radius: var(--radius); font-size: .95rem; max-width: 70ch; }.legal h2 { font-size: var(--step-2); margin: 2.5rem 0 .8rem; }.vcards { display: grid; gap: 1.25rem; }@media (min-width: 700px) { .vcards { grid-template-columns: repeat(2, 1fr); } }@media (min-width: 1100px) { .vcards { grid-template-columns: repeat(4, 1fr); } }.vcard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--mist); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }.vcard:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(11,18,32,.45); border-color: #c4c0b5; }.vcard-img { aspect-ratio: 4/3; overflow: hidden; background: var(--charcoal); }.vcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }.vcard:hover .vcard-img img { transform: scale(1.04); }.vcard-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }.vcard-body h3 { font-size: var(--step-1); }.vcard-body p { color: var(--graphite); font-size: .97rem; margin: 0; }.vcard-body .go { margin-top: auto; padding-top: .8rem; font-weight: 650; color: var(--klein); font-size: .94rem; }.vcard-body .go::after { content: " \2192"; }.matters { display: grid; gap: 3rem; align-items: center; }@media (min-width: 960px) { .matters { grid-template-columns: .95fr 1.05fr; gap: 5rem; } }.matters img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; }.matter-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.6rem; }.matter-list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }.matter-list .n { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--klein-tint); color: var(--klein-deep); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }.matter-list strong { display: block; font-size: var(--step-1); margin-bottom: .25rem; }.matter-list span { color: var(--graphite); }.concept-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--klein-deep); background: var(--klein-tint); padding: .45rem .8rem; border-radius: 999px; margin-bottom: 1.2rem; }.concept-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--klein); }.trades { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 2rem 0 0; }.trades li { border: 1px solid var(--mist); background: var(--white); border-radius: 999px; padding: .55rem 1.05rem; font-weight: 600; font-size: .95rem; }.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.in { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }.hero-studio { padding: clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem); overflow: hidden; }.hero-studio .hs-grid { display: grid; gap: 3.5rem; align-items: center; }@media (min-width: 1040px) { .hero-studio .hs-grid { grid-template-columns: 1fr 1.05fr; gap: 4rem; } }.hero-studio h1 { font-size: clamp(2.9rem, 6.6vw, 6.2rem); line-height: .95; letter-spacing: -.035em; }.hero-studio h1 em { font-style: normal; color: var(--klein); }.hero-studio .lede { margin-top: 1.6rem; max-width: 34rem; }.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2.2rem; font-size: .9rem; color: var(--graphite); list-style: none; padding: 0; }.hero-meta li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--klein); margin-right: .55rem; vertical-align: middle; }.stage { position: relative; aspect-ratio: 1 / .86; }.stage .mk { position: absolute; box-shadow: 0 40px 80px -40px rgba(11,18,32,.55), 0 0 0 1px rgba(11,18,32,.08); }.stage .s1 { width: 78%; left: 0; top: 4%; z-index: 2; animation: floatA 9s ease-in-out infinite; }.stage .s2 { width: 60%; right: 0; top: 0; z-index: 1; opacity: .96; animation: floatB 11s ease-in-out infinite; }.stage .s3 { width: 64%; right: 4%; bottom: 0; z-index: 3; animation: floatB 10s ease-in-out infinite reverse; }.stage .ph-mk { position: absolute; left: 6%; bottom: 2%; width: 22%; z-index: 4; animation: floatA 8s ease-in-out infinite reverse; }@keyframes floatA { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }@keyframes floatB { 0%,100% { transform: translateY(0) } 50% { transform: translateY(8px) } }@media (prefers-reduced-motion: reduce) { .stage .mk, .stage .ph-mk { animation: none; } }.stage-note { margin-top: 1.2rem; font-size: .82rem; color: var(--graphite); }.mk { container-type: inline-size; background: #fff; border-radius: 10px; overflow: hidden; }.mk-bar { display: flex; align-items: center; gap: 1.1cqw; height: 4.2cqw; min-height: 14px; padding: 0 1.8cqw; background: #eceae4; border-bottom: 1px solid #dcd9d1; }.mk-bar i { width: 1.1cqw; height: 1.1cqw; min-width: 5px; min-height: 5px; border-radius: 50%; background: #c9c5bb; }.mk-bar span { margin-left: 2cqw; flex: 0 1 44%; height: 2.3cqw; border-radius: 99px; background: #fff; font-size: 1.25cqw; color: #8c8a84; display: flex; align-items: center; padding-left: 1.4cqw; white-space: nowrap; overflow: hidden; }.mk-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }.mk * { line-height: 1.15; }.mk-nav { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; padding: 2.6cqw 4cqw; font-size: 1.35cqw; z-index: 2; }.mk-nav .l { font-weight: 800; font-size: 2cqw; letter-spacing: -.02em; }.mk-nav .lk { display: flex; gap: 2.6cqw; opacity: .85; }.mk-nav .bt { padding: .9cqw 1.8cqw; border-radius: 99px; font-weight: 700; }.mk h5 { margin: 0; font-weight: 800; }.mk p { margin: 0; }.mk-btns { display: flex; gap: 1.2cqw; margin-top: 2.4cqw; font-size: 1.3cqw; font-weight: 700; }.mk-btns span { padding: 1.2cqw 2.2cqw; border-radius: 99px; }.serif { font-family: "Fraunces", Georgia, serif !important; font-weight: 500 !important; letter-spacing: -.01em; }.th-hvac .mk-screen { background: #0f2a22; color: #fff; }.th-hvac .mk-nav .l i { font-style: normal; color: #e8a33a; }.th-hvac .mk-nav .bt { background: #e8a33a; color: #1b1404; }.th-hvac .hv { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr .95fr; }.th-hvac .hv-t { padding: 13cqw 3cqw 0 4cqw; }.th-hvac .hv-t small { color: #e8a33a; font-size: 1.2cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.th-hvac h5 { font-size: 5.4cqw; letter-spacing: -.03em; line-height: 1; margin-top: 1.6cqw; }.th-hvac h5 em { font-style: normal; color: #e8a33a; }.th-hvac .hv-t p { font-size: 1.55cqw; color: #c7d6cf; margin-top: 2cqw; max-width: 90%; }.th-hvac .mk-btns .a { background: #e8a33a; color: #1b1404; } .th-hvac .mk-btns .b { border: 1px solid rgba(255,255,255,.5); }.th-hvac .hv-p { background-size: cover; background-position: center; margin: 9cqw 4cqw 6cqw 0; border-radius: 1cqw; }.th-rest .mk-screen { background: #1a1311 center/cover no-repeat; color: #f6eee3; }.th-rest .mk-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,12,10,.55), rgba(20,12,10,.25) 40%, rgba(20,12,10,.85)); }.th-rest .mk-nav .l { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 2.3cqw; }.th-rest .mk-nav .bt { border: 1px solid rgba(246,238,227,.6); }.th-rest .rs { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 3cqw; }.th-rest .rs small { font-size: 1.2cqw; letter-spacing: .3em; text-transform: uppercase; color: #e3b98f; }.th-rest h5 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 8.4cqw; letter-spacing: -.02em; margin-top: 1.4cqw; }.th-rest .rs p { font-size: 1.6cqw; margin-top: 1.4cqw; opacity: .9; }.th-rest .mk-btns .a { background: #c8643c; color: #fff; } .th-rest .mk-btns .b { border: 1px solid rgba(246,238,227,.6); }.th-rest .rs-strip { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(246,238,227,.2); font-size: 1.25cqw; }.th-rest .rs-strip div { padding: 2cqw 3cqw; border-right: 1px solid rgba(246,238,227,.15); }.th-rest .rs-strip b { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.7cqw; margin-bottom: .4cqw; }.th-shop .mk-screen { background: #f3ede2; color: #2a2118; }.th-shop .mk-nav { border-bottom: 1px solid rgba(42,33,24,.12); }.th-shop .mk-nav .l { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 1.9cqw; }.th-shop .mk-nav .bt { background: #2a2118; color: #f3ede2; }.th-shop .sh { position: absolute; inset: 0; display: grid; grid-template-columns: .9fr 1.1fr; padding-top: 7.6cqw; }.th-shop .sh-p { background: center/cover no-repeat; }.th-shop .sh-t { padding: 6cqw 5cqw 0; }.th-shop .sh-t small { font-size: 1.15cqw; letter-spacing: .22em; text-transform: uppercase; color: #9a6b2f; }.th-shop h5 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 5cqw; letter-spacing: -.02em; margin-top: 1.4cqw; line-height: 1.02; }.th-shop .sh-t p { font-size: 1.5cqw; color: #6d5e4e; margin-top: 1.8cqw; }.th-shop .sw { display: flex; gap: 1cqw; margin-top: 2.4cqw; }.th-shop .sw i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: 1px solid rgba(42,33,24,.25); }.th-shop .mk-btns .a { background: #2a2118; color: #f3ede2; border-radius: 0; padding: 1.4cqw 4cqw; }.th-shop .sh-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; margin-top: 3.4cqw; }.th-shop .sh-row div { aspect-ratio: 1; background: #e6dccb; border-radius: .4cqw; }.th-shop .sh-row div:nth-child(2) { background: #d9c7a8; } .th-shop .sh-row div:nth-child(3) { background: #cdb48a; }.th-dent .mk-screen { background: #f6f9fb; color: #0e2a3b; }.th-dent .mk-nav .l { color: #0e2a3b; } .th-dent .mk-nav .l i { font-style: normal; color: #2f8fb0; }.th-dent .mk-nav .bt { background: #0e2a3b; color: #fff; }.th-dent .dn { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }.th-dent .dn-t { padding: 6cqw 3cqw 0 4cqw; }.th-dent .dn-t small { display: inline-block; font-size: 1.15cqw; font-weight: 700; color: #2f8fb0; background: #e2f1f6; padding: .7cqw 1.4cqw; border-radius: 99px; }.th-dent h5 { font-size: 4.6cqw; letter-spacing: -.03em; line-height: 1.02; margin-top: 1.8cqw; }.th-dent .dn-t p { font-size: 1.5cqw; color: #4b6575; margin-top: 1.8cqw; }.th-dent .mk-btns .a { background: #2f8fb0; color: #fff; } .th-dent .mk-btns .b { border: 1px solid #b9cfdb; }.th-dent .dn-p { height: 72%; margin: 8cqw 4cqw 0 0; border-radius: 2cqw 2cqw 2cqw 10cqw; background: center/cover no-repeat; }.th-dent .dn-row { display: flex; gap: 2.4cqw; margin-top: 3cqw; font-size: 1.2cqw; color: #4b6575; }.th-dent .dn-row span::before { content: "✓ "; color: #2f8fb0; font-weight: 800; }.ph-mk { container-type: inline-size; background: #0b1220; border-radius: 18% / 8.6%; padding: 4.5%; box-shadow: 0 30px 60px -30px rgba(11,18,32,.6); }.ph-mk .ph-s { aspect-ratio: 9 / 19; border-radius: 14% / 6.6%; overflow: hidden; position: relative; }.ph-mk .ph-s .ph-img { position: absolute; inset: 0 0 45% 0; background: center/cover no-repeat; }.ph-mk .ph-s .ph-t { position: absolute; left: 0; right: 0; bottom: 0; height: 47%; padding: 8cqw 8cqw; }.ph-mk .ph-t b { display: block; font-size: 9cqw; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }.ph-mk .ph-t i { display: block; margin-top: 8cqw; padding: 5cqw; border-radius: 99px; text-align: center; font-style: normal; font-weight: 700; font-size: 6cqw; }.ph-hvac .ph-s { background: #0f2a22; color: #fff; } .ph-hvac i { background: #e8a33a; color: #1b1404; }.ph-rest .ph-s { background: #1a1311; color: #f6eee3; } .ph-rest b { font-family: "Fraunces", Georgia, serif; font-weight: 500 !important; } .ph-rest i { background: #c8643c; color: #fff; }.ph-shop .ph-s { background: #f3ede2; color: #2a2118; } .ph-shop b { font-family: "Fraunces", Georgia, serif; font-weight: 500 !important; } .ph-shop i { background: #2a2118; color: #f3ede2; border-radius: 0 !important; }.ph-dent .ph-s { background: #f6f9fb; color: #0e2a3b; } .ph-dent i { background: #2f8fb0; color: #fff; }.statement { font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.18; letter-spacing: -.02em; font-weight: 700; font-stretch: 112%; max-width: 22ch; }.statement span { color: #8c94a6; }.split-2 { display: grid; gap: 3rem; }@media (min-width: 960px) { .split-2 { grid-template-columns: 1.15fr .85fr; gap: 5rem; align-items: end; } }.solve-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.14); }.solve-list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }.solve-list .n { font-size: .8rem; font-weight: 700; color: #8f8ff7; letter-spacing: .1em; padding-top: .25rem; }.solve-list strong { display: block; color: #fff; font-size: 1.1rem; margin-bottom: .25rem; }.solve-list span { color: #a9b0bf; font-size: .97rem; }.svc-grid { display: grid; gap: 1px; background: var(--mist); border: 1px solid var(--mist); border-radius: 12px; overflow: hidden; }@media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }.svc-card { background: var(--white); padding: clamp(1.8rem, 3.4vw, 2.8rem); display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; min-height: 300px; transition: background .25s; position: relative; }.svc-card:hover { background: #fff; }.svc-card .ix { font-size: .82rem; font-weight: 700; color: var(--klein); letter-spacing: .1em; }.svc-card h3 { font-size: var(--step-2); }.svc-card p { color: var(--graphite); margin: 0; max-width: 40ch; }.svc-card ul { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }.svc-card li { font-size: .82rem; font-weight: 600; padding: .35rem .7rem; border-radius: 99px; background: var(--paper); color: var(--charcoal); }.svc-card .arrow { margin-top: auto; padding-top: 1rem; font-weight: 700; color: var(--klein); }.svc-card .arrow::after { content: " \2192"; transition: margin .2s; }.svc-card:hover .arrow::after { margin-left: .3rem; }.ind-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }@media (min-width: 900px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }.ind-tile { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3.2; background: var(--charcoal); color: #fff; display: flex; align-items: flex-end; }.ind-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }.ind-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,0) 35%, rgba(11,18,32,.82)); }.ind-tile:hover img { transform: scale(1.05); }.ind-tile div { position: relative; z-index: 1; padding: clamp(1rem, 2.4vw, 1.6rem); }.ind-tile h3 { color: #fff; font-size: clamp(1rem, 1.8vw, 1.35rem); }.ind-tile p { font-size: .88rem; color: #d3d7e0; margin: .3rem 0 0; }.ind-tile.plain { background: var(--klein); }.ind-tile.plain::after { display: none; }.ind-tile.plain.dark { background: var(--black); }@media (max-width: 560px) { .ind-tile p { display: none; } }.work-list { display: grid; gap: clamp(3rem, 7vw, 6rem); }.work-item { display: grid; gap: 2rem; align-items: center; text-decoration: none; color: inherit; }@media (min-width: 960px) { .work-item { grid-template-columns: 1.35fr .65fr; gap: 4rem; } .work-item.flip { grid-template-columns: .65fr 1.35fr; } .work-item.flip .wi-vis { order: 2; } }.wi-vis { position: relative; background: var(--paper); border-radius: 14px; padding: clamp(1.2rem, 4vw, 3.5rem); }.wi-vis.v-hvac { background: #dfe9e3; } .wi-vis.v-rest { background: #2a1d18; } .wi-vis.v-shop { background: #ead9bd; } .wi-vis.v-dent { background: #dcecf3; }.wi-vis .mk { box-shadow: 0 30px 60px -30px rgba(11,18,32,.5); transition: transform .5s ease; }.work-item:hover .wi-vis .mk { transform: translateY(-6px); }.wi-vis .ph-mk { position: absolute; width: 17%; right: 5%; bottom: -6%; }.wi-txt .tag { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); margin-bottom: .9rem; }.wi-txt h3 { font-size: var(--step-3); letter-spacing: -.02em; }.wi-txt p { color: var(--graphite); margin: 1rem 0 0; }.wi-txt .meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; list-style: none; padding: 0; }.wi-txt .meta li { font-size: .8rem; font-weight: 600; padding: .35rem .7rem; border: 1px solid var(--mist); border-radius: 99px; }.wi-txt .go { display: inline-block; margin-top: 1.6rem; font-weight: 700; color: var(--klein); }.wi-txt .go::after { content: " \2192"; }.case-hero { padding: clamp(2.5rem,6vw,5rem) 0 0; }.case-hero h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); letter-spacing: -.035em; line-height: .98; }.case-facts { display: grid; gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--mist); }@media (min-width: 760px) { .case-facts { grid-template-columns: repeat(4, 1fr); } }.case-facts h4 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); margin-bottom: .45rem; }.case-facts p { margin: 0; font-weight: 600; }.case-stage { margin-top: clamp(2rem, 5vw, 4rem); border-radius: 16px; padding: clamp(1.2rem, 5vw, 5rem); position: relative; }.case-stage .ph-mk { position: absolute; width: 16%; right: 6%; bottom: -5%; }.case-cols { display: grid; gap: 2.5rem; }@media (min-width: 900px) { .case-cols { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; } }.case-cols h3 { font-size: var(--step-1); margin-bottom: .7rem; }.case-cols p { color: var(--graphite); }.palette { display: flex; gap: .6rem; margin-top: 1rem; }.palette i { width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }.case-two { display: grid; gap: 1.5rem; }@media (min-width: 900px) { .case-two { grid-template-columns: 1fr 1fr; } }.case-two img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }.next-case { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 2.5rem 0; border-top: 1px solid var(--mist); text-decoration: none; color: inherit; }.next-case span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }.next-case b { font-size: var(--step-2); display: block; margin-top: .3rem; }.steps5 { list-style: none; padding: 0; margin: 0; counter-reset: s; }.steps5 > li { counter-increment: s; display: grid; gap: 1rem 3rem; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--mist); }@media (min-width: 900px) { .steps5 > li { grid-template-columns: 6rem 1fr 1.2fr; } }.steps5 > li::before { content: "0" counter(s); font-size: var(--step-3); font-weight: 800; color: var(--klein); line-height: 1; }.steps5 h3 { font-size: var(--step-2); }.steps5 p { color: var(--graphite); margin: 0; }.steps5 ul { margin: 0; padding-left: 1.1rem; color: var(--charcoal); display: grid; gap: .35rem; }.process-mini { display: grid; gap: 1px; background: rgba(255,255,255,.14); grid-template-columns: 1fr; border-radius: 12px; overflow: hidden; }@media (min-width: 760px) { .process-mini { grid-template-columns: repeat(5, 1fr); } }.process-mini div { background: var(--black); padding: 1.8rem 1.4rem; }.process-mini b { display: block; color: #8f8ff7; font-size: .8rem; letter-spacing: .1em; margin-bottom: 1.6rem; }.process-mini h3 { color: #fff; font-size: 1.15rem; margin-bottom: .5rem; }.process-mini p { color: #a9b0bf; font-size: .92rem; margin: 0; }.marquee { overflow: hidden; border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); padding: 1.2rem 0; white-space: nowrap; }.marquee div { display: inline-flex; gap: 3rem; animation: marq 40s linear infinite; font-weight: 700; font-stretch: 112%; font-size: clamp(1rem, 2vw, 1.4rem); color: var(--charcoal); }.marquee span::after { content: "\2726"; margin-left: 3rem; color: var(--klein); }@keyframes marq { to { transform: translateX(-50%); } }@media (prefers-reduced-motion: reduce) { .marquee div { animation: none; } }