/* ========================================================================== DataLabs AI — site stylesheet Static migration of the original Next.js build. Part 1: normalize layer (equivalent to the Tailwind v4 preflight the original build shipped, reduced to the rules this site actually relies on). ========================================================================== */ *, *::before, *::after, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; /* The original build inherited this stack onto via `font: inherit` below, so it is what the live site actually rendered in. */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: transparent; border-radius: 0; } ::placeholder { opacity: 1; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } ::-webkit-search-decoration { -webkit-appearance: none; } /* ========================================================================== Part 2: DataLabs design system — reproduced verbatim from the original build's stylesheet (assets/index-DbFeYYYT.css). ========================================================================== */ :root { --ink:#07090a; --ink-soft:#0d1112; --panel:#111617; --panel-high:#171d1e; --paper:#0b0e0f; --white:#f4f7f5; --muted:#8b9692; --line:#ffffff24; --cyan:#58e7f0; --green:#bdfc52; --coral:#ff6b57; --shell:1320px; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--ink); color:var(--white); letter-spacing:0; text-rendering:optimizelegibility; margin:0; font-family:Helvetica Neue,Helvetica,Arial,sans-serif; } body, button, input, select, textarea { font:inherit; } a { color:inherit; text-decoration:none; } button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; } .shell { width:min(calc(100% - 80px), var(--shell)); margin:0 auto; } .hero { isolation:isolate; min-height:92svh; color:var(--white); background:var(--ink); position:relative; overflow:hidden; } .hero-image, .hero-shade, .hero-grid { width:100%; height:100%; position:absolute; inset:0; } .hero-image { z-index:-4; object-fit:cover; object-position:center center; filter:saturate(.9)contrast(1.06); } .hero-shade { z-index:-3; background:linear-gradient(90deg,#030506fa 0%,#030506e6 34%,#0305065c 66%,#0305062e 100%),linear-gradient(#0000 60%,#030506c7 100%); } .hero-grid { z-index:-2; opacity:.1; background-image:linear-gradient(#ffffff1f 1px,#0000 1px),linear-gradient(90deg,#ffffff1f 1px,#0000 1px); background-size:84px 84px; -webkit-mask-image:linear-gradient(90deg,#000,#0000 65%); mask-image:linear-gradient(90deg,#000,#0000 65%); } .site-header { z-index:10; width:min(calc(100% - 80px), var(--shell)); border-bottom:1px solid #ffffff2e; grid-template-columns:1fr auto 1fr; align-items:center; height:82px; margin:0 auto; display:grid; position:relative; } .brand { width:fit-content; color:var(--white); letter-spacing:0; align-items:center; gap:10px; font-size:14px; font-weight:800; display:inline-flex; } .brand-mark { grid-template-rows:repeat(2,9px); grid-template-columns:repeat(2,9px); gap:3px; width:21px; height:21px; display:grid; position:relative; } .brand-mark:before, .brand-mark:after, .brand-mark span { content:""; display:block; } .brand-mark:before { background:var(--cyan); grid-area:1/1/span 2; } .brand-mark:after { background:var(--green); grid-area:1/2; } .brand-mark span:first-child { border:1px solid #ffffffe6; grid-area:2/2; } .brand-mark span:last-child { display:none; } .brand-name { letter-spacing:0; } .brand-ai { min-width:26px; height:20px; color:var(--cyan); border:1px solid #ffffff80; justify-content:center; align-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:700; display:inline-flex; } .desktop-nav { color:#ffffffb8; align-items:center; gap:30px; font-size:13px; display:flex; } .desktop-nav a, .header-cta { transition:color .18s; } .desktop-nav a:hover { color:var(--white); } .header-cta { color:var(--white); justify-self:end; align-items:center; gap:10px; font-size:13px; font-weight:700; display:inline-flex; } .header-cta span { color:var(--green); font-size:16px; } .hero-content { align-items:center; min-height:calc(92svh - 166px); padding:72px 0 86px; display:flex; } .hero-copy { max-width:810px; animation:.8s ease-out both hero-enter; } .eyebrow, .section-kicker { color:var(--muted); letter-spacing:0; text-transform:uppercase; align-items:center; gap:11px; margin:0 0 28px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:700; display:flex; } .eyebrow { color:#ffffffbf; } .eyebrow-dot { background:var(--green); width:7px; height:7px; animation:2.2s ease-in-out infinite signal-pulse; box-shadow:0 0 0 5px #c6ff321f; } .hero h1 { color:var(--white); letter-spacing:0; align-items:flex-start; gap:18px; margin:0 0 20px; font-size:100px; font-weight:760; line-height:.88; display:flex; } .hero h1 strong { color:var(--cyan); margin-top:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:23px; line-height:1; } .hero-statement { color:var(--white); letter-spacing:0; margin:0; font-size:34px; font-weight:540; line-height:1.08; } .hero-detail { color:#ffffffad; max-width:680px; margin:28px 0 0; font-size:17px; line-height:1.55; } .hero-actions { flex-wrap:wrap; gap:12px; margin-top:36px; display:flex; } .button { border:1px solid #0000; border-radius:2px; justify-content:center; align-items:center; min-height:52px; padding:0 22px; font-size:13px; font-weight:750; transition:background .18s,color .18s,border-color .18s,transform .18s; display:inline-flex; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--green); color:var(--ink); gap:14px; } .button-primary:hover { background:var(--white); } .button-secondary { color:var(--white); border-color:#ffffff4d; } .button-secondary:hover { border-color:var(--white); background:#ffffff14; } .hero-footer { width:min(calc(100% - 80px), var(--shell)); border-top:1px solid #ffffff38; justify-content:space-between; align-items:center; height:84px; margin:0 auto; display:flex; position:absolute; bottom:0; left:0; right:0; } .hero-formats { align-items:center; gap:9px; display:flex; } .hero-formats span { color:#ffffffa8; text-transform:uppercase; border:1px solid #ffffff38; padding:8px 11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:700; } .scroll-cue { color:#ffffff94; text-transform:uppercase; align-items:center; gap:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:700; display:inline-flex; } .scroll-cue i { background:#ffffff40; width:1px; height:28px; position:relative; overflow:hidden; } .scroll-cue i:after { background:var(--cyan); content:""; width:1px; height:12px; animation:2s ease-in-out infinite scroll-line; position:absolute; top:-12px; left:0; } .institution-rail { background:#0a0d0e; border-top:1px solid #ffffff1a; border-bottom:1px solid #ffffff1a; } .institution-rail-inner { color:#ffffff8a; text-transform:uppercase; justify-content:space-between; align-items:center; min-height:82px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:700; display:flex; } .institution-rail-inner i { background:var(--cyan); width:4px; height:4px; box-shadow:0 0 14px #58e7f0b8; } .section-void { background:linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), #ffffff06 50%, transparent calc(50% + 1px)), var(--paper); } .capabilities { padding:132px 0 120px; } .section-intro { grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); align-items:end; column-gap:80px; padding-bottom:72px; display:grid; } .section-intro .section-kicker { grid-column:1/-1; } .section-intro h2, .operations-copy h2, .approach-heading h2, .quality-copy h2, .contact-copy h2 { letter-spacing:0; margin:0; font-size:58px; font-weight:720; line-height:.98; } .section-intro>p:last-child, .operations-copy>p, .quality-copy>p, .contact-copy>p { color:var(--muted); margin:0; font-size:17px; line-height:1.6; } .capability-list { border-top:1px solid var(--line); } .capability-row { border-bottom:1px solid var(--line); grid-template-columns:64px 1fr 1.2fr 170px; align-items:center; gap:30px; min-height:142px; transition:background .18s,padding .18s; display:grid; } .capability-row:hover { background:#ffffff09; padding:0 10px; } .capability-index, .capability-meta { color:#ffffff6b; text-transform:uppercase; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:700; } .capability-row h3 { color:var(--white); margin:0; font-size:29px; font-weight:680; } .capability-row p { max-width:560px; color:var(--muted); margin:0; font-size:15px; line-height:1.55; } .capability-meta { border:1px solid var(--line); color:#ffffffad; justify-self:end; padding:7px 10px; } .company { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0d1112; padding:132px 0; position:relative; overflow:hidden; } .company:before { content:""; background:linear-gradient(#0000,#58e7f047,#0000); width:1px; height:100%; position:absolute; top:0; right:8%; } .company-heading { grid-template-columns:minmax(0,1fr) minmax(280px,.56fr); align-items:end; gap:70px; padding-bottom:72px; display:grid; } .company-heading .section-kicker { grid-column:1/-1; } .company-heading h2 { max-width:820px; margin:0; font-size:58px; font-weight:720; line-height:.98; } .company-heading>p:last-child { color:var(--muted); margin:0; font-size:16px; line-height:1.62; } .function-grid { border-top:1px solid var(--line); border-left:1px solid var(--line); grid-template-columns:repeat(2,1fr); display:grid; } .function-item { border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#ffffff04; grid-template-columns:44px 1fr; gap:22px; min-height:260px; padding:34px; transition:background .18s,border-color .18s; display:grid; } .function-item:hover { background:#58e7f009; border-color:#58e7f057; } .function-item>span { color:var(--cyan); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:700; } .function-item h3 { margin:0 0 18px; font-size:26px; font-weight:690; } .function-item p { max-width:460px; color:var(--muted); margin:0; font-size:14px; line-height:1.65; } .section-dark { background:var(--ink); color:var(--white); } .operations { border-bottom:1px solid var(--line); padding:148px 0; position:relative; overflow:hidden; } .operations:before { content:""; transform-origin:50%; background:#42e8f540; width:1px; height:720px; position:absolute; top:-180px; left:50%; transform:rotate(34deg); } .operations-layout { grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr); align-items:center; gap:100px; display:grid; } .section-kicker-dark { color:#ffffff7a; } .operations-copy h2 { max-width:610px; } .operations-copy>p { color:#ffffff9e; max-width:560px; margin-top:32px; } .operations-copy .operations-note { color:#ffffffd1; margin-top:38px; padding-left:22px; font-size:14px; position:relative; } .operations-note:before { background:var(--green); content:""; width:3px; position:absolute; top:4px; bottom:4px; left:0; } .signal-console { background-color:#0b0f10; background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px),none; background-position:0 0,0 0,0 0; background-repeat:repeat,repeat,repeat; background-size:42px 42px; background-attachment:scroll,scroll,scroll; background-origin:padding-box,padding-box,padding-box; background-clip:border-box,border-box,border-box; border:1px solid #ffffff2e; border-radius:6px; min-height:560px; position:relative; box-shadow:0 28px 80px #00000047; } .console-header, .console-footer { color:#ffffff80; border-bottom:1px solid #ffffff1f; justify-content:space-between; align-items:center; height:58px; padding:0 22px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:700; display:flex; } .console-status { color:var(--green); align-items:center; gap:9px; display:flex; } .console-status i { background:var(--green); width:6px; height:6px; box-shadow:0 0 12px #c6ff32cc; } .console-stage { gap:10px; padding:34px 34px 38px 72px; display:grid; position:relative; } .console-line { background:#42e8f557; width:1px; position:absolute; top:52px; bottom:54px; left:44px; } .console-line span { border:1px solid var(--cyan); background:var(--ink-soft); width:9px; height:9px; position:absolute; left:-4px; } .console-line span:first-child { top:0; } .console-line span:nth-child(2) { top:33%; } .console-line span:nth-child(3) { top:66%; } .console-line span:nth-child(4) { border-color:var(--green); background:var(--green); bottom:0; box-shadow:0 0 18px #c6ff3280; } .console-step { border-bottom:1px solid #ffffff17; grid-template-columns:42px 1fr; align-items:center; gap:18px; min-height:88px; padding:12px 14px; display:grid; } .console-step:last-child { border-bottom:0; } .console-step>span { color:var(--cyan); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; } .console-step strong { margin-bottom:7px; font-size:15px; display:block; } .console-step p { color:#ffffff7a; margin:0; font-size:12px; line-height:1.4; } .console-footer { border-top:1px solid #ffffff1f; border-bottom:0; justify-content:center; gap:13px; } .console-footer i { background:#ffffff38; width:18px; height:1px; } .approach { border-bottom:1px solid var(--line); background:#121718; padding:132px 0 0; } .approach-heading { grid-template-columns:minmax(0,.35fr) minmax(0,1fr); align-items:start; padding-bottom:92px; display:grid; } .approach-heading .section-kicker { color:#ffffff75; } .approach-heading h2 { max-width:900px; } .process-grid { border-top:1px solid var(--line); grid-template-columns:repeat(4,1fr); display:grid; } .process-step { border-right:1px solid var(--line); min-height:330px; padding:38px 38px 60px 0; } .process-step+.process-step { padding-left:38px; } .process-step:last-child { border-right:0; } .process-step>span { color:var(--cyan); margin-bottom:82px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:700; display:block; } .process-step h3 { margin:0 0 18px; font-size:32px; font-weight:760; } .process-step p { max-width:330px; color:var(--muted); margin:0; font-size:14px; line-height:1.6; } .quality { border-bottom:1px solid var(--line); background:#090c0d; padding:132px 0 0; overflow:hidden; } .quality-layout { grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr); align-items:start; gap:110px; padding-bottom:120px; display:grid; } .quality-copy h2 { max-width:630px; } .quality-copy>p { max-width:560px; margin-top:30px; } .text-link { border-bottom:1px solid #ffffff6b; align-items:center; gap:12px; margin-top:34px; padding-bottom:7px; font-size:13px; font-weight:750; display:inline-flex; } .text-link span { color:var(--cyan); } .quality-list { border-top:1px solid var(--line); } .quality-item { border-bottom:1px solid var(--line); grid-template-columns:36px 1fr; align-items:center; min-height:74px; font-size:16px; font-weight:640; display:grid; } .quality-check { width:20px; height:20px; color:var(--green); background:#bdfc520f; border:1px solid #bdfc528c; justify-content:center; align-items:center; font-size:11px; display:inline-flex; } .format-band { border-top:1px solid var(--line); color:#ffffffe6; white-space:nowrap; background:#101516; justify-content:center; align-items:center; gap:30px; min-width:1100px; height:160px; font-size:70px; font-weight:800; display:flex; } .format-band i { background:var(--coral); width:11px; height:11px; } .contact { padding:148px 0 132px; position:relative; overflow:hidden; } .contact-signal { background:var(--cyan); width:420px; height:1px; position:absolute; top:38%; right:-120px; transform:rotate(-18deg); box-shadow:0 70px #c6ff32cc,0 140px #ffffff2e; } .contact-layout { grid-template-columns:minmax(0,.85fr) minmax(560px,1.15fr); align-items:start; gap:100px; display:grid; position:relative; } .contact-copy h2 { max-width:680px; } .contact-copy>p { color:#ffffff94; max-width:560px; margin-top:30px; } .contact-assurance { text-transform:uppercase; flex-wrap:wrap; gap:9px; margin-top:44px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:700; display:flex; } .contact-assurance span { color:#ffffff8f; border:1px solid #ffffff26; padding:9px 11px; } .inquiry-form { background:#0c1011; border:1px solid #ffffff2e; border-radius:6px; padding:28px; position:relative; box-shadow:0 28px 80px #0000003d; } .form-heading { color:#ffffff8a; justify-content:space-between; align-items:center; margin:-4px 0 26px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:700; display:flex; } .form-heading i { background:var(--green); width:8px; height:8px; box-shadow:0 0 16px #c6ff32b3; } .form-grid { grid-template-columns:1fr 1fr; gap:18px; display:grid; } .form-grid label { gap:9px; display:grid; } .form-grid label>span { color:#ffffff9e; font-size:11px; font-weight:650; } .form-grid input, .form-grid select, .form-grid textarea { width:100%; color:var(--white); background:#14191a; border:1px solid #ffffff2e; border-radius:2px; font-size:14px; transition:border-color .18s; } .form-grid input, .form-grid select { height:46px; padding:0 13px; } .form-grid textarea { resize:vertical; min-height:120px; padding:13px; line-height:1.5; } .form-grid textarea::placeholder { color:#ffffff47; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color:var(--cyan); } .form-wide { grid-column:1/-1; } .form-submit { background:var(--green); width:100%; min-height:52px; color:var(--ink); cursor:pointer; border:0; border-radius:2px; justify-content:space-between; align-items:center; margin-top:20px; padding:0 17px; font-size:13px; font-weight:780; transition:background .18s,transform .18s; display:flex; } .form-submit:hover { background:var(--white); transform:translateY(-2px); } .form-status { color:#ffffff75; min-height:16px; margin:12px 0 -6px; font-size:11px; } .site-footer { background:#080a0b; } .footer-main { border-bottom:1px solid var(--line); grid-template-columns:1fr 1fr auto; align-items:center; min-height:118px; display:grid; } .brand-footer { color:var(--white); } .brand-footer .brand-mark span:first-child { border-color:var(--white); } .brand-footer .brand-ai { color:var(--cyan); border-color:#ffffff52; } .footer-main p { color:var(--muted); margin:0; font-size:13px; } .footer-main>a:last-child { align-items:center; gap:9px; font-size:13px; font-weight:700; display:inline-flex; } .footer-main>a:last-child span { color:var(--cyan); } .footer-functions { border-bottom:1px solid var(--line); color:#ffffff70; text-transform:uppercase; grid-template-columns:repeat(4,1fr); align-items:center; min-height:72px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:700; display:grid; } .footer-legal { color:#ffffff5c; text-transform:uppercase; justify-content:space-between; align-items:center; min-height:70px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:650; display:flex; } .footer-legal a { color:#ffffff94; text-underline-offset:4px; -webkit-text-decoration:underline #58e7f06b; text-decoration:underline #58e7f06b; transition:color .18s; } .footer-legal a:hover { color:var(--cyan); } .legal-page { color:#101415; background:#f2f4f1; min-height:100svh; } .legal-header { width:min(calc(100% - 80px), var(--shell)); border-bottom:1px solid #10141529; justify-content:space-between; align-items:center; min-height:82px; margin:0 auto; display:flex; } .legal-header .brand { color:#101415; } .legal-header .brand-mark span:first-child { border-color:#101415; } .legal-header .brand-ai { color:#087f88; border-color:#10141559; } .legal-back { align-items:center; gap:10px; font-size:13px; font-weight:750; display:inline-flex; } .legal-back span { color:#087f88; } .legal-hero { color:var(--white); background-color:#0b0f10; background-image:linear-gradient(90deg,#ffffff0a 1px,#0000 1px),linear-gradient(#ffffff0a 1px,#0000 1px),none; background-position:0 0,0 0,0 0; background-repeat:repeat,repeat,repeat; background-size:72px 72px; background-attachment:scroll,scroll,scroll; background-origin:padding-box,padding-box,padding-box; background-clip:border-box,border-box,border-box; padding:108px 0 92px; overflow:hidden; } .legal-hero-inner { max-width:930px; margin:0 auto; } .legal-hero h1 { margin:0; font-size:clamp(58px,8vw,106px); font-weight:760; line-height:.94; } .legal-hero-inner>p:not(.section-kicker) { color:#ffffffa3; max-width:760px; margin:32px 0 0; font-size:19px; line-height:1.6; } .legal-meta { color:#ffffff70; text-transform:uppercase; flex-wrap:wrap; gap:12px 28px; margin-top:42px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:700; display:flex; } .legal-layout { grid-template-columns:240px minmax(0,780px); justify-content:center; gap:96px; padding-top:96px; padding-bottom:120px; display:grid; } .legal-toc { border-top:2px solid #101415; align-self:start; padding-top:18px; display:grid; position:sticky; top:32px; } .legal-toc p { color:#69716f; text-transform:uppercase; margin:0 0 16px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; font-weight:700; } .legal-toc a { color:#404846; border-bottom:1px solid #1014151a; padding:9px 0; font-size:12px; font-weight:650; } .legal-toc a:hover { color:#087f88; } .legal-content section { border-bottom:1px solid #10141521; margin-bottom:64px; padding:0 0 64px; scroll-margin-top:36px; } .legal-content section:last-child { margin-bottom:0; } .legal-number { color:#087f88; margin-bottom:14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:800; display:block; } .legal-content h2 { max-width:none; margin:0 0 26px; font-size:clamp(30px,4vw,46px); line-height:1.04; } .legal-content h3 { margin:34px 0 12px; font-size:18px; } .legal-content p, .legal-content li { color:#37403e; font-size:16px; line-height:1.78; } .legal-content p { margin:0 0 18px; } .legal-content ul { gap:10px; margin:20px 0 24px; padding-left:22px; display:grid; } .legal-content strong { color:#101415; } .legal-content a { color:#087f88; text-underline-offset:3px; text-decoration:underline; } .legal-contact-card { color:#37403e; background:#e5e9e5; border-left:4px solid #087f88; gap:10px; margin:28px 0; padding:24px 28px; font-size:15px; line-height:1.6; display:grid; } .legal-contact-card strong { font-size:18px; } .legal-footer { background:#080a0b; } @keyframes hero-enter { 0% { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @keyframes signal-pulse { 0%, to { box-shadow:0 0 0 5px #c6ff321a; } 50% { box-shadow:0 0 0 9px #c6ff3205; } } @keyframes scroll-line { 0% { transform:translateY(0); } to { transform:translateY(44px); } } @media (width<=1100px) { .hero h1 { font-size:76px; } .section-intro h2, .company-heading h2, .operations-copy h2, .approach-heading h2, .quality-copy h2, .contact-copy h2 { font-size:48px; } .operations-layout, .contact-layout { grid-template-columns:1fr; gap:70px; } .operations-copy, .contact-copy { max-width:720px; } .quality-layout { gap:60px; } .process-grid { grid-template-columns:repeat(2,1fr); } .process-step:nth-child(2) { border-right:0; } .format-band { font-size:54px; } } @media (width<=880px) { .legal-layout { grid-template-columns:1fr; gap:50px; } .legal-toc { position:static; } } @media (width<=640px) { .legal-header { width:min(calc(100% - 40px), var(--shell)); } .legal-header .legal-back { font-size:0; } .legal-header .legal-back span { font-size:18px; } .legal-hero { padding:76px 0 68px; } .legal-layout { padding-top:64px; padding-bottom:80px; } .legal-content section { margin-bottom:48px; padding-bottom:48px; } } @media (width<=820px) { .shell, .site-header, .hero-footer { width:min(calc(100% - 40px), var(--shell)); } .desktop-nav { display:none; } .site-header { grid-template-columns:1fr auto; } .hero { min-height:860px; } .hero-image { object-position:67% center; } .hero-shade { background:linear-gradient(90deg,#050708f7 0%,#050708c2 65%,#05070847 100%),linear-gradient(#0000 58%,#050708e0 100%); } .hero-content { min-height:690px; padding-top:54px; } .hero h1 { font-size:68px; } .hero-detail { max-width:520px; } .section-intro, .company-heading, .quality-layout { grid-template-columns:1fr; gap:32px; } .section-intro .section-kicker, .company-heading .section-kicker { grid-column:1; } .capability-row { grid-template-columns:48px 1fr auto; gap:20px; padding:30px 0; } .capability-row p { grid-column:2/-1; } .capability-row:hover { padding:30px 14px; } .operations-layout, .contact-layout, .quality-layout, .function-grid { grid-template-columns:1fr; } .approach-heading { grid-template-columns:1fr; gap:24px; } .process-grid { grid-template-columns:1fr; } .process-step, .process-step+.process-step { border-right:0; border-bottom:1px solid var(--line); min-height:auto; padding:32px 0 42px; } .process-step:last-child { border-bottom:0; } .process-step>span { margin-bottom:36px; } .format-band { justify-content:flex-start; padding-left:28px; } } @media (width<=560px) { .shell, .site-header, .hero-footer { width:min(calc(100% - 28px), var(--shell)); } .site-header { height:68px; } .brand { gap:7px; } .brand-name { font-size:12px; } .brand-ai { min-width:22px; height:18px; font-size:9px; } .brand-mark { grid-template-rows:repeat(2,8px); grid-template-columns:repeat(2,8px); width:19px; height:19px; } .header-cta { gap:7px; font-size:11px; } .hero { min-height:790px; } .hero-image { object-position:72% center; } .hero-grid { background-size:52px 52px; } .hero-content { min-height:630px; padding:54px 0 120px; } .eyebrow, .section-kicker { margin-bottom:22px; } .hero h1 { gap:10px; margin-bottom:18px; font-size:51px; } .hero h1 strong { margin-top:5px; font-size:15px; } .hero-statement { font-size:25px; } .hero-detail { margin-top:22px; font-size:15px; line-height:1.52; } .hero-actions { grid-template-columns:1fr; gap:9px; margin-top:28px; display:grid; } .button { width:100%; } .hero-footer { height:92px; } .institution-rail-inner { white-space:nowrap; scrollbar-width:none; justify-content:flex-start; gap:22px; min-height:68px; overflow-x:auto; } .institution-rail-inner::-webkit-scrollbar { display:none; } .hero-formats { grid-template-columns:auto auto; gap:5px; display:grid; } .hero-formats span { padding:5px 7px; font-size:8px; } .scroll-cue span { display:none; } .capabilities, .company, .operations, .contact { padding:92px 0; } .quality { padding-top:92px; } .section-intro { padding-bottom:52px; } .section-intro h2, .company-heading h2, .operations-copy h2, .approach-heading h2, .quality-copy h2, .contact-copy h2 { font-size:38px; line-height:1; } .section-intro>p:last-child, .operations-copy>p, .quality-copy>p, .contact-copy>p { font-size:15px; } .capability-row { grid-template-columns:34px 1fr; gap:14px; } .capability-row p { grid-column:2; font-size:14px; } .capability-meta { grid-column:2; justify-self:start; } .signal-console { min-height:520px; } .console-stage { padding:24px 18px 28px 58px; } .console-line { left:33px; } .console-step { grid-template-columns:30px 1fr; gap:10px; min-height:90px; padding:10px 4px; } .console-footer { gap:7px; padding:0 10px; font-size:7px; } .console-footer i { width:8px; } .approach { padding-top:92px; } .approach-heading { padding-bottom:58px; } .quality-layout { padding-bottom:84px; } .format-band { height:120px; font-size:40px; } .contact-layout { gap:54px; } .function-item { grid-template-columns:28px 1fr; gap:14px; min-height:230px; padding:28px 22px; } .inquiry-form { padding:20px; } .form-grid { grid-template-columns:1fr; } .form-wide { grid-column:1; } .footer-main { grid-template-columns:1fr auto; gap:28px; padding:30px 0; } .footer-main p { grid-area:2/1/auto/-1; } .footer-functions { grid-template-columns:1fr 1fr; gap:14px; min-height:104px; padding:20px 0; } .footer-legal { flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; min-height:100px; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, :before, :after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } } /* ========================================================================== Part 3: additions for the static build (company/entity disclosure, terms page, mailto contact route, 404). Written in the same design language as Part 2. ========================================================================== */ /* --- Company disclosure block (homepage, inside #company) --- */ .company-legal { border-top: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr); align-items: start; gap: 64px; margin-top: 64px; padding-top: 54px; display: grid; } .company-legal h3 { margin: 0 0 20px; font-size: 22px; font-weight: 700; } .company-legal > div > p { color: var(--muted); max-width: 620px; margin: 0; font-size: 15px; line-height: 1.72; } .company-legal .text-link { margin-top: 28px; } .company-facts { border-top: 1px solid var(--line); display: grid; } .company-facts > div { border-bottom: 1px solid var(--line); grid-template-columns: 124px minmax(0, 1fr); align-items: baseline; gap: 18px; padding: 14px 0; display: grid; } .company-facts dt { color: #ffffff6b; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; } .company-facts dd { color: #ffffffc4; margin: 0; font-size: 13px; line-height: 1.6; } .company-facts a { text-underline-offset: 3px; text-decoration: underline #58e7f06b; transition: color 0.18s; } .company-facts a:hover { color: var(--cyan); } /* --- Contact form note / no-JS fallback --- */ .form-note { color: #ffffff8a; margin: 10px 0 0; font-size: 12px; line-height: 1.65; } .form-note a { color: #ffffffc4; text-underline-offset: 3px; text-decoration: underline #58e7f06b; transition: color 0.18s; } .form-note a:hover { color: var(--cyan); } /* --- Entity / registration line in the footer of every page --- */ .footer-entity { border-bottom: 1px solid var(--line); align-items: center; min-height: 74px; padding: 20px 0; display: flex; } .footer-entity p { color: #ffffff70; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 650; line-height: 1.75; } .footer-entity a { color: #ffffff94; text-underline-offset: 3px; text-decoration: underline #58e7f06b; transition: color 0.18s; } .footer-entity a:hover { color: var(--cyan); } /* --- Legal pages: fact table and bulleted lists --- */ .legal-facts { border-top: 1px solid #10141521; margin: 10px 0 30px; display: grid; } .legal-facts > div { border-bottom: 1px solid #10141521; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; padding: 15px 0; display: grid; } .legal-facts dt { color: #69716f; text-transform: uppercase; padding-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; } .legal-facts dd { color: #37403e; margin: 0; font-size: 16px; line-height: 1.65; } .legal-content ul.legal-list { list-style: disc outside; gap: 0; margin: 20px 0 24px; padding-left: 22px; display: block; } .legal-content ul.legal-list li { margin-bottom: 10px; } /* --- 404 --- */ .error-page { background: var(--ink); flex-direction: column; min-height: 100svh; display: flex; } .site-header-simple { grid-template-columns: 1fr auto; } .error-main { background-color: #0b0f10; background-image: linear-gradient(90deg, #ffffff0a 1px, #0000 1px), linear-gradient(#ffffff0a 1px, #0000 1px); background-size: 72px 72px; flex: 1; align-items: center; padding: 118px 0; display: flex; } .error-inner { max-width: 820px; } .error-main h1 { margin: 0; font-size: clamp(46px, 7vw, 92px); font-weight: 760; line-height: 0.96; } .error-main p { color: #ffffffa3; max-width: 620px; margin: 28px 0 0; font-size: 18px; line-height: 1.6; } .error-actions { flex-wrap: wrap; gap: 12px; margin-top: 38px; display: flex; } @media (width <= 820px) { .company-legal { grid-template-columns: 1fr; gap: 40px; } } @media (width <= 640px) { .legal-facts > div { grid-template-columns: 1fr; gap: 6px; } .footer-entity p { font-size: 10px; } }