/* ============================================================================ Make My Web — visual system Engineered, blueprint-grade. Cool near-black + warm signal accent. Archivo (structural grotesque) + JetBrains Mono (the technical voice). ============================================================================ */ /* ---- Fonts ---------------------------------------------------------------- */ /* fonts now loaded via in each (preconnect, non-blocking) */ /* ---- Tokens --------------------------------------------------------------- */ :root { /* surfaces */ --ink: #0C0E12; --ink-1: #101319; --ink-2: #161A22; --ink-3: #1D222C; /* lines */ --line: rgba(233, 236, 241, 0.09); --line-2: rgba(233, 236, 241, 0.17); --line-grid: rgba(233, 236, 241, 0.045); /* text */ --text: #E9ECF1; --text-2: #AAB2C0; --text-3: #6C7682; /* signal */ --accent: #F26B38; --accent-hi: #FF7E4D; --accent-dk: #DB5C2C; --accent-soft: rgba(242, 107, 56, 0.13); --accent-line: rgba(242, 107, 56, 0.42); /* type */ --sans: 'Archivo', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* spacing (8pt) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* radius */ --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 22px; /* shadow */ --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 18px 50px rgba(0,0,0,.45); --shadow-3: 0 40px 90px rgba(0,0,0,.55); /* layout */ --maxw: 1200px; --textw: 760px; --nav-h: 76px; --ease: cubic-bezier(.2,.8,.2,1); } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); background: var(--ink); color: var(--text); font-size: 17px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } strong { font-weight: 700; color: var(--text); } ::selection { background: var(--accent); color: #0C0E12; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---- Skip link ------------------------------------------------------------ */ .skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--accent); color: #0C0E12; font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: var(--r-1); transition: top .18s var(--ease); } .skip-link:focus { top: 14px; } /* ---- Layout helpers ------------------------------------------------------- */ .shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); } section { position: relative; } /* eyebrow — the mono technical voice */ .eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent-line); } .section-title { font-family: var(--sans); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--text); } /* ---- Buttons -------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; padding: 14px 24px; border-radius: var(--r-2); transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .08s var(--ease); white-space: nowrap; } .button:active { transform: scale(.975); } .button-primary { background: var(--accent); color: #0C0E12; } .button-primary:hover { background: var(--accent-hi); } .button-secondary { border: 1px solid var(--line-2); color: var(--text); } .button-secondary:hover { background: rgba(233,236,241,.05); border-color: var(--text-3); } .button::after { content: ""; } /* arrow utility for inline links */ .section-cta a, .case-cta a { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; transition: gap .2s var(--ease); } .section-cta a:hover { gap: 13px; } /* ============================================================================ HEADER / FOOTER (shared) ============================================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(12, 14, 18, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--line); } .header-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); } .brand { font-family: var(--sans); font-weight: 800; font-size: 18px; letter-spacing: -0.025em; color: var(--text); display: inline-flex; align-items: center; gap: 11px; } .brand::before { content: ""; width: 20px; height: 20px; flex: none; background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--text-3), var(--text-3)), linear-gradient(var(--text-3), var(--text-3)); background-repeat: no-repeat; background-size: 20px 4px, 16px 4px, 12px 4px; background-position: left 0, left 7px, left 14px; } .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav > a { font-size: 14.5px; font-weight: 500; color: var(--text-2); padding: 9px 14px; border-radius: var(--r-1); transition: color .16s var(--ease), background .16s var(--ease); } .site-nav > a:hover { color: var(--text); } .site-nav > a[aria-current="page"] { color: var(--text); } .site-nav > a[aria-current="page"]::after { content: ""; display: block; height: 1.5px; margin-top: 5px; background: var(--accent); border-radius: 2px; } .site-nav { flex: none; } .site-nav .nav-cta { margin-left: 10px; color: var(--text); border: 1px solid var(--line-2); font-weight: 600; white-space: nowrap; } .site-nav .nav-cta:hover { background: var(--accent); color: #0C0E12; border-color: var(--accent); } .site-nav .nav-cta::after { display: none; } .nav-toggle { display: none; } /* footer */ .site-footer { margin-top: var(--s-10); padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 56px) 56px; max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand nav" "tag nav" "legal legal"; gap: 6px 32px; align-items: center; } .footer-brand { grid-area: brand; font-family: var(--sans); font-weight: 800; font-size: 19px; letter-spacing: -0.025em; } .footer-tagline { grid-area: tag; font-family: var(--mono); font-size: 13px; color: var(--text-3); letter-spacing: 0.02em; } .footer-nav { grid-area: nav; display: flex; gap: 8px; flex-wrap: wrap; } .footer-nav a { font-size: 14px; color: var(--text-2); padding: 4px 10px; border-radius: var(--r-1); transition: color .16s; } .footer-nav a:hover { color: var(--accent); } .footer-legal { grid-area: legal; margin-top: 28px; font-family: var(--mono); font-size: 12px; color: var(--text-4, var(--text-3)); letter-spacing: 0.02em; } /* ============================================================================ MAIN spacing scaffold ============================================================================ */ main { padding-top: var(--nav-h); } main:focus { outline: none; } .breadcrumb { max-width: var(--maxw); margin-inline: auto; padding: 28px clamp(20px, 5vw, 56px) 0; font-family: var(--mono); font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 10px; } .breadcrumb a { color: var(--text-2); transition: color .16s; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb span[aria-hidden] { color: var(--text-3); } /* ============================================================================ HOME — HERO (full-bleed: the grid IS the circuit; words are the nodes) ============================================================================ */ .hero { position: relative; width: 100%; min-height: calc(100svh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); display: flex; flex-direction: column; overflow: hidden; } .hero-inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vh, 36px) clamp(20px, 5vw, 56px) clamp(80px, 12vh, 140px); } .hero-ribbon { position: relative; z-index: 1; width: 100%; border-top: 1px solid var(--line); background: rgba(12, 14, 18, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0.5; filter: saturate(0.4); transition: opacity .5s var(--ease), filter .5s var(--ease); } .hero-ribbon.lit { opacity: 1; filter: none; } .hero-ribbon-inner { max-width: var(--maxw); margin-inline: auto; padding: 18px clamp(20px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 56px); } .hero-ribbon-text { font-size: clamp(0.95rem, 1.3vw, 1.12rem); line-height: 1.5; color: var(--text-2); max-width: 58ch; } .hero-ribbon-actions { display: flex; gap: 12px; flex: none; } @media (max-width: 760px) { .hero-ribbon-inner { flex-direction: column; align-items: stretch; gap: 16px; text-align: center; } .hero-ribbon-actions { justify-content: center; } } .site-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero-inner { position: relative; z-index: 1; width: 100%; max-width: 960px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); text-align: center; } .hero .eyebrow { margin-bottom: 28px; } .hero-title { font-weight: 800; letter-spacing: -0.038em; line-height: 1.0; color: var(--text); font-size: clamp(2.8rem, 5.6vw, 4.75rem); text-wrap: balance; max-width: 20ch; margin-inline: auto; } .hero-strike { display: block; font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: 0.005em; line-height: 1.3; color: var(--text-3); margin-bottom: 18px; } .hero-lead { display: block; } /* the value words — wired checkpoints the circuit threads through (no separators; the lines pass through them and light them). */ .hero-values { margin-top: 34px; display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px clamp(11px, 1.6vw, 22px); font-family: var(--mono); font-weight: 400; font-size: clamp(0.7rem, 1.05vw, 0.9rem); letter-spacing: 0.04em; text-transform: uppercase; } /* a wired word in the headline / value row. --lit (0..1) drives a symmetric glow. */ .node-word { position: relative; white-space: nowrap; --lit: 0; --base: var(--text); --glow: #F26B38; color: color-mix(in oklab, var(--base) calc((1 - var(--lit)) * 100%), var(--glow)); text-shadow: 0 0 calc(26px * var(--lit)) color-mix(in srgb, var(--glow) calc(var(--lit) * 55%), transparent); } .hero-strike .node-word { --base: var(--text-3); } .hero-lead .node-word { --base: var(--text); } .hero-values .node-word { --base: var(--text-3); } .node-word[data-node="website"] { --glow: #FF7E4D; } .node-word[data-node="systems"] { --glow: #F26B38; font-weight: 900; letter-spacing: -0.035em; } .node-word[data-node="cost"] { --glow: #F2A33D; } .node-word[data-node="speed"] { --glow: #36C2B4; } .node-word[data-node="scale"] { --glow: #43C07F; } .node-word[data-node="secure"] { --glow: #5B8DEF; } .hero-subtitle { margin-top: 28px; margin-inline: auto; font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.55; color: var(--text-2); max-width: 46ch; } .hero-actions { margin-top: 38px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* in-flow CTA block, just below the hero — fades in on scroll */ .cta-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 48px); max-width: var(--maxw); margin: 0 auto clamp(40px, 7vw, 80px); padding: 4px clamp(20px, 5vw, 56px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); } .cta-bar-text { font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.55; color: var(--text-2); max-width: 54ch; } .cta-bar-actions { display: flex; gap: 12px; flex: none; } @media (max-width: 760px) { .cta-bar { flex-direction: column; align-items: stretch; gap: 18px; } .cta-bar-text { text-align: center; } .cta-bar-actions { justify-content: center; } } /* ============================================================================ HOME — MANIFESTO ============================================================================ */ .manifesto { max-width: var(--maxw); margin-inline: auto; padding: clamp(64px, 9vw, 128px) clamp(20px, 5vw, 56px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 72px); align-items: start; } .manifesto-headline { font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance; } .manifesto-body { display: flex; flex-direction: column; gap: 22px; } .manifesto-body p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--text-2); max-width: 52ch; } .manifesto-body p:last-child { color: var(--text); } /* ============================================================================ HOME — CAPABILITIES ============================================================================ */ .capabilities { max-width: var(--maxw); margin-inline: auto; padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 56px); border-top: 1px solid var(--line); } .capabilities .section-title { margin-bottom: 48px; max-width: 18ch; } .capability-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .capability { background: var(--ink); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; counter-increment: cap; transition: background .2s var(--ease); position: relative; } .capability::before { content: "0" counter(cap); font-family: var(--mono); font-size: 12.5px; color: var(--accent); letter-spacing: 0.1em; } .capability:hover { background: var(--ink-1); } .capability-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .capability-copy { color: var(--text-2); font-size: 1rem; line-height: 1.55; } .capabilities { counter-reset: cap; } .capabilities .section-cta { margin-top: 36px; } /* ============================================================================ HOME — WORK TEASER ============================================================================ */ .work-teaser { max-width: var(--maxw); margin-inline: auto; padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 56px); border-top: 1px solid var(--line); } .work-teaser-card { background: linear-gradient(180deg, var(--ink-1), var(--ink)); border: 1px solid var(--line); border-radius: var(--r-4); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(32px, 5vw, 64px); align-items: center; position: relative; overflow: hidden; } .work-teaser .eyebrow { margin-bottom: 22px; } .work-teaser-title { font-family: var(--sans); font-weight: 800; font-size: clamp(3rem, 6vw, 4.6rem); letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 8px; } .work-teaser-sub { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 24px; } .case-lede { font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.6; color: var(--text-2); max-width: 46ch; } .work-teaser .section-cta { margin-top: 28px; } /* mini architecture viz in teaser */ .coda-viz { align-self: stretch; border: 1px solid var(--line); border-radius: var(--r-3); background: linear-gradient(var(--line-grid) 1px, transparent 1px), linear-gradient(90deg, var(--line-grid) 1px, transparent 1px), var(--ink); background-size: 28px 28px, 28px 28px, auto; padding: 26px; display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 280px; } .coda-node { border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--ink-2); padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; justify-content: space-between; } .coda-node .tag { color: var(--text-3); font-size: 11px; } .coda-node.is-ai { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); } .coda-flow { height: 16px; display: flex; align-items: center; justify-content: center; color: var(--text-3); } /* ============================================================================ HOME — LAYERS ============================================================================ */ .layers { max-width: var(--maxw); margin-inline: auto; padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 56px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 72px); align-items: start; } .layers-head { position: sticky; top: 110px; } .layers .section-title { margin-bottom: 22px; text-wrap: balance; } .layers-note { color: var(--text-2); font-size: 1.05rem; line-height: 1.55; max-width: 32ch; margin-top: 4px; } .layers-note strong, .layers-note { } .layer-stack { display: flex; flex-direction: column; gap: 8px; counter-reset: layer; } .layer { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ink-1); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; counter-increment: layer; transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease); } .layer::before { content: counter(layer, decimal-leading-zero); font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text-3); width: 24px; flex: none; } .layer:hover { border-color: var(--line-2); transform: translateX(4px); } /* top layer = the website surface (what others deliver) */ .layer:first-child { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } .layer:first-child::before { color: var(--accent); } /* ============================================================================ CTA BANNER (shared on home / work / services) ============================================================================ */ .cta-banner { max-width: var(--maxw); margin: clamp(48px, 7vw, 96px) auto 0; padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px); border: 1px solid var(--line); border-radius: var(--r-4); background: radial-gradient(120% 140% at 100% 0%, rgba(242,107,56,.10), transparent 55%), var(--ink-1); text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-grid) 1px, transparent 1px), linear-gradient(90deg, var(--line-grid) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 70%); opacity: .7; } .cta-banner > * { position: relative; } .cta-headline { font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.032em; line-height: 1.05; max-width: 22ch; margin-inline: auto; text-wrap: balance; } .cta-subtitle { margin-top: 18px; color: var(--text-2); font-size: clamp(1.02rem, 1.3vw, 1.18rem); } .cta-banner .button { margin-top: 32px; } /* ============================================================================ WORK — CASE STUDY ============================================================================ */ .case { max-width: 980px; margin-inline: auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 56px) 0; } .case-header { padding-bottom: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); margin-bottom: clamp(40px, 6vw, 72px); } .case-header .eyebrow { margin-bottom: 26px; } .case-title { font-weight: 800; font-size: clamp(3.4rem, 9vw, 7rem); letter-spacing: -0.045em; line-height: 0.92; margin-bottom: 22px; } .case-tagline { font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.35; color: var(--text); font-weight: 500; max-width: 24ch; letter-spacing: -0.015em; } .case-meta { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; margin-bottom: clamp(40px, 6vw, 72px); background: var(--line); } .case-meta > div { flex: 1 1 0; min-width: 150px; background: var(--ink); padding: 22px 24px; } .case-meta dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .case-meta dd { font-size: 1.02rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .case-section { margin-bottom: clamp(44px, 6vw, 80px); } .case-section > h2 { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; } .case-section > h2::before { content: ""; width: 22px; height: 1px; background: var(--accent-line); } .case-section > p { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.55; color: var(--text); max-width: 60ch; letter-spacing: -0.012em; font-weight: 400; } /* depth — the substance */ .case-depth { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .case-depth li { background: var(--ink); padding: clamp(26px, 3vw, 38px); font-size: 1.02rem; line-height: 1.6; color: var(--text-2); counter-increment: depth; position: relative; transition: background .2s var(--ease); } .case-depth { counter-reset: depth; } .case-depth li:hover { background: var(--ink-1); } .case-depth li::before { content: counter(depth, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 12.5px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 16px; } .case-depth li strong { display: block; color: var(--text); font-size: 1.12rem; margin-bottom: 8px; letter-spacing: -0.015em; } /* stack chips */ .stack-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .stack-list li { font-family: var(--mono); font-size: 14px; color: var(--text-2); padding: 18px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; letter-spacing: -0.005em; transition: color .16s var(--ease), background .16s var(--ease); } .stack-list li:first-child { border-top: none; } .stack-list li::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--accent); border-radius: 1px; transform: rotate(45deg); } .stack-list li:hover { background: var(--ink-1); color: var(--text); } /* closer */ .case-closer { border-top: 1px solid var(--line); padding-top: clamp(44px, 6vw, 72px); } .case-closer > p { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.4; color: var(--text); font-weight: 500; letter-spacing: -0.02em; max-width: none; } /* venture note */ .venture-note { margin-top: clamp(40px, 5vw, 64px); padding-left: clamp(22px, 2.5vw, 34px); border-left: 2px solid var(--accent-line); } .venture-note p { font-size: 1.02rem; color: var(--text-2); line-height: 1.65; max-width: 62ch; } .venture-note strong { color: var(--accent); letter-spacing: 0.02em; } /* ============================================================================ SERVICES ============================================================================ */ .page-intro { max-width: var(--maxw); margin-inline: auto; padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 56px) clamp(40px, 5vw, 64px); } .page-intro .eyebrow { margin-bottom: 24px; } .page-title { font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; max-width: 16ch; } .page-lede { margin-top: 28px; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--text-2); max-width: 50ch; } .service { max-width: var(--maxw); margin-inline: auto; padding: clamp(44px, 6vw, 80px) clamp(20px, 5vw, 56px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); counter-increment: svc; align-items: start; } main { counter-reset: svc; } .service-head-col { position: sticky; top: 110px; } .service-name { font-weight: 800; font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.05; } .service-name::before { content: "0" counter(svc); display: block; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 18px; } .service-lede { font-family: var(--sans); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4; color: var(--text); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 22px; } .service-copy { font-size: 1.05rem; line-height: 1.62; color: var(--text-2); margin-bottom: 28px; max-width: 56ch; } .service-points { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; } .service-points li { background: var(--ink); padding: 14px 18px; font-family: var(--mono); font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 12px; letter-spacing: -0.005em; transition: background .16s var(--ease), color .16s var(--ease); } .service-points li::before { content: "+"; color: var(--accent); font-weight: 600; flex: none; } .service-points li:hover { background: var(--ink-1); color: var(--text); } /* ============================================================================ CONTACT ============================================================================ */ .visually-relevant { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .contact-grid { max-width: var(--maxw); margin-inline: auto; padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 56px) clamp(48px, 7vw, 96px); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 72px); align-items: start; } .contact-form-section { border: 1px solid var(--line); border-radius: var(--r-4); background: var(--ink-1); padding: clamp(28px, 4vw, 48px); } .contact-form { display: flex; flex-direction: column; gap: 22px; } .field { display: flex; flex-direction: column; gap: 9px; } .field label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 8px; } .field .optional { color: var(--text-3); text-transform: none; letter-spacing: 0.02em; } .field input, .field textarea { font-family: var(--sans); font-size: 16px; color: var(--text); background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 14px 16px; transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); width: 100%; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--text-3); } .field input:hover, .field textarea:hover { border-color: var(--text-3); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--ink-1); } .contact-form .button { margin-top: 6px; align-self: flex-start; padding: 16px 30px; } .contact-direct { border-top: none; } .contact-direct h2 { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .contact-direct p { color: var(--text-2); font-size: 1.05rem; line-height: 1.6; margin-bottom: 18px; } .contact-direct a[href^="mailto"] { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--accent-line); transition: color .16s, border-color .16s; } .contact-direct a[href^="mailto"]:hover { color: var(--accent); border-color: var(--accent); } .contact-expect { margin-top: 24px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ink); font-size: 0.96rem; color: var(--text-2); } /* ============================================================================ SCROLL REVEAL ============================================================================ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================================ MOTION 2 — CODA: the pipeline executes once on arrival Notes ingest, the AI node reasons, a real coded result is audited at the bottom. Driven by the panel's own .stage.in so it runs as the screen lands. ============================================================================ */ .coda-viz { position: relative; } .coda-node { position: relative; overflow: hidden; } .coda-ai-name { white-space: nowrap; } /* connector wire between nodes, with a pulse that travels the data down it */ .coda-flow { position: relative; height: 26px; display: block; } .coda-flow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: var(--line-2); } .coda-flow > i { position: absolute; left: 50%; top: 0; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0; } .work-teaser.stage.in .coda-flow:nth-of-type(2) > i { animation: codaPulse .55s var(--ease) .5s both; } .work-teaser.stage.in .coda-flow:nth-of-type(4) > i { animation: codaPulse .55s var(--ease) 2.0s both; } @keyframes codaPulse { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } } /* input node ingests: a brief accent border + a scan line drawn across it */ .work-teaser.stage.in .coda-node.n-in { animation: codaBorder .8s var(--ease) .12s both; } @keyframes codaBorder { 0% { border-color: var(--line-2); } 30% { border-color: var(--accent); } 100% { border-color: var(--line-2); } } .coda-node.n-in::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; } .work-teaser.stage.in .coda-node.n-in::after { animation: codaIngest .7s var(--ease) .18s both; } @keyframes codaIngest { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: .9; } 85% { opacity: .9; transform: translateY(40px); } 100% { opacity: 0; transform: translateY(40px); } } /* AI node: a one-shot scan during reasoning, then a calm idle glow */ .coda-node.is-ai { transition: box-shadow .3s var(--ease), border-color .3s var(--ease); } .coda-node.is-ai::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; } .work-teaser.stage.in .coda-node.is-ai::after { animation: codaIngest 1.0s var(--ease) .95s both; } .work-teaser.stage.in .coda-node.is-ai { animation: codaIdle 3.6s var(--ease) 2.7s infinite; } @keyframes codaIdle { 0%, 100% { box-shadow: none; border-color: var(--accent-line); } 50% { box-shadow: 0 0 0 1px var(--accent-line), 0 0 18px rgba(242,107,56,.22); border-color: var(--accent); } } /* reasoning dots blink while the AI thinks, then fade out */ .coda-think { display: inline-flex; gap: 5px; align-items: center; opacity: 0; } .coda-think > i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .3; } .work-teaser.stage.in .coda-think { animation: codaThinkShow 1.5s var(--ease) .9s both; } @keyframes codaThinkShow { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } } .work-teaser.stage.in .coda-think > i { animation: codaDot .9s var(--ease) infinite; } .work-teaser.stage.in .coda-think > i:nth-child(2) { animation-delay: .15s; } .work-teaser.stage.in .coda-think > i:nth-child(3) { animation-delay: .3s; } @keyframes codaDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } /* the concrete coded result resolves at the bottom, then the audit tick fires */ .coda-result { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; opacity: 0; transform: translateY(4px); } .coda-node.n-out > span:first-child { white-space: nowrap; } .coda-node.n-in, .coda-node.is-ai, .coda-node.n-out { gap: 12px; } .coda-result b { color: var(--accent); font-weight: 600; } .coda-tick { color: var(--success); opacity: 0; } .work-teaser.stage.in .coda-result { animation: codaResult .5s var(--ease) 2.35s both; } .work-teaser.stage.in .coda-tick { animation: codaTickPop .45s var(--ease) 2.7s both; } @keyframes codaResult { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes codaTickPop { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: scale(1); } } /* ============================================================================ MOTION 3 — AI REASONING PANEL (Services · AI agents) A console that shows the model reason: query → grounded steps → cited answer. "Reasons, not just responds." JS-driven; this styles the surface + states. ============================================================================ */ .reasoning-demo { margin: 28px 0 0; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--ink); overflow: hidden; font-family: var(--mono); } .rd-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); background: var(--ink-1); } .rd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: rdDot 1.8s var(--ease) infinite; } @keyframes rdDot { 0%,100%{opacity:1} 50%{opacity:.3} } .rd-head .rd-status { margin-left: auto; color: var(--text-3); text-transform: none; letter-spacing: 0.02em; } .rd-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; min-height: 248px; } .rd-q { font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--text); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ink-1); } .rd-q::before { content: "you"; display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .rd-q .rd-typed::after { content: ""; display: inline-block; width: 7px; height: 1.05em; vertical-align: -2px; margin-left: 2px; background: var(--accent); animation: rdCaret .9s steps(1) infinite; } .rd-q.done .rd-typed::after { display: none; } @keyframes rdCaret { 0%,50%{opacity:1} 51%,100%{opacity:0} } .rd-steps { display: flex; flex-direction: column; gap: 8px; } .rd-step { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .rd-step.in { opacity: 1; transform: none; } .rd-step .rd-tag { flex: none; font-size: 10px; letter-spacing: 0.1em; color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--r-1); padding: 2px 6px; background: var(--accent-soft); } .rd-step .rd-label { flex: 1; min-width: 0; } .rd-step .rd-spin { width: 13px; height: 13px; flex: none; border: 1.75px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: rdSpin .9s linear infinite; } .rd-step.ok .rd-spin { display: none; } .rd-step .rd-check { display: none; color: var(--success); flex: none; } .rd-step.ok .rd-check { display: inline; } .rd-step.ok { color: var(--text-3); } @keyframes rdSpin { to { transform: rotate(360deg); } } .rd-answer { margin-top: auto; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--text); padding: 14px; border: 1px solid var(--accent-line); border-radius: var(--r-2); background: var(--accent-soft); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .rd-answer.in { opacity: 1; transform: none; } .rd-answer .rd-atext { display: block; } .rd-answer::before { content: "answer"; display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .rd-cite { margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 7px; } .rd-cite::before { content: ""; width: 5px; height: 5px; background: var(--text-3); transform: rotate(45deg); } /* ============================================================================ REDUCED MOTION — soften, don't kill. Drop large MOVEMENT (translate / parallax / flying packet / scan sweep) but keep vestibular-safe life: opacity glows + pulses, and final content states. ============================================================================ */ @media (prefers-reduced-motion: reduce) { /* Reasoning panel: show the completed reasoning (no streaming movement), keep the live dot pulsing (opacity-only). */ .rd-step .rd-spin, .rd-q .rd-typed::after { animation: none; } .rd-step, .rd-answer { opacity: 1; transform: none; } } /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 940px) { .manifesto { grid-template-columns: 1fr; gap: 28px; } .work-teaser-card { grid-template-columns: 1fr; } .layers { grid-template-columns: 1fr; gap: 32px; } .layers-head { position: static; } .service { grid-template-columns: 1fr; gap: 24px; } .service-head-col { position: static; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { body { font-size: 16px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-1); color: var(--text); } .nav-toggle svg { width: 20px; height: 20px; } .site-nav { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: rgba(12,14,18,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); padding: 16px clamp(20px, 5vw, 56px) 24px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); } .site-nav.open { opacity: 1; transform: none; pointer-events: auto; } .site-nav > a { padding: 13px 14px; font-size: 16px; border-radius: var(--r-2); } .site-nav > a[aria-current="page"]::after { display: none; } .site-nav > a[aria-current="page"] { color: var(--accent); } .site-nav .nav-cta { margin-left: 0; margin-top: 8px; text-align: center; } .capability-list { grid-template-columns: 1fr; } .case-depth { grid-template-columns: 1fr; } .case-meta > div { flex-basis: 100%; } .footer { } } @media (max-width: 960px) { .hero-title { font-size: clamp(2.3rem, 9vw, 3.4rem); } .hero-strike { font-size: clamp(0.92rem, 2.6vw, 1.2rem); margin-bottom: 12px; } .hero-values { font-size: clamp(0.6rem, 1.7vw, 0.8rem); gap: 8px 16px; margin-top: 22px; } .hero-subtitle { font-size: clamp(0.95rem, 2vw, 1.12rem); } } @media (max-width: 760px) { .hero { height: calc(100dvh - var(--nav-h)); min-height: 0; } .hero-inner { padding: clamp(64px, 11vh, 128px) 20px 28px; justify-content: flex-start; } .hero-ribbon { display: none; } .hero-title { line-height: 1.2; } .hero-values { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: clamp(22px, 7vw, 48px); row-gap: clamp(56px, 11vh, 96px); font-size: clamp(0.66rem, 3vw, 0.88rem); letter-spacing: 0.01em; } } @media (max-width: 560px) { .hero-title { font-size: clamp(1.85rem, 8.4vw, 2.5rem); } .hero-values { font-size: clamp(0.72rem, 3.4vw, 0.92rem); gap: clamp(6px, 1.6vh, 12px); } } @media (max-width: 400px) { .hero-title { font-size: clamp(1.6rem, 8vw, 2rem); } } @media (max-width: 480px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .button { width: 100%; } } /* ============================================================================ LOGO MARKS (supplied wordmark replaces the CSS bars + text) ============================================================================ */ .brand::before { content: none; } .brand { gap: 0; } .brand-logo { height: 44px; width: auto; } .footer-logo { height: 58px; width: auto; } /* ============================================================================ SNAP SCROLL (home) — hero leaves in one decisive scroll, sections land ============================================================================ */ html, body { scroll-snap-type: none; scroll-padding-top: var(--nav-h); } .snap { scroll-snap-align: start; } .hero.snap { scroll-snap-align: start; } /* full-screen stepped panels: every section fills the viewport, content centered */ .manifesto.snap, .capabilities.snap, .work-teaser.snap, .layers.snap, .closing.snap { min-height: 100vh; min-height: 100svh; } .manifesto.snap, .layers.snap { align-content: center; } .capabilities.snap, .work-teaser.snap, .closing.snap { display: flex; flex-direction: column; justify-content: center; } /* Mobile: the deck is disabled in JS below 760px (normal document scroll), so panels must size to their content rather than being pinned to the viewport — otherwise tall ones (the layer stack) clip. Also compacts the layer cards. */ @media (max-width: 760px) { /* Opaque so the fixed background canvas (its diagram + endpoint labels) can't bleed through scrolling content. The hero stays transparent and keeps the live canvas; everything below sits on solid ink. */ .manifesto.snap, .capabilities.snap, .work-teaser.snap, .layers.snap, .closing.snap { min-height: auto; padding-block: clamp(44px, 8vh, 76px); position: relative; z-index: 1; background: var(--ink); } .layer { padding: 13px 16px; gap: 12px; font-size: 0.95rem; } .layer::before { width: 20px; } .layer-stack { gap: 7px; } } .site-footer { scroll-snap-align: start; } /* hero content eases away as you scroll past it (driven from main.js) */ .hero-inner { transition: opacity .45s var(--ease), transform .45s var(--ease); } /* hero scroll cue */ .hero-scrollcue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--text-3); pointer-events: none; transition: opacity .4s var(--ease); } .hero-scrollcue-label { padding-left: 0.36em; } .hero-scrollcue-line { width: 1px; height: 36px; background: linear-gradient(var(--text-3), transparent); position: relative; overflow: hidden; } .hero-scrollcue-line::after { content: ""; position: absolute; left: 0; top: -45%; width: 1px; height: 45%; background: var(--accent); animation: cueDrop 2.2s var(--ease) infinite; } @keyframes cueDrop { 0% { top: -45%; } 70%, 100% { top: 100%; } } @media (max-width: 760px) { .hero-scrollcue { display: none; } } /* ============================================================================ DEV-STYLE SECTION ENTRANCES ("the engineering, demonstrated") ============================================================================ */ /* (the per-section accent build-line was removed at the user's request) */ .stage { position: relative; } /* headings print in, left to right */ .stage .section-title, .stage .manifesto-headline, .stage .closing-q { clip-path: inset(0 100% 0 -2px); transition: clip-path .85s var(--ease) .1s; } .stage.in .section-title, .stage.in .manifesto-headline, .stage.in .closing-q { clip-path: inset(0 -4px 0 -2px); } /* capability cards assemble in sequence */ .stage .capability { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .stage.in .capability { opacity: 1; transform: none; } .stage.in .capability:nth-child(1) { transition-delay: .18s; } .stage.in .capability:nth-child(2) { transition-delay: .30s; } .stage.in .capability:nth-child(3) { transition-delay: .42s; } .stage.in .capability:nth-child(4) { transition-delay: .54s; } /* layer stack: the surface unrolls downward to reveal the system beneath. Each layer grows into view from its top edge (clip-path), top → bottom, and a short accent bar locks down the left as each layer comes online. */ .stage .layer { opacity: 0; transform: translateY(-12px); clip-path: inset(0 0 100% 0); transition: opacity .5s var(--ease), transform .55s var(--ease), clip-path .6s var(--ease); } .stage.in .layer { opacity: 1; transform: none; clip-path: inset(0 0 0 0); animation: layerLock .6s var(--ease) forwards; } .stage.in .layer:nth-child(1) { transition-delay: .05s; animation-delay: .05s; } .stage.in .layer:nth-child(2) { transition-delay: .11s; animation-delay: .11s; } .stage.in .layer:nth-child(3) { transition-delay: .17s; animation-delay: .17s; } .stage.in .layer:nth-child(4) { transition-delay: .23s; animation-delay: .23s; } .stage.in .layer:nth-child(5) { transition-delay: .29s; animation-delay: .29s; } .stage.in .layer:nth-child(6) { transition-delay: .35s; animation-delay: .35s; } .stage.in .layer:nth-child(7) { transition-delay: .41s; animation-delay: .41s; } .stage.in .layer:nth-child(8) { transition-delay: .47s; animation-delay: .47s; } @keyframes layerLock { 0% { box-shadow: -3px 0 0 0 var(--accent); } 55% { box-shadow: -3px 0 0 0 var(--accent); } 100% { box-shadow: -3px 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { /* soften, don't kill: keep the opacity fades, drop large moves */ .stage .section-title, .stage .manifesto-headline, .stage .closing-q { clip-path: none; } .stage .capability, .stage.in .capability { transform: none; } .stage .layer, .stage.in .layer { transform: none; clip-path: none; animation: none; } /* Coda: show the completed pipeline, no travelling pulses */ .coda-flow > i { display: none; } .coda-node.n-in::after, .coda-node.is-ai::after { display: none; } .work-teaser.stage.in .coda-node.is-ai { animation: codaIdle 3.6s var(--ease) infinite; } .coda-think { display: none; } .coda-result, .coda-tick { opacity: 1; transform: none; } .work-teaser.stage.in .coda-result, .work-teaser.stage.in .coda-tick { animation: none; } } /* ============================================================================ HOME — CLOSING ("final ask" before the footer) ============================================================================ */ .closing { max-width: var(--maxw); margin: clamp(64px, 9vw, 120px) auto 0; padding: clamp(80px, 11vw, 150px) clamp(24px, 5vw, 64px) clamp(72px, 9vw, 120px); border-top: 1px solid var(--line); text-align: center; position: relative; overflow: hidden; } .closing::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-grid) 1px, transparent 1px), linear-gradient(90deg, var(--line-grid) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(75% 80% at 50% 0%, #000, transparent 72%); mask-image: radial-gradient(75% 80% at 50% 0%, #000, transparent 72%); opacity: .8; } .closing-inner { position: relative; max-width: 720px; margin-inline: auto; } .closing .eyebrow { margin-bottom: 26px; white-space: nowrap; justify-content: center; } .closing-statement { font-family: var(--mono); font-size: clamp(0.92rem, 1.35vw, 1.12rem); line-height: 1.75; letter-spacing: 0.01em; color: var(--text-2); max-width: 52ch; margin: 0 auto; } .closing-q { margin-top: 30px; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.035em; line-height: 1.0; text-wrap: balance; max-width: 14ch; margin-inline: auto; } .closing-sub { margin-top: 18px; color: var(--text-3); font-size: clamp(1rem, 1.3vw, 1.15rem); } .closing-actions { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 480px) { .closing-actions { flex-direction: column; align-items: stretch; } .closing-actions .button { width: 100%; } } /* ============================================================================ DECK MODE (home) — each section is a full-screen panel. Advancing crossfades and glides the previous screen out while the next comes in. No page scroll. Scoped to body.deck so the other pages keep normal document flow. ============================================================================ */ body.deck { overflow: hidden; } .deck .snap { position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; margin: 0 auto; min-height: 0; z-index: 1; border-top: none; background: transparent; opacity: 0; overflow-y: auto; transition: opacity .6s var(--ease), transform .72s var(--ease); will-change: opacity, transform; } .deck .hero.snap { opacity: 1; } /* first panel paints before JS boots */ .deck .stage::after { content: none; } .deck .closing::before { display: none; } /* the global grid replaces the local one */ /* closing screen: the ask fills the panel like the upper sections; footer sits quietly at the bottom, borderless and compact. */ .deck .closing { justify-content: flex-start; padding-top: 0; padding-bottom: 0; } .deck .closing-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; padding: clamp(24px,4vh,56px) 0; } .deck .closing-inner { max-width: 1040px; } .deck .closing .closing-statement { max-width: 60ch; } .deck .closing .closing-q { max-width: 20ch; font-size: clamp(2.6rem, 6vw, 4.6rem); } .deck .closing .site-footer { flex: none; margin-top: 0; border-top: none; padding: 0 clamp(20px,5vw,56px) clamp(28px,4vh,44px); align-items: center; } .deck .closing .footer-legal { margin-top: 22px; } @media (prefers-reduced-motion: reduce) { .deck .snap { transition: opacity .5s var(--ease); transform: none !important; } }