/* ============================================================ UBBA SH — Polski Software House Design system + global styles. No images by design — typography, layout and motion carry the page. ============================================================ */ :root { /* Palette — warm cream, deep ink, single signal */ --bone: #F2ECE2; --bone-2: #EAE2D4; --pale: #D9D2C4; --parchment: #F7F2E8; --ink: #0E0E12; --graphite: #1C1C22; --smoke: #3A3A44; --mute: #7B7568; --signal: #E7431C; --sage: #6E7A5C; /* Type families */ --ff-display: 'Instrument Serif', 'Times New Roman', serif; --ff-sans: 'Inter Tight', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --ff-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Fluid sizes — polished ceilings so nothing overflows at 1920+ */ --fs-micro: 10px; --fs-label: 11px; --fs-body: clamp(15px, 0.8vw + 12px, 17px); --fs-lead: clamp(17px, 1vw + 13px, 22px); --fs-h3: clamp(22px, 1.4vw + 14px, 30px); --fs-h2: clamp(40px, 5vw + 8px, 76px); --fs-h1: clamp(58px, 10vw, 152px); --fs-mega: clamp(72px, 14vw, 180px); /* Spacing */ --gutter: clamp(20px, 3vw, 44px); --section-y: clamp(72px, 8.5vw, 140px); /* Motion — strong custom easings (avoid built-in CSS ease curves) */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); /* Durations — keep UI under 300ms (Emil's rule) */ --d-press: 140ms; --d-hover: 180ms; --d-ui: 220ms; --d-reveal: 560ms; } /* ============================================================ I18N — swap content by ============================================================ */ html[lang="pl"] [lang="en"] { display: none !important; } html[lang="en"] [lang="pl"] { display: none !important; } /* Language switch crossfade — short, masked with subtle blur per Emil */ body { transition: opacity var(--d-press, 140ms) var(--ease, cubic-bezier(.2,.7,.2,1)), filter var(--d-press, 140ms) var(--ease, cubic-bezier(.2,.7,.2,1)); } body.is-lang-switching { opacity: 0.55; filter: blur(1.5px); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; } body { margin: 0; background: var(--bone); color: var(--ink); font: 400 var(--fs-body)/1.5 var(--ff-sans); font-feature-settings: 'ss01', 'cv05', 'cv11'; letter-spacing: -0.005em; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--ink); color: var(--bone); } /* ============================================================ FX — grain & cursor ============================================================ */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 120; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* ============================================================ TOPBAR ============================================================ */ .topbar { position: sticky; top: 0; z-index: 90; display: flex; justify-content: space-between; padding: 10px var(--gutter); font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.14em; color: var(--smoke); background: color-mix(in srgb, var(--bone) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } body.is-dark-nav .topbar { background: color-mix(in srgb, var(--ink) 55%, transparent); color: color-mix(in srgb, var(--bone) 70%, transparent); border-bottom-color: color-mix(in srgb, var(--bone) 14%, transparent); } .topbar__item { display: inline-flex; align-items: center; gap: 8px; z-index: 1; } .topbar__item--center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .topbar__item--center a { color: var(--ink); transition: color .2s var(--ease); } .topbar__item--center a:hover { color: var(--signal); } .topbar__sep { opacity: 0.5; margin: 0 4px; } body.is-dark-nav .topbar__item--center a { color: var(--bone); } @media (max-width: 1100px) { .topbar__item--center { display: none; } } @media (max-width: 760px) { .topbar__item:first-child { gap: 6px; } .topbar__item--right { display: none; } } .topbar__item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 60%, transparent); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 70%, transparent); } 70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--signal) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 0%, transparent); } } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 31px; z-index: 80; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 16px var(--gutter); background: color-mix(in srgb, var(--bone) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } body.is-dark-nav .nav { background: color-mix(in srgb, var(--ink) 62%, transparent); color: var(--bone); border-bottom-color: color-mix(in srgb, var(--bone) 14%, transparent); } body.is-dark-nav .nav__brand, body.is-dark-nav .nav__links a { color: var(--bone); } body.is-dark-nav .nav__wordmark em { color: color-mix(in srgb, var(--bone) 55%, transparent); } body.is-dark-nav .nav__cta { background: var(--bone); color: var(--ink); border-color: var(--bone); } body.is-dark-nav .nav__cta:hover { background: var(--signal); color: var(--bone); border-color: var(--signal); } .nav__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); } .nav__mark { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; border-radius: 5px; } .nav__wordmark { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--ff-sans); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; } .nav__wordmark strong { font-weight: 600; } .nav__sh { color: var(--signal); letter-spacing: 0.08em; } .nav__wordmark em { font-family: var(--ff-display); font-style: italic; font-size: 14px; letter-spacing: 0; color: var(--mute); text-transform: none; } .nav__links { display: flex; gap: 26px; justify-content: center; font-family: var(--ff-sans); font-size: 13px; letter-spacing: 0.02em; } .nav__links a { position: relative; padding: 4px 0; transition: color var(--d-hover) var(--ease); } .nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--d-ui) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); } } .nav__right { display: inline-flex; align-items: center; gap: 10px; } .nav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; font-family: var(--ff-sans); font-size: 13px; letter-spacing: 0.03em; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--bone); transition: transform var(--d-press) var(--ease-out), background var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease); } @media (hover: hover) and (pointer: fine) { .nav__cta:hover { background: var(--signal); border-color: var(--signal); } } .nav__cta:active { transform: scale(0.97); } .langswitch { display: inline-flex; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 999px; overflow: hidden; } .langswitch__btn { padding: 7px 10px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--mute); transition: color var(--d-hover) var(--ease), background var(--d-hover) var(--ease), transform var(--d-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .langswitch__btn:hover { color: var(--ink); } } .langswitch__btn:active { transform: scale(0.95); } .langswitch__btn.is-active { background: var(--ink); color: var(--bone); } body.is-dark-nav .langswitch { border-color: color-mix(in srgb, var(--bone) 30%, transparent); } body.is-dark-nav .langswitch__btn { color: color-mix(in srgb, var(--bone) 70%, transparent); } body.is-dark-nav .langswitch__btn:hover { color: var(--bone); } body.is-dark-nav .langswitch__btn.is-active { background: var(--bone); color: var(--ink); } @media (max-width: 820px) { .nav { grid-template-columns: auto auto; } .nav__links { display: none; } .nav__cta svg { display: none; } } @media (max-width: 600px) { .nav { gap: 12px; padding: 12px var(--gutter); } .nav__wordmark em { display: none; } .nav__cta { padding: 9px 14px; font-size: 11px; } } /* ============================================================ SECTION HEADS & TITLES ============================================================ */ .section__head { display: flex; gap: 20px; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); padding: 0 var(--gutter); margin-bottom: 22px; } .section__head .sectnum { color: var(--ink); } .section__head--dark { color: color-mix(in srgb, var(--bone) 70%, transparent); } .section__head--dark .sectnum { color: var(--bone); } .section-title { font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-h2); line-height: 0.92; letter-spacing: -0.02em; padding: 0 var(--gutter); margin: 0 0 44px; max-width: 16ch; } .section-title em { font-style: italic; color: var(--signal); } .section-title--alt { max-width: 14ch; } .section-title--dark { color: var(--bone); } .eyebrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-family: var(--ff-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.2em; color: var(--mute); } .eyebrow__sep { width: 32px; height: 1px; background: currentColor; flex: 0 0 32px; } .eyebrow__num { color: var(--ink); } @media (max-width: 600px) { .eyebrow { flex-direction: column; align-items: flex-start; gap: 6px; } .eyebrow__sep { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: clamp(36px, 5vw, 68px) var(--gutter) clamp(52px, 7vw, 100px); overflow: hidden; min-height: calc(100vh - 90px); display: flex; align-items: stretch; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto auto auto auto; column-gap: 24px; row-gap: 0; width: 100%; align-content: start; } .hero__meta { grid-column: 1 / -1; grid-row: 1; padding-top: 4px; } .hero__title { grid-column: 1 / -1; grid-row: 2; font-family: var(--ff-display); font-size: var(--fs-h1); font-weight: 400; line-height: 0.86; letter-spacing: -0.03em; margin: 18px 0 0; } .hero__title .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.06em; } .hero__title [data-split] { display: inline-block; transform: translateY(110%); will-change: transform; animation: lineIn 1s var(--ease-out) forwards; } .hero__title .line:nth-child(1) [data-split] { animation-delay: .05s; } .hero__title .line:nth-child(2) [data-split] { animation-delay: .12s; } .hero__title em { font-style: italic; color: var(--signal); } .hero__asterisk { display: inline-block; font-family: var(--ff-mono); font-style: normal; font-size: 0.22em; vertical-align: 0.72em; margin-left: 6px; color: var(--signal); animation-delay: .3s !important; } @keyframes lineIn { to { transform: translateY(0); } } .hero__gloss { grid-column: 1 / span 8; grid-row: 3; margin-top: 20px; font-family: var(--ff-sans); font-size: 13px; line-height: 1.55; color: var(--smoke); max-width: 52ch; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding-top: 14px; } .hero__gloss-mark { font-family: var(--ff-mono); color: var(--signal); margin-right: 6px; } .hero__gloss em { font-family: var(--ff-display); font-style: italic; font-size: 1.1em; color: var(--ink); } .hero__strap { grid-column: 1 / span 8; grid-row: 4; margin-top: clamp(24px, 3.5vw, 48px); display: grid; gap: 20px; } .hero__lead { font-family: var(--ff-sans); font-size: var(--fs-lead); line-height: 1.45; color: var(--graphite); max-width: 46ch; font-weight: 400; } .hero__lead strong { font-weight: 500; color: var(--ink); background: linear-gradient(transparent 60%, color-mix(in srgb, var(--signal) 32%, transparent) 60%); padding: 0 2px; } .hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .hero__tags li { padding: 6px 13px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 999px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); background: color-mix(in srgb, var(--bone-2) 60%, transparent); transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease), transform var(--d-press) var(--ease-out); cursor: default; } @media (hover: hover) and (pointer: fine) { .hero__tags li:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); } } .hero__tags li:active { transform: scale(0.96); } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .hero__meta-line { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-top: 18px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } .hero__meta-line > span { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .hero__meta-line strong { color: var(--ink); font-weight: 500; letter-spacing: 0.12em; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; font-family: var(--ff-sans); font-size: 14px; letter-spacing: 0.02em; transition: transform var(--d-press) var(--ease-out), background var(--d-hover) var(--ease), color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease); border: 1px solid var(--ink); } .btn:active { transform: scale(0.97); } .btn--primary { background: var(--ink); color: var(--bone); } .btn--ghost { background: transparent; } .btn__icon { font-family: var(--ff-display); font-size: 18px; transition: transform var(--d-ui) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--signal); border-color: var(--signal); } .btn--ghost:hover { background: var(--ink); color: var(--bone); } .btn:hover .btn__icon { transform: translate(2px, -2px); } } /* Credential strip — 4 editorial stats at bottom of hero */ .hero__creds { grid-column: 1 / -1; grid-row: 5; margin-top: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); } .cred { display: grid; grid-template-rows: auto 1fr; gap: 8px; } .cred__num { font-family: var(--ff-display); font-size: clamp(36px, 3.4vw, 60px); line-height: 0.9; letter-spacing: -0.02em; color: var(--ink); } .cred__num i { font-family: var(--ff-mono); font-style: normal; font-size: 0.45em; vertical-align: super; color: var(--signal); margin-left: 2px; } .cred__lbl { font-family: var(--ff-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); line-height: 1.55; } @media (max-width: 1040px) { .hero__title { grid-column: 1 / -1; } .hero__gloss { grid-column: 1 / -1; } .hero__strap { grid-column: 1 / -1; } } @media (max-width: 900px) { .hero__creds { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ MANIFEST — hero right-column card (pure type / CSS) ============================================================ */ .manifest { grid-column: 9 / span 4; grid-row: 2 / span 3; align-self: start; margin-top: 28px; background: color-mix(in srgb, var(--bone-2) 70%, var(--bone)); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 4px; padding: 20px 22px 18px; box-shadow: 0 1px 0 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 20px 40px -20px color-mix(in srgb, var(--ink) 16%, transparent); display: grid; gap: 18px; font-family: var(--ff-mono); position: relative; overflow: hidden; } .manifest::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); } .manifest__head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 24%, transparent); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); } .manifest__label { color: var(--ink); } .manifest__id { color: var(--signal); } .manifest__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--graphite); } .manifest__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 60%, transparent); animation: pulse 2s infinite; } .manifest__body { display: grid; gap: 10px; margin: 0; } .manifest__row { display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .manifest__row:first-child { border-top: 0; padding-top: 2px; } .manifest__row dt { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); } .manifest__row dd { margin: 0; font-family: var(--ff-sans); font-size: 14px; color: var(--ink); letter-spacing: -0.005em; } .manifest__row--hero { padding-top: 14px; padding-bottom: 6px; } .manifest__outcome { font-family: var(--ff-display) !important; font-size: clamp(28px, 2.4vw, 38px) !important; line-height: 1 !important; letter-spacing: -0.02em; color: var(--ink) !important; } .manifest__outcome i { font-family: var(--ff-mono); font-style: normal; font-size: 12px; color: var(--mute); letter-spacing: 0.08em; margin-left: 6px; vertical-align: 0.25em; } .manifest__term { background: var(--ink); color: color-mix(in srgb, var(--bone) 92%, transparent); border-radius: 3px; padding: 14px 16px; display: grid; gap: 4px; font-size: 11px; line-height: 1.55; letter-spacing: 0.01em; } .manifest__term-line { white-space: nowrap; overflow: hidden; } .manifest__term-line:nth-child(1) { animation: typeIn 1.2s steps(18) .9s both; } .manifest__term-line:nth-child(2) { animation: typeIn 1s steps(12) 2.2s both; } .manifest__term-line:nth-child(3) { animation: typeIn 1s steps(16) 3.2s both; } .manifest__term-line:nth-child(4) { animation: typeIn 1s steps(12) 4.1s both; } .manifest__term-line--ok { color: var(--signal); font-weight: 500; } .manifest__cursor { display: inline-block; margin-left: 4px; color: var(--signal); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } @keyframes typeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @media (max-width: 1040px) { .manifest { grid-column: 1 / -1; grid-row: auto; margin-top: 32px; max-width: 480px; justify-self: start; } } /* ============================================================ MARQUEE ============================================================ */ .marquee { overflow: hidden; padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: var(--bone); } .marquee__track { display: flex; font-family: var(--ff-display); font-size: clamp(26px, 3.4vw, 48px); line-height: 1; white-space: nowrap; animation: slide 48s linear infinite; will-change: transform; } .marquee__track--reverse { animation-direction: reverse; } .marquee__track > span { flex: 0 0 auto; margin-right: 32px; } .marquee__track .diamond { color: var(--signal); font-size: 0.6em; align-self: center; } @keyframes slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ============================================================ SERVICES ============================================================ */ .services { padding: var(--section-y) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .services__grid { margin: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); } .service { padding: 32px 26px 30px; border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); position: relative; transition: background var(--d-ui) var(--ease); display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; } @media (hover: hover) and (pointer: fine) { .service:hover { background: color-mix(in srgb, var(--signal) 5%, transparent); } .service:hover .service__num { color: var(--signal); } .service:hover .service__icon svg { color: var(--signal); transform: translateY(-2px); } } .service__num { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--mute); transition: color var(--d-hover) var(--ease); } .service__icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: var(--ink); } .service__icon svg, .service__icon img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--d-ui) var(--ease-out), color var(--d-hover) var(--ease); } .service__icon img { /* Subtle desaturation in default state — pops on hover */ filter: saturate(0.92); transition: transform var(--d-ui) var(--ease-out), filter var(--d-hover) var(--ease); } @media (hover: hover) and (pointer: fine) { .service:hover .service__icon img { filter: saturate(1); transform: translateY(-2px); } } /* Stagger services into view when grid intersects viewport */ body.js-ready .services__grid .service { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } body.js-ready .services__grid.is-revealed .service { opacity: 1; transform: translateY(0); } body.js-ready .services__grid .service:nth-child(2) { transition-delay: 70ms; } body.js-ready .services__grid .service:nth-child(3) { transition-delay: 140ms; } body.js-ready .services__grid .service:nth-child(4) { transition-delay: 210ms; } body.js-ready .services__grid .service:nth-child(5) { transition-delay: 280ms; } body.js-ready .services__grid .service:nth-child(6) { transition-delay: 350ms; } .service h3 { font-family: var(--ff-display); font-size: clamp(26px, 2.2vw, 34px); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; margin: 0; } .service p { font-size: 14px; line-height: 1.55; color: var(--graphite); max-width: 44ch; } .service__outcomes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .service__outcomes li { padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); } @media (max-width: 1000px) { .services__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .services__grid { grid-template-columns: 1fr; } } /* ============================================================ WHY — three pillars (dark) ============================================================ */ .why { padding: var(--section-y) 0; background: var(--ink); color: var(--bone); position: relative; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--bone) 10%, transparent); } .why::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 30%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 45%), radial-gradient(ellipse at 85% 80%, color-mix(in srgb, var(--bone) 5%, transparent), transparent 55%); pointer-events: none; } .why > * { position: relative; z-index: 1; } .why__lead { padding: 0 var(--gutter); max-width: 60ch; font-family: var(--ff-display); font-size: var(--fs-lead); line-height: 1.4; color: color-mix(in srgb, var(--bone) 82%, transparent); margin-bottom: 56px; } .why__lead::before { content: ''; display: block; width: 42px; height: 1px; background: var(--signal); margin-bottom: 18px; } .why__grid { padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid color-mix(in srgb, var(--bone) 18%, transparent); } .pillar { padding: 36px 28px 32px; border-right: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); display: grid; gap: 16px; position: relative; transition: background var(--d-ui) var(--ease); } .pillar:last-child { border-right: 0; } @media (hover: hover) and (pointer: fine) { .pillar:hover { background: color-mix(in srgb, var(--bone) 4%, transparent); } } .pillar::before { content: ''; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--signal); transition: width 1.4s var(--ease-out); } .pillar.is-revealed::before { width: calc(100% - 32px); } .pillar--featured { background: color-mix(in srgb, var(--signal) 10%, transparent); } .pillar__num { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--signal); } .pillar h3 { font-family: var(--ff-display); font-size: clamp(34px, 3.2vw, 54px); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; margin: 0; } .pillar p { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--bone) 80%, transparent); max-width: 34ch; } .pillar__bullets { margin-top: 8px; display: grid; gap: 6px; font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--bone) 72%, transparent); } .pillar__bullets li { padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); } .pillar__bullets li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); } .pillar__bullets li::before { content: '→ '; color: var(--signal); } @media (max-width: 900px) { .why__grid { grid-template-columns: 1fr; } .pillar { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); } .pillar:last-child { border-bottom: 0; } } /* ============================================================ WORK — cases with CSS outcome tiles ============================================================ */ .work { padding: var(--section-y) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); background: var(--parchment); } .work__list { display: grid; gap: 0; padding: 0 var(--gutter); counter-reset: case; } .case { counter-increment: case; display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: clamp(28px, 4vw, 72px); align-items: start; padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); position: relative; } .work__list > .case:first-child { border-top: 0; padding-top: clamp(24px, 3vw, 40px); } .case::before { content: counter(case, decimal-leading-zero); font-family: var(--ff-display); font-size: clamp(84px, 11vw, 168px); line-height: 0.82; letter-spacing: -0.045em; color: var(--signal); align-self: start; } /* ── Tile (outcome composition) ─────────────────────────── */ .tile { width: 100%; height: 100%; background: var(--bone); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding: clamp(20px, 2.4vw, 34px); display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; position: relative; overflow: hidden; color: var(--ink); } .tile::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, color-mix(in srgb, var(--signal) 60%, transparent), transparent 40%); } .tile__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); padding-bottom: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); } .tile__id { color: var(--ink); } .tile__status { color: var(--signal); } .tile__status--pulse { display: inline-flex; align-items: center; gap: 6px; } .tile__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 2s infinite; } .tile__num { font-family: var(--ff-display); font-size: clamp(60px, 8vw, 140px); line-height: 0.88; letter-spacing: -0.04em; color: var(--ink); align-self: center; padding: 4px 0; } .tile__currency { color: var(--signal); margin-right: 2px; } .tile__unit { font-family: var(--ff-mono); font-style: normal; font-size: 0.32em; color: var(--signal); letter-spacing: 0; vertical-align: 0.55em; margin-left: 4px; } .tile__sign { font-family: var(--ff-mono); font-size: 0.5em; color: var(--signal); vertical-align: 0.35em; margin-right: 6px; } .tile__sub { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); max-width: 28ch; } .tile__foot { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); } /* Bars (fintech tile) */ .tile__bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: 4px; } .tile__bars span { flex: 1; background: color-mix(in srgb, var(--ink) 16%, transparent); height: var(--h, 40%); transform-origin: bottom; animation: barGrow 1s var(--ease-out) backwards; } .tile__bars span:nth-child(1) { animation-delay: .05s; } .tile__bars span:nth-child(2) { animation-delay: .10s; } .tile__bars span:nth-child(3) { animation-delay: .15s; } .tile__bars span:nth-child(4) { animation-delay: .20s; } .tile__bars span:nth-child(5) { animation-delay: .25s; } .tile__bars span:nth-child(6) { animation-delay: .30s; } .tile__bars span:nth-child(7) { animation-delay: .35s; } .tile__bars span:nth-child(8) { animation-delay: .40s; } .tile__bars span:nth-child(9) { animation-delay: .45s; } .tile__bars span:nth-child(10) { animation-delay: .50s; } .tile__bars span:nth-child(11) { animation-delay: .55s; } .tile__bars span:nth-child(12) { animation-delay: .60s; } .tile__bars span.is-peak { background: var(--signal); } @keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* Pulse line (health tile) */ .tile--dark { background: var(--ink); color: var(--bone); border-color: color-mix(in srgb, var(--bone) 16%, transparent); } .tile--dark .tile__head { color: color-mix(in srgb, var(--bone) 60%, transparent); border-bottom-color: color-mix(in srgb, var(--bone) 16%, transparent); } .tile--dark .tile__id { color: var(--bone); } .tile--dark .tile__num { color: var(--bone); } .tile--dark .tile__sub { color: color-mix(in srgb, var(--bone) 76%, transparent); } .tile--dark .tile__foot { color: color-mix(in srgb, var(--bone) 55%, transparent); border-top-color: color-mix(in srgb, var(--bone) 16%, transparent); } .tile__pulse { width: 100%; height: 60px; color: var(--signal); margin-top: 4px; } .tile__pulse path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawLine 2.4s var(--ease-out) 0.4s forwards, pulseLine 3s ease-in-out 2.8s infinite; } @keyframes drawLine { to { stroke-dashoffset: 0; } } @keyframes pulseLine { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.55; } } /* Ranked list (AI tile) */ .tile__ranks { display: grid; gap: 6px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); } .tile__ranks li { display: grid; grid-template-columns: 28px 1fr 40px; align-items: center; gap: 10px; padding: 3px 0; } .tile__rank { color: var(--mute); } .tile__rankbar { display: block; height: 6px; background: color-mix(in srgb, var(--ink) 10%, transparent); position: relative; overflow: hidden; } .tile__rankbar::after { content: ''; position: absolute; inset: 0; width: var(--v, 50%); background: var(--ink); transform-origin: left; animation: growBar 1.1s var(--ease-out) both; } .tile__ranks li:first-child .tile__rankbar::after { background: var(--signal); } .tile__ranks li:nth-child(1) .tile__rankbar::after { animation-delay: .1s; } .tile__ranks li:nth-child(2) .tile__rankbar::after { animation-delay: .2s; } .tile__ranks li:nth-child(3) .tile__rankbar::after { animation-delay: .3s; } .tile__ranks li:nth-child(4) .tile__rankbar::after { animation-delay: .4s; } .tile__rankval { text-align: right; color: var(--ink); font-weight: 500; } @keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } .case__tag { font-family: var(--ff-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--signal); } .case__title { font-family: var(--ff-display); font-size: clamp(30px, 3.2vw, 52px); font-weight: 400; line-height: 0.98; letter-spacing: -0.02em; margin: 10px 0 16px; } .case__body { font-size: var(--fs-body); line-height: 1.6; color: var(--graphite); max-width: 48ch; } .case__kv { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); } .case__kv > div { display: grid; gap: 4px; } .case__kv dt { font-family: var(--ff-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--mute); } .case__kv dd { font-family: var(--ff-display); font-size: 20px; line-height: 1.15; margin: 0; color: var(--ink); } .work__note { margin: 72px var(--gutter) 0; font-family: var(--ff-mono); font-size: 12px; text-align: center; color: var(--mute); letter-spacing: 0.1em; } .work__note a { color: var(--ink); border-bottom: 1px solid currentColor; } @media (max-width: 860px) { .case { grid-template-columns: 1fr; gap: 20px; } .case::before { font-size: 92px; } } /* ============================================================ PROCESS — dark timeline ============================================================ */ .process { padding: var(--section-y) 0; background: var(--ink); color: var(--bone); position: relative; overflow: hidden; } .process::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 82% 30%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 40%), radial-gradient(circle at 10% 80%, color-mix(in srgb, var(--bone) 6%, transparent), transparent 50%); pointer-events: none; } .process > * { position: relative; z-index: 1; } .process__lead { padding: 0 var(--gutter); max-width: 58ch; font-family: var(--ff-display); font-size: var(--fs-lead); line-height: 1.4; color: color-mix(in srgb, var(--bone) 82%, transparent); margin-bottom: 68px; } .process__lead::before { content: ''; display: block; width: 42px; height: 1px; background: var(--signal); margin-bottom: 18px; } .timeline { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 var(--gutter); border-top: 1px solid color-mix(in srgb, var(--bone) 18%, transparent); } .timeline__phase { padding: 36px 28px 8px 24px; border-right: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); position: relative; } .timeline__phase:first-child { padding-left: 0; } .timeline__phase:last-child { border-right: 0; padding-right: 0; } .timeline__phase::before { content: ''; position: absolute; left: 24px; right: 28px; top: -1px; height: 2px; background: var(--signal); transform-origin: left center; transform: scaleX(0); transition: transform 1.2s var(--ease-out); } .timeline__phase:first-child::before { left: 0; } .timeline__phase:last-child::before { right: 0; } .timeline__phase.is-revealed::before { transform: scaleX(1); } .timeline__num { font-family: var(--ff-mono); font-size: 14px; color: var(--signal); letter-spacing: 0.1em; } .timeline__week { display: block; margin-top: 6px; font-family: var(--ff-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in srgb, var(--bone) 60%, transparent); } .timeline__phase h3 { font-family: var(--ff-display); font-size: clamp(26px, 2.6vw, 42px); font-weight: 400; letter-spacing: -0.015em; margin: 26px 0 12px; } .timeline__phase p { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--bone) 72%, transparent); max-width: 28ch; } .timeline__chip { display: inline-block; margin-top: 20px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--bone) 18%, transparent); border-radius: 3px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--bone) 80%, transparent); background: color-mix(in srgb, var(--bone) 5%, transparent); } @media (max-width: 900px) { .timeline { grid-template-columns: 1fr 1fr; } .timeline__phase { border-bottom: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); } .timeline__phase:nth-child(2n) { border-right: 0; } .timeline__phase:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } .timeline__phase { border-right: 0 !important; } .timeline__phase:last-child { border-bottom: 0; } } /* ============================================================ PULL QUOTE ============================================================ */ .pull { padding: clamp(88px, 12vw, 168px) var(--gutter); background: var(--parchment); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); position: relative; overflow: hidden; } .pull::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: color-mix(in srgb, var(--ink) 10%, transparent); } .pull__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 42px); align-items: start; position: relative; } .pull__mark { font-family: var(--ff-display); font-style: italic; font-size: clamp(140px, 18vw, 280px); line-height: 0.7; color: var(--signal); margin-top: -0.1em; user-select: none; } .pull__quote { margin: 0; } .pull__quote p { font-family: var(--ff-display); font-size: clamp(32px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 18ch; } .pull__quote p em { font-style: italic; color: var(--signal); } .pull__attr { margin-top: clamp(28px, 3vw, 44px); display: flex; align-items: center; gap: 16px; } .pull__attr-line { display: block; width: clamp(40px, 6vw, 80px); height: 1px; background: var(--ink); opacity: 0.4; } .pull__attr-text { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: baseline; gap: 10px; } .pull__attr-text em { font-style: normal; color: var(--mute); letter-spacing: 0.12em; } .pull__proof { grid-column: 2; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); list-style: none; padding-left: 0; margin-bottom: 0; } .pull__proof li { display: grid; gap: 10px; align-content: start; } .pull__proof-num { font-family: var(--ff-display); font-size: clamp(40px, 5vw, 68px); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); } .pull__proof-num i { font-family: var(--ff-mono); font-style: normal; font-size: 0.36em; color: var(--signal); letter-spacing: 0; margin-left: 2px; vertical-align: 0.7em; } .pull__proof-lbl { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); line-height: 1.5; } @media (max-width: 760px) { .pull__inner { grid-template-columns: 1fr; gap: 20px; } .pull__mark { font-size: 120px; margin-top: 0; } .pull__proof { grid-column: 1; grid-template-columns: 1fr; gap: 20px; } } /* ============================================================ STACK MARQUEE ============================================================ */ .stackmarq { overflow: hidden; background: var(--ink); color: var(--bone); padding: 22px 0; } .stackmarq .marquee__track { font-family: var(--ff-display); } .stackmarq .marquee__track .diamond { color: var(--signal); } /* ============================================================ FAQ ============================================================ */ .faq { padding: var(--section-y) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .faq__list { padding: 0 var(--gutter); border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); } .faq__list li { border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); } .faq details { padding: 20px 0; transition: padding var(--d-ui) var(--ease); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; list-style: none; cursor: pointer; font-family: var(--ff-display); font-size: clamp(20px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -0.01em; transition: color var(--d-hover) var(--ease); } .faq summary::-webkit-details-marker { display: none; } @media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--signal); } } .faq__plus { font-family: var(--ff-mono); font-size: 22px; color: var(--mute); transition: transform var(--d-ui) var(--ease-out), color var(--d-hover) var(--ease); } .faq details[open] .faq__plus { transform: rotate(45deg); color: var(--signal); } .faq details p { margin-top: 16px; max-width: 70ch; color: var(--graphite); line-height: 1.6; animation: fadeUp .5s var(--ease-out); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ CONTACT ============================================================ */ .contact { padding: var(--section-y) 0 calc(var(--section-y) - 24px); background: var(--ink); color: var(--bone); position: relative; overflow: hidden; } .contact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 60%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 45%), radial-gradient(ellipse at 90% 20%, color-mix(in srgb, var(--bone) 5%, transparent), transparent 50%); pointer-events: none; } .contact > * { position: relative; z-index: 1; } .contact__title { padding: 0 var(--gutter); margin: 0 0 28px; font-family: var(--ff-display); font-weight: 400; font-size: clamp(52px, 9vw, 132px); line-height: 0.9; letter-spacing: -0.03em; color: var(--bone); } .contact__title em { font-family: var(--ff-mono); font-style: normal; font-size: 0.22em; color: var(--signal); vertical-align: super; margin-left: 2px; } .contact__title .line { display: block; } .contact__title .line:nth-child(2) { padding-left: clamp(32px, 6vw, 110px); color: color-mix(in srgb, var(--bone) 92%, transparent); } .contact__title .line:nth-child(3) { padding-left: clamp(64px, 12vw, 220px); font-style: italic; color: var(--signal); } .contact__note { padding: 0 var(--gutter); max-width: 54ch; margin-left: clamp(32px, 6vw, 110px); font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--bone) 70%, transparent); margin-bottom: 56px; } .contact__methods { padding: 0 var(--gutter); display: grid; border-top: 1px solid color-mix(in srgb, var(--bone) 20%, transparent); } .contact__method { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid color-mix(in srgb, var(--bone) 18%, transparent); transition: color var(--d-hover) var(--ease), padding-left var(--d-ui) var(--ease-out), transform var(--d-press) var(--ease-out); position: relative; } .contact__method:active { transform: scale(0.995); } @media (hover: hover) and (pointer: fine) { .contact__method:hover { padding-left: clamp(12px, 2vw, 24px); color: var(--signal); } } .contact__label { display: grid; gap: 8px; } .contact__val { position: relative; } .contact__val::before { content: ''; position: absolute; /* val shifts right by method's hover padding, so offset dot the other way so it lands ~10px inside the newly-opened gutter, not inside the text. */ left: calc(10px - clamp(12px, 2vw, 24px)); top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--signal); opacity: 0; transition: opacity .3s var(--ease); } .contact__method:hover .contact__val::before { opacity: 1; } .contact__sub { font-family: var(--ff-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in srgb, var(--bone) 60%, transparent); } .contact__val { font-family: var(--ff-display); font-size: clamp(30px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.02em; color: var(--bone); } .contact__val .at { color: var(--signal); font-style: italic; } .contact__val .phone-space { display: inline-block; width: 0.25em; } .contact__copy { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--bone) 30%, transparent); border-radius: 999px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--bone) 70%, transparent); transition: background var(--d-hover) var(--ease), color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease), transform var(--d-press) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .contact__copy:hover { background: var(--bone); color: var(--ink); } } .contact__copy:active { transform: scale(0.95); } .contact__copy.is-copied { background: var(--signal); color: var(--bone); border-color: var(--signal); } .contact__arrow { font-family: var(--ff-display); font-size: 28px; transition: transform var(--d-ui) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .contact__method:hover .contact__arrow { transform: translate(6px, -6px); } } .contact__hours { margin-top: clamp(40px, 5vw, 72px); padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .contact__hours > div { display: grid; gap: 6px; } .contact__hours-lbl { font-family: var(--ff-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--bone) 50%, transparent); } .contact__hours > div > span:last-child { color: color-mix(in srgb, var(--bone) 90%, transparent); font-size: 15px; } @media (max-width: 860px) { .contact__method { grid-template-columns: 1fr auto; } .contact__copy { display: none; } .contact__hours { grid-template-columns: 1fr; } } /* ============================================================ FOOTER ============================================================ */ .foot { padding: 28px var(--gutter) 22px; background: var(--ink); color: var(--bone); border-top: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); } .foot__mono { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; font-family: var(--ff-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--bone) 60%, transparent); padding-bottom: 22px; border-bottom: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); } .foot__mono > span:nth-child(2) { text-align: center; } .foot__mono > span:nth-child(3) { text-align: right; } .foot__mega { font-family: var(--ff-display); font-size: var(--fs-mega); line-height: 0.82; letter-spacing: -0.04em; text-align: center; margin: 32px 0 14px; color: color-mix(in srgb, var(--bone) 96%, transparent); user-select: none; white-space: nowrap; overflow: hidden; } .foot__bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--bone) 14%, transparent); font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--bone) 55%, transparent); } .foot__bottom a { color: var(--bone); } @media (max-width: 700px) { .foot__mono { grid-template-columns: 1fr; } .foot__mono > span:nth-child(2), .foot__mono > span:nth-child(3) { text-align: left; } .foot__bottom { flex-direction: column; gap: 10px; } .foot__mega { font-size: clamp(54px, 18vw, 120px); } } /* ============================================================ REVEAL — gated behind body.js-ready ============================================================ */ body.js-ready [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); } body.js-ready [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } body.js-ready .pillar { opacity: 0; transition: opacity var(--d-reveal) var(--ease-out); } body.js-ready .pillar.is-revealed { opacity: 1; } /* ============================================================ SEO PAGES — programmatic landing pages (city × service, industry, hubs) ============================================================ */ .seo-crumb { padding: 18px var(--gutter) 0; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } .seo-crumb a { color: var(--smoke); transition: color var(--d-hover) var(--ease); } @media (hover: hover) and (pointer: fine) { .seo-crumb a:hover { color: var(--signal); } } .seo-crumb__sep { margin: 0 8px; opacity: 0.5; } .seo-crumb [aria-current="page"] { color: var(--ink); } .seo-hero { padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(40px, 5vw, 72px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); } .seo-hero__inner { max-width: 920px; } .seo-hero h1 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: 0.92; letter-spacing: -0.025em; margin: 18px 0 24px; } .seo-hero h1 em { font-style: italic; color: var(--signal); } .seo-hero__lead { font-family: var(--ff-display); font-size: clamp(20px, 1.6vw + 12px, 28px); line-height: 1.4; color: var(--graphite); max-width: 60ch; } .seo-hero__meta { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-top: 28px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } .seo-hero__meta strong { display: block; color: var(--ink); font-weight: 500; letter-spacing: 0.12em; margin-bottom: 4px; } .seo-hero__meta-line { margin-top: 22px; font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); } .seo-section { padding: clamp(48px, 6vw, 88px) var(--gutter); border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); } .seo-section--alt { background: var(--parchment); } .seo-section h2 { font-family: var(--ff-display); font-size: clamp(32px, 3.4vw, 52px); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 24px; max-width: 22ch; } .seo-section h2 em { font-style: italic; color: var(--signal); } .seo-section h3 { font-family: var(--ff-display); font-size: clamp(22px, 1.6vw + 8px, 28px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; margin: 32px 0 14px; color: var(--ink); } .seo-section .seo-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--graphite); max-width: 60ch; margin: 0 0 16px; } .seo-section p { font-size: var(--fs-body); line-height: 1.65; color: var(--graphite); max-width: 64ch; margin: 0 0 16px; } .seo-list { display: grid; gap: 12px; margin: 16px 0 0; max-width: 64ch; } .seo-list li { position: relative; padding-left: 22px; font-size: var(--fs-body); line-height: 1.55; color: var(--graphite); } .seo-list li::before { content: "→"; position: absolute; left: 0; color: var(--signal); font-family: var(--ff-mono); } .seo-list--pains li::before { content: "✗"; color: var(--signal); } .seo-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 24px; margin-top: 18px; } .seo-links li { padding: 10px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent); } .seo-links a { font-family: var(--ff-sans); font-size: 14px; color: var(--ink); transition: color var(--d-hover) var(--ease); display: inline-flex; align-items: center; gap: 8px; } .seo-links a::before { content: "→"; color: var(--signal); font-family: var(--ff-mono); font-size: 13px; } @media (hover: hover) and (pointer: fine) { .seo-links a:hover { color: var(--signal); } } .seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); } .seo-tile { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 32px 26px 28px; border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); transition: background var(--d-ui) var(--ease); } @media (hover: hover) and (pointer: fine) { .seo-tile:hover { background: color-mix(in srgb, var(--signal) 5%, transparent); } .seo-tile:hover .seo-tile__cta { color: var(--signal); } } .seo-tile__num { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); } .seo-tile h3 { font-family: var(--ff-display); font-size: clamp(22px, 1.6vw + 8px, 28px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .seo-tile p { font-size: 14px; line-height: 1.55; color: var(--graphite); margin: 0; max-width: 44ch; } .seo-tile__cta { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); margin-top: 4px; transition: color var(--d-hover) var(--ease); } .seo-cta { background: var(--ink); color: var(--bone); padding: clamp(56px, 7vw, 96px) var(--gutter); text-align: center; position: relative; overflow: hidden; } .seo-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 50%); pointer-events: none; } .seo-cta__inner { position: relative; max-width: 560px; margin: 0 auto; } .seo-cta h2 { font-family: var(--ff-display); font-size: clamp(36px, 4vw, 56px); font-weight: 400; line-height: 1; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--bone); } .seo-cta p { font-size: var(--fs-lead); line-height: 1.5; color: color-mix(in srgb, var(--bone) 80%, transparent); margin: 0 0 28px; } .seo-cta__btns { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .seo-cta .btn { border-color: var(--bone); color: var(--bone); } .seo-cta .btn--primary { background: var(--bone); color: var(--ink); } .seo-cta .btn--ghost { background: transparent; color: var(--bone); } .seo-note { margin-top: 24px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--mute); } .seo-note a { color: var(--ink); border-bottom: 1px solid currentColor; } @media (max-width: 600px) { .seo-grid { grid-template-columns: 1fr; } .seo-links { grid-template-columns: 1fr; } } /* Comparison page — two-column versus layout */ .seo-versus { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 16px; } .seo-versus__col h2 { font-family: var(--ff-display); font-size: clamp(28px, 2.6vw, 40px); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .seo-versus__col h3 { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin: 24px 0 8px; } @media (max-width: 760px) { .seo-versus { grid-template-columns: 1fr; } } /* Calculator page — pricing tiers */ .seo-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); } .seo-tier { padding: 32px 28px; border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: var(--bone); display: grid; grid-template-rows: auto 1fr; gap: 18px; } .seo-tier--featured { background: color-mix(in srgb, var(--signal) 8%, var(--bone)); } .seo-tier__head { display: grid; gap: 6px; } .seo-tier__num { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--mute); } .seo-tier__head h3 { font-family: var(--ff-display); font-size: clamp(22px, 1.6vw + 8px, 28px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; margin: 4px 0 0; } .seo-tier__price { font-family: var(--ff-display); font-size: clamp(20px, 1.4vw + 8px, 26px); color: var(--signal); margin-top: 8px; } .seo-tier__duration { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); } /* Examples page — pattern cards */ .seo-patterns { display: grid; gap: 0; } .seo-pattern { padding: 28px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); display: grid; grid-template-columns: 60px 1fr; gap: 24px; } .seo-pattern:first-child { border-top: 0; padding-top: 8px; } .seo-pattern__num { font-family: var(--ff-display); font-size: clamp(40px, 4vw, 60px); line-height: 0.9; color: var(--signal); letter-spacing: -0.03em; } .seo-pattern h3 { font-family: var(--ff-display); font-size: clamp(22px, 1.6vw + 8px, 28px); font-weight: 400; line-height: 1.1; margin: 0 0 8px; } .seo-pattern p { font-size: var(--fs-body); color: var(--graphite); margin: 0 0 12px; max-width: 60ch; } @media (max-width: 600px) { .seo-pattern { grid-template-columns: 1fr; gap: 8px; } .seo-pattern__num { font-size: 40px; } } /* Glossary hub — alphabetical-ish list */ .seo-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); } .seo-glossary-item { padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); display: grid; grid-template-columns: 100px 1fr 24px; gap: 16px; align-items: baseline; color: var(--ink); transition: color var(--d-hover) var(--ease); } @media (hover: hover) and (pointer: fine) { .seo-glossary-item:hover { color: var(--signal); } } .seo-glossary-item__term { font-family: var(--ff-display); font-size: 22px; font-weight: 400; line-height: 1; } .seo-glossary-item__desc { font-size: 13px; line-height: 1.45; color: var(--graphite); } .seo-glossary-item__cta { font-family: var(--ff-mono); color: var(--mute); } @media (max-width: 600px) { .seo-glossary-item { grid-template-columns: 1fr; gap: 4px; } .seo-glossary-item__cta { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .hero__title [data-split] { transform: none; animation: none; } .manifest__term-line { clip-path: none !important; } }