/* ============================================================
Nick Automations — visual system matched to the AgenAI reference
Urbanist type · gray canvas · embossed cards · brand orange #FF6B35
============================================================ */
:root {
--canvas: #edecec;
--sheet: #ffffff;
--card: #f4f4f5;
--ink: #0a0a0a;
--ink-soft: #aeaeb2;
/* #6d6e72 measured 4.32:1 on the #edecec canvas — just under WCAG AA. Darkened the
minimum amount that clears 4.5:1 (4.51) so footer copy passes without a visible shift. */
--muted: #6a6b6f;
--line: #e4e4e6;
--accent: #ff6b35;
--accent-dark: #e8551f;
/* WCAG-safe accent for small text on light surfaces (>=4.5:1 on #fff/#f5f5f5/#edecec) */
--accent-strong: #c43a08;
--ic-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8.3 12.4l2.6 2.6 4.8-5.4'/%3E%3C/svg%3E");
--ic-boxes: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z' /%3E %3Cpath d='m7 16.5-4.74-2.85' /%3E %3Cpath d='m7 16.5 5-3' /%3E %3Cpath d='M7 16.5v5.17' /%3E %3Cpath d='M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z' /%3E %3Cpath d='m17 16.5-5-3' /%3E %3Cpath d='m17 16.5 4.74-2.85' /%3E %3Cpath d='M17 16.5v5.17' /%3E %3Cpath d='M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z' /%3E %3Cpath d='M12 8 7.26 5.15' /%3E %3Cpath d='m12 8 4.74-2.85' /%3E %3Cpath d='M12 13.5V8' /%3E%3C/svg%3E");
--ic-calendar-clock: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14v2.2l1.6 1' /%3E %3Cpath d='M16 2v4' /%3E %3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5' /%3E %3Cpath d='M3 10h5' /%3E %3Cpath d='M8 2v4' /%3E %3Ccircle cx='16' cy='16' r='6' /%3E%3C/svg%3E");
--ic-chart-line: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16' /%3E %3Cpath d='m19 9-5 5-4-4-3 3' /%3E%3C/svg%3E");
--ic-credit-card: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2' /%3E %3Cline x1='2' x2='22' y1='10' y2='10' /%3E%3C/svg%3E");
--ic-file-search: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E %3Cpath d='M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3' /%3E %3Cpath d='m9 18-1.5-1.5' /%3E %3Ccircle cx='5' cy='14' r='3' /%3E%3C/svg%3E");
--ic-layout-dashboard: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1' /%3E %3Crect width='7' height='5' x='14' y='3' rx='1' /%3E %3Crect width='7' height='9' x='14' y='12' rx='1' /%3E %3Crect width='7' height='5' x='3' y='16' rx='1' /%3E%3C/svg%3E");
--ic-linkedin: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z' /%3E %3Crect width='4' height='12' x='2' y='9' /%3E %3Ccircle cx='4' cy='4' r='2' /%3E%3C/svg%3E");
--ic-lock: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2' /%3E %3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' /%3E%3C/svg%3E");
--ic-network: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1' /%3E %3Crect x='2' y='16' width='6' height='6' rx='1' /%3E %3Crect x='9' y='2' width='6' height='6' rx='1' /%3E %3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3' /%3E %3Cpath d='M12 12V8' /%3E%3C/svg%3E");
--ic-receipt: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' /%3E %3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' /%3E %3Cpath d='M12 17.5v-11' /%3E%3C/svg%3E");
--ic-send: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z' /%3E %3Cpath d='m21.854 2.147-10.94 10.939' /%3E%3C/svg%3E");
--ic-sparkles: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z' /%3E %3Cpath d='M20 2v4' /%3E %3Cpath d='M22 4h-4' /%3E %3Ccircle cx='4' cy='20' r='2' /%3E%3C/svg%3E");
--ic-target: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Ccircle cx='12' cy='12' r='6' /%3E %3Ccircle cx='12' cy='12' r='2' /%3E%3C/svg%3E");
--ic-users: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E %3Cpath d='M16 3.128a4 4 0 0 1 0 7.744' /%3E %3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87' /%3E %3Ccircle cx='9' cy='7' r='4' /%3E%3C/svg%3E");
/* Lucide icons (MIT, lucide.dev) as masks, so each one tints from a token
instead of hard-coding a colour into the SVG. One per deliverable line. */
--ic-activity: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2' /%3E%3C/svg%3E");
--ic-arrow-left-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4' /%3E %3Cpath d='M4 7h16' /%3E %3Cpath d='m16 21 4-4-4-4' /%3E %3Cpath d='M20 17H4' /%3E%3C/svg%3E");
--ic-bell-ring: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0' /%3E %3Cpath d='M22 8c0-2.3-.8-4.3-2-6' /%3E %3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' /%3E %3Cpath d='M4 2C2.8 3.7 2 5.7 2 8' /%3E%3C/svg%3E");
--ic-book-open: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14' /%3E %3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' /%3E%3C/svg%3E");
--ic-bot: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8' /%3E %3Crect width='16' height='12' x='4' y='8' rx='2' /%3E %3Cpath d='M2 14h2' /%3E %3Cpath d='M20 14h2' /%3E %3Cpath d='M15 13v2' /%3E %3Cpath d='M9 13v2' /%3E%3C/svg%3E");
--ic-clipboard-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E %3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E %3Cpath d='m9 14 2 2 4-4' /%3E%3C/svg%3E");
--ic-code-xml: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 16 4-4-4-4' /%3E %3Cpath d='m6 8-4 4 4 4' /%3E %3Cpath d='m14.5 4-5 16' /%3E%3C/svg%3E");
--ic-compass: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z' /%3E %3Ccircle cx='12' cy='12' r='10' /%3E%3C/svg%3E");
--ic-database: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3' /%3E %3Cpath d='M3 5V19A9 3 0 0 0 21 19V5' /%3E %3Cpath d='M3 12A9 3 0 0 0 21 12' /%3E%3C/svg%3E");
--ic-gauge: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4' /%3E %3Cpath d='M3.34 19a10 10 0 1 1 17.32 0' /%3E%3C/svg%3E");
--ic-map: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z' /%3E %3Cpath d='M15 5.764v15' /%3E %3Cpath d='M9 3.236v15' /%3E%3C/svg%3E");
--ic-plug: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5' /%3E %3Cpath d='M9 8V2' /%3E %3Cpath d='M15 8V2' /%3E %3Cpath d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z' /%3E%3C/svg%3E");
--ic-rocket: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z' /%3E %3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z' /%3E %3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0' /%3E %3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5' /%3E%3C/svg%3E");
--ic-route: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3' /%3E %3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15' /%3E %3Ccircle cx='18' cy='5' r='3' /%3E%3C/svg%3E");
--ic-shield-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E");
--ic-smartphone: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2' /%3E %3Cpath d='M12 18h.01' /%3E%3C/svg%3E");
--ic-workflow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='8' x='3' y='3' rx='2' /%3E %3Cpath d='M7 11v4a2 2 0 0 0 2 2h4' /%3E %3Crect width='8' height='8' x='13' y='13' rx='2' /%3E%3C/svg%3E");
--ic-zap: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z' /%3E%3C/svg%3E");
--accent-soft: rgba(255, 107, 53, 0.12);
--accent-tint: rgb(255, 240, 232);
--dark: #0c0c0c;
--dark-card: #161617;
--dark-line: #2a2a2c;
--r-sheet: 40px;
--r-card: 24px;
--font-head: "Urbanist", sans-serif;
--font-body: "Urbanist", sans-serif;
--font-mono: "Fragment Mono", monospace;
/* band + content widths, read off the reference (band 1440, content 1328 = 56px inset) */
--band: 1440px;
--content: 1328px;
/* the reference's signature embossed-card shadow (exact computed values) */
--emboss: inset 0 4px 0 rgba(255, 255, 255, 0.6), inset 0 -8px 0 rgba(0, 0, 0, 0.05),
0 3px 3px rgba(0, 0, 0, 0.1), 0 7.77px 2.21px rgba(0, 0, 0, 0.06);
--emboss-white: inset 0 4px 0 rgba(255, 255, 255, 0.9), inset 0 -8px 0 rgba(0, 0, 0, 0.04),
0 3px 3px rgba(0, 0, 0, 0.08), 0 7.77px 2.21px rgba(0, 0, 0, 0.05);
--emboss-hover: inset 0 4px 0 rgba(255, 255, 255, 0.6), inset 0 -8px 0 rgba(0, 0, 0, 0.05),
0 6px 6px rgba(0, 0, 0, 0.1), 0 18px 32px rgba(0, 0, 0, 0.09);
/* dark embossed card (about card / dark chips) */
--emboss-dark: inset 0 4px 0 rgba(255, 255, 255, 0.3), inset 0 -8px 0 #2e2e2e,
0 3px 3px rgba(0, 0, 0, 0.1), 0 7.77px 2.21px rgba(0, 0, 0, 0.06);
/* heading gradient fills — the reference paints headings, it never uses a gray ghost line */
--head-grad: linear-gradient(93deg, #61666a 0%, #292c2e 36%);
--head-grad-hero: linear-gradient(355deg, #43484d 0%, #292c2e 100%);
--head-ink: #292c2e;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-slide: cubic-bezier(0.16, 1, 0.3, 1);
}
::selection { background: var(--accent-tint); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--canvas);
color: var(--ink);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
.container {
width: min(var(--content), calc(100% - 48px));
margin: 0 auto;
}
.container--narrow { width: min(856px, calc(100% - 48px)); }
/* Section seam retuned 2026-08-11 against the reference: its content-end -> next-chip
distance measures ~150-200px (services->works 155, features->tools 198), while ours ran
220-280. 76+76 lands the seam at ~152. The space the reference saves here it spends
INSIDE the header block (chip->h2 is 77px there, see .h2 rhythm rule below). */
.section { padding: 76px 0; }
.section-pad { padding: clamp(48px, 5.3vw, 76px) 0; }
/* boxed shell — the reference contains every band in a centered rounded card */
/* reference band gutter: 32px total at >=810px, 24px below (from the export's `sizes` math) */
.sheet,
.contact-sheet,
.section--dark,
.hero-card,
.slab {
width: min(var(--band), calc(100% - 32px));
margin-left: auto;
margin-right: auto;
}
/* .hero already supplies the 16px gutters via its own padding (as the reference's .hero does),
so the card must fill that padded box — subtracting another 32px would inset it twice. */
.hero-card { width: min(var(--band), 100%); }
@media (max-width: 809px) {
.sheet,
.contact-sheet,
.section--dark,
.slab { width: min(var(--band), calc(100% - 24px)); }
}
/* work cards sit at content width (1328), inset 56px inside the band */
.work-card {
width: min(var(--content), calc(100% - 48px));
margin-left: auto;
margin-right: auto;
}
/* white "sheet" band — the reference wraps sections in big rounded white cards */
/* the reference's white sheets are rounded at the top only, meeting the canvas below */
.sheet {
background: var(--sheet);
border-radius: 24px 24px 0 0;
}
/* One continuous white slab: in the reference, services → works → process → comparison →
features are five white bands butted together (2109–10101), reading as a single sheet
rounded 24px at the top and 40px at the bottom. */
.slab {
margin: 0 auto;
background: var(--sheet);
border-radius: 24px 24px 40px 40px;
}
.slab > .section:last-child { padding-bottom: clamp(72px, 9vw, 130px); }
/* inner content sits 56px in from each sheet edge (1440 band → 1328 content) */
.sheet .container,
.contact-sheet .container,
.section--dark .container {
width: calc(100% - clamp(48px, 7.8vw, 112px));
}
/* work card is itself the content width; its inner frame is a 12px picture mat */
.work-card .container { width: 100%; }
/* ---------- typography ---------- */
.h2 {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(38px, 5vw, 72px);
line-height: 1.0;
letter-spacing: -0.03em;
margin: 22px 0 0;
color: var(--head-ink);
}
/* The reference paints headings with a gradient fill and has NO light-gray second
line — centered heads use the 93deg gradient, left-aligned heads are flat ink. */
.center-head .h2,
.h2--grad {
background-image: var(--head-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.h-ghost { color: inherit; }
/* Chip -> heading rhythm: the reference holds 77px between the eyebrow chip and its h2
(measured on Benefits and Features); ours ran the base 22px everywhere, which is what
made sections read as tight headers floating in oversized seams. About keeps its own
92px (already matching the reference's About). */
#services .h2, #projects .h2, #process .h2, #why .h2, #features .h2,
#integrations .h2, #results .h2, #tools .h2, #faq .h2, #contact .h2 { margin-top: 72px; }
/* the About heading is the one place the reference fades its heading downward —
a vertical mask on the ink, not a gray second line */
#about .h2 {
-webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 107%);
mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0) 107%);
}
.h2--dark { color: #fff; -webkit-text-fill-color: #fff; background-image: none; }
.h-ghost-dark { color: inherit; }
.section-sub {
color: var(--muted);
font-size: 16px;
font-weight: 500;
max-width: 480px;
margin-top: 18px;
}
.section-sub--dark { color: #9a9ba0; }
.section-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
flex-wrap: wrap;
}
.section-row-sub { padding-bottom: 8px; }
.center-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.center-head .section-sub { margin-left: auto; margin-right: auto; }
/* screen-reader-only: keeps heading/sub in the outline where the reference shows no visible header */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Every in-page anchor landed at top:0 with the nav pill covering the first ~105px,
so each nav click delivered a decapitated section heading. */
section[id], .slab-section[id], .contact-sheet[id] { scroll-margin-top: 120px; }
/* ---------- tag pill (embossed, accent text) ---------- */
/* the reference's label chip is a radius-8 rounded rect on #F5F5F5, not a full pill */
.tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-head);
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: var(--accent-strong);
background: #f5f5f5;
border-radius: 8px;
padding: 6px 16px;
box-shadow:
0 3px 3px rgba(0, 0, 0, 0.14),
0 2.77px 2.21px rgba(0, 0, 0, 0.12),
inset 1px 0 0 rgba(255, 255, 255, 0.7),
inset 0 -3px 0 #e9e9e9;
}
.tag-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
}
.tag--dark {
color: var(--accent);
background: var(--dark-card);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 0 rgba(0, 0, 0, 0.5),
0 3px 6px rgba(0, 0, 0, 0.4);
}
/* ---------- buttons (exact reference recipe) ---------- */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-head);
font-weight: 600;
font-size: 16px;
line-height: 24px;
padding: 14px 24px;
border-radius: 100px;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.3s;
white-space: nowrap;
will-change: transform;
}
.btn:active { transform: translateY(2px); transition-duration: 0.1s; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-dark {
background: #272727;
color: #fff;
/* exact stack read off the reference's primary button */
box-shadow:
0 2.77px 2.21px rgba(0, 0, 0, 0.12),
0 3px 3px rgba(0, 0, 0, 0.14),
0 22px 80px rgba(0, 0, 0, 0.15),
0 41.78px 33.42px rgba(0, 0, 0, 0.15),
0 22.34px 17.87px rgba(0, 0, 0, 0.14),
0 12.52px 10.02px rgba(0, 0, 0, 0.13),
0 6.65px 5.32px rgba(0, 0, 0, 0.12),
0 2.77px 2.31px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -3px 0 #080808;
}
.btn-dark:hover {
transform: translateY(-2px);
background: #303030;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.34),
inset 0 -3px 0 #080808,
0 4px 4px rgba(0, 0, 0, 0.14),
0 9px 8px rgba(0, 0, 0, 0.12),
0 18px 14px rgba(0, 0, 0, 0.11),
0 30px 24px rgba(0, 0, 0, 0.1),
0 52px 42px rgba(0, 0, 0, 0.09);
}
.btn-dark:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 #080808, 0 2px 2px rgba(0,0,0,0.14); }
.btn-light {
background: #f5f5f5;
color: var(--ink);
box-shadow:
0 3px 3px rgba(0, 0, 0, 0.14),
0 2.77px 2.21px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -3px 0 #e9e9e9;
}
.btn-light:hover {
transform: translateY(-2px);
background: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -3px 0 #e9e9e9,
0 4px 4px rgba(0, 0, 0, 0.12),
0 10px 12px rgba(0, 0, 0, 0.1);
}
/* ============================================================
NAV
============================================================ */
.nav {
position: fixed;
/* measured on the reference: nav top 48px against a card top of 16px, i.e. it floats
32px inside the card rather than hugging the viewport edge */
top: 48px;
left: 0; right: 0;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
transition: transform 0.5s var(--ease);
}
.nav.is-scrolled { transform: translateY(-7px); }
.nav-pill {
pointer-events: auto;
display: flex;
align-items: center;
gap: 24px;
/* The reference uses alpha .5, but a backdrop-filter tints toward whatever sits behind it
and our hero image is markedly darker there than theirs — copying .5 reproduced their
CSS while missing their result (a grey pill instead of a white one). Raised until the
rendered pill matches; keep this in sync if the hero image is ever swapped. */
background: rgba(255, 255, 255, 0.68);
backdrop-filter: blur(44px) saturate(120%);
-webkit-backdrop-filter: blur(44px) saturate(120%);
border-radius: 100px;
padding: 8px 8px 8px 32px;
box-shadow: inset 0 0 36px #fff;
width: min(1080px, calc(100% - 32px));
transition: box-shadow 0.5s var(--ease), padding 0.5s var(--ease), background-color 0.4s;
}
.nav.is-scrolled .nav-pill {
padding-top: 6px;
padding-bottom: 6px;
background: rgba(255, 255, 255, 0.82);
box-shadow: inset 0 0 36px #fff, 0 4px 4px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.1);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-head);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.01em;
margin-right: auto;
}
.brand-logo { width: 26px; height: auto; }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
font-size: 15px;
font-weight: 600;
color: #3c3d41;
padding: 9px 13px;
border-radius: 999px;
transition: background 0.2s, color 0.2s;
}
.nav-links a:hover { background: var(--card); color: var(--ink); }
/* nav button is the standard 52px button; pill = 52 + 2x8 padding = 68px tall, as in the reference */
.btn-nav { padding: 14px 24px; font-size: 16px; }
.nav-burger {
display: none;
width: 42px; height: 42px;
border-radius: 50%;
background: #272727;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -3px 0 #080808, 0 3px 3px rgba(0,0,0,0.14);
}
.nav-burger span {
position: absolute;
left: 12px; right: 12px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-burger span:first-child { top: 16px; }
.nav-burger span:last-child { top: 24px; }
.nav-burger.is-open span:first-child { top: 20px; transform: rotate(45deg); }
.nav-burger.is-open span:last-child { top: 20px; transform: rotate(-45deg); }
.nav-mobile {
pointer-events: auto;
display: none;
flex-direction: column;
gap: 6px;
width: min(1000px, calc(100% - 32px));
margin-top: 10px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(14px);
border-radius: 24px;
padding: 18px;
box-shadow: 0 3px 3px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.14);
}
.nav-mobile a { padding: 12px 14px; border-radius: 14px; font-weight: 600; }
.nav-mobile a:hover { background: var(--card); }
.nav-mobile .btn { margin-top: 8px; }
.nav.is-open .nav-mobile { display: flex; }
/* ============================================================
HERO — rounded image card inset on the gray canvas
============================================================ */
/* reference: .hero is padding 16px 16px 0 — note the 0 at the bottom. The card's bottom edge
is meant to touch the next section with nothing between them, which is what lets the
canvas-coloured scroll cutout read as the section below rising into the card. */
.hero { padding: 16px 16px 0; }
.hero-card {
position: relative;
min-height: min(86svh, 820px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 190px 0 150px;
overflow: hidden;
border-radius: var(--r-sheet);
/* No box-shadow: the reference has none. A drop shadow here lays a dark band directly
under the card's bottom edge, which is exactly where the cutout has to blend into the
next section — the shadow drew a seam across it and broke the illusion. */
}
.hero-bg {
position: absolute;
inset: -6% 0 0;
background: url("../img/hero-bg.jpg") center / cover no-repeat;
opacity: 0;
transition: opacity 1.4s ease-out;
will-change: transform;
}
body.is-loaded .hero-bg { opacity: 1; }
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 50% 42%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0) 100%),
linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0) 30%, rgba(255,255,255,0.6) 92%);
}
.hero-inner { position: relative; z-index: 1; }
/* --- hero entrance: staggered on load --- */
.hero-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s var(--ease), transform 1s var(--ease);
}
body.is-loaded .hero-item { opacity: 1; transform: none; }
.hero-line {
display: inline-block;
opacity: 0;
transform: translateY(36px);
transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
body.is-loaded .hero-line { opacity: 1; transform: none; }
.hero-inner > :nth-child(1).hero-item { transition-delay: 0.05s; }
.hero-title .hero-line:first-child { transition-delay: 0.16s; }
.hero-title .hero-line--2 { transition-delay: 0.3s; }
.hero-inner > :nth-child(3).hero-item { transition-delay: 0.5s; }
.hero-inner > :nth-child(4).hero-item { transition-delay: 0.66s; }
.hero-title {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(42px, 6.6vw, 96px);
line-height: 1.0;
letter-spacing: -0.03em;
margin: 24px 0 0;
color: var(--head-ink);
}
/* both hero lines share one gradient fill, as in the reference */
.hero-line {
background-image: var(--head-grad-hero);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.hero-line--2 { color: transparent; }
/* Decorative inline pill + floating tool tiles.
Geometry lifted from the reference, whose hero h1 is 96px — same as our clamp() max —
so its pixel values convert 1:1 into em (255x80 pill => 2.656em x 0.833em).
The pill CLIPS its contents: tile 1 lives inside it and is deliberately cut off by the
top boundary, exactly as the reference does. Tiles 2 and 3 sit outside and stay whole. */
.hero-decor {
position: relative;
display: inline-block;
width: 2.656em;
height: 0.833em;
margin-left: 0.18em;
vertical-align: baseline;
}
.hero-decor-pill {
position: absolute;
inset: 0;
border-radius: 999px;
overflow: clip;
/* reference runs dark->bright top to bottom; kept in brand orange rather than their red */
background: linear-gradient(180deg, #c8431a 0%, var(--accent) 100%);
box-shadow: rgba(255, 107, 53, 0.4) 0 1px 2px, rgba(255, 107, 53, 0.25) 0 14px 34px,
rgba(255, 107, 53, 0.25) 0 56px 83px, rgba(255, 107, 53, 0.1) 0 5.05px 8.18px,
rgba(255, 107, 53, 0.16) 0 22.91px 37.08px, rgba(0, 0, 0, 0.09) 0 3.44px 5.57px;
}
.hero-tile {
position: absolute;
border-radius: 0.083em;
background: #fff;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.12);
display: grid;
place-items: center;
animation: tile-float 4.5s ease-in-out infinite;
}
.hero-tile svg { width: 100%; height: 100%; }
/* inside the pill, clipped by its top edge */
.hero-tile--1 {
width: 0.75em; height: 0.75em; padding: 0.094em;
top: -0.281em; left: 0.573em;
--tilt: 30deg;
animation-delay: 0s;
}
/* the reference counter-rotates this one's icon so the glyph stays upright in a tilted tile */
.hero-tile--1 svg { transform: rotate(-30deg); }
/* outside the pill, uncropped */
.hero-tile--2 {
width: 0.667em; height: 0.667em; padding: 0.104em 0.156em;
right: 0.4375em; bottom: -0.219em;
--tilt: -20deg;
animation-delay: -1.9s;
}
.hero-tile--3 {
width: 0.688em; height: 0.688em; padding: 0.125em;
left: 38%; bottom: -0.844em;
--tilt: 19deg;
--slide: -50%;
animation-delay: -3.7s;
}
/* The reference floats every icon 0 -> 15px on translateY, looping, each holding its own
rotation. Composing rotation into the same transform keeps this compositor-only. */
.hero-tile { transform: translateX(var(--slide, 0)) rotate(var(--tilt, 0deg)); }
@keyframes tile-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 15px; }
}
.hero-sub {
color: var(--muted);
font-weight: 500;
font-size: clamp(15px, 1.4vw, 17px);
max-width: 560px;
/* 72px is the reference's h1-bottom -> paragraph-top gap; it is what gives the lowest
floating tile somewhere to hang without landing on the copy. */
margin: 72px auto 0;
}
.hero-cta {
display: flex;
gap: 14px;
justify-content: center;
margin-top: 36px;
flex-wrap: wrap;
}
/* Canvas-coloured tab cut into the bottom edge of the hero card.
The reference is NOT a rounded rectangle: it is a 342x56 shape with a 164px flat top that
flares out to the full width through S-curve shoulders, so the cutout melts into the
canvas below instead of stopping at two hard corners. Drawn as a path for that reason. */
.hero-notch {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: 2;
width: 342px;
height: 56px;
max-width: 100%;
}
.hero-notch-shape {
display: block;
width: 100%;
height: 100%;
}
.hero-notch-shape path { fill: var(--canvas); }
.hero-notch-inner {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
color: var(--head-ink);
font-size: 16px;
font-weight: 600;
line-height: 24px;
white-space: nowrap;
}
/* vertical pill, not a circle: 10px/6.64px padding around a 7x12 arrow */
.hero-notch-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 6.64px;
border: 1px solid #d4d4d8;
border-radius: 100px;
color: var(--accent);
}
.hero-notch-btn svg { display: block; fill: currentColor; animation: bob 2.2s var(--ease) infinite; }
@keyframes bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* The client-logo marquee was removed at the owner's request — there are no client logos
to show yet. `@keyframes marquee` stays because the stats ribbon still drives off it. */
@keyframes marquee {
to { transform: translateX(-50%); }
}
/* ============================================================
ABOUT — dark globe card + stacked trust cards
============================================================ */
/* ABOUT spacing, measured off the reference at a 1680 viewport (page coords):
section top 836 -> eyebrow 956 = 120px section padding-top
eyebrow bottom 992 -> h2 top 1084 = 92px
h2 top 1084 -> card grid top 1156 = 72px
The reference's grid starts 72px below its h2 TOP, which buries its own second line at rest
(verified by forcing the reveal visible and screenshotting it — the frame where you can read
their second line is mid-animation, while the cards are still sliding up). We deliberately do
NOT copy that: burying half a heading is a defect, not a design. The grid sits at the h2's
bottom instead, which keeps the reference's tight composition — their cards begin exactly one
line-height down, and one line-height IS our heading's bottom once the ghost line is counted.
Grid columns are 742 + 24 + 530 = 1296. */
#about { padding-top: 120px; }
#about > .container { width: min(1296px, calc(100% - 48px)); }
#about .h2 { margin-top: 92px; }
.about-grid {
display: grid;
grid-template-columns: 742fr 530fr;
gap: 24px;
/* cards start at the heading's bottom — tight, but nothing is covered */
margin-top: 0;
align-items: stretch;
position: relative;
z-index: 1;
}
.about-card { border-radius: var(--r-sheet); }
.about-card--dark {
position: relative;
background:
url("../img/grain.png") repeat,
radial-gradient(120% 90% at 50% 0%, #232324 0%, #101011 55%, #060606 100%);
color: #fff;
padding: clamp(32px, 4vw, 56px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
/* reference dark globe card is 742 x 660 */
min-height: 660px;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 3px 3px rgba(0, 0, 0, 0.12), 0 24px 48px rgba(0, 0, 0, 0.18);
}
.pill--dark {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: #d8d8db;
background: rgba(255, 255, 255, 0.07);
border-radius: 999px;
padding: 8px 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.about-card-based {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(26px, 2.6vw, 34px);
letter-spacing: -0.02em;
margin: 18px 0 22px;
}
.about-card-based span { color: var(--accent); }
/* dotted globe — drawn on canvas in main.js (rotating, land dots from a baked mask).
Sits low in the card so only the upper hemisphere shows, as in the reference. */
.about-globe {
position: absolute;
left: 50%;
bottom: -20%;
transform: translateX(-50%);
width: 92%;
aspect-ratio: 1;
display: block;
pointer-events: none;
/* soft glow behind the sphere */
background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 62%, rgba(255, 255, 255, 0) 74%);
}
.about-side {
display: flex;
flex-direction: column;
gap: 24px;
}
.about-card--trust,
.about-card--blurbs {
background: var(--sheet);
box-shadow: var(--emboss-white);
padding: clamp(26px, 3vw, 40px);
flex: 1;
}
.about-trust-copy {
font-size: 16.5px;
font-weight: 500;
color: #3c3d41;
max-width: 400px;
}
.about-trust-copy strong { color: var(--ink); font-weight: 700; }
.about-trust-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-top: 34px;
}
.about-trust-stats {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: var(--muted);
}
.about-trust-stats b { color: var(--ink); font-weight: 700; }
.about-trust-big {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(72px, 8vw, 120px);
line-height: 0.9;
letter-spacing: -0.04em;
color: #e3e3e5;
}
.about-card--blurbs {
display: flex;
gap: 26px;
align-items: stretch;
}
.about-blurb-media {
flex: none;
width: 132px;
border-radius: 18px;
background: url("../img/abstract-red.jpg") center / cover no-repeat;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.1);
}
.about-blurb-copy { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.about-blurb-copy h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: 16.5px;
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.about-blurb-copy p { color: var(--muted); font-size: 14px; font-weight: 500; }
/* ============================================================
SERVICES — white sheet + embossed accordion cards
============================================================ */
.services-head {
display: grid;
grid-template-columns: minmax(280px, 579fr) 657fr;
gap: clamp(32px, 6vw, 92px);
/* stretch, not start: the left column has to be as tall as the accordion so the
thumbnail can be pushed down to sit flush with the last pill's bottom edge */
align-items: stretch;
}
.services-head-left { display: flex; flex-direction: column; align-items: stretch; }
/* A flex column stretches its children across the cross axis, which blew the eyebrow pill
out to the full column width. It has to hug its text like every other .tag on the page. */
.services-head-left > .tag { align-self: flex-start; }
.services-thumb {
/* auto, not a fixed gap: this is what keeps the image's bottom edge level with the
bottom of the last pill, which is the reference's defining alignment here.
The 40px is a floor so the image can never crowd the paragraph above it. */
margin-top: auto;
padding-top: 40px;
}
/* reference thumbnail is a fixed 240px tall; it crossfades when the open service changes */
.services-thumb > img {
display: block;
height: 240px;
width: 100%;
object-fit: cover;
border-radius: var(--r-card);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), 0 14px 28px rgba(0, 0, 0, 0.1);
transition: opacity 0.28s var(--ease);
}
.services-list { display: flex; flex-direction: column; gap: 18px; }
.service {
border-radius: var(--r-sheet);
background: var(--card);
overflow: hidden;
box-shadow: var(--emboss);
}
/* Both open and closed heights are fixed pixel values, so height is directly transitionable —
no 0fr/1fr grid trick needed, and the whole card grows as one block instead of the text
scaling inside a snapping box.
Written at .services-list specificity on purpose: main.js adds .reveal to these cards, and
the plain `.service` rule lost to `.reveal`'s own transition further down the sheet, which
silently dropped the height animation. The reveal's opacity/transform are re-declared here
so they still work. */
.services-list .service {
transition: height 0.5s var(--ease-slide), box-shadow 0.4s var(--ease),
background-color 0.4s var(--ease),
opacity 0.85s var(--ease) var(--reveal-delay, 0s),
transform 0.85s var(--ease) var(--reveal-delay, 0s);
}
.service:not(.is-active):hover { box-shadow: var(--emboss-hover); }
/* Reference accordion, measured at a 1864 viewport:
collapsed pill 128px tall, title 36px / lh 48, padding 40px (40 + 48 + 40 = 128)
expanded card 420px tall, title 48px / lh 56, chips pinned low
gap between pills 18px, width 657, radius 40
Both heights are FIXED, which is what keeps the list's total height constant no matter
which item is open — and that constant is what lets the left thumbnail's bottom edge stay
flush with the last pill. Let either height go content-driven and the alignment drifts. */
.service-head {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 40px;
text-align: left;
}
.service-title {
font-family: var(--font-head);
font-weight: 600;
/* The reference collapses at 36px, but its titles are shorter than ours. 32px is the
largest size at which our longest title ("Workflow Automation & Optimization") still
measures one line inside the 529px available — 523px, measured, not guessed.
One line is not cosmetic here: a wrapped collapsed title adds 48px and breaks the
constant list height the thumbnail alignment depends on, so nowrap enforces it. */
font-size: clamp(20px, 2.1vw, 32px);
line-height: 48px;
letter-spacing: -0.01em;
color: #68686f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* without this the nowrap title refuses to shrink inside the flex row and widens the page */
min-width: 0;
/* Colour only. Do NOT transition font-size/line-height: it relayouts the text every frame
and grows it outward from the left anchor, which is the "sliding left to right" smear.
The reference declares no transition on its title at all — the size just swaps while the
card height animates, and the eye reads that as one motion. */
transition: color 0.3s;
}
/* fixed collapsed height, the other half of the constant-total invariant */
.service:not(.is-active) { height: 128px; }
.service:hover .service-title { color: #4a4b4f; }
.service-num {
font-family: var(--font-head);
font-weight: 400;
font-size: 18px;
line-height: 28px;
color: #a1a1aa;
flex: none;
padding-top: 6px;
}
.service-body {
display: grid;
grid-template-rows: 0fr;
/* no transition here: the card's own height animation is what reveals this, and animating
both at once made the panel and the box grow on two different clocks */
}
.service-body-inner {
overflow: hidden;
min-height: 0;
opacity: 0;
transition: opacity 0.4s var(--ease);
}
/* the reference fades its panel contents in AFTER the card has opened, not alongside it */
.service.is-active .service-body-inner { opacity: 1; transition-delay: 0.28s; }
.service-body p {
color: #d4d4d8;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 0 40px;
max-width: 577px;
}
.service .chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 40px 20px;
/* pinned to the bottom of the fixed-height card, as in the reference */
margin-top: auto;
}
.service .chips li {
font-size: 12px;
font-weight: 500;
line-height: 24px;
padding: 8px 16px;
border-radius: 100px;
background: #3f3f46;
color: #fafafa;
}
.service.is-active {
/* The reference's dark card is not a clean gradient: its background PNG is a matte
render — a fine white dither grain PLUS broad soft light sweeps across the surface
(confirmed by contrast-boosting the asset). The grain is a real baked PNG tile
(assets/img/grain.png, generated speckle) — an inline SVG-filter data URI was tried
first and silently failed to parse in Chrome, which renders NO grain layer at all. */
background:
url("../img/grain.png") repeat,
radial-gradient(90% 70% at 16% 6%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 55%),
radial-gradient(130% 100% at 88% 96%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 58%),
radial-gradient(130% 120% at 50% 0%, #2a2a2c 0%, #151516 48%, #0a0a0b 100%);
color: #fff;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 3px 3px rgba(0, 0, 0, 0.14), 0 20px 40px rgba(0, 0, 0, 0.22);
/* fixed 420 so the list total never changes; see the note above .service-head */
height: 420px;
display: flex;
flex-direction: column;
}
/* the reference grows the open item's headline; collapsed stays small enough for one line */
.service.is-active .service-title {
color: #fff;
font-size: clamp(28px, 3.2vw, 48px);
line-height: 56px;
/* the open title is meant to wrap onto two lines, unlike the collapsed one */
white-space: normal;
overflow: visible;
}
.service.is-active .service-num { color: #7d7e83; }
/* 44px from title baseline block to the description, per the reference */
.service.is-active .service-head { padding-bottom: 44px; }
.service.is-active .service-body { grid-template-rows: 1fr; flex: 1 1 auto; min-height: 0; }
.service.is-active .service-body-inner { display: flex; flex-direction: column; }
/* ============================================================
PROJECTS — stacked full-width sheet cards (reference "Works")
============================================================ */
/* reference works header: a single centered eyebrow chip, nothing else */
.works-head { text-align: center; }
.works {
margin-top: 48px; /* reference: Featured Works chip -> first card ~40-50px */
display: flex;
flex-direction: column;
gap: 32px;
}
/* Work card surface is the reference's: #F4F4F5, radius 32, embossed, 12px picture mat.
The STACK REVEAL is a deliberate departure from the reference (which uses a plain
column with no position:sticky anywhere). Each card pins under the nav and the next
one scrolls up over it, so the set reads as a deck being dealt out. Each card pins a
little lower than the last, leaving the previous card's top edge visible as a stack lip. */
.work-card {
position: sticky;
/* the nav pill occupies y 41-105, so a card stuck at 84px sat 21px underneath it,
with the nav's cast shadow falling on the card art. 128 clears it by 23px. */
top: 128px;
background: var(--card);
border-radius: 32px;
padding: 12px;
/* clip the reveal: .work-info enters from translateY(140px), and without clipping it
paints BELOW the card for a frame before sliding up onto it */
overflow: clip;
box-shadow:
0 3px 3px rgba(0, 0, 0, 0.1),
0 7.77px 2.21px rgba(0, 0, 0, 0.06),
inset 0 4px 0 rgba(255, 255, 255, 0.6),
inset 0 -8px 0 #eaeaea;
}
.work-card:nth-of-type(2) { top: 148px; }
.work-card:nth-of-type(3) { top: 168px; }
.work-card:nth-of-type(4) { top: 188px; }
.work-card:nth-of-type(5) { top: 208px; }
.work-card-inner { padding: 0 0 clamp(20px, 2.4vw, 32px); }
.work-media {
display: block;
border-radius: 32px;
overflow: hidden;
background: #e7e7e9;
}
/* reference: fixed 660px tall at >=1440, aspect 1.92727/1 below that */
.work-media img {
width: 100%;
aspect-ratio: 1.92727 / 1;
object-fit: cover;
object-position: top center;
transition: transform 0.9s var(--ease);
will-change: transform;
}
@media (min-width: 1440px) {
.work-media img { aspect-ratio: auto; height: 660px; }
}
/* On a phone the card is ~358px wide. Holding the 1.927 ratio there letterboxes the
shot and scales it down about 4x, which is what made the type unreadable. A taller
box crops the sides instead of shrinking everything, so the content renders ~40%
larger. Measured against each screenshot rather than guessed. */
@media (max-width: 760px) {
.work-media img { aspect-ratio: 1.4 / 1; }
/* DawsenAI is a 2.03:1 dashboard — centring the crop cuts its left nav and clips
the title, so it anchors left and gives up the right-hand column instead. */
.work-media img[data-crop="left"] { object-position: top left; }
}
.work-card:hover .work-media img { transform: scale(1.03); }
.work-dots { display: flex; gap: 7px; padding: 22px 0 18px; border-bottom: 1px solid #e2e2e5; }
.work-dots i {
width: 8px; height: 8px;
border-radius: 50%;
background: #d9d9dc;
}
.work-dots i.on { background: var(--accent); }
.work-info {
display: grid;
grid-template-columns: minmax(220px, 1fr) 2.2fr;
gap: clamp(24px, 4vw, 64px);
padding: 28px 0 0;
align-items: start;
}
.work-title {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(26px, 2.6vw, 36px);
letter-spacing: -0.01em;
line-height: 1.33;
color: #09090b;
}
.work-year {
display: block;
font-family: var(--font-head);
font-weight: 600;
/* --ink-soft measured 1.88:1 here; --muted clears 4.5:1 at this 15px size */
color: var(--muted);
font-size: 15px;
margin-top: 8px;
letter-spacing: 0;
}
.work-meta {
display: grid;
grid-template-columns: 1.7fr 1.2fr 1fr;
gap: 28px;
}
.meta-label {
font-family: var(--font-head);
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-transform: uppercase;
letter-spacing: normal;
color: #68686f;
margin-bottom: 10px;
}
.meta-value { font-size: 14px; font-weight: 600; line-height: 20px; color: #09090b; }
.project-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-weight: 700;
font-size: 14px;
color: var(--ink);
border-bottom: 1.5px solid var(--ink);
padding-bottom: 3px;
transition: color 0.25s, border-color 0.25s;
}
.project-link:hover { color: var(--accent); border-color: var(--accent); }
/* ============================================================
PROCESS — embossed cards with glowing icon tiles
============================================================ */
/* Reference composition: header + arrows sit in a LEFT column, the step cards ride a
horizontal track beside it and slide on arrow click (left arrow disabled at rest). */
/* Column sized so the track starts 523px from the container edge, as the reference's does
(its first card sits at x579 with the container at x56). */
.process-shell {
display: grid;
grid-template-columns: minmax(300px, 459px) 1fr;
gap: clamp(32px, 4.45vw, 64px);
align-items: stretch;
}
.process-head { display: flex; flex-direction: column; }
.process-nav { display: flex; gap: 14px; margin-top: auto; padding-top: 40px; }
.process-arrow {
width: 52px; height: 52px;
border-radius: 50%;
border: 0;
background: #fff;
color: #232427;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.06),
0 2px 2px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05);
transition: color 0.25s, transform 0.25s var(--ease);
}
.process-arrow:hover:not(:disabled) { color: var(--accent); transform: translateY(-2px); }
.process-arrow:disabled { color: #c7c7cc; cursor: default; }
/* clip only horizontally — hidden on both axes would shave the cards' hover lift and shadows */
.process-viewport { overflow-x: clip; overflow-y: visible; min-width: 0; }
.process-grid {
display: flex;
gap: 24px;
transition: transform 0.65s var(--ease);
}
.process-grid .process-card { flex: 0 0 min(422px, 100%); }
/* Reference card geometry (measured live 2026-08-11): 422x561, radius 40, padding 32/40 */
.process-card {
position: relative;
background: var(--card);
border-radius: 40px;
padding: 32px 40px;
min-height: 561px;
display: flex;
flex-direction: column;
box-shadow: var(--emboss);
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.process-card:hover { transform: translateY(-5px); box-shadow: var(--emboss-hover); }
.process-icon {
width: 56px; height: 56px;
border-radius: 16px;
background: linear-gradient(150deg, #ff8a5c 0%, var(--accent) 60%, #e8551f 100%);
display: grid;
place-items: center;
/* reference holds ~120px of air between the icon and the title inside its 561px card */
margin-bottom: 120px;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.2),
0 14px 34px rgba(255, 107, 53, 0.5);
}
/* Reference type inside the card: title 36/600, body 16/24 muted, number 72 (see below) */
.process-card h3 {
font-family: var(--font-head);
font-weight: 600;
font-size: 36px;
line-height: 1.22;
letter-spacing: -0.02em;
color: #232427;
}
.process-card > p { color: var(--muted); font-size: 16px; line-height: 24px; font-weight: 500; margin-top: 20px; }
.process-foot {
margin-top: auto;
padding-top: 34px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.pill {
font-family: var(--font-head);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 8px 15px;
border-radius: 999px;
background: #fff;
color: #4a4b4f;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.06),
0 2px 2px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05);
}
.process-num {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(48px, 5vw, 72px);
letter-spacing: -0.04em;
line-height: 1;
/* #a1a1aa measured 2.33:1 on the card ground */
color: var(--muted);
}
/* #e4e4e7 measured 1.15:1 - effectively invisible. Large text, so 3:1 applies. */
.process-num-ghost { color: #7a7b80; }
/* ============================================================
COMPARISON — two embossed cards
============================================================ */
.compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1020px;
margin: 0 auto;
}
.compare-col {
padding: clamp(28px, 4vw, 44px);
border-radius: var(--r-sheet);
}
.compare-col--us {
background:
url("../img/grain.png") repeat,
radial-gradient(130% 120% at 50% 0%, #2a2a2c 0%, #151516 48%, #0a0a0b 100%);
color: #fff;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 3px 3px rgba(0, 0, 0, 0.14), 0 20px 40px rgba(0, 0, 0, 0.2);
}
.compare-col--others { background: var(--card); box-shadow: var(--emboss); }
.compare-head {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-head);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.01em;
margin-bottom: 24px;
}
.compare-col--others .compare-head { color: var(--muted); }
.compare-col ul { display: flex; flex-direction: column; }
.compare-col li {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 500;
padding: 15px 0;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.compare-col--others li { border-top-color: #e0e0e3; color: var(--muted); }
.compare-col--us li::before {
content: "";
width: 22px; height: 22px;
flex: none;
border-radius: 50%;
background: var(--accent) url('data:image/svg+xml;utf8,') center / 11px no-repeat;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(255, 107, 53, 0.4);
}
.compare-col--others li::before {
content: "";
width: 22px; height: 22px;
flex: none;
border-radius: 50%;
background: #dddde0 url('data:image/svg+xml;utf8,') center / 10px no-repeat;
}
/* Embossed illustration band (reference-style "asset"): three raised tiles on a rail,
middle tile lifted — checks on the dark card, muted crosses on the light one. */
.compare-art {
position: relative;
display: flex;
justify-content: center;
gap: 22px;
padding: 34px 0 40px;
margin-bottom: 26px;
}
.compare-art-rail {
position: absolute;
left: 8%; right: 8%; top: 50%;
height: 14px;
transform: translateY(calc(-50% - 3px));
border-radius: 7px;
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.compare-col--others .compare-art-rail {
background: #e9e9ec;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08), inset 0 -1px 0 #fff;
}
.compare-tile {
position: relative;
width: 74px; height: 74px;
border-radius: 16px;
display: grid;
place-items: center;
background: linear-gradient(160deg, #313134 0%, #1c1c1e 100%);
color: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -4px 0 rgba(0, 0, 0, 0.55),
0 10px 22px rgba(0, 0, 0, 0.5);
transition: transform 0.45s var(--ease);
}
.compare-tile--lift { transform: translateY(-12px) scale(1.08); z-index: 1; }
.compare-col--us:hover .compare-tile--lift { transform: translateY(-16px) scale(1.1); }
.compare-col--others .compare-tile {
background: #fff;
color: #b9b9be;
box-shadow: inset 0 1px 0 #fff, inset 0 -4px 0 #e4e4e7, 0 8px 18px rgba(0, 0, 0, 0.1);
}
/* Rows cascade in as the card reveals; delays only exist while the reveal classes are
still on the card, so the JS class-removal afterwards causes no motion. */
.compare-col li { transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.compare-col.reveal:not(.is-visible) li { opacity: 0; transform: translateY(18px); }
.compare-col.reveal.is-visible li:nth-child(1) { transition-delay: 0.15s; }
.compare-col.reveal.is-visible li:nth-child(2) { transition-delay: 0.24s; }
.compare-col.reveal.is-visible li:nth-child(3) { transition-delay: 0.33s; }
.compare-col.reveal.is-visible li:nth-child(4) { transition-delay: 0.42s; }
.compare-col.reveal.is-visible li:nth-child(5) { transition-delay: 0.51s; }
/* ============================================================
TOOLS — floating tilted tiles on the gray canvas
============================================================ */
.section--tools { padding: 76px 0; }
.tools-stage {
position: relative;
max-width: 980px;
margin: 0 auto;
padding: 40px 0;
text-align: center;
}
.tools-core { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.tools-core .section-sub { margin-left: auto; margin-right: auto; }
.tools-quote {
font-family: var(--font-head);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
color: #4a4b4f;
margin: 22px auto 26px;
}
/* reference tool tiles: ~98px white squares, radius 12 — logo fills ~65% of the tile,
so the padding is thin (was 17px, which left the marks looking lost in the tile) */
.tool-tile {
position: absolute;
display: grid;
place-items: center;
width: 98px;
height: 98px;
padding: 11px;
background: #fff;
border-radius: 12px;
box-shadow: var(--emboss-white);
animation: float 5s ease-in-out infinite;
}
.tool-tile img {
width: 100%;
height: 100%;
object-fit: contain;
}
.tool-tile--1 { top: 2%; left: 7%; transform: rotate(-10deg); animation-delay: 0s; }
.tool-tile--2 { top: -2%; right: 12%; transform: rotate(8deg); animation-delay: 0.6s; }
.tool-tile--3 { top: 36%; left: -1%; transform: rotate(6deg); animation-delay: 1.1s; }
.tool-tile--4 { top: 32%; right: -2%; transform: rotate(-7deg); animation-delay: 1.6s; }
.tool-tile--5 { bottom: 12%; left: 9%; transform: rotate(9deg); animation-delay: 2.1s; }
.tool-tile--6 { bottom: 6%; right: 9%; transform: rotate(-8deg); animation-delay: 2.6s; }
.tool-tile--7 { bottom: 38%; left: 16%; transform: rotate(-5deg); animation-delay: 3.1s; }
.tool-tile--8 { bottom: 34%; right: 15%; transform: rotate(6deg); animation-delay: 3.6s; }
@keyframes float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -14px; }
}
/* ============================================================
DARK STATS — dark sheet with ribbon + notch out
============================================================ */
.section--dark {
position: relative;
background:
url("../img/grain.png") repeat,
radial-gradient(140% 100% at 50% 0%, #1b1b1c 0%, #0d0d0e 50%, #060607 100%);
color: #f5f5f6;
border-radius: var(--r-sheet) var(--r-sheet) 0 0;
overflow: hidden;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 24px 48px rgba(0, 0, 0, 0.2);
}
/* this zeroed the band's bottom padding because the buzzword ribbon used to sit
directly beneath it. The ribbon is gone, so the band now takes the standard
clamp on both edges and exits into the next section on the usual 152px seam. */
.dark-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 48px;
flex-wrap: wrap;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 72px;
}
.stat-block {
border-top: 1px solid var(--dark-line);
padding-top: 26px;
}
.stat-block-label {
font-family: var(--font-head);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: #8b8c91;
}
.stat-block-num {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(64px, 9vw, 136px);
letter-spacing: -0.05em;
line-height: 1.05;
margin-top: 12px;
}
.stat-block-num .accent { color: var(--accent); }
.ribbon {
background: linear-gradient(180deg, #ff7f4d 0%, var(--accent) 45%, #ef5a22 100%);
color: #fff;
overflow: hidden;
padding: 20px 0;
transform: rotate(-1.2deg) scale(1.04);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 -10px 30px rgba(0, 0, 0, 0.25);
}
.ribbon-track {
display: flex;
align-items: center;
gap: 36px;
width: max-content;
font-family: var(--font-head);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.01em;
white-space: nowrap;
animation: marquee 30s linear infinite;
will-change: transform;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track i { font-style: normal; opacity: 0.6; }
.dark-notch {
position: relative;
height: 26px;
background: var(--accent-dark);
}
.dark-notch::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: min(420px, 60%);
height: 26px;
background: var(--canvas);
border-radius: 22px 22px 0 0;
}
/* ============================================================
FAQ — embossed white cards
============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 18px; }
.faq-item {
background: var(--card);
border-radius: var(--r-card);
box-shadow: var(--emboss);
transition: box-shadow 0.4s var(--ease);
}
.faq-item:hover { box-shadow: var(--emboss-hover); }
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
text-align: left;
font-family: var(--font-head);
font-weight: 600;
font-size: 18px;
line-height: 28px;
letter-spacing: normal;
color: #09090b;
padding: 24px 28px;
}
.faq-icon {
flex: none;
width: 34px; height: 34px;
border-radius: 50%;
background: #272727;
position: relative;
transition: transform 0.4s var(--ease), background 0.3s;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 #080808, 0 4px 8px rgba(0, 0, 0, 0.18);
}
.faq-icon::before, .faq-icon::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 12px; height: 2px;
background: #fff;
border-radius: 2px;
transform: translate(-50%, -50%);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.35s var(--ease); }
.faq-item.is-open .faq-icon {
background: var(--accent);
transform: rotate(180deg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 6px 14px rgba(255, 107, 53, 0.45);
}
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s var(--ease-slide);
}
.faq-a > p {
overflow: hidden;
color: var(--muted);
font-size: 14.5px;
font-weight: 500;
padding: 0 28px;
max-width: 680px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.35s ease, transform 0.45s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > p { opacity: 1; transform: none; transition-delay: 0.08s; padding-bottom: 26px; }
/* ============================================================
CONTACT — image sheet + white form card
============================================================ */
.contact-sheet {
border-radius: var(--r-sheet);
background:
linear-gradient(100deg, rgba(230, 231, 235, 0.94) 30%, rgba(230, 231, 235, 0.5) 60%, rgba(230, 231, 235, 0.08) 100%),
url("../img/contact-bg.jpg") right center / cover no-repeat,
#dfe0e4;
overflow: hidden;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.07), 0 20px 44px rgba(0, 0, 0, 0.1);
}
.contact-shell {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
}
.contact-info { padding: 12px 0; }
.contact-rows { margin-top: 40px; display: flex; flex-direction: column; gap: 22px; }
.contact-rows li { display: flex; align-items: center; gap: 16px; }
.contact-ic {
width: 50px; height: 50px;
border-radius: 16px;
background: #fbfbfc;
display: grid;
place-items: center;
box-shadow: var(--emboss-white);
flex: none;
color: #4a4b4f;
}
.contact-rows small {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
margin-bottom: 2px;
}
.contact-rows a { font-weight: 700; font-size: 15px; }
.contact-rows a:hover { color: var(--accent); }
.contact-trust {
display: flex;
gap: 24px;
margin-top: 40px;
flex-wrap: wrap;
}
.contact-trust span {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 600;
color: #3c3d41;
}
.contact-trust svg { color: var(--accent); }
.contact-form-wrap {
background: #fff;
border-radius: 28px;
padding: clamp(26px, 3.4vw, 44px);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.14);
}
.contact-form-wrap h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.015em;
margin-bottom: 26px;
}
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form label {
font-size: 13.5px;
font-weight: 700;
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
font: inherit;
font-size: 14.5px;
font-weight: 500;
border: 1px solid transparent;
border-radius: 14px;
background: var(--card);
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.05);
padding: 14px 16px;
color: var(--ink);
outline: none;
transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
appearance: none;
}
.contact-form select {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 14px;
}
.contact-form textarea { resize: vertical; min-height: 96px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: var(--accent);
background: #fffdfc;
box-shadow: 0 0 0 4px var(--accent-soft);
}
.contact-form .btn { margin-top: 6px; align-self: flex-start; }
/* Honeypot — kept out of sight and out of the tab order; bots that fill it are dropped */
.contact-form .hp-field {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.form-status { display: none; margin-top: 2px; font-size: 14.5px; font-weight: 600; }
.form-status.is-ok { display: block; color: #1e7a3c; }
.form-status.is-err { display: block; color: #b23c12; }
/* ============================================================
FOOTER — gray canvas, watermark, embossed social pills
============================================================ */
.footer {
position: relative;
margin-top: 76px;
/* the fixed WhatsApp button owns the bottom-right ~78px of the viewport, which at
full scroll is the bottom 78px of this footer. It was covering the tail of the
"Back To Top" link (30x22px) and stealing those clicks. */
padding: 76px 0 96px;
overflow: hidden;
}
/* Footer watermark: the brand name set as one clean word, spanning the full content
width, very faint — the reference's footer is quiet because its watermark is a single
uniform word. (The two-tone name-logo lockup reads busy at this scale: mixed cap
heights plus the orange slash. Kept as plain type instead.)
Exact recipe read off the reference's SVG: the glyphs carry `fill-opacity: .1` and are
filled with a VERTICAL GRADIENT of #292C2E that runs full at the top of the letters to
fully transparent 69% (263/380) of the way down. That top-to-bottom fade — not a flat
tint — is what makes their footer read as quiet. Single line, spanning the content width:
"Nick Automations" in Urbanist 700 at -0.03em is 7.41em, so 100/7.41 = 13.5cqw. */
.footer-watermark {
position: absolute;
top: 167px; /* logo top + 57px, the reference's logo-to-watermark offset */
left: 50%;
transform: translateX(-50%);
/* full footer width, not the 1328 content column — a single line only gets bigger by
giving it more horizontal room (13.5cqw of 1440 ≈ 194px vs 179px at content width) */
width: 100%;
container-type: inline-size;
pointer-events: none;
user-select: none;
}
/* One line (owner call 2026-08-11), sized to fill the full footer width exactly:
"Nick Automations" in Urbanist 700 at -0.03em measures 7.41em, so 100/7.41 = 13.5cqw.
That is the single-line maximum — any larger and it wraps or clips. */
.footer-watermark span {
display: block;
font-family: var(--font-head);
font-weight: 700;
font-size: 13.5cqw;
line-height: 0.86;
letter-spacing: -0.03em;
white-space: nowrap;
text-align: center;
background-image: linear-gradient(to bottom, rgba(41, 44, 46, 0.1) 0%, rgba(41, 44, 46, 0) 69%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.footer-inner { position: relative; text-align: center; }
/* reference footer logo tile: 80x80, radius 16, #09090B */
.footer-logo {
display: inline-grid;
place-items: center;
width: 80px; height: 80px;
border-radius: 16px;
background: #09090b;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -4px 0 #000, 0 16px 32px rgba(0, 0, 0, 0.25);
}
/* glyph fills ~58% of the 80px tile, matching the reference's mark-to-tile ratio */
.footer-logo img { width: 46px; height: auto; }
.footer-title {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(20px, 2.2vw, 26px);
letter-spacing: -0.015em;
line-height: 1.25;
margin-top: 28px;
}
.footer-sub { color: var(--muted); font-size: 14px; font-weight: 500; margin-top: 10px; }
.footer-social {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 52px;
flex-wrap: wrap;
}
.footer-social a {
display: inline-flex;
align-items: center;
gap: 12px;
background: #fbfbfc;
border-radius: 999px;
padding: 12px 14px 12px 24px;
font-weight: 700;
font-size: 14.5px;
box-shadow: var(--emboss-white);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.footer-social a:hover { transform: translateY(-3px); box-shadow: var(--emboss-hover); }
.footer-social-ic {
width: 30px; height: 30px;
border-radius: 50%;
background: #272727;
color: #fff;
display: grid;
place-items: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 #080808;
}
/* open-source row — secondary to the social pills above it */
.footer-oss {
position: relative;
margin-top: 54px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.footer-oss-label {
font-family: var(--font-head);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
/* #9a9ba0 is a dark-section grey; on the light footer it only reached 2.35:1 */
color: var(--muted);
}
.footer-oss-links {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.oss-pill {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--card);
border-radius: 999px;
padding: 10px 18px;
font-size: 13.5px;
font-weight: 600;
color: #3c3d41;
box-shadow: var(--emboss);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.25s;
}
.oss-pill svg { color: #6d6e72; transition: color 0.25s; }
.oss-pill:hover { transform: translateY(-2px); box-shadow: var(--emboss-hover); color: var(--ink); }
.oss-pill:hover svg { color: var(--accent); }
.footer-bottom {
margin-top: 90px;
border-top: 1px solid #dcdcde;
padding-top: 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #c9c9cc; }
.footer-links a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.footer-copy { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.footer-top { font-size: 14px; font-weight: 600; }
.footer-top:hover { color: var(--accent); }
/* ============================================================
CROSS-PAGE VIEW TRANSITIONS (project cards → project pages)
============================================================ */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(root) { animation-duration: 0.35s; }
::view-transition-new(root) { animation-duration: 0.45s; }
/* ============================================================
PROJECT DETAIL PAGE (mirrors the reference /work/ pages)
============================================================ */
.subpage-main { padding-top: 120px; }
/* work hero: same boxed image card as home, title-only */
/* Reference anchors the project-page title to the TOP of the hero (title top y242 at a
1440 viewport), not vertically centered like the home hero — measured 2026-08-11. */
.hero--sub .hero-card { min-height: min(94svh, 959px); padding: 200px 0 150px; align-items: flex-start; }
.hero--sub .hero-title { font-size: clamp(40px, 6.6vw, 96px); }
.hero--sub .hero-sub { max-width: 620px; }
.pd-wrap { width: min(var(--content), calc(100% - 48px)); margin: 0 auto; }
/* Framed image cards. The reference's figures are #F4F4F5 mats with 10px padding —
the same picture-mat treatment as the work cards. */
.pd-figure {
position: relative;
z-index: 1;
background: var(--card);
border-radius: 32px;
padding: 10px;
box-shadow:
0 3px 3px rgba(0, 0, 0, 0.1),
0 7.77px 2.21px rgba(0, 0, 0, 0.06),
inset 0 4px 0 rgba(255, 255, 255, 0.6),
inset 0 -8px 0 #eaeaea;
margin-top: 40px;
}
/* The first figure is pulled up into the hero card, covering its lower third —
measured on the reference: hero ends at 975, figure starts at 632 (343px overlap),
and the figure is 1287 wide rather than full content width. */
.pd-figure:first-of-type {
width: min(1287px, 100%);
margin-left: auto;
margin-right: auto;
margin-top: -343px;
}
@media (max-width: 1439px) {
.pd-figure:first-of-type { margin-top: clamp(-343px, -24vw, -120px); }
}
.pd-figure img {
width: 100%;
/* height:auto is load-bearing. The width/height attributes on these images (added so
the browser can reserve space and avoid layout shift) map to presentational hints;
with no CSS height to override the `height` hint, both dimensions become definite
and aspect-ratio below is ignored — the image then renders at its full natural
pixel height, which is how a 1520px-tall hero ended up 1520px tall on the page. */
height: auto;
border-radius: 22px;
aspect-ratio: 16 / 8.6;
object-fit: cover;
object-position: top center;
}
.pd-figure--tall img { aspect-ratio: 16 / 7; object-position: center; }
.pd-prose { padding: clamp(48px, 6vw, 80px) clamp(24px, 3.8vw, 46px) 0; }
.pd-prose h2 {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(30px, 3.4vw, 44px);
letter-spacing: -0.025em;
color: #232427;
margin-bottom: 22px;
}
.pd-prose p {
color: var(--muted);
font-size: 16px;
font-weight: 500;
line-height: 1.75;
max-width: 1080px;
}
.pd-tags {
display: flex;
gap: clamp(48px, 10vw, 160px);
flex-wrap: wrap;
margin-top: 44px;
}
.pd-tags .meta-label { margin-bottom: 14px; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-chips li {
font-size: 13.5px;
font-weight: 600;
padding: 10px 18px;
border-radius: 999px;
background: #2c2c2e;
color: #e8e8ea;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 3px 5px rgba(0, 0, 0, 0.25);
}
/* dark CTA band on project pages */
.pd-cta-card { /* project pages' dark CTA — same matte grain as home dark surfaces */
margin-top: clamp(56px, 7vw, 96px);
background:
url("../img/grain.png") repeat,
radial-gradient(130% 120% at 50% 0%, #2a2a2c 0%, #151516 48%, #0a0a0b 100%);
color: #fff;
border-radius: var(--r-sheet);
padding: clamp(48px, 7vw, 88px) clamp(24px, 4vw, 56px);
text-align: center;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 3px 3px rgba(0, 0, 0, 0.14), 0 20px 40px rgba(0, 0, 0, 0.22);
}
.pd-cta-card h2 {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(28px, 3.6vw, 48px);
letter-spacing: -0.025em;
margin-bottom: 28px;
}
.pd-cta-card h2 span { color: #7d7e83; }
.pd-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* next project */
.pd-next-head { text-align: center; margin: clamp(72px, 9vw, 120px) 0 8px; }
.pd-next-head h2 {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(34px, 4vw, 56px);
letter-spacing: -0.03em;
color: #232427;
}
.pd-next-works { margin-top: 40px; }
.pd-next-works .work-card { position: static; }
/* ============================================================
FREE TOOLS — embossed link cards (icon + text, no screenshots)
============================================================ */
.tools-grid {
display: grid;
/* auto-fit, not auto-fill: with three cards auto-fill still reserved a fourth
300px track, leaving a 338px empty column and pushing the CTA 187px off the
cards' visual centre. auto-fit collapses the empty track. */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 8px;
}
.tool-card {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--card);
border-radius: 28px;
padding: 28px;
box-shadow: var(--emboss);
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--emboss-hover); }
.tool-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.tool-card-platform {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #68686f;
}
.tool-card-arrow {
width: 30px; height: 30px;
flex: none;
border-radius: 50%;
display: grid;
place-items: center;
background: #272727;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 #080808;
transition: background 0.25s;
}
.tool-card:hover .tool-card-arrow { background: var(--accent); }
.tool-card h3 {
font-family: var(--font-head);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
color: #09090b;
}
.tool-card p { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.tool-card-tag {
align-self: flex-start;
margin-top: 8px;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
background: #fff;
color: #4a4b4f;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 2px rgba(0, 0, 0, 0.06);
}
.tools-cta {
margin-top: 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.tools-cta p { color: var(--muted); font-size: 15px; font-weight: 500; }
/* home teaser band */
.tools-teaser-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
flex-wrap: wrap;
margin-bottom: 44px;
}
.tools-teaser-more { display: flex; justify-content: center; margin-top: 44px; }
/* ============================================================
BLOG
============================================================ */
.blog-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
/* auto-FIT with a capped track, not auto-fill with 1fr.
auto-fill kept four 314px tracks alive at 1328px, so a single post sat in a narrow
column with three empty ones beside it and the page read as broken. auto-fit collapses
the empty tracks; the 400px ceiling stops one post stretching across the full width;
centring keeps any number of cards balanced. */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
justify-content: center;
gap: 28px;
}
.blog-card {
display: flex;
flex-direction: column;
background: var(--card);
border-radius: 28px;
overflow: hidden;
box-shadow: var(--emboss);
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--emboss-hover); }
.blog-card-media { aspect-ratio: 16 / 9; background: var(--surface, #eee); overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-kicker { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
/* h2 so the cards do not skip a heading level under the page h1 (axe heading-order);
sized as a card title, not as a section heading. */
.blog-card h2 { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; margin: 0; color: var(--ink); }
.blog-card p { color: var(--muted); font-size: 14px; font-weight: 500; }
.blog-empty {
text-align: center;
background: var(--card);
border-radius: var(--r-sheet);
box-shadow: var(--emboss);
padding: clamp(48px, 8vw, 96px) 24px;
}
.blog-empty h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.02em; }
/* ============================================================
BLOG POST — hero, article typography, foot
============================================================ */
/* Post hero: same top-anchored boxed card as project pages; the title runs smaller
than a project name because post titles are sentences, not wordmarks. */
.hero--post .hero-card { text-align: center; }
/* Two class names deep so this beats `.hero--sub .hero-title` above, which is also
(0,2,0) and previously won on source order alone — leaving article titles at the
homepage's 96px, where a question-form headline ran to four lines. */
.hero--post .hero-title--post {
font-size: clamp(30px, 3.6vw, 52px);
line-height: 1.12;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.post-kicker { margin-bottom: 4px; }
.post-meta {
margin-top: 28px;
color: var(--muted);
font-weight: 600;
font-size: 14.5px;
letter-spacing: 0.01em;
}
/* Article typography — every element a post may use. Measure: 760px, centered. */
.prose {
max-width: 760px;
margin: 0 auto;
padding: clamp(48px, 6vw, 80px) 24px 0;
}
.prose-lede { font-size: 19px !important; line-height: 1.65 !important; color: #3f3f46 !important; }
.prose p {
color: var(--muted);
font-size: 16.5px;
font-weight: 500;
line-height: 1.8;
margin-bottom: 20px;
}
.prose a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid rgba(178, 60, 18, 0.55); transition: color 0.2s, border-color 0.2s; }
.prose a:hover { color: #b23c12; border-color: #b23c12; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose h2 {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -0.02em;
line-height: 1.2;
color: #232427;
margin: 48px 0 18px;
}
.prose h3 {
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(20px, 2vw, 24px);
letter-spacing: -0.015em;
color: #232427;
margin: 36px 0 14px;
}
/* the global reset strips list-style; restore real markers inside articles */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 26px; }
.prose li { color: var(--muted); font-size: 16.5px; font-weight: 500; line-height: 1.7; margin-bottom: 8px; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose blockquote {
margin: 28px 0;
padding: 22px 28px;
background: var(--card);
border-left: 3px solid var(--accent);
border-radius: 0 20px 20px 0;
box-shadow: var(--emboss);
}
.prose blockquote p { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.55; color: #232427; }
.prose code {
font-family: "Fragment Mono", ui-monospace, monospace;
font-size: 0.88em;
background: #ececee;
padding: 2px 7px;
border-radius: 6px;
color: #232427;
}
.prose pre {
margin: 0 0 24px;
padding: 22px 26px;
background: #151516;
background-image: url("../img/grain.png");
border-radius: 18px;
overflow-x: auto;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.18);
}
.prose pre code { background: none; padding: 0; color: #e6e6e8; font-size: 13.5px; line-height: 1.7; }
.prose figure { margin: 30px 0; }
.prose figure img { width: 100%; height: auto; border-radius: 20px; background: var(--card); box-shadow: var(--emboss); }
.prose figcaption { margin-top: 12px; text-align: center; color: var(--muted); font-size: 13.5px; font-weight: 500; }
/* wide tables scroll inside their wrapper instead of breaking the page */
.prose-tablewrap { overflow-x: auto; margin: 0 0 24px; border-radius: 18px; box-shadow: var(--emboss); }
.prose table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 15px; }
.prose th {
font-family: var(--font-head);
font-weight: 700;
text-align: left;
color: #232427;
padding: 14px 18px;
border-bottom: 2px solid #e0e0e3;
}
.prose td { padding: 13px 18px; color: var(--muted); font-weight: 500; border-bottom: 1px solid #e7e7ea; }
.prose tr:last-child td { border-bottom: 0; }
.prose hr { border: 0; height: 1px; background: #e0e0e3; margin: 44px 0; }
/* ── AEO blocks: answer capsule, takeaways, contents, FAQ ──────────────────
These four are the passages answer engines lift most often, so each is a
distinct landmark in the markup rather than styled prose. The answer capsule
carries an accent rule because it is also the first thing a human reads. */
.post-answer {
border-left: 3px solid var(--accent);
padding-left: 20px;
margin-bottom: 32px;
}
.post-takeaways {
background: var(--card);
border-radius: var(--r-card);
box-shadow: var(--emboss);
padding: 28px 30px;
margin: 0 0 32px;
}
.post-takeaways h2 {
font-family: var(--font-head);
font-size: 15px !important;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-strong) !important;
margin: 0 0 14px !important;
padding: 0 !important;
background: none !important;
-webkit-text-fill-color: currentColor;
}
.post-takeaways ul { margin: 0; padding-left: 22px; }
.post-takeaways li:last-child { margin-bottom: 0; }
.post-toc {
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 24px 28px;
margin: 0 0 40px;
}
.post-toc-title {
font-family: var(--font-head);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 12px;
}
/* Manual counter, not list-style: a hidden marker on the H3 rows would still
increment the native counter, so H2 numbering came out 1, 3, 4 — only the H2
rows should count. */
.post-toc ol { margin: 0; padding-left: 0; list-style: none; counter-reset: toc; }
.post-toc li { margin-bottom: 6px; font-size: 15.5px; }
.post-toc-l2 { counter-increment: toc; }
.post-toc-l2::before { content: counter(toc) ". "; color: var(--accent); font-weight: 700; }
.post-toc-l3 { margin-left: 20px; }
.post-toc-l3::before { content: "– "; color: var(--accent); }
.post-toc a { border-bottom: 0; font-weight: 500; color: var(--muted); }
.post-toc a:hover { color: var(--accent); }
.post-faq { margin-top: 48px; }
.post-faq > h2 { margin-bottom: 22px; }
/* the accordion lives inside .prose, which styles bare h3/p — neutralise that so the
question row is the button and nothing else adds vertical rhythm inside the panel */
.post-faq .faq-h {
margin: 0 !important;
font-size: inherit !important;
font-weight: inherit;
line-height: inherit;
}
.post-faq .faq-q { font-size: 17px; line-height: 26px; }
.post-faq .faq-a > p { margin: 0 !important; max-width: none; }
/* Sequential post navigation. Grid rather than flex so a missing neighbour (first or
last post) leaves its slot empty instead of pulling the other side across. */
.post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 760px;
margin: 56px auto 0;
padding: 0 24px;
}
.post-nav-item {
display: block;
padding: 22px 24px;
border-radius: var(--r-card);
background: var(--card);
box-shadow: var(--emboss);
text-decoration: none;
transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.post-nav-item:hover { box-shadow: var(--emboss-hover); transform: translateY(-2px); }
.post-nav-next { text-align: right; }
.post-nav-label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-strong);
margin-bottom: 6px;
}
.post-nav-title {
display: block;
font-family: var(--font-head);
font-size: 16.5px;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
}
@media (max-width: 640px) {
.post-nav { grid-template-columns: 1fr; }
.post-nav-next { text-align: left; }
}
/* Date + reading time under each index card. */
.blog-card-meta {
margin-top: 10px;
font-size: 13.5px;
font-weight: 500;
color: var(--ink-soft);
}
@media (max-width: 640px) {
.post-takeaways { padding: 22px 20px; }
.post-toc { padding: 20px; }
}
.post-foot {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
max-width: 760px;
margin: 0 auto;
padding: clamp(40px, 5vw, 64px) 24px 0;
}
.blog-empty p { color: var(--muted); font-weight: 500; max-width: 460px; margin: 12px auto 26px; }
/* ============================================================
REVEAL ANIMATION
============================================================ */
/* Reveal distances and timing taken from the reference's captured in-view keyframes:
headings and blocks run translateY(60px) -> 0 over ~845ms, supporting copy and button
rows run translateY(40px) -> 0 over ~830ms, both with a parallel opacity 0 -> 1.
We were only travelling 30px, which is why the motion read as a twitch rather than as
things rising into place. */
/* Without JS the observer never fires, so everything below the fold stays invisible
- and the first frame is what a shared link, a thumbnail and Reader mode capture. */
.no-js .reveal,
.no-js .hero-item,
.no-js .hero-line,
.no-js .pd-figure.pd-reveal { opacity: 1 !important; transform: none !important; }
.reveal {
opacity: 0;
transform: translateY(60px);
transition: opacity 0.85s var(--ease) var(--reveal-delay, 0s), transform 0.85s var(--ease) var(--reveal-delay, 0s);
}
/* the reference's shorter 40px throw, used for sub-copy and CTA rows */
.section-sub.reveal,
.tools-teaser-more.reveal,
.tools-quote.reveal,
.contact-trust.reveal {
transform: translateY(40px);
transition-duration: 0.83s;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* work-card parts travel further on entry, matching the reference's captured in-view
distances (switch/dots row 60px, project meta 140px) */
.work-dots.reveal { transform: translateY(60px); }
.work-info.reveal { transform: translateY(140px); }
/* project-page figures: hidden until first scroll (classes managed by main.js, which
also short-circuits them when the view-transition morph provides the entrance).
The transition lives on the REVEALING state only — putting it on .pd-reveal makes the
initial hide itself a 1->0 transition, which can freeze mid-flight (occluded windows
pause transitions) and leave the figure visibly stuck. */
.pd-figure.pd-reveal { opacity: 0; transform: translateY(140px); }
.pd-figure.pd-reveal.pd-in { opacity: 1; transform: none; transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
@media (prefers-reduced-motion: reduce) {
.reveal, .hero-item, .hero-line, .hero-bg { opacity: 1; transform: none; transition: none; }
.ribbon-track, .tool-tile, .hero-tile, .hero-notch-btn svg { animation: none; }
.process-grid { transition: none; }
.btn, .btn:hover, .process-card, .footer-social a { transition: none; transform: none; }
html { scroll-behavior: auto; }
}
/* ============================================================
RESPONSIVE
============================================================ */
/* The reference keeps its full nav down to 810px. Ours carries a longer brand name and
more links (About/Services/Projects/Process/Tools/FAQ/Blog/Contact = 898px of content),
so the pill overflows below ~1040 — the burger has to start earlier than the reference's.
Re-measure this if a nav item is ever added or removed. */
@media (max-width: 1039px) {
.nav-links { display: none; }
.nav-burger { display: block; }
.btn-nav { display: none; }
}
@media (max-width: 1024px) {
.services-head { grid-template-columns: 1fr; }
/* stacked: no accordion to align to, so let the card heights follow their content again.
Titles wrap instead of truncating here — one line only mattered for the fixed-height
invariant, and ellipsised service names would be worse than a second line. */
.services-thumb { max-width: 480px; margin-top: 40px; padding-top: 0; }
.service:not(.is-active) { height: auto; }
.service.is-active { height: auto; min-height: 340px; }
.service-title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.service-head { padding: 28px; }
.service.is-active .service-head { padding-bottom: 24px; }
.service-body p, .service .chips { padding-left: 28px; padding-right: 28px; }
/* stacked: drop the heading overlap. The heading wraps to more lines down here, so a
-72px pull would cover copy rather than just the decorative ghost line. */
.about-grid { grid-template-columns: 1fr; margin-top: 40px; }
#about .h2 { margin-top: 40px; }
.about-card--dark { min-height: 420px; }
.work-info { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 768px) {
.section { padding: 56px 0; }
.hero-card { padding: 140px 0 100px; min-height: 0; }
/* stacked: header above, track becomes a native swipe scroller; arrows hidden */
.process-shell { grid-template-columns: 1fr; }
.process-nav { display: none; }
.process-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.process-viewport::-webkit-scrollbar { display: none; }
.process-grid { transform: none !important; }
.process-grid .process-card { flex-basis: min(360px, 86vw); scroll-snap-align: start; }
.process-card { min-height: 0; }
.process-icon { margin-bottom: 56px; }
.process-icon { margin-bottom: 34px; }
.compare-grid { grid-template-columns: 1fr; }
.work-meta { grid-template-columns: 1fr; gap: 18px; }
.work-card { position: static; }
/* reference drops the work image radius to 12px at <=809 */
.work-media, .work-media img { border-radius: 12px; }
.contact-shell { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr; gap: 34px; }
.about-card--blurbs { flex-direction: column; }
.about-blurb-media { width: 100%; height: 140px; }
.footer-bottom { flex-direction: column; text-align: center; }
.footer-links { justify-content: center; gap: 18px 22px; }
/* the watermark is small at phone widths, so the desktop clearance just leaves a hole */
.footer-social { margin-top: 42px; }
.footer-watermark { top: 84px; }
.footer-oss { margin-top: 40px; }
}
/* ---------- mobile: two layouts that cannot survive as free-floating overlays ----------
The reference floats small ICON squares around this copy, which leaves the centre
column clear. Our tiles are word-width, so at phone sizes they land on top of the
heading, the paragraph and the CTA. Below 810 they become a plain wrapped row. */
@media (max-width: 809px) {
.tools-stage {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 0;
max-width: none;
}
.tools-core { flex: 0 0 100%; order: -1; margin-bottom: 30px; }
.tool-tile {
position: static;
inset: auto;
transform: none;
translate: none;
animation: none;
width: 72px;
height: 72px;
padding: 14px;
border-radius: 12px;
}
.section--tools { padding: 64px 0; }
/* hero: the icon cluster gets its own centred line, as it does in the reference.
Same proportions as desktop, scaled ~0.69; tile 3 needs the bottom margin to hang into. */
.hero-decor {
display: block;
width: 176px;
height: 56px;
margin: 34px auto 44px;
vertical-align: baseline;
}
.hero-decor-pill { inset: 0; }
.hero-tile { border-radius: 8px; }
.hero-tile--1 { width: 50px; height: 50px; padding: 7px; top: -18px; left: 38px; }
.hero-tile--2 { width: 44px; height: 44px; padding: 8px 10px; right: 29px; bottom: -14px; }
.hero-tile--3 { width: 46px; height: 46px; padding: 9px; left: 38%; bottom: -36px; }
/* the decor already reserves 44px below itself here, so the desktop 72px would double up */
.hero-sub { margin-top: 12px; }
}
@media (max-width: 520px) {
.container { width: calc(100% - 36px); }
.hero-cta .btn { width: 100%; }
.brand-name { font-size: 15px; }
.nav-pill { padding-left: 16px; gap: 14px; }
/* the tab keeps its 342:56 ratio so the S-curve shoulders stay true when it shrinks */
.hero-notch { width: 280px; height: 45.8px; }
.hero-notch-inner { font-size: 13px; gap: 12px; }
.about-trust-big { font-size: 64px; }
}
/* ============================================================
PACKAGES — three engagement shapes, deliverables spelled out
============================================================ */
.pkg-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.pkg {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px 28px;
background: var(--sheet);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--emboss-white);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pkg:hover { transform: translateY(-5px); box-shadow: var(--emboss-hover); }
.pkg--featured { border-color: var(--accent); }
.pkg-flag {
position: absolute;
top: -13px;
left: 28px;
padding: 4px 12px;
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
/* white on --accent is only 2.84:1; --accent-strong clears 5.31:1 */
color: #fff;
background: var(--accent-strong);
border-radius: 999px;
}
.pkg-name {
font-family: var(--font-head);
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--head-ink);
}
.pkg-for {
font-size: 15px;
font-weight: 500;
line-height: 1.5;
color: var(--muted);
min-height: 45px;
}
.pkg-list {
display: flex;
flex-direction: column;
gap: 11px;
margin: 4px 0 8px;
padding: 20px 0 0;
border-top: 1px solid var(--line);
list-style: none;
}
.pkg-list li {
position: relative;
padding-left: 30px;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: var(--ink);
}
/* Each deliverable carries its own icon: the line sets --pkg-ic, this rule paints it.
Masked rather than inlined so every icon tints from one token. */
.pkg-list li::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 18px;
height: 18px;
background: var(--accent-strong);
-webkit-mask: var(--pkg-ic, var(--ic-check)) center / contain no-repeat;
mask: var(--pkg-ic, var(--ic-check)) center / contain no-repeat;
}
/* one line per deliverable icon */
.pkg-list li[data-ic="activity"] { --pkg-ic: var(--ic-activity); }
.pkg-list li[data-ic="bell-ring"] { --pkg-ic: var(--ic-bell-ring); }
.pkg-list li[data-ic="book-open"] { --pkg-ic: var(--ic-book-open); }
.pkg-list li[data-ic="boxes"] { --pkg-ic: var(--ic-boxes); }
.pkg-list li[data-ic="calendar-clock"] { --pkg-ic: var(--ic-calendar-clock); }
.pkg-list li[data-ic="chart-line"] { --pkg-ic: var(--ic-chart-line); }
.pkg-list li[data-ic="clipboard-check"] { --pkg-ic: var(--ic-clipboard-check); }
.pkg-list li[data-ic="code-xml"] { --pkg-ic: var(--ic-code-xml); }
.pkg-list li[data-ic="compass"] { --pkg-ic: var(--ic-compass); }
.pkg-list li[data-ic="credit-card"] { --pkg-ic: var(--ic-credit-card); }
.pkg-list li[data-ic="database"] { --pkg-ic: var(--ic-database); }
.pkg-list li[data-ic="file-search"] { --pkg-ic: var(--ic-file-search); }
.pkg-list li[data-ic="gauge"] { --pkg-ic: var(--ic-gauge); }
.pkg-list li[data-ic="layout-dashboard"] { --pkg-ic: var(--ic-layout-dashboard); }
.pkg-list li[data-ic="linkedin"] { --pkg-ic: var(--ic-linkedin); }
.pkg-list li[data-ic="lock"] { --pkg-ic: var(--ic-lock); }
.pkg-list li[data-ic="map"] { --pkg-ic: var(--ic-map); }
.pkg-list li[data-ic="network"] { --pkg-ic: var(--ic-network); }
.pkg-list li[data-ic="plug"] { --pkg-ic: var(--ic-plug); }
.pkg-list li[data-ic="receipt"] { --pkg-ic: var(--ic-receipt); }
.pkg-list li[data-ic="rocket"] { --pkg-ic: var(--ic-rocket); }
.pkg-list li[data-ic="route"] { --pkg-ic: var(--ic-route); }
.pkg-list li[data-ic="send"] { --pkg-ic: var(--ic-send); }
.pkg-list li[data-ic="shield-check"] { --pkg-ic: var(--ic-shield-check); }
.pkg-list li[data-ic="smartphone"] { --pkg-ic: var(--ic-smartphone); }
.pkg-list li[data-ic="sparkles"] { --pkg-ic: var(--ic-sparkles); }
.pkg-list li[data-ic="target"] { --pkg-ic: var(--ic-target); }
.pkg-list li[data-ic="users"] { --pkg-ic: var(--ic-users); }
.pkg-list li[data-ic="workflow"] { --pkg-ic: var(--ic-workflow); }
.pkg-list li[data-ic="zap"] { --pkg-ic: var(--ic-zap); }
.pkg-cta { margin-top: auto; width: 100%; }
.pkg-note {
margin: 32px auto 0;
max-width: 560px;
text-align: center;
font-size: 15px;
font-weight: 500;
color: var(--muted);
}
/* ============================================================
FOUNDER — the person behind the work
============================================================ */
.founder-card {
display: grid;
grid-template-columns: 220px 1fr;
gap: 48px;
align-items: center;
padding: 48px;
background: var(--sheet);
border-radius: var(--r-sheet);
box-shadow: var(--emboss-white);
}
.founder-media { display: grid; place-items: center; }
.founder-photo {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: var(--emboss);
object-fit: cover;
}
.founder-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.founder-copy .tag { align-self: flex-start; }
.founder-copy .h2 { margin: 0; }
.founder-copy > p {
max-width: 62ch;
font-size: 16px;
font-weight: 500;
line-height: 1.6;
color: var(--muted);
}
.founder-proof {
display: flex;
flex-direction: column;
gap: 10px;
margin: 2px 0 6px;
padding: 0;
list-style: none;
}
.founder-proof li {
position: relative;
padding-left: 26px;
font-size: 15px;
font-weight: 500;
color: var(--ink);
}
.founder-proof li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 16px;
height: 16px;
background: var(--accent-strong);
-webkit-mask: var(--ic-check) center / contain no-repeat;
mask: var(--ic-check) center / contain no-repeat;
}
.founder-proof a {
color: var(--accent-strong);
text-decoration: underline;
text-underline-offset: 3px;
}
.founder-proof a:hover { text-decoration-thickness: 2px; }
@media (max-width: 1024px) {
.pkg-grid { grid-template-columns: 1fr; gap: 28px; }
.pkg-for { min-height: 0; }
}
@media (max-width: 900px) {
.founder-card { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; }
.founder-media { justify-items: start; }
.founder-photo { width: 132px; height: 132px; }
}
@media (max-width: 560px) {
.pkg { padding: 28px 22px; }
.founder-card { padding: 28px 20px; }
}
/* ============================================================
PRODUCTION API — one capability, three surfaces. Dark, so it
reads as the paid thing next to the free open-source grid.
============================================================ */
.section--api { padding-top: 0; }
.api-band {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 48px;
background: var(--dark);
border-radius: var(--r-sheet);
}
.api-band .h2--dark { margin: 0; }
.api-lede {
max-width: 66ch;
font-size: 16px;
font-weight: 500;
line-height: 1.6;
color: #9a9ba0;
}
.api-ways {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
width: 100%;
margin-top: 12px;
}
.api-way {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px 22px;
background: var(--dark-card);
border: 1px solid var(--dark-line);
border-radius: 18px;
transition: transform 0.4s var(--ease), border-color 0.3s ease;
}
.api-way:hover { transform: translateY(-4px); border-color: #4a4a4e; }
.api-way--lead { border-color: var(--accent); }
.api-way-for {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
/* #ff6b35 clears 6.38:1 on #161617, so the bright accent is safe here */
color: var(--accent);
}
.api-way-name {
font-family: var(--font-head);
font-size: 21px;
font-weight: 700;
line-height: 1.2;
color: #fff;
}
.api-way-body {
font-size: 14.5px;
font-weight: 500;
line-height: 1.5;
color: #a9aab0;
}
.api-way-body code {
font-family: var(--font-mono);
font-size: 0.9em;
color: #e6e6e8;
background: rgba(255, 255, 255, 0.07);
padding: 1px 5px;
border-radius: 4px;
}
.api-way-tag {
margin-top: auto;
padding-top: 12px;
font-size: 12.5px;
font-weight: 600;
color: #d8d8dc;
}
@media (max-width: 900px) {
.api-ways { grid-template-columns: 1fr; }
.api-band { padding: 32px 24px; border-radius: var(--r-card); }
}
/* ============================================================
WHATSAPP — persistent entry point, bottom-right
============================================================ */
.wa-fab {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 60;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
/* darker than brand #25D366: white on this clears the 3:1 non-text contrast bar */
background: #1da851;
color: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.wa-fab svg { width: 27px; height: 27px; }
.wa-fab:hover,
.wa-fab:focus-visible {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.wa-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 560px) {
.wa-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
.wa-fab svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
.wa-fab { transition: none; }
}