/* ═══ 1 · TYPEFACES ═══════════════════════════════════════════════════ League Spartan — the display face. Geometric, wide, heavy. Headlines, numerals, eyebrows and buttons only; it is not asked to carry a paragraph, because it cannot. Source Serif 4 — the reading face. A transitional text serif with a large x-height, drawn for continuous reading at 16–20px. Instanced at optical size 15 and weights 400–700, which took the latin subset from 122 KB to 36 KB. Plus Jakarta Sans — the interface face, already vendored here. Labels, navigation, form fields, tables, small print: everything that is read in one glance rather than in sentences. Every face is subset latin / latin-ext with matching unicode-range, so a browser downloads latin-ext only if a page actually needs it. */ @font-face{font-family:'Spartan';font-style:normal;font-weight:400 800;font-display:swap; src:url('/assets/fonts/spartan-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304, U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Spartan';font-style:normal;font-weight:400 800;font-display:swap; src:url('/assets/fonts/spartan-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308, U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113, U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Serif4';font-style:normal;font-weight:400 700;font-display:swap; src:url('/assets/fonts/serif4-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304, U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Serif4';font-style:normal;font-weight:400 700;font-display:swap; src:url('/assets/fonts/serif4-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308, U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113, U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Serif4';font-style:italic;font-weight:400;font-display:swap; src:url('/assets/fonts/serif4-latin-italic.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304, U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Jakarta';font-style:normal;font-weight:400 800;font-display:swap; src:url('/assets/fonts/jakarta-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304, U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Jakarta';font-style:normal;font-weight:400 800;font-display:swap; src:url('/assets/fonts/jakarta-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308, U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113, U+2C60-2C7F,U+A720-A7FF} /* ═══ 2 · TOKENS — LIGHT ══════════════════════════════════ "Ash." A cool, blue-biased grey ground — not white, not warm paper — with one saturated ultramarine that is the only loud thing on the page. The neutrals are pulled toward the accent's hue so nothing reads as a default mid-grey. Every ratio below is measured against --bg / --bg-2 / --surface / --bar in that order. */:root{color-scheme:light;--bg:#F7F3EC;/* page ground */ --bg-2:#F2EDE5;/* alternating band */ --surface:#FFFDF9;/* raised panel */ --ink:#10100E;/* 5.60 · 5.38 · 6.17 · 4.80 */ --accent:#B26A00;/* 8.14 · 7.36 · 8.97 · 6.56 */ --accent-2:#8A5100;/* 10.73 · 9.71 · 11.84 · 8.65 */ --on-accent:#0D0D0B;/* 8.54 on --accent */ --line:#E5DED4;/* hairline. Decorative — never carries text */ --line-2:#D8CFC2;/* heavier hairline */ --line-strong:#8B857B;/* interactive borders: 3.23 on --bg (≥3:1) */ /* The bottom bar's ground: one step below the footer's --bg-2, taken from this ramp rather than mixed for the occasion, so the bar is a band of its own and needs no rule as well. 1.12:1 against the footer above it — seen, not shouted. */ --bar:#F2EDE5;/* THE PLATE. The one bold surface on the page: a solid ultramarine slab that sits behind the product screens. It is a token, not a one-off colour, because the dark theme needs a different blue at the same job — a #1E35B4 slab in a dark room is a headlight. */ --plate:#0D0D0B;--on-plate:#FBF8F3;/* 8.54 on --plate */ --on-plate-2:#9A958D;/* 6.00 on --plate */ /* The inverse block: a dark band placed inside the light theme. */ --inv-bg:#0D0D0B;--inv-bg-2:#141411;--inv-ink:#FBF8F3;/* 16.14 on --inv-bg · 14.67 on --inv-bg-2 */ --inv-mid:#9A958D;/* 8.33 on --inv-bg · 7.58 on --inv-bg-2 */ --inv-accent:#F5A000;/* 8.86 on --inv-bg · 8.06 on --inv-bg-2 */ --inv-line:rgba(255,255,255,.11);--logo-light:block;/* the ink logo, for a light ground */ --logo-dark:none;--shade:rgba(37,26,8,.07);--glow:rgba(245,160,0,.14);--lime:#F5A524;/* the group accent, used by the hero only */} /* ═══ 3 · TOKENS — DARK ═══════════════════════════════════ "Ink." Designed for a dark room, not derived from the light theme by flipping it: the grounds go bluer and colder than a neutral black, the accent climbs to a periwinkle that can carry text on all four grounds, and the plate DROPS to a deep navy instead of rising — a bright slab at night is a lamp, and the screens on it have to stay the subject. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){color-scheme:dark;--bg:#0D0D0B;--bg-2:#141411;--surface:#171714;--ink:#FBF8F3;/* 5.94 · 5.58 · 5.21 */ --accent:#F5A000;/* 8.47 · 7.96 · 7.43 */ --accent-2:#FF9D00;/* 11.34 · 10.66 · 9.95 */ --on-accent:#0D0D0B;/* 8.47 on --accent */ --line:rgba(255,255,255,.11);--line-2:rgba(255,255,255,.18);--line-strong:rgba(255,255,255,.34);/* 4.00 on --bg */ /* At night the step goes down to the page ground itself, the darkest tone this palette has, so the footer reads as the raised band and the bar as the floor under it. */ --bar:#080907;--plate:#141411;--on-plate:#FBF8F3;/* 11.08 on --plate */ --on-plate-2:#9A958D;/* 6.67 on --plate */ /* The inverse block at night is a light band. */ --inv-bg:#F7F3EC;--inv-bg-2:#F2EDE5;--inv-ink:#10100E;/* 15.44 on --inv-bg · 13.78 on --inv-bg-2 */ --inv-mid:#77736C;/* 7.54 on --inv-bg · 6.73 on --inv-bg-2 */ --inv-accent:#B26A00;/* 8.70 on --inv-bg · 7.77 on --inv-bg-2 */ --inv-line:#E5DED4;--logo-light:none;--logo-dark:block;--shade:rgba(0,0,0,.5);--glow:rgba(245,160,0,.12);--lime:#F5A524} } /* The explicit toggle. Written twice so it wins in BOTH directions: dark forced on a light system, and light forced on a dark one. */:root[data-theme="dark"]{color-scheme:dark;--bg:#0D0D0B;--bg-2:#141411;--surface:#171714;--ink:#FBF8F3;--accent:#F5A000;--accent-2:#FF9D00;--on-accent:#0D0D0B;--line:rgba(255,255,255,.11);--line-2:rgba(255,255,255,.18);--line-strong:rgba(255,255,255,.34);--bar:#080907;--plate:#141411;--on-plate:#FBF8F3;--on-plate-2:#9A958D;--inv-bg:#F7F3EC;--inv-bg-2:#F2EDE5;--inv-ink:#10100E;--inv-mid:#77736C;--inv-accent:#B26A00;--inv-line:#E5DED4;--logo-light:none;--logo-dark:block;--shade:rgba(0,0,0,.5);--glow:rgba(245,160,0,.12);--lime:#F5A524} :root[data-theme="light"]{color-scheme:light;--bg:#F7F3EC;--bg-2:#F2EDE5;--surface:#FFFDF9;--ink:#10100E;--accent:#B26A00;--accent-2:#8A5100;--on-accent:#0D0D0B;--line:#E5DED4;--line-2:#D8CFC2;--line-strong:#8B857B;--bar:#F2EDE5;--plate:#0D0D0B;--on-plate:#FBF8F3;--on-plate-2:#9A958D;--inv-bg:#0D0D0B;--inv-bg-2:#141411;--inv-ink:#FBF8F3;--inv-mid:#9A958D;--inv-accent:#F5A000;--inv-line:rgba(255,255,255,.11);--logo-light:block;--logo-dark:none;--shade:rgba(37,26,8,.07);--glow:rgba(245,160,0,.14);--lime:#F5A524} /* ═══ 4 · SCALE ═══════════════════════════════════════════════════════ Spacing on a strict 4 / 8 rhythm. Every gap, pad and margin in this file is one of these — nothing is a stray number. */:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;/* measure of the page */ /* Section rhythm. Three values, not one: the page is meant to have pacing rather than a uniform drumbeat, so a plain section, a banded section and a tight section are deliberately different heights. All three are on the 8px scale and none of them depends on the viewport height — a short laptop window should not change the composition. */ --sec:clamp(72px,9vw,128px);/* plain section */ --sec-band:clamp(88px,11vw,160px);/* banded / inverse */ --sec-tight:clamp(56px,7vw,96px);/* subordinate section */ --hdr:64px;/* header height, less its rule */ --rail:56px;/* the hanging-number column */ /* Type. Display is fluid; reading sizes barely move, because a paragraph that changes size as you resize is a paragraph nobody finishes. The desktop end of every ramp is a ceiling that was set deliberately: this is a corporate page, not a poster, and the previous caps (136 / 84 / 56px) were display scale on a body of text. Mobile floors are within a couple of px of where they were — the small end was never the problem. */ --f-mega:clamp(3.25rem,9vw,6.875rem);/* 52 → 110, the old hero size */ --f-h1:clamp(2.5rem,5.5vw,4rem);/* 40 → 64 */ --f-h2:clamp(1.875rem,3.6vw,2.75rem);/* 30 → 44 */ --f-h3:clamp(1.25rem,1.9vw,1.5rem);/* 20 → 24 */ --f-h4:clamp(1.0625rem,1.2vw,1.1875rem);/* 17 → 19 */ --f-lede:clamp(1.1875rem,1.7vw,1.4375rem);/* 19 → 23 */ --f-body:1.0625rem;/* 17px */ --f-sm:1rem;/* 16px — card and row copy */ --f-xs:0.875rem;/* 14px */ --f-eye:0.75rem;/* 12px, uppercase, tracked */ /* Three roles, and the serif no longer has one. League Spartan is the voice — headlines, eyebrows, column headings, anything set in caps. Jakarta does all the reading, interface text AND prose, which is the change from the previous site: a serif body on a cool grey ground read as a magazine, and this is a company that runs software. The mono is reserved for filed particulars and register numbers, where tabular figures are the point. */ --display:'Spartan','Jakarta',system-ui,-apple-system,'Segoe UI',sans-serif;--read:'Jakarta',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--ui:'Jakarta',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mo:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--e:cubic-bezier(.22,.68,.24,1);--r:2px;/* corners are nearly square, on purpose */ /* Aliases. Sibling pages and a few inline styles were written against the previous vocabulary; they are kept pointing at the new tokens so nothing on this site can go unstyled. */ --sans:var(--ui);--ar:var(--display);--paper:var(--bg);--paper-2:var(--bg-2);--paper-3:var(--surface);--white:var(--surface);--lav:var(--bg-2);--lav-2:var(--bg-2);--rule:var(--line);--rule-2:var(--line-2);--wire:var(--line-strong);--lime-deep:var(--accent);--violet:var(--accent);--violet-deep:var(--accent-2);--violet-lt:var(--inv-accent);--navy:var(--inv-bg);--on-navy:var(--inv-ink);--on-navy-2:var(--inv-mid);--on-navy-3:var(--inv-mid)} /* ═══ 5 · BASE ════════════════════════════════════════════════════════ */*, *::before, *::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;/* nothing scrolls the page sideways */} img, svg, video{max-width:100%;height:auto} svg{flex:none} h1, h2, h3, h4{font-weight:800;line-height:.98;letter-spacing:-.03em;margin:0;text-wrap:balance;overflow-wrap:break-word} h1{font-size:var(--f-h1);line-height:1} /* h3 and h4 carry two- and three-line titles at 18–22px, where .98 collides. They get a reading line-height; only the display sizes above are set solid. */h3{line-height:1.18} h4{font-size:var(--f-h4);letter-spacing:-.01em;line-height:1.2} p{margin:0 0 1.15em} p:last-child{margin-bottom:0} a{color:inherit} a:not([class]){color:var(--accent-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--accent)} a:not([class]):hover{text-decoration-thickness:2px} /* One focus treatment, everywhere, visible on every ground in both themes. accent vs bg is 5.88:1 (light) and 7.43:1 (dark). */:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px} ::selection{background:var(--accent);color:var(--on-accent)} /* Skip link — first thing in the tab order, invisible until it matters. */.skip{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ui)} .skip:focus{top:var(--s4)} /* ═══ 6 · SMALL SHARED PIECES ═════════════════════════════════════════ *//* The eyebrow. Uppercase, tracked, in the display face — it reads as a filing label rather than a heading. */.reg{font-family:var(--display)} .reg a{color:var(--accent-2);text-decoration:none;border-bottom:1px solid var(--line-2)} .reg a:hover{border-bottom-color:var(--accent)} .reg--accent{color:var(--accent)} .reg--mute{color:var(--faint)} .mono{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1} .mono{font-family:var(--mo);font-size:var(--f-sm)} /* Buttons. Square-ish, 44px tall — the same height as every other interactive control in the chrome, which the 48px version was not — with an 8px gap to their icon, the same 8px every other icon+label pair on this site uses. Two only: one solid, one outlined. */.btn{border:1px solid var(--line-strong);background:transparent;color:var(--ink);font-family:var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;cursor:pointer} .btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} .btn.primary{border-color:var(--accent)} .btn.primary:hover{border-color:var(--accent-2);color:var(--on-accent)} .btn+.btn{margin-left:var(--s3)} .acts{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center} .acts .btn+.btn{margin-left:0} /* An action row that follows a block of content, rather than sitting inside one. It replaces four hand-written `style="margin-top:…"` attributes in the markup, which is how 48px and 96px ended up next to each other in the same position on the same page. */.sec-acts{margin-top:var(--s6)} /* An inline "go" link. */.go{min-height:44px;font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none} /* ═══ 7 · HEADER ══════════════════════════════════════════════════════ Compact, horizontal, one rule under it. Five links and one action — nothing floats, nothing grows on scroll, nothing is oversized. On a phone the same header keeps its height and swaps the links for a single labelled button that opens a full-screen panel with 48px rows. */.top{backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)} @supports not (backdrop-filter:blur(1px)){ .top{background:var(--bg)} } .top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:var(--hdr)} .brand{text-decoration:none;color:var(--ink)} .brand img{height:20px;width:auto;display:block} .brand .bl{display:var(--logo-light)} .brand .bd{display:var(--logo-dark)} .brand b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap} .mainnav a{position:relative;display:inline-flex;align-items:center;height:var(--hdr);font-family:var(--ui);font-size:var(--f-sm);font-weight:600;color:var(--mid);text-decoration:none;white-space:nowrap;transition:color .18s var(--e)} .mainnav a:hover{color:var(--ink)} .mainnav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px} .navcta{display:inline-flex;align-items:center;gap:var(--s2);min-height:38px;padding:0 var(--s4);border:1px solid var(--line-strong);border-radius:var(--r);font-family:var(--display);font-size:var(--f-eye);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:background .18s var(--e),color .18s var(--e),border-color .18s var(--e)} .navcta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} /* The theme switch and the menu button share one square control. */.tgl, .burger{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--mid);cursor:pointer;transition:color .18s var(--e),border-color .18s var(--e)} .tgl:hover, .burger:hover{color:var(--ink);border-color:var(--line-strong)} .tgl .moon{display:var(--logo-light)} /* light theme → offer the moon */.tgl .sun{display:var(--logo-dark)} .burger{display:none;gap:var(--s2);width:auto;padding:0 var(--s3);grid-auto-flow:column} .burger span{font-family:var(--display);font-size:var(--f-eye);font-weight:700;letter-spacing:.14em;text-transform:uppercase} /* The mobile panel. A real page-level menu, not a shrunken desktop bar. */.mpanel{position:fixed;z-index:99;overflow-y:auto;overscroll-behavior:contain;display:none} .mpanel[data-open]{display:block} .mpanel a{font-family:var(--display);font-weight:700;letter-spacing:-.02em;text-decoration:none} .mpanel a small{font-family:var(--ui);font-size:var(--f-xs);font-weight:500;letter-spacing:0;text-transform:none} .mpanel .m-cta{border-bottom:0} .mpanel .m-cta .btn{width:100%} @media (max-width:1040px){ .mainnav{display:none} .burger{display:inline-grid} .navcta{display:none} } html[data-menu]{overflow:hidden} /* ═══ 8 · SECTIONS ════════════════════════════════════════════════════ Four densities, and the homepage alternates them on purpose: LARGE for the hero and the intelligence layer, MEDIUM for the group and the real world, COMPACT for the philosophy, the proof and the particulars. */.sec{border-top:1px solid var(--line)} .sec--md{padding-block:var(--sec-band)} .sec--sm{padding-block:var(--sec-tight)} .sec--inv{border-top-color:var(--inv-bg)} .sec--inv .lede, .sec--inv p{color:var(--inv-mid)} .sec--flush{border-top:0} .sec-h h2{margin:var(--s3) 0 0} .sec-h .lede{margin:var(--s4) 0 0} .lede{font-family:var(--read);max-width:66ch} .sec--inv .sec-h .lede{color:var(--inv-mid)} .sec-h-row .sec-h{flex:1 1 34ch} .stack{margin-top:var(--s7)} .stack--sm{margin-top:var(--s6)} /* ═══ 9 · THE HERO ════════════════════════════════════════════════════ Three lines, one paragraph, two actions, one filed-particulars strip. No image, no gradient, no overlay, nothing that delays first paint. */.hero{position:relative;overflow:hidden;border-top:0;/* where the scrim over the photograph gives way. The narrower the viewport the more the image crops to its bright centre, so the hand-off moves right with it and the lede never sits on glare. */ --sc1:30%;--sc2:46%;--sc3:66%;--sc4:84%} @media (max-width:1180px){ .hero{--sc1:44%;--sc2:60%;--sc3:78%;--sc4:94%} } @media (max-width:820px){ .hero{--sc1:62%;--sc2:76%;--sc3:88%;--sc4:100%} } /* the group hero photograph, scrimmed so the type stays the subject */.hero::before{content:"";position:absolute;inset:0;z-index:-2;background: /* solid under the whole text column, then released — the lede has to stay readable at every width, not just wide desktop */ linear-gradient(90deg, var(--bg) 0%, var(--bg) var(--sc1), color-mix(in srgb, var(--bg) 82%, transparent) var(--sc2), color-mix(in srgb, var(--bg) 34%, transparent) var(--sc3), transparent var(--sc4)), linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, transparent) 0%, transparent 26%, transparent 62%, var(--bg) 100%), url('/assets/hero-bg.webp?v=1') right center/cover no-repeat, var(--bg)} /* a slow lime mesh, the one place the group accent appears on this site */.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 52% at 80% 44%, color-mix(in srgb, var(--lime) 12%, transparent), transparent 62%);animation:mesh 22s ease-in-out infinite alternate} @keyframes mesh{0%{opacity:.7}100%{opacity:1}} .hero h1 span:nth-child(2){animation-delay:.12s} .hero h1 span:nth-child(3){animation-delay:.24s} @keyframes rise{to{opacity:1;transform:none}} /* the reveal is decoration; without motion the hero is simply there */ @media (prefers-reduced-motion:reduce){ .hero h1 span, .hero .lede, .hero .acts{opacity:1;transform:none;animation:none} .hero::after{animation:none} } @media (max-width:720px){ } @media (max-width:1080px){ } @media (max-width:900px){ } @media (max-width:680px){ } .card-logo{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:var(--r);object-fit:cover;background:var(--surface)} .card-mark{width:36px;height:36px;flex:none;border:1px solid var(--line-2);border-radius:var(--r);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px;background:var(--surface)} /* Status. One word, one dot, four permitted values and no others. */.status{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--ui);font-size:var(--f-xs);font-weight:600;color:var(--mid);white-space:nowrap} .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none} .status--operating::before{background:var(--accent)} .status--development::before{background:transparent;border:1.5px solid var(--faint)} .status--deployment::before{border-radius:1px;background:var(--faint)} .status--service::before{border-radius:1px;background:transparent;border:1.5px solid var(--faint)} @media (max-width:880px){ } @media (max-width:820px){ } @media (max-width:560px){ } @keyframes pl{0%,100%{opacity:.25;r:16}50%{opacity:.7;r:19}} @media (max-width:760px){ } @media (max-width:860px){ } @media (max-width:880px){ } @media (max-width:900px){ } .prose{max-width:68ch;font-family:var(--read);font-size:var(--f-lede);line-height:1.7;color:var(--mid)} .prose h2{margin:var(--s8) 0 var(--s4);color:var(--ink)} .prose h3{margin:var(--s6) 0 var(--s3);color:var(--ink)} .prose h2:first-child, .prose h3:first-child{margin-top:0} .prose ul, .prose ol{margin:0 0 1.15em;padding-left:1.25em} .prose li{margin-bottom:.4em} .prose strong{color:var(--ink);font-weight:700} .dl{display:grid;grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:0;border-top:1px solid var(--line);margin:var(--s6) 0 0} .dl dt{padding:var(--s4) var(--s5) var(--s4) 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:var(--f-eye);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .dl dd{margin:0;padding:var(--s4) 0;border-bottom:1px solid var(--line);font-size:var(--f-sm);font-weight:600;color:var(--ink)} .crumbs{font-family:var(--ui);font-size:var(--f-xs);color:var(--faint)} .crumbs a{border-bottom:1px solid var(--line-2)} /* ═══ 17 · FORMS ══════════════════════════════════════════════════════ */.form{max-width:640px;margin-top:var(--s6)} .field{display:block;margin-bottom:var(--s5)} .field>span{display:block;margin-bottom:var(--s2);font-family:var(--display);font-size:var(--f-eye);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .field input, .field select, .field textarea{width:100%;min-height:48px;padding:var(--s3) var(--s4);border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);font-family:var(--ui);font-size:var(--f-body)} .field textarea{min-height:150px;resize:vertical;line-height:1.6} .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .note{padding:var(--s4) var(--s5);border:1px solid var(--line-strong);border-left:3px solid var(--accent);background:var(--surface);font-size:var(--f-sm);color:var(--mid);margin-bottom:var(--s5)} .note--err{border-left-color:#B3261E} .field-hint{display:block;margin-top:var(--s2);font-size:var(--f-xs);color:var(--faint)} /* ═══ 18 · FOOTER ═════════════════════════════════════════════════════ */.foot{border-top:1px solid var(--line)} @media (max-width:1100px){ .foot-g{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:640px){ .foot-g{grid-template-columns:repeat(2,minmax(0,1fr))} } .foot-id{grid-column:1/-1} @media (min-width:1101px){ .foot-id{grid-column:auto} } .foot-id p{font-family:var(--read)} .f-col h3, .f-col h4{font-family:var(--display)} .f-col li{margin-bottom:var(--s3)} .f-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em} .foot-bar{background:var(--bar);border-top:1px solid var(--line);padding-block:var(--s5)} .fbar-id{font-family:var(--mo);font-size:var(--f-xs);color:var(--faint);letter-spacing:.02em} @media (prefers-reduced-motion:reduce){ *, *::before, *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } /* ═══ 20 · RESPONSIVE TAIL ════════════════════════════════════════════ */ @media (max-width:640px){ :root{--sec:44px;--sec-band:52px;--sec-tight:32px} .hero{padding-block:var(--s8) var(--s8)} .btn+.btn{margin-left:0} .acts .btn{width:100%} } @media (max-width:380px){ .brand b{font-size:14px} } /* Print: the particulars, not the furniture. */ @media print{ .top, .mpanel, .foot-bar, .acts, .burger, .tgl{display:none !important} body{background:#fff;color:#000} .sec{border-top:1px solid #ccc;padding-block:18px} } /* ═══ 21 · THE INVERSE BAND, IN CONTEXT ═══════════════════════════════ A dark band inside a light page (and a light band inside a dark one) changes what "ink" and "faint" mean for everything inside it. These are the pieces that appear in both contexts and would otherwise carry the page's tokens onto the opposite ground. */.sec--inv .btn{border-color:var(--inv-mid);color:var(--inv-ink)} .sec--inv .btn:hover{background:var(--inv-ink);color:var(--inv-bg);border-color:var(--inv-ink)} .sec--inv .btn.primary{background:var(--inv-accent);border-color:var(--inv-accent);color:var(--inv-bg)} .sec--inv .btn.primary:hover{background:var(--inv-ink);border-color:var(--inv-ink);color:var(--inv-bg)} .sec--inv small{color:var(--inv-mid)} .sec--inv a:not([class]){color:var(--inv-accent);text-decoration-color:var(--inv-accent)} .sec--inv :where(a, button):focus-visible{outline-color:var(--inv-accent)} .split{display:grid;gap:var(--s7) var(--s8);grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start} @media (max-width:900px){ .split{grid-template-columns:1fr;gap:var(--s6)} } .sched-list{list-style:none;margin:var(--s5) 0 0;padding:0} .sched-list li{padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--f-sm);color:var(--mid)} .sched-list li strong{color:var(--ink)} /* ═════════════════════════════════════════════════════════════════════ AFTERMATH — the design system Warm cream canvas, deep black bands, one controlled orange. Every value below is a token; nothing here is a one-off. Section order is deliberate: cream · black · cream · black · cream · black footer, so no two neighbouring blocks read the same. ══════════════════════════════════════════════════════════════════ */:root{--orange:#F5A000;--orange-strong:#FF9D00;--orange-soft:#FFF0D4;--r-pill:999px;--r-panel:30px;/* system panels */ --r-card:24px;/* venture cards */ --r-compact:18px;/* supporting */ --r-btn:999px;--sec-y:clamp(72px,7.4vw,112px);--gut:clamp(20px,4vw,32px);--maxw:1380px;--shadow-card:0 10px 30px rgba(41,30,12,.045);--shadow-lift:0 18px 50px rgba(37,26,8,.09);--shadow-nav:0 16px 40px rgba(19,14,7,.12);--ease:cubic-bezier(.22,.68,.24,1);--t:200ms var(--ease)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--orange:#F5A000;--orange-strong:#FFB43D} } :root[data-theme="dark"]{--orange:#F5A000;--orange-strong:#FFB43D} /* ── canvas + measure ────────────────────────────────────────────────── */body{background:var(--bg);color:var(--text,var(--ink));font-family:'Jakarta',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16.5px;line-height:1.62;letter-spacing:-.004em} .wrap{width:min(var(--maxw), calc(100% - 64px));max-width:none;margin-inline:auto;padding-inline:0} @media (max-width:640px){ .wrap{width:calc(100% - 40px)} } .sec{padding-block:var(--sec-y);background:transparent} /* ── type ────────────────────────────────────────────────────────────── */h1, h2, h3, h4{font-family:'Jakarta',system-ui,sans-serif;color:inherit} .hero h1{font-size:clamp(3.25rem,6.4vw,5.6rem);line-height:.98;font-weight:800;letter-spacing:-.055em} h2{font-size:clamp(2.125rem,3.2vw,2.75rem);font-weight:800;letter-spacing:-.035em;line-height:1.06} h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em} .lede{font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.66;color:var(--mid)} p{line-height:1.62} /* the eyebrow: dot, caps, wide tracking */.reg{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:none;border:0;padding:0} .reg::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none} .sec--inv .reg, .foot .reg{color:var(--on-plate)} .sec-h{max-width:58ch} .sec-h h2{margin-top:.42em} .sec-h .lede{margin-top:.6em} .sec-h-row{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:clamp(30px,3.4vw,42px)} /* ── buttons: three families, no more ────────────────────────────────── */.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:var(--r-btn);font-weight:700;font-size:15px;text-decoration:none;transition:background var(--t), color var(--t), border-color var(--t), transform var(--t)} .btn svg{transition:transform var(--t)} .btn:hover svg{transform:translateX(3px)} .btn.primary{background:var(--orange);color:#0D0D0B;border:0} .btn.primary:hover{background:var(--orange-strong)} .btn:not(.primary){background:var(--surface);color:var(--ink);border:1px solid var(--line-2)} .btn:not(.primary):hover{border-color:var(--ink)} .sec--inv .btn:not(.primary), .foot .btn:not(.primary){background:transparent;color:var(--on-plate);border-color:var(--inv-line)} .go{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14.5px;font-weight:600;white-space:nowrap;transition:border-color var(--t), background var(--t), color var(--t)} .go:hover{border-color:var(--ink)} .go svg{transition:transform var(--t)} .go:hover svg{transform:translateX(3px)} .sec--inv .go{background:transparent;border-color:var(--inv-line);color:var(--on-plate)} /* ── the floating capsule ────────────────────────────────────────────── */.top{position:sticky;top:14px;z-index:100;background:transparent;border:0;padding-top:14px} .top > .wrap{display:flex;align-items:center;gap:18px;min-height:72px;padding:8px 10px 8px 22px;border-radius:var(--r-pill);background:#0D0D0B;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-nav)} .top a, .top .brand{color:#FBF8F3;text-decoration:none} .brand{gap:11px;flex:none} .brand::after{font-weight:700;font-size:16px;letter-spacing:-.015em;color:#FBF8F3} @media (max-width:1040px){ } .mainnav{display:flex;align-items:center;gap:2px;margin-inline:auto} .navtop, .mainnav > a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:500;color:rgba(251,248,243,.74);transition:color var(--t), background var(--t)} .navtop:hover, .mainnav > a:hover, .navitem:hover .navtop, .navitem:focus-within .navtop{color:var(--orange);background:rgba(255,255,255,.06)} .navtop svg{opacity:.5;transition:transform var(--t)} .navitem:hover .navtop svg{transform:rotate(180deg);opacity:1} .topacts{flex:none} .top .navcta{gap:9px;background:var(--orange);color:#0D0D0B;font-weight:700;font-size:14px;border-radius:var(--r-pill);padding:0 22px;transition:background var(--t)} .top .navcta:hover{background:var(--orange-strong)} .top .navcta svg{transition:transform var(--t)} .top .navcta:hover svg{transform:translateX(3px)} .top .tgl, .top .burger{border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);color:#FBF8F3} /* dropdowns */.navitem{position:relative} .navitem::after{content:"";position:absolute;inset:100% -8px auto;height:16px} .navdrop{position:absolute;top:calc(100% + 16px);left:-8px;z-index:110;min-width:290px;max-width:360px;padding:10px;display:grid;gap:2px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 26px 54px -26px rgba(37,26,8,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms} .navitem:hover .navdrop, .navitem:focus-within .navdrop{opacity:1;visibility:visible;transform:none} .navdrop a{padding:11px 13px;border-radius:12px;color:var(--ink)} .navdrop a:hover, .navdrop a:focus-visible{background:var(--bg-2)} .navdrop strong{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em} .navdrop small{display:block;margin-top:2px;color:var(--faint);font-size:12.5px;line-height:1.45} @media (max-width:900px){ .mainnav{display:none} } /* ── HERO: two columns, copy left, ecosystem right ───────────────────── */.hero{padding-block:clamp(34px,4vw,54px) clamp(56px,6vw,90px);background:transparent} .hero::before, .hero::after{content:none !important} .hero > .wrap{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);gap:clamp(28px,4vw,56px)} @media (max-width:960px){ .hero > .wrap{grid-template-columns:1fr} } .hero h1{margin-top:.3em} .hero h1 span{display:block;opacity:1;transform:none;animation:none} .hero h1 .k{box-shadow:none} .hero .lede{max-width:44ch;color:var(--mid);opacity:1;animation:none} .hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;opacity:1;animation:none} @media (max-width:560px){ } @media (max-width:1100px){ } @media (max-width:620px){ } .card-logo, .card-mark{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);overflow:hidden} @media (max-width:960px){ } /* ── dark sections run edge to edge ──────────────────────────────────── */.sec--inv{background:var(--plate);color:var(--on-plate);padding-block:var(--sec-y)} .sec--inv > .wrap{background:transparent;border:0;border-radius:0} .sec--inv h1, .sec--inv h2, .sec--inv h3, .sec--inv h4{color:var(--on-plate)} .sec--inv p, .sec--inv .lede{color:var(--on-plate-2)} .sec--inv h2 .k{color:var(--orange)} .sec--band{background:transparent} .sec--band > .wrap{background:transparent;border:0;border-radius:0} @media (max-width:1000px){ } @media (max-width:620px){ } @media (max-width:1000px){ } @media (max-width:600px){ } @media (max-width:1000px){ } @media (max-width:600px){ } /* ── FOOTER: black, full width, six areas, CTA inside ────────────────── */.foot{background:#080907;color:var(--on-plate);padding:0;border:0;border-radius:0} .foot > .wrap{padding-block:clamp(64px,7vw,100px) 0;background:transparent;border:0;border-radius:0} .foot-g{display:grid;grid-template-columns:minmax(230px,1.35fr) repeat(4,minmax(110px,.8fr)) minmax(240px,1.1fr);align-items:start} @media (max-width:1180px){ .foot-g{grid-template-columns:repeat(3,1fr);gap:34px} } @media (max-width:700px){ .foot-g{grid-template-columns:1fr 1fr} } @media (max-width:460px){ .foot-g{grid-template-columns:1fr} } .foot-id p{color:var(--on-plate-2);font-size:14px;line-height:1.66;margin:16px 0 0;max-width:30ch} .f-col h3, .f-col h4{color:#FBF8F3;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px;font-weight:700} .f-col ul{list-style:none;padding:0;margin:0;display:grid} .f-col a{display:block;color:rgba(251,248,243,.72);text-decoration:none;transition:color var(--t)} .f-col a:hover, .f-col a:focus-visible{color:var(--orange)} .foot-cta{background:rgba(255,255,255,.04);border:1px solid rgba(245,160,0,.34);border-radius:20px;padding:26px} .foot-cta h3, .foot-cta h4{color:#FBF8F3;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;font-weight:700;line-height:1.6} .foot-cta p{color:var(--on-plate-2);font-size:14px;line-height:1.6;margin:0 0 20px} .foot-cta .btn.primary{width:100%;justify-content:space-between;padding:0 20px;font-size:13px;letter-spacing:.1em;text-transform:uppercase} .foot > .wrap{padding-bottom:clamp(44px,4.6vw,64px)} .foot .foot-bar{margin:0;padding:0;border:0;background:#050604;border-top:1px solid rgba(255,255,255,.08)} .foot .foot-bar > .wrap{padding-block:20px;background:transparent;border:0;border-radius:0;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;color:rgba(251,248,243,.56);font-size:13px} .foot .foot-bar .fbar-id{color:rgba(251,248,243,.44)} @keyframes breathe{ from{ opacity:.65 } to{ opacity:1 } } :root[data-theme="dark"] .orbit-ring, .orbit-ring--soft{stroke:rgba(13,13,11,.09)} @keyframes spin{ to{ transform:rotate(360deg) } } @keyframes travel{ from{ offset-distance:0% } to{ offset-distance:100% } } .orbit-core{fill:#0D0D0B} @keyframes pulse{ from{ opacity:.55 } to{ opacity:1 } } @keyframes float{ from{ transform:translateY(0) } to{ transform:translateY(-7px) } } .node--2{right:2%;animation-delay:-1.4s} .node--3{right:-2%;animation-delay:-2.8s} .node--4{bottom:14%;right:12%;animation-delay:-4.2s} .node--5{bottom:6%;animation-delay:-5.6s} .node--6{animation-delay:-3.5s} @media (max-width:960px){ .orbit{max-width:560px} .node{min-width:118px;padding:8px 11px} } @media (max-width:640px){ .node{min-width:0} } @media (prefers-reduced-motion:reduce){ .orbit-spin, .orbit-core-ring, .orbit-glow, .node{animation:none !important} } /* ── HEADER POLISH ───────────────────────────────────────────────────── *//* The capsule sits flat on a page that has not been scrolled and lifts once it starts overlapping content — the shadow means something. */.top{transition:box-shadow var(--t), transform var(--t)} .top .top-in{transition:box-shadow var(--t)} /* Touch opens a dropdown instead of following the parent link. */.navitem[data-open] .navdrop{opacity:1;visibility:visible;transform:none} .navitem[data-open] .navtop{color:var(--orange);background:rgba(255,255,255,.06)} .navitem[data-open] .navtop svg{transform:rotate(180deg);opacity:1} /* Every header control is a real target: 44px minimum, 8px apart. */.top .navtop, .mainnav > a{display:inline-flex;align-items:center;min-height:44px} .top .tgl, .top .burger{min-width:44px;min-height:44px} .topacts{display:flex;align-items:center;gap:10px} .top .navcta{min-height:44px;display:inline-flex;align-items:center} .brand{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px} .navdrop a{min-height:44px} /* Focus is visible on every interactive element, in both themes, and it is never removed — only replaced with something clearer. */a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px} .top a:focus-visible, .top button:focus-visible, .foot a:focus-visible, .sec--inv a:focus-visible{outline-color:var(--orange-strong);outline-offset:3px} .skip{position:fixed;left:16px;top:-100px;z-index:1200;background:var(--plate);color:#FBF8F3;padding:13px 20px;border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;transition:top .18s var(--ease)} .skip:focus, .skip:focus-visible{top:16px;width:auto;height:auto;clip:auto;overflow:visible} /* Figures line up: stats, registration numbers and the loop numerals all use tabular figures so nothing shifts as values change. */.fbar-id, .mono{font-variant-numeric:tabular-nums} /* ── MOBILE DRAWER ───────────────────────────────────────────────────── */.mpanel{color:var(--on-plate);border-top:1px solid var(--inv-line)} .mpanel a:hover, .mpanel a:focus-visible{background:rgba(255,255,255,.05)} @media (prefers-reduced-motion:reduce){ .top, .top .top-in, .skip, .navdrop{transition:none !important} } /* ── CONTRAST: measured, not estimated ─────────────────────────────────── Every pairing below was read off the rendered page and raised until it clears WCAG 2.2 AA — 4.5:1 for body and labels, 3:1 for large display. The bright amber stays exactly as it is for fills, strokes, icons and anything sitting on the black plate, where it already passes easily. Only amber used as small text on a light ground is deepened. */:root{--mid:#6B665F;/* 5.14 on the canvas, 5.60 on a card */ --faint:#736E66;/* 4.57 on the canvas, 4.98 on a card */ --orange-ink:#9E5A00;/* amber as small text: 4.85 / 5.28 */ --orange-disp:#C07A00;/* amber as large display text: 3.15 */} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--mid:#9A958D;--faint:#8B867E;--orange-ink:var(--orange);--orange-disp:var(--orange)} } :root[data-theme="dark"]{--mid:#9A958D;--faint:#8B867E;--orange-ink:var(--orange);--orange-disp:var(--orange)} .hero h1 .k{color:var(--orange-disp)} .reg--accent, .go{color:var(--orange-ink)} .card-mark{color:var(--orange-ink)} /* on the black plate the bright amber is the correct colour and passes */.sec--inv .go, .sec--inv .reg--accent, .foot .f-col a:hover{color:var(--orange)} /* the section kicker is a label, so it reads at label contrast */.reg{color:var(--faint)} .sec--inv .reg{color:rgba(251,248,243,.62)} /* The explicit light toggle carries higher specificity than :root, so the corrected values have to be restated there or the toggle reinstates the failing greys. Same values, matching selector, later in the file. */:root[data-theme="light"]{--mid:#6B665F;--faint:#736E66;--orange-ink:#9E5A00;--orange-disp:#C07A00} @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){--mid:#6B665F;--faint:#736E66} } /* ── FOOTER: tighter link rhythm ─────────────────────────────────────── */.f-col ul{gap:0} .f-col h3, .f-col h4, .foot-cta h3, .foot-cta h4{margin-bottom:12px} .foot-g{gap:clamp(20px,2.2vw,38px)} /* ── HEADER: the capsule is black in both themes ───────────────────────── so the wordmark inside it is always the light one. The theme-swapped pair was painting the ink logo onto a black bar in light mode, which is why the brand disappeared. */.top .brand .bl, .foot .brand .bl{display:none} .top .brand .bd, .foot .brand .bd{display:block} /* Below the nav breakpoint the capsule carries the logo, the theme switch and the menu button only — the CTA lives inside the drawer. */ @media (max-width:1040px){ .top .navcta{display:none} .top .burger{display:inline-grid} .top .top-in{padding-inline:14px} .brand::after{display:inline;font-size:15px} } @media (max-width:420px){ .top .top-in{padding-inline:12px;gap:8px} .brand::after{display:none} } @media (max-width:560px){ } /* ── BUILD · RUN · KEEP — the band directly under the hero ─────────────── A warm tinted ground, so it separates the hero from the register without reaching for another black panel (the operating model already owns that weight further down the page). Full width, contained type. */.brk{border-block:1px solid #E7D5B2} :root[data-theme="dark"] .brk, :root:not([data-theme="light"]) .brk{border-color:rgba(255,255,255,.08)} @media (prefers-color-scheme:dark){ } :root[data-theme="dark"] .brk{background:linear-gradient(180deg,#1B1710 0%,#151209 100%)} :root[data-theme="light"] .brk{background:linear-gradient(180deg,#F6E8CE 0%,#F3E2C4 100%);border-color:#E7D5B2} .brk-h{text-wrap:balance} .brk-g{align-items:start} @media (max-width:1000px){ .brk-g{grid-template-columns:repeat(3,minmax(0,1fr))} .brk-a{grid-column:1/-1;margin-top:6px} } @media (max-width:680px){ .brk-g{grid-template-columns:1fr;gap:22px} } .brk-i{position:relative;padding-top:18px;border-top:2px solid var(--orange)} .brk-k{text-transform:uppercase;margin-bottom:8px} .brk-i p{margin:0;font-size:14.5px;line-height:1.6;max-width:34ch} .brk-a .btn.primary{white-space:nowrap} @media (max-width:1000px){ .brk-a .btn.primary{width:auto} } /* ── The band takes the header's colour ───────────────────────────────── Same near-black as the capsule, in both themes, so the top of the page reads as one system: black bar, hero, black band. */.brk, :root[data-theme="light"] .brk, :root[data-theme="dark"] .brk{background:#0D0D0B;border-block:0;color:var(--on-plate)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brk{background:#0D0D0B} } .brk-i{border-top-color:rgba(255,255,255,.16)} .brk-i p{color:rgba(251,248,243,.70)} .brk .btn.primary{background:var(--orange);border-color:var(--orange);color:#0D0D0B} .brk .btn.primary:hover{background:var(--orange-strong);border-color:var(--orange-strong)} /* The hero's two columns need real width; below this they stack instead of squeezing the headline into a gutter. */ @media (max-width:1080px){ .hero > .wrap{grid-template-columns:1fr} .hero .lede{max-width:56ch} .orbit{max-width:600px} } @media (max-width:860px){ .brk-top{grid-template-columns:1fr;gap:14px} } a.brk-i{border-top:2px solid rgba(255,255,255,.16);padding-top:18px} a.brk-i:hover{border-top-color:var(--orange)} a.brk-i:hover .brk-k{color:var(--orange-strong)} .brk-a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;align-self:center} .brk-alt{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:14px;font-weight:600;text-decoration:none;transition:color var(--t)} .brk-alt:hover{color:var(--orange)} @media (max-width:1000px){ .brk-a{flex-direction:row;align-items:center;gap:18px} } /* In dark the band and the canvas are nearly the same black, so it needs an edge to read as a band at all. */:root[data-theme="dark"] .brk{border-block:1px solid rgba(255,255,255,.12)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brk{border-block:1px solid rgba(255,255,255,.12)} } .brk-alt{white-space:nowrap} @media (max-width:560px){ .brk-a{flex-direction:column;align-items:stretch;gap:10px} .brk-a .btn.primary{width:100%;justify-content:center} .brk-alt{justify-content:center} } /* ── MOBILE DRAWER, corrected ──────────────────────────────────────────── It opens below the capsule rather than under it, and each row is a label with its hint beside it — the column stacking made every hint read as a heading for the row underneath. */.mpanel{inset:104px 0 0;background:var(--plate)} .mpanel a{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;text-align:left;min-height:62px;padding:14px var(--gut);border-bottom:1px solid rgba(255,255,255,.09);color:#FBF8F3;font-size:1.15rem} .mpanel a small{text-align:right;max-width:52%;color:var(--on-plate-2)} .mpanel .m-cta{padding:22px var(--gut) 34px} /* ── The dark sections are dark in BOTH themes ─────────────────────────── The --inv-* tokens mean "the opposite of the page", so in dark mode they flip to the light palette — which painted near-black type onto a black plate (the Aftaris section's applied list was invisible at 1.03:1). Pinning them on the section keeps every child correct in either theme. */.sec--inv{--inv-bg:#0D0D0B;--inv-bg-2:#141411;--inv-ink:#FBF8F3;--inv-mid:#B0AAA1;--inv-accent:#F5A000;--inv-line:rgba(255,255,255,.12)} /* Standalone links in lists get a real target height. The service list and the Aftaris sub-links were 18–20px tall — fine to read, awkward to tap. */li > a, small > a{display:inline-block;padding-block:4px} /* ── CTA: a floating panel, not a flat band ────────────────────────────── The section keeps the page ground so the panel can cast a shadow onto it; the panel itself carries the header's black. */.brk{border:0 !important} .brk-panel{color:var(--on-plate)} .brk-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(22px,3vw,56px);align-items:end;padding-bottom:clamp(24px,2.6vw,34px);border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:clamp(24px,2.6vw,34px)} @media (max-width:900px){ .brk-top{grid-template-columns:1fr;gap:20px;align-items:start} } .reg--on-plate{color:rgba(251,248,243,.6)} .brk-h{color:#FBF8F3;max-width:20ch;margin:14px 0 0;font-size:clamp(1.55rem,2.7vw,2.2rem);line-height:1.12;letter-spacing:-.035em} .brk-p{margin:0 0 18px;color:rgba(251,248,243,.68);font-size:15px;line-height:1.65;max-width:46ch} .brk-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px} /* three service tiles: icon, label, one line, arrow */.brk-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)} @media (max-width:860px){ .brk-g{grid-template-columns:1fr} } a.brk-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px 18px;text-decoration:none;transition:background var(--t), border-color var(--t), transform var(--t)} a.brk-i:hover{background:rgba(255,255,255,.07);border-color:rgba(245,160,0,.45);transform:translateY(-2px)} .brk-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(245,160,0,.12);border:1px solid rgba(245,160,0,.3);color:var(--orange);transition:background var(--t)} a.brk-i:hover .brk-ico{background:var(--orange);color:#0D0D0B;border-color:transparent} .brk-k{display:block;color:#FBF8F3;font-size:14.5px;font-weight:700;letter-spacing:-.01em} .brk-d{display:block;margin-top:3px;color:rgba(251,248,243,.6);font-size:12.5px;line-height:1.45} .brk-go{color:rgba(251,248,243,.42);transition:color var(--t), transform var(--t)} a.brk-i:hover .brk-go{color:var(--orange);transform:translateX(3px)} .brk-alt{color:rgba(251,248,243,.72)} /* ── dropdown marks ─────────────────────────────────────────────────── */.navdrop a{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px} .ndrop-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);color:var(--orange-ink);overflow:hidden;flex:none} .ndrop-i--logo{background:var(--plate);border-color:transparent;padding:5px} .ndrop-i img, .ndrop-i .card-logo, .ndrop-i .card-mark{width:100%;height:100%;object-fit:contain;border:0;background:transparent;border-radius:0} .ndrop-i .card-mark{font-size:13px;color:var(--orange)} .navdrop a:hover .ndrop-i{border-color:var(--orange)} .ndrop-t{min-width:0} /* ── the header capsule keeps its shadow at rest, in light too ───────── */.top .top-in{box-shadow:var(--shadow-nav)} .top.is-stuck .top-in{box-shadow:0 22px 48px -18px rgba(19,14,7,.34)} /* ── CTA runs edge to edge ─────────────────────────────────────────────── Full-bleed black, the structure kept: the shadow now falls from the band onto the page above and below rather than from a floating card. */.brk{background:#0D0D0B !important;padding-block:clamp(40px,4.6vw,68px);box-shadow:0 -18px 40px -28px rgba(20,14,4,.45), 0 26px 54px -30px rgba(20,14,4,.5);position:relative;z-index:1} :root[data-theme="dark"] .brk, :root:not([data-theme="light"]) .brk{box-shadow:none;border-block:1px solid rgba(255,255,255,.12)} .brk-panel{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none} :root[data-theme="dark"] .brk-panel, :root:not([data-theme="light"]) .brk-panel{box-shadow:none} /* ── HEADER BRAND ──────────────────────────────────────────────────────── The logo file is the wordmark, so no text is set beside it, and it is sized to the capsule rather than to the old thin bar. */.brand::after{content:none !important} .top .brand img{height:34px;width:auto;display:none} .top .brand .bd{display:block} @media (max-width:1040px){ .top .brand img{height:30px} } @media (max-width:420px){ .top .brand img{height:26px} } .foot .brand img{height:30px;width:auto} /* ── Nodes sit exactly where their connector ends ──────────────────────── The box positions are derived from the same viewBox coordinates as the paths in the SVG (620 × 534), each centred on its endpoint, so a line can never point at empty space beside its label. lk1 196,118 · lk2 470,108 · lk3 556,250 lk4 452,418 · lk5 200,436 · lk6 74,258 `translate` is used for the centring so the float animation, which runs on `transform`, still composes on top of it. */.node{margin:0} @media (max-width:640px){ } /* ═══ THE HERO ECOSYSTEM ══════════════════════════════════════════════════ One orchestrated arrival: the field fades up, the connectors draw out from the core, the ventures land one after another, and only then does the system settle into its idle state — a slow drift, a scanning arc and a signal running out to each business in turn. Everything is CSS and SVG. Nothing here animates layout, and the whole sequence is switched off under prefers-reduced-motion. */.orbit{position:relative;width:100%;aspect-ratio:1/.9;max-width:740px;margin-inline:auto;isolation:isolate} .orbit svg{width:100%;height:100%;display:block;overflow:visible} /* the ground: a warm bloom that breathes under the whole diagram */.orbit-glow{position:absolute;inset:2% 0;z-index:0;pointer-events:none;border-radius:50%;background: radial-gradient(circle at 50% 46%, rgba(245,160,0,.24), rgba(245,160,0,.07) 40%, transparent 66%), radial-gradient(circle at 50% 46%, rgba(245,160,0,.14), transparent 34%)} @keyframes orb-bloom{ from{ opacity:.55; transform:scale(.97) } to{ opacity:1; transform:scale(1.03) } } /* rings */.orbit-ring{fill:none;stroke:rgba(13,13,11,.15);stroke-width:1;opacity:0;animation:orb-in .9s .1s var(--ease) forwards} .orbit-ring--soft{stroke:rgba(13,13,11,.08)} :root[data-theme="dark"] .orbit-ring{stroke:rgba(255,255,255,.13)} :root[data-theme="dark"] .orbit-ring--soft{stroke:rgba(255,255,255,.07)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .orbit-ring{stroke:rgba(255,255,255,.13)} :root:not([data-theme="light"]) .orbit-ring--soft{stroke:rgba(255,255,255,.07)} } @keyframes orb-in{ from{ opacity:0 } to{ opacity:1 } } .orbit-spin{transform-origin:50% 50%;animation:orb-spin 42s linear infinite} .orbit-spin--slow{animation-duration:66s;animation-direction:reverse} @keyframes orb-spin{ to{ transform:rotate(360deg) } } /* connectors: drawn from the core outward, then held */.orbit-link{fill:none;stroke:var(--orange);stroke-width:1.4;stroke-linecap:round;opacity:.4;stroke-dasharray:100;stroke-dashoffset:100;animation:orb-draw .85s var(--ease) forwards} @keyframes orb-draw{ to{ stroke-dashoffset:0 } } .orbit-link--1{animation-delay:.30s} .orbit-link--2{animation-delay:.39s} .orbit-link--3{animation-delay:.48s} .orbit-link--4{animation-delay:.57s} .orbit-link--5{animation-delay:.66s} .orbit-link--6{animation-delay:.75s} /* the core */.orbit-core{opacity:0;animation:orb-pop .7s var(--ease) forwards;transform-origin:310px 267px} @keyframes orb-pop{ from{ opacity:0; transform:scale(.82) } to{ opacity:1; transform:scale(1) } } .orbit-core-ring{fill:none;stroke:var(--orange);stroke-width:2;opacity:0;animation:orb-in .6s .25s var(--ease) forwards, orb-halo 5.5s .9s var(--ease) infinite alternate;transform-origin:310px 267px} @keyframes orb-halo{ from{ opacity:.5 } to{ opacity:1 } } /* two arcs sweeping the core — the system is awake */.orbit-scan{fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:34 380;opacity:.7;transform-origin:310px 267px;animation:orb-spin 7s linear infinite} .orbit-scan--rev{stroke-width:1.2;stroke-dasharray:16 470;animation-duration:13s;animation-direction:reverse} /* one signal per connector, out and gone */.orbit-sig{r:4;fill:var(--orange);opacity:0;offset-rotate:0deg;animation:orb-travel 5.4s linear infinite} @keyframes orb-travel{ 0% { offset-distance:0%; opacity:0; r:2 } 8% { opacity:1; r:4 } 62% { offset-distance:100%; opacity:1; r:4 } 74% { offset-distance:100%; opacity:0; r:9 } 100% { offset-distance:100%; opacity:0; r:2 } } /* ── the venture boxes ───────────────────────────────────────────────── */.node{position:absolute;z-index:2;translate:-50% -50%;inset:auto;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:10px 14px;box-shadow:0 18px 34px -18px rgba(13,13,11,.6);opacity:0;animation:node-land .62s var(--d,.5s) cubic-bezier(.2,.9,.25,1) forwards, node-drift 8s var(--d,.5s) var(--ease) infinite alternate} @keyframes node-land{ from{ opacity:0; transform:translate(0,14px) scale(.9) } to { opacity:1; transform:none } } @keyframes node-drift{ from{ transform:translateY(0) } to{ transform:translateY(-8px) } } .node b{display:block;color:#FBF8F3;font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.2} .node small{color:#9A958D;font-size:10.5px;line-height:1.3;margin-top:2px} .node i{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.07);overflow:hidden} .node i img{width:100%;height:100%;object-fit:contain} .node-t{min-width:0} .node-live{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none;margin-left:2px;box-shadow:0 0 0 0 rgba(74,222,128,.55);animation:node-pulse 2.6s var(--ease) infinite} @keyframes node-pulse{ 0% { box-shadow:0 0 0 0 rgba(74,222,128,.5) } 70% { box-shadow:0 0 0 7px rgba(74,222,128,0) } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0) } } /* endpoints of lk1..lk6 in viewBox units, as percentages */.node--1{left:31.61%;top:22.10%} .node--2{left:75.81%;top:20.22%} .node--3{left:89.68%;top:46.82%} .node--4{left:72.90%;top:78.28%} .node--5{left:32.26%;top:81.65%} .node--6{left:11.94%;top:48.31%} /* ── MOBILE: the diagram is the point, so it gets the room ───────────── */ @media (max-width:900px){ .orbit{max-width:620px} .node{min-width:0;padding:9px 12px;border-radius:13px} .node b{font-size:12px} .node small{font-size:9.5px} } @media (max-width:640px){ /* full-bleed, taller, and the boxes shrink to a mark and a name so six of them fit around a circle on a 390px screen without colliding */.orbit{width:calc(100% + var(--gut) * 2);margin-inline:calc(var(--gut) * -1);max-width:none;aspect-ratio:1/1.02} .node{padding:7px 10px 7px 7px;gap:7px;border-radius:12px} .node small{display:none} .node b{font-size:11.5px} .node i{width:22px;height:22px;border-radius:7px} .node-live{width:6px;height:6px} .orbit-sig{r:3} .node--1{left:29%;top:20%} .node--2{left:74%;top:18.5%} .node--3{left:83%;top:47%} .node--4{left:71%;top:79%} .node--5{left:29%;top:82%} .node--6{left:17%;top:48.5%} } @media (max-width:380px){ .node{padding:6px 8px 6px 6px} .node b{font-size:11px} } /* Nothing moves for anyone who has asked for that — but everything is still there, in its finished state. */ @media (prefers-reduced-motion:reduce){ .orbit-glow, .orbit-spin, .orbit-scan, .orbit-core, .orbit-core-ring, .orbit-sig, .node, .node-live{animation:none !important} .orbit-ring, .orbit-core, .orbit-core-ring, .node{opacity:1 !important} .orbit-link{stroke-dashoffset:0;animation:none !important} .orbit-sig{opacity:0 !important} .node{transform:none !important} } /* Boxes hold a mark, a name and a live state — nothing that makes one of them three times the width of its neighbour. */.node small{display:none !important} .node b{white-space:nowrap} .node{min-width:0} /* the one venture without a logo file falls back to a letter mark, which must take the tile's own colours rather than a card's white ground */.node i .card-mark{width:100%;height:100%;background:transparent;border:0;border-radius:0;color:var(--orange);font-size:13px;font-weight:700} /* ═══ ECOSYSTEM: performance pass ═════════════════════════════════════════ The first version paid for its effect: six blurred backdrops, six SVG drop-shadows and four continuously rotating SVG groups meant the browser repainted the whole diagram every frame, for as long as the page was open. The look is kept; the cost is not. · no backdrop-filter (six live blurs was the single worst offender) · no SVG drop-shadow on the moving signals · the rings are static; one arc sweeps instead of four · three signals instead of six, staggered so it still reads as traffic · everything stops when the hero scrolls out of view */.node{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,18,15,.96)} .orbit-sig{filter:none} .orbit-sig:nth-of-type(2n){display:none} /* 6 → 3 travelling dots */.orbit-spin, .orbit-spin--slow{animation:none} .orbit-scan--rev{animation:none;opacity:.28} .orbit-scan{animation-duration:12s} .orbit-glow{animation:orb-bloom-o 12s var(--ease) infinite alternate} @keyframes orb-bloom-o{ from{ opacity:.62 } to{ opacity:1 } } .orbit-core-ring, .orbit-scan, .orbit-sig, .node, .orbit-glow{will-change:auto} /* Off-screen, the hero costs nothing. */.orbit.is-idle *, .orbit.is-idle{animation-play-state:paused !important} /* ── Room to breathe between the capsule and the hero ────────────────── */ @media (min-width:1041px){ .top{padding-block:18px 0} .hero{padding-block:clamp(52px,5.4vw,84px) clamp(64px,6.4vw,104px)} .hero > .wrap{gap:clamp(40px,4.6vw,76px)} .hero h1{margin-top:.42em} .hero .lede{margin-top:30px} .hero .acts{margin-top:38px} } @media (max-width:1040px){ .hero{padding-block:clamp(30px,5vw,44px) clamp(44px,6vw,64px)} } /* ═══ THE GROUP — a bento ═════════════════════════════════════════════════ Tiles differ in kind, not only in size. A platform shows what it does, an operating business shows where it is, the intelligence layer shows what it powers, and an external deployment is drawn as one. The status pill is the register's state in words — never a claim of live monitoring. Filtering collapses the bento to an even grid, because a bento with holes in it is worse than a grid. */.bento-f{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(22px,2.6vw,34px) 0 clamp(14px,1.6vw,20px)} .bento-fb{min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--mid);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background var(--t), color var(--t), border-color var(--t)} .bento-fb:hover{border-color:var(--line-strong);color:var(--ink)} .bento-fb.is-on{background:var(--plate);border-color:transparent;color:#FBF8F3} .bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);align-items:stretch} .bt{grid-column:span var(--span,2);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;isolation:isolate;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,1.7vw,26px);text-decoration:none;color:inherit;min-height:214px;transition:transform var(--t), box-shadow var(--t), border-color var(--t)} /* the venture's own colour, used once, on hover, behind everything */.bt::before{content:"";position:absolute;inset:-40% -30% auto;height:70%;z-index:-1;background:radial-gradient(60% 100% at 50% 0%, var(--tint, var(--orange)), transparent 70%);opacity:0;transition:opacity .35s var(--ease)} .bt:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-2)} .bt:hover::before{opacity:.13} .bt-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .bt-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;flex:none} .bt-mark img{width:34px;height:34px;object-fit:contain} .bt-mark .card-mark{background:transparent;border:0;color:var(--orange-ink);font-weight:700} /* the register's state, said in words, with a colour that agrees with it */.bt .status{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 12px;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mid);white-space:nowrap} .bt .status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .bt .status--operating{color:#1F7A3D;background:rgba(74,222,128,.13);border-color:rgba(31,122,61,.24)} .bt .status--operating i{background:#22A34E;animation:bt-live 2.8s var(--ease) infinite} @keyframes bt-live{ 0% { box-shadow:0 0 0 0 rgba(34,163,78,.45) } 70% { box-shadow:0 0 0 6px rgba(34,163,78,0) } 100%{ box-shadow:0 0 0 0 rgba(34,163,78,0) } } .bt .status--deployment{color:#2C5B9E;background:rgba(125,169,245,.14);border-color:rgba(44,91,158,.24)} .bt .status--development{color:#8A5100;background:rgba(245,160,0,.13);border-color:rgba(138,81,0,.24)} .bt .status--service{color:var(--mid)} .bt-body{display:flex;flex-direction:column;gap:9px;flex:1 1 auto;min-width:0} .bt-kind{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} .bt-name{font-family:var(--display);font-size:clamp(1.15rem,1.5vw,1.45rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)} .bt-short{font-size:14px;line-height:1.6;color:var(--mid);max-width:46ch} /* what a platform actually does — three lines, straight from the registry */.bt-does{display:flex;flex-direction:column;gap:7px;margin-top:4px} .bt-does span{position:relative;padding-left:17px;font-size:13px;line-height:1.5;color:var(--mid)} .bt-does span::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1.5px;background:var(--orange);border-radius:1px} .bt-meta{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-size:13px;color:var(--mid)} .bt-meta svg{color:var(--orange-ink);flex:none} .bt-note{margin-top:2px;padding:9px 12px;border-radius:10px;background:var(--bg-2);border:1px dashed var(--line-2);font-size:12px;line-height:1.45} .bt-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)} .bt-rel{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)} .bt-host{font-size:12px;color:var(--faint)} .bt-go{margin-left:auto;color:var(--faint);transition:color var(--t), transform var(--t)} .bt:hover .bt-go{color:var(--orange-ink);transform:translateX(3px)} /* ── the layer underneath, drawn as one ──────────────────────────────── */.bt--layer{background:var(--plate);border-color:transparent;color:var(--on-plate);min-height:0} .bt--layer::before{background:radial-gradient(60% 100% at 20% 0%, var(--orange), transparent 70%)} .bt--layer:hover::before{opacity:.2} .bt--layer .bt-mark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)} .bt--layer .bt-mark .card-mark{color:var(--orange)} .bt--layer .bt-kind{color:rgba(251,248,243,.55)} .bt--layer .bt-name{color:#FBF8F3} .bt--layer .bt-short{color:rgba(251,248,243,.7);max-width:58ch} .bt--layer .bt-foot{border-top-color:rgba(255,255,255,.12)} .bt--layer .bt-rel, .bt--layer .bt-host{color:rgba(251,248,243,.5)} .bt--layer .bt-go{color:rgba(251,248,243,.5)} .bt--layer:hover .bt-go{color:var(--orange)} .bt--layer .status{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:rgba(251,248,243,.72)} .bt-powers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px} .bt-powers-l{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,248,243,.5);margin-right:2px} .bt-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);font-size:12.5px;font-weight:600;color:#FBF8F3} .bt-chip img{width:20px;height:20px;object-fit:contain;border-radius:5px} /* ── an external deployment is not a holding, and should not look like one */.bt--deployment{background:transparent;border-style:dashed;border-color:var(--line-2)} .bt--deployment:hover{border-color:var(--faint);box-shadow:none} .bt--deployment .bt-mark{background:transparent} /* ── responsive ──────────────────────────────────────────────────────── */ @media (max-width:1180px){ .bento{grid-template-columns:repeat(4,minmax(0,1fr))} .bt{grid-column:span 2} .bt--layer{grid-column:span 4} } @media (max-width:760px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .bt, .bt--layer{grid-column:span 2} .bt{min-height:0} .bt-does span:nth-child(n+3){display:none} } /* Filtered views drop the bento's size language and become an even grid. */.bento[data-filter]:not([data-filter="all"]) .bt{grid-column:span 2} .bt[hidden]{display:none} @media (prefers-reduced-motion:reduce){ .bt, .bt::before, .bt-go, .bt .status--operating i{transition:none !important;animation:none !important} } /* Status pills carry the light-theme inks; on a dark card those greens and blues fall to ~3:1, so the dark theme takes lighter ones. */.bt-note{color:var(--mid)} :root[data-theme="dark"] .bt .status--operating, :root[data-theme="dark"] .bt--layer .status--operating{color:#7BE8A4;background:rgba(74,222,128,.12);border-color:rgba(123,232,164,.28)} :root[data-theme="dark"] .bt .status--operating i{background:#7BE8A4} :root[data-theme="dark"] .bt .status--deployment{color:#A9C6FA;background:rgba(125,169,245,.13);border-color:rgba(169,198,250,.28)} :root[data-theme="dark"] .bt .status--development{color:#F7BC4D;background:rgba(245,160,0,.13);border-color:rgba(247,188,77,.28)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .bt .status--operating{color:#7BE8A4;background:rgba(74,222,128,.12);border-color:rgba(123,232,164,.28)} :root:not([data-theme="light"]) .bt .status--operating i{background:#7BE8A4} :root:not([data-theme="light"]) .bt .status--deployment{color:#A9C6FA;background:rgba(125,169,245,.13);border-color:rgba(169,198,250,.28)} :root:not([data-theme="light"]) .bt .status--development{color:#F7BC4D;background:rgba(245,160,0,.13);border-color:rgba(247,188,77,.28)} } /* the layer tile is dark in BOTH themes, so it always takes the dark inks */.bt--layer .status--development{color:#F7BC4D;background:rgba(245,160,0,.13);border-color:rgba(247,188,77,.28)} /* ═══ AFTERMATH INTELLIGENCE ══════════════════════════════════════════════ Was four stacked blocks — header, six cards, a large dependency tree and an applied list — and ran past 1600px. The tree is gone: the hero already draws the group's dependency graph, and drawing it twice was most of the height. What is left sits in two columns: the argument on the left, the six capabilities as an even 3 × 2 on the right. */.ail-sec{padding-block:clamp(52px,5.4vw,84px)} .ail{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4vw,72px);align-items:center} @media (max-width:1000px){ .ail{grid-template-columns:1fr;gap:34px;align-items:start} } .ail-l h2{margin:14px 0 0;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-.04em} .ail-l .lede{margin:18px 0 0;max-width:44ch;font-size:15.5px;line-height:1.68} .ail-applied{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px} .ail-applied-l{width:100%;margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,243,.5)} .ail-chip{display:inline-flex;align-items:baseline;gap:7px;padding:8px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)} .ail-chip b{color:#FBF8F3;font-size:13px;font-weight:700;letter-spacing:-.01em} .ail-chip i{color:rgba(251,248,243,.5);font-size:11.5px;font-style:normal} .ail-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px} .ail-note{color:rgba(251,248,243,.55);font-size:13.5px} /* the capabilities: one family of glyphs, an even grid, no card chrome heavier than a hairline */.ail-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.11);border-radius:20px;overflow:hidden} @media (max-width:760px){ .ail-r{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:420px){ } .cap2{background:#111110;padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;gap:9px;transition:background var(--t)} .cap2:hover{background:#17170F} .cap2-i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(245,160,0,.12);border:1px solid rgba(245,160,0,.28);color:var(--orange);margin-bottom:3px} .cap2 b{color:#FBF8F3;font-size:14px;font-weight:700;letter-spacing:-.01em} .cap2 p{margin:0;color:rgba(251,248,243,.62);font-size:12.5px;line-height:1.55} /* Two dots read as a bug: the base .status already draws one. */.bt .status::before{content:none} /* the capability grid stays two-up on a phone; six full-width tiles made the section taller than the one it replaced */ @media (max-width:420px){ .ail-r{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:340px){ .ail-r{grid-template-columns:1fr} } /* ═══ OPERATING MODEL ═════════════════════════════════════════════════════ It is a loop, and nothing on the page said so: four beats sat in a black box as a list, and the one idea that matters — that what compounds goes back in at the start — was left to the reader. Now the four steps are stations on a rail, the return is drawn, and the seven shared foundations sit underneath as the thing the whole loop runs on. */.om-sec{padding-block:clamp(56px,5.6vw,88px)} .om-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,3vw,56px);align-items:end;margin-bottom:clamp(40px,4.4vw,64px)} @media (max-width:860px){ .om-head{grid-template-columns:1fr;gap:14px;align-items:start} } .om-head h2{margin:14px 0 0;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-.04em} .om-sub{margin:0;color:var(--mid);font-size:15.5px;line-height:1.68;max-width:42ch} .om{position:relative} .om-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px);position:relative} /* the rail runs behind the numerals */.om-track::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:linear-gradient(90deg,var(--line-2),var(--line-2) 78%,transparent);z-index:0} .om-step{position:relative;z-index:1;padding-right:clamp(0px,1vw,14px)} .om-n{display:grid;place-items:center;width:54px;height:54px;margin-bottom:20px;border-radius:50%;background:var(--bg);border:1.5px solid var(--orange);color:var(--orange-ink);font-family:var(--display);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:background var(--t), color var(--t), transform var(--t)} .om-step:hover .om-n{background:var(--orange);color:#0D0D0B;transform:translateY(-2px)} .om-step h3{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)} .om-step p{margin:0;font-size:14px;line-height:1.62;color:var(--mid);max-width:30ch} /* the return */.om-return{position:relative;margin-top:clamp(26px,2.8vw,38px)} .om-return svg{display:block;width:100%;height:62px;overflow:visible} .om-return-p, .om-return-a{fill:none;stroke:var(--orange);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.55} .om-return-p{stroke-dasharray:5 6} .om-return-l{position:absolute;left:50%;top:50%;translate:-50% -50%;background:var(--bg);padding:0 16px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap} /* the substrate */.om-found{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px;margin-top:clamp(30px,3.2vw,44px);padding:clamp(18px,1.8vw,24px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)} .om-found-l{margin-right:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .om-found ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .om-found li{padding:9px 15px;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--line);font-size:13.5px;color:var(--mid)} @media (max-width:880px){ .om-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px} .om-track::before{display:none} } @media (max-width:560px){ /* a vertical rail: the loop still reads top to bottom */.om-track{grid-template-columns:1fr;gap:0} .om-step{display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 18px;padding:0 0 26px;position:relative} .om-step:last-child{padding-bottom:0} .om-step::before{content:"";position:absolute;left:26.5px;top:54px;bottom:0;width:1px;background:var(--line-2)} .om-step:last-child::before{display:none} .om-n{grid-row:span 2;margin-bottom:0} .om-step h3{align-self:center;margin:0 0 6px;padding-top:15px} .om-step p{max-width:none} .om-return svg{height:44px} .om-return-l{font-size:10.5px;white-space:normal;text-align:center;width:min(100%,26ch)} .om-found{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){ .om-n{transition:none} } /* Footer links, tightened again at the founder's request. The visual gap between items is now about half what it was. NOTE: this puts each link near 20px tall, under the 24px WCAG 2.2 target-size minimum — a deliberate design call, recorded here so it is not read as an oversight. */.f-col a{padding-block:1.5px;font-size:13.5px;line-height:1.34} /* ═══ HERO: type, buttons and the particulars strip ═══════════════════════ */.hero .lede{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.66} .hero .acts .btn{min-height:52px;padding-inline:26px;font-size:13.5px;letter-spacing:.09em} .hero .acts .btn:not(.primary){background:var(--surface);border-color:var(--line-2);color:var(--ink)} .hero .acts .btn:not(.primary):hover{background:var(--bg-2);border-color:var(--line-strong)} .hero .acts .btn.primary svg{transition:transform var(--t)} .hero .acts .btn.primary:hover svg{transform:translateX(3px)} @media (max-width:760px){ } /* ═══ REAL-WORLD OPERATIONS ═══════════════════════════════════════════════ The section's claim is a two-way exchange, so the exchange is drawn: the platform, the arrows both ways, the place it meets the world. */.rw-sec{padding-block:clamp(56px,5.6vw,88px)} .rw-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,56px);align-items:end;margin-bottom:clamp(32px,3.6vw,50px)} @media (max-width:900px){ .rw-head{grid-template-columns:1fr;gap:14px;align-items:start} } .rw-head h2{margin:14px 0 0;font-size:clamp(1.9rem,3.2vw,2.75rem);line-height:1.05;letter-spacing:-.04em} .rw-sub{margin:0;color:rgba(251,248,243,.68);font-size:15px;line-height:1.68;max-width:44ch} .rw-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)} @media (max-width:900px){ .rw-g{grid-template-columns:1fr} } .rw{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:clamp(20px,1.9vw,26px);display:flex;flex-direction:column;gap:18px} .rw-x{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px} .rw-a{display:flex;flex-direction:column;gap:4px;min-width:0} .rw-a i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,243,.45)} .rw-a b{color:#FBF8F3;font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.2} .rw-a--world b{color:var(--orange)} .rw-arrows{color:var(--orange);opacity:.75;flex:none} .rw p{margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);color:rgba(251,248,243,.66);font-size:13.5px;line-height:1.62} /* ═══ AFTECH: the complete service register ══════════════════════════════ */.sv-sec{padding-block:clamp(56px,5.6vw,88px)} .sv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4vw,72px);align-items:start} @media (max-width:1000px){ .sv{grid-template-columns:1fr;gap:32px} } .sv-l h2{margin:14px 0 0;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.06;letter-spacing:-.04em} .sv-lede{margin:18px 0 0;color:rgba(251,248,243,.7);font-size:15px;line-height:1.68;max-width:44ch} .sv-l .acts{margin-top:28px} .sv-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.11)} .sv-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,1.6vw,22px);padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.11);text-decoration:none;transition:background var(--t), padding-inline var(--t)} .sv-list a:hover{background:rgba(255,255,255,.05);padding-inline:14px 10px} .sv-n{font-family:var(--mo);font-size:11.5px;color:rgba(251,248,243,.4);font-variant-numeric:tabular-nums} .sv-t{min-width:0} .sv-t b{display:block;color:#FBF8F3;font-size:15.5px;font-weight:700;letter-spacing:-.02em} .sv-t i{display:block;margin-top:2px;font-style:normal;color:rgba(251,248,243,.6);font-size:13px;line-height:1.45} .sv-go{color:rgba(251,248,243,.4);transition:color var(--t), transform var(--t)} .sv-list a:hover .sv-go{color:var(--orange);transform:translateX(3px)} /* ═══ MALTA: the particulars as a record ═════════════════════════════════ */.mt-sec{padding-block:clamp(52px,5.2vw,80px)} .mt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,68px);align-items:center} @media (max-width:900px){ .mt{grid-template-columns:1fr;gap:28px} } .mt-l h2{margin:14px 0 0;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.06;letter-spacing:-.04em} .mt-lede{margin:18px 0 24px;color:var(--mid);font-size:15px;line-height:1.68;max-width:46ch} .mt-rec{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} @media (max-width:460px){ .mt-rec{grid-template-columns:1fr} } .mt-rec > div{background:var(--surface);padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;gap:7px} .mt-rec dt{order:2;margin:0;color:var(--faint);font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase} .mt-rec dd{order:1;margin:0;color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere} .mt-rec dd.mono{font-family:var(--mo);font-size:14.5px;font-weight:500;letter-spacing:0} @media (max-width:760px){ } /* Each side of the exchange wears its own mark. The one side that has no single company behind it — "physical businesses" — takes a place glyph rather than a borrowed logo. */.rw-x{align-items:start} .rw-m{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);overflow:hidden;margin-bottom:9px;color:var(--orange)} .rw-m img{width:26px;height:26px;object-fit:contain} .rw-m .card-mark{background:transparent;border:0;color:var(--orange);font-size:13px} .rw-arrows{margin-top:9px;align-self:start} /* The particulars strip needs more room than a 768 tablet gives four cells. */ @media (max-width:900px){ } @media (max-width:820px){ .ail-r{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ═══ IN OPERATION ════════════════════════════════════════════════════════ Was three cards repeating Royal, Aftaris and UrbanCuts — all three of which the bento above already covers in more detail. The slot now carries something the page does not say anywhere else: the rules the group works to, and the things it refuses to do. The refusals are the useful half, so they get the darker panel and equal weight. */.st-sec{padding-block:clamp(56px,5.6vw,88px)} .st-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:end;margin-bottom:clamp(30px,3.4vw,46px)} @media (max-width:900px){ .st-head{grid-template-columns:1fr;gap:14px;align-items:start} } .st-head h2{margin:14px 0 0;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.06;letter-spacing:-.04em} .st-sub{margin:0;color:var(--mid);font-size:15px;line-height:1.68;max-width:48ch} .st{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px);align-items:stretch} @media (max-width:880px){ .st{grid-template-columns:1fr} } .st-p{border-radius:var(--r-card);padding:clamp(22px,2.2vw,32px)} .st-p ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .st-p li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px 0} .st-p li + li{border-top:1px solid var(--line)} .st-l{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase} .st-i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px} .st-t b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.3} .st-t i{display:block;margin-top:5px;font-style:normal;font-size:13.5px;line-height:1.6} /* the affirmative half sits on the page's own ground */.st-p--do{background:var(--surface);border:1px solid var(--line)} .st-p--do .st-l{color:var(--faint)} .st-p--do .st-i{background:rgba(34,163,78,.13);border:1px solid rgba(31,122,61,.26);color:#1F7A3D} .st-p--do .st-t b{color:var(--ink)} .st-p--do .st-t i{color:var(--mid)} /* the refusals take the plate: they are the harder promise to make */.st-p--dont{background:var(--plate);border:1px solid transparent;color:var(--on-plate)} .st-p--dont .st-l{color:rgba(251,248,243,.5)} .st-p--dont li + li{border-top-color:rgba(255,255,255,.11)} .st-p--dont .st-i{background:rgba(245,160,0,.13);border:1px solid rgba(245,160,0,.3);color:var(--orange)} .st-p--dont .st-t b{color:#FBF8F3} .st-p--dont .st-t i{color:rgba(251,248,243,.66)} .st-sec .sec-acts{margin-top:clamp(24px,2.6vw,34px)} :root[data-theme="dark"] .st-p--do .st-i, :root:not([data-theme="light"]) .st-p--do .st-i{background:rgba(123,232,164,.13);border-color:rgba(123,232,164,.3);color:#7BE8A4} @media (max-width:900px){ } @media (max-width:420px){ } @media (max-width:1080px){ } @media (max-width:900px){ } /* The particulars strip is gone from the hero at the founder's request; the registration and VAT still appear in the Malta record further down. With one row again, the two columns centre on each other. */.hero > .wrap{grid-template-rows:auto;align-items:center} /* ── HERO HEADLINE: a reflection under the last line ───────────────────── Applied to the amber line only, not the whole block: reflecting three lines would throw a 100px mirror image into the paragraph beneath it. -webkit-box-reflect paints outside the box and costs no layout; where it is unsupported (Firefox) the headline simply sits without it. */.hero h1 .k{padding-bottom:2px} .hero h1{margin-bottom:14px} .hero .lede{margin-top:34px} /* the ground the reflection falls on: a faint warm wash behind the type, so the mirrored line has something to sit in rather than floating */.hero-copy{position:relative;isolation:isolate} .hero-copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-6%;right:8%;top:-4%;height:74%;background:radial-gradient(58% 62% at 22% 46%, rgba(245,160,0,.11), transparent 72%)} @media (max-width:1080px){ .hero-copy::before{left:-10%;right:-10%} } @media (prefers-reduced-motion:reduce){ .hero h1 .k{-webkit-box-reflect:none} } /* Tighter fade: at phone sizes the reflection was legible enough to read as doubled type rather than as a reflection. */.hero h1 .k{-webkit-box-reflect:below -6px linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.05) 18%, rgba(0,0,0,0) 34%)} /* ═══ PAGE MASTHEAD ═══════════════════════════════════════════════════════ The same two-column grammar as the homepage hero, so a page below the homepage is recognisably the same site rather than an older one. */.pm{padding-block:clamp(34px,4vw,58px) clamp(52px,5.4vw,86px);background:transparent} .pm > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,4.4vw,72px);align-items:center} .pm--solo > .wrap{grid-template-columns:minmax(0,1fr)} @media (max-width:1000px){ .pm > .wrap{grid-template-columns:1fr;gap:36px} } .pm-l{position:relative;isolation:isolate} .pm-l::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-6%;right:6%;top:-14%;height:88%;background:radial-gradient(56% 60% at 20% 44%, rgba(245,160,0,.10), transparent 72%)} .pm-mute{display:inline-block;margin-left:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .pm h1{margin:16px 0 0;font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:1.02;letter-spacing:-.045em;font-weight:800;text-wrap:balance} .pm .lede{margin:22px 0 0;max-width:52ch;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.66;color:var(--mid)} .pm .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .pm .acts .btn{min-height:52px;padding-inline:26px;font-size:13.5px;letter-spacing:.09em} .pm .acts .btn:not(.primary){background:var(--surface);border-color:var(--line-2);color:var(--ink)} .pm .acts .btn:not(.primary):hover{background:var(--bg-2);border-color:var(--line-strong)} .pm--solo .lede{max-width:60ch} .pm .orbit{max-width:600px} /* ── /technology: three platforms on one layer ───────────────────────── */.vstack{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:520px;margin-inline:auto} .vstack-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .vstack-c{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 10px;box-shadow:var(--shadow-card)} .vstack-c img{width:26px;height:26px;object-fit:contain} .vstack-c b{font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-align:center} .vstack-drop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;height:38px} .vstack-drop span{justify-self:center;width:1px;height:100%;background:linear-gradient(180deg,var(--line-2),var(--orange))} .vstack-base{background:var(--plate);color:var(--on-plate);border-radius:20px;padding:22px 24px;text-align:center;box-shadow:0 22px 44px -26px rgba(20,14,4,.5)} .vstack-base-l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,243,.5)} .vstack-base b{display:block;margin:7px 0 6px;font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--orange)} .vstack-base i{display:block;font-style:normal;font-size:11.5px;line-height:1.6;color:rgba(251,248,243,.62)} /* ── /approach: the loop, drawn round ────────────────────────────────── */.vloop{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin-inline:auto} .vloop svg{width:100%;height:100%;display:block;overflow:visible} .vloop-track{fill:none;stroke:var(--line-2);stroke-width:1} .vloop-arc{fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-dasharray:150 642;transform-origin:170px 170px;animation:vloop-run 9s linear infinite;opacity:.85} @keyframes vloop-run{ to{ transform:rotate(360deg) } } .vloop-hub{fill:var(--plate)} .vloop-t{fill:rgba(251,248,243,.72);font-size:10px;font-weight:700;letter-spacing:.12em;text-anchor:middle;font-family:var(--mo)} .vloop-n{position:absolute;translate:-50% -50%;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px 9px 9px;box-shadow:var(--shadow-card);white-space:nowrap} .vloop-n i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;border:1.5px solid var(--orange);color:var(--orange-ink);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums} .vloop-n b{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .vloop-n--1{left:50%;top:6%} .vloop-n--2{left:94%;top:50%} .vloop-n--3{left:50%;top:94%} .vloop-n--4{left:6%;top:50%} @media (max-width:520px){ .vloop{max-width:330px} .vloop-n{padding:7px 12px 7px 7px} .vloop-n b{font-size:12px} } /* ── /services: the capability grid ──────────────────────────────────── */.vsvc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:480px;margin-inline:auto} .vsvc-t{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px 16px;box-shadow:var(--shadow-card)} .vsvc-t:nth-child(7){grid-column:1 / -1} .vsvc-t i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(245,160,0,.12);border:1px solid rgba(245,160,0,.28);color:var(--orange-ink)} .vsvc-t b{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} /* ── /company and /contact: the filed record ─────────────────────────── */.vrec{max-width:520px;margin-inline:auto} @media (prefers-reduced-motion:reduce){ .vloop-arc{animation:none} } /* ═══ SHARED PAGE SECTIONS ════════════════════════════════════════════════ The register groups, the "inside the platforms" list and the seven foundations all use one head + one numbered-row pattern, so the pages below the homepage share its vocabulary instead of inventing more. */.reg-sec, .ins-sec, .fnd-sec{padding-block:clamp(46px,4.8vw,74px)} .reg-head, .ins-head, .fnd-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,50px);align-items:end;margin-bottom:clamp(24px,2.8vw,38px)} @media (max-width:900px){ .reg-head, .ins-head, .fnd-head{grid-template-columns:1fr;gap:12px;align-items:start} } .reg-head h2, .ins-head h2, .fnd-head h2{margin:12px 0 0;font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.1;letter-spacing:-.035em} .reg-count{justify-self:end;align-self:end;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)} @media (max-width:900px){ .reg-count{justify-self:start} } .ins-sub, .fnd-sub{margin:0;color:var(--mid);font-size:15px;line-height:1.68;max-width:46ch} .ins-sub{color:rgba(251,248,243,.68)} /* the register groups: even tiles, no bento size language — every entry in a legal class carries the same weight as its siblings */.bento--reg{grid-template-columns:repeat(6,minmax(0,1fr))} .bento--reg .bt{grid-column:span 2} @media (max-width:1180px){ .bento--reg{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:760px){ .bento--reg{grid-template-columns:repeat(2,minmax(0,1fr))} } /* numbered rows, used by "inside the platforms" and the foundations */.ins-list, .fnd-list{list-style:none;margin:0;padding:0} .ins-list li, .fnd-list li{display:grid;align-items:baseline;gap:clamp(14px,1.8vw,26px);padding:18px 4px;border-top:1px solid var(--line)} .ins-list li{grid-template-columns:auto minmax(0,1fr) auto;border-top-color:rgba(255,255,255,.11)} .fnd-list li{grid-template-columns:auto 128px minmax(0,1fr)} .ins-list li:last-child, .fnd-list li:last-child{border-bottom:1px solid var(--line)} .ins-list li:last-child{border-bottom-color:rgba(255,255,255,.11)} .ins-n, .fnd-n{font-family:var(--mo);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--faint)} .ins-n{color:rgba(251,248,243,.4)} .fnd-k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)} .ins-t b, .fnd-t b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3} .ins-t i, .fnd-t i{display:block;margin-top:5px;font-style:normal;font-size:13.5px;line-height:1.62} .ins-t b{color:#FBF8F3} .ins-t i{color:rgba(251,248,243,.66)} .fnd-t b{color:var(--ink)} .fnd-t i{color:var(--mid);max-width:62ch} .ins-p{justify-self:end;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,248,243,.45)} @media (max-width:820px){ .ins-list li{grid-template-columns:auto minmax(0,1fr);row-gap:8px} .ins-p{grid-column:2;justify-self:start;white-space:normal} .fnd-list li{grid-template-columns:auto minmax(0,1fr);row-gap:6px} .fnd-k{grid-column:2} .fnd-t{grid-column:2} } /* ═══ /approach — the stages at length ═══════════════════════════════════ */.stg-sec{padding-block:clamp(46px,4.8vw,74px)} .stg-sec .sec-h{margin-bottom:clamp(22px,2.4vw,32px)} .stg-sec .sec-h h2{margin:12px 0 0;font-size:clamp(1.5rem,2.5vw,2.05rem);letter-spacing:-.035em} .stg{display:flex;flex-direction:column} .stg-i{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(20px,3vw,54px);padding:clamp(26px,2.8vw,38px) 0;border-top:1px solid var(--line)} .stg-i:last-child{border-bottom:1px solid var(--line)} @media (max-width:820px){ .stg-i{grid-template-columns:1fr;gap:14px} } .stg-l{display:flex;align-items:baseline;gap:14px} .stg-n{font-family:var(--mo);font-size:12px;color:var(--orange-ink);font-variant-numeric:tabular-nums;flex:none} .stg-l h3{margin:0;font-family:var(--display);font-size:clamp(1.35rem,2vw,1.7rem);font-weight:700;letter-spacing:-.035em;color:var(--ink)} .stg-b p{margin:0 0 14px;color:var(--mid);font-size:15px;line-height:1.72;max-width:62ch} .stg-b p:last-child{margin-bottom:0} /* ═══ /approach — what this is not ═══════════════════════════════════════ */.not-sec{padding-block:clamp(50px,5vw,80px)} .not-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)} @media (max-width:1000px){ .not-g{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .not-g{grid-template-columns:1fr} } .not-i{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:22px} .not-k{display:inline-block;margin-bottom:12px;padding:5px 11px;border-radius:var(--r-pill);background:rgba(245,160,0,.12);border:1px solid rgba(245,160,0,.3);color:var(--orange);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .not-i b{display:block;color:#FBF8F3;font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.3} .not-i p{margin:8px 0 0;color:rgba(251,248,243,.66);font-size:13.5px;line-height:1.62} /* ═══ two-column prose block, used by /services and /company ═════════════ */.why-sec{padding-block:clamp(50px,5vw,80px)} .why{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,68px);align-items:start} @media (max-width:960px){ .why{grid-template-columns:1fr;gap:26px} } .why-l h2{margin:14px 0 0;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.08;letter-spacing:-.04em} .why-l .acts{margin-top:26px} .why-b p{margin:0 0 16px;color:rgba(251,248,243,.7);font-size:15px;line-height:1.74;max-width:62ch} .why-b p:last-child{margin-bottom:0} .why-b a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(245,160,0,.4)} .why-b a:hover{border-bottom-color:var(--orange)} /* ═══ /services — glyph tiles in the bento head ══════════════════════════ */.bt-mark--glyph{color:var(--orange-ink)} :root[data-theme="dark"] .bt-mark--glyph, :root:not([data-theme="light"]) .bt-mark--glyph{color:var(--orange)} /* ═══ /company — the structure register ══════════════════════════════════ */.str-sec{padding-block:clamp(46px,4.8vw,74px)} .str-sub{margin:-14px 0 22px;color:var(--mid);font-size:15px;line-height:1.68;max-width:60ch} .str-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .str-list a{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,.9fr) auto auto;align-items:center;gap:clamp(12px,1.6vw,24px);padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:background var(--t), padding-inline var(--t)} .str-list a:hover{background:var(--surface);padding-inline:14px 10px} .str-m{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--bg-2);border:1px solid var(--line);overflow:hidden} .str-m img{width:26px;height:26px;object-fit:contain} .str-m .card-mark{background:transparent;border:0;color:var(--orange-ink);font-size:13px} .str-t b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .str-t i{display:block;margin-top:3px;font-style:normal;font-size:13px;line-height:1.5;color:var(--mid)} .str-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .str-go{color:var(--faint);transition:color var(--t), transform var(--t)} .str-list a:hover .str-go{color:var(--orange-ink);transform:translateX(3px)} @media (max-width:900px){ .str-list a{grid-template-columns:auto minmax(0,1fr) auto;row-gap:10px} .str-k{grid-column:2;margin-top:-4px} .str-list a > .status{grid-column:3;grid-row:1} .str-go{display:none} } /* ═══ /company — particulars and press ═══════════════════════════════════ */.part-sec{padding-block:clamp(46px,4.8vw,74px)} .part{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,64px);align-items:center} @media (max-width:900px){ .part{grid-template-columns:1fr;gap:24px} } .part-l h2{margin:14px 0 0;font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.04em;line-height:1.08} .part-sub{margin:16px 0 0;color:var(--mid);font-size:14.5px;line-height:1.66;max-width:40ch} .part-rec{max-width:none} .part-rec .part-wide{grid-column:1 / -1} .press-sec{padding-block:clamp(40px,4.2vw,64px)} .press{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,64px);align-items:center} @media (max-width:900px){ .press{grid-template-columns:1fr;gap:22px} } .press-l h2{margin:14px 0 0;font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.04em} .press-sub{margin:14px 0 0;color:var(--mid);font-size:14.5px;line-height:1.66} .press-q{margin:0;padding:clamp(22px,2.4vw,32px);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:var(--r-card)} .press-q p{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink);max-width:62ch} .press-q footer{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} /* ═══ /contact ═══════════════════════════════════════════════════════════ */.ct-sec{padding-block:clamp(20px,2.4vw,36px) clamp(56px,5.6vw,88px)} .ct{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:start} @media (max-width:960px){ .ct{grid-template-columns:1fr;gap:34px} } .ct-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,2.6vw,36px);box-shadow:var(--shadow-card)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:560px){ .field-row{grid-template-columns:1fr} } .field-opt{text-transform:none;letter-spacing:0;color:var(--faint)} .ct-priv{margin-top:16px} .ct-l{display:block;margin-bottom:14px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)} .ct-l--gap{margin-top:34px} .ct-routes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .ct-routes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--line)} .ct-n{font-family:var(--mo);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums} .ct-t b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)} .ct-t i{display:block;margin-top:3px;font-style:normal;font-size:13px;line-height:1.55;color:var(--mid)} .ct-rec{max-width:none;grid-template-columns:1fr} /* The current page's nav item was inheriting --ink, which is near-black — on the black capsule that made the active item invisible. On /group the word "Group" simply was not there. It now takes the accent, with the underline the old rule already drew. */.mainnav a[aria-current]{color:var(--orange)} .mainnav a[aria-current]::after{background:var(--orange)} .mainnav a[aria-current]:hover{color:var(--orange-strong)} /* The market line on the dark layer tile was using the light-theme mid. */.bt--layer .bt-meta{color:rgba(251,248,243,.66)} .bt--layer .bt-meta svg{color:var(--orange)} /* ═══ ENTITY / SERVICE / CAREERS — the filing card in the masthead ════════ */.ent-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,2vw,28px);box-shadow:var(--shadow-card);max-width:520px;margin-inline:auto} .ent-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line)} .ent-mark{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--bg-2);border:1px solid var(--line);overflow:hidden} .ent-mark img{width:40px;height:40px;object-fit:contain} .ent-mark .card-mark{background:transparent;border:0;color:var(--orange-ink);font-size:16px} .ent-mark--glyph{color:var(--orange-ink);background:rgba(245,160,0,.1);border-color:rgba(245,160,0,.26)} .ent-dl{margin:0;display:flex;flex-direction:column} .ent-dl > div{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line)} .ent-dl > div:last-child{border-bottom:0;padding-bottom:0} .ent-dl dt{margin:0;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} .ent-dl dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere} .ent-dl dd a{color:var(--orange-ink);text-decoration:none;border-bottom:1px solid var(--line-2)} .ent-dl dd a:hover{border-bottom-color:var(--orange-ink)} .ent-card .status{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--line);color:var(--mid);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap} .ent-card .status::before{content:none} .ent-card .status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .ent-card .status--operating{color:#1F7A3D;background:rgba(74,222,128,.13);border-color:rgba(31,122,61,.24)} .ent-card .status--deployment{color:#2C5B9E;background:rgba(125,169,245,.14);border-color:rgba(44,91,158,.24)} .ent-card .status--development{color:#8A5100;background:rgba(245,160,0,.13);border-color:rgba(138,81,0,.24)} /* the "what you get" / "what we will not do" card list */.svi-l{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .svi-list{list-style:none;margin:0;padding:0} .svi-list li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--mid)} .svi-list li:last-child{border-bottom:0} .svi-list li::before{content:"";position:absolute;left:0;top:1.22em;width:9px;height:1.6px;background:var(--orange);border-radius:1px} .svi-list--x li::before{width:11px;height:11px;top:1.05em;background:none;border-radius:0;border-top:1.6px solid var(--orange);border-right:1.6px solid var(--orange);rotate:45deg;translate:0 -2px} /* ═══ "what it does" / "what you get" — a numbered register ══════════════ */.does-sec{padding-block:clamp(46px,4.8vw,74px)} .does-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .does-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:baseline;padding:15px 4px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--ink)} .does-n{font-family:var(--mo);font-size:11.5px;color:var(--orange-ink);font-variant-numeric:tabular-nums} /* ═══ deployment notice ══════════════════════════════════════════════════ */.dep-sec{padding-block:clamp(30px,3.2vw,48px)} .dep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;background:var(--bg-2);border:1px dashed var(--line-2);border-radius:var(--r-card);padding:clamp(22px,2.4vw,32px)} .dep-i{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--surface);border:1px solid var(--line);color:var(--orange-ink)} .dep h2{margin:12px 0 10px;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.035em;line-height:1.15} .dep p{margin:0;color:var(--mid);font-size:14.5px;line-height:1.68;max-width:70ch} @media (max-width:600px){ .dep{grid-template-columns:1fr} } /* ═══ /technology/aftaris — capabilities at length ═══════════════════════ */.cl-sec{padding-block:clamp(46px,4.8vw,74px)} .cl-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden} @media (max-width:860px){ .cl-g{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .cl-g{grid-template-columns:1fr} } .cl-i{background:var(--surface);padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:10px} .cl-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(245,160,0,.1);border:1px solid rgba(245,160,0,.26);color:var(--orange-ink);margin-bottom:2px} .cl-i b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .cl-i p{margin:0;font-size:13.5px;line-height:1.6;color:var(--mid)} .cl-note{margin:18px 0 0;font-size:12.5px;color:var(--faint)} .ins-list--light{margin-top:26px} .ins-list--light li{border-top-color:var(--line)} .ins-list--light li:last-child{border-bottom-color:var(--line)} .ins-list--light .ins-n{color:var(--faint)} .ins-list--light .ins-t b{color:var(--ink)} .ins-list--light .ins-t i{color:var(--mid)} .ins-list--light .ins-p{color:var(--faint)} /* ═══ /trust — the two closing notes ═════════════════════════════════════ */.dp-sec{padding-block:clamp(46px,4.8vw,74px)} .dp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)} @media (max-width:860px){ .dp{grid-template-columns:1fr} } .dp-i{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,2.4vw,32px)} .dp-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(245,160,0,.1);border:1px solid rgba(245,160,0,.26);color:var(--orange-ink);margin-bottom:16px} .dp-i h2{margin:10px 0 12px;font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.035em;line-height:1.18} .dp-i p{margin:0 0 12px;color:var(--mid);font-size:14.5px;line-height:1.68} .dp-i p:last-child{margin-bottom:0} .dp-i a{color:var(--orange-ink);text-decoration:none;border-bottom:1px solid var(--line-2)} .dp-i a:hover{border-bottom-color:var(--orange-ink)} .trust-card .svi-list li{color:var(--ink);font-weight:600} /* ═══ 404 — four ways out ════════════════════════════════════════════════ */.nf{display:grid;gap:10px;max-width:460px;margin-inline:auto} .nf-i{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px;text-decoration:none;box-shadow:var(--shadow-card);transition:transform var(--t), border-color var(--t)} .nf-i:hover{transform:translateY(-2px);border-color:var(--line-2)} .nf-i b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .nf-i i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--mid)} .nf-i span{color:var(--faint);transition:color var(--t), transform var(--t)} .nf-i:hover span{color:var(--orange-ink);transform:translateX(3px)} /* ═══ legal documents ════════════════════════════════════════════════════ */.split.doc{padding-block:clamp(10px,1.4vw,22px)} .doc .prose{max-width:70ch;font-size:15.5px;line-height:1.78;color:var(--mid)} .doc .prose h2{margin:44px 0 14px;font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.18;letter-spacing:-.035em;color:var(--ink);scroll-margin-top:120px} .doc .prose h2:first-child{margin-top:0} .doc .prose h3{margin:28px 0 10px;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink)} .doc .prose p{margin:0 0 14px} .doc .prose ul, .doc .prose ol{margin:0 0 16px;padding-left:20px} .doc .prose li{margin-bottom:7px} .doc .prose a{color:var(--orange-ink);text-decoration:none;border-bottom:1px solid var(--line-2)} .doc .prose a:hover{border-bottom-color:var(--orange-ink)} .doc .prose strong{color:var(--ink)} /* ═══ THE CLOSING BAND — light ════════════════════════════════════════════ The band under the hero stays black; the one that closes a page does not. Twenty of twenty-seven pages ended dark and ran into the black footer as a single slab. This gives the footer an edge to sit on. */.brk--close, :root[data-theme="light"] .brk--close, :root[data-theme="dark"] .brk--close{background:var(--bg-2) !important;color:var(--ink);border-block:0;border-top:1px solid var(--line);box-shadow:none;padding-block:clamp(48px,5vw,78px)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brk--close{background:var(--bg-2) !important;border-top-color:var(--line)} } .brk--close .brk-panel{background:transparent;border:0;box-shadow:none;padding:0} .brk--close .brk-top{border-bottom:0;margin-bottom:0;padding-bottom:0;align-items:center} .brk--close .reg{color:var(--faint)} .brk--close .brk-h{color:var(--ink)} .brk--close .brk-p{color:var(--mid)} .brk--close .btn.primary{background:var(--orange);border-color:var(--orange);color:#0D0D0B} .brk--close .btn.primary:hover{background:var(--orange-strong);border-color:var(--orange-strong)} .brk--close .brk-alt{color:var(--mid)} .brk--close .brk-alt:hover{color:var(--orange-ink)} /* ═══ BREADCRUMBS ════════════════════════════════════════════════════════ */.crumbs{margin-bottom:18px} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0} .crumbs li{display:flex;align-items:center;gap:8px;font-size:12.5px} .crumbs li + li::before{content:"/";color:var(--faint);font-size:11px} .crumbs a{color:var(--mid);text-decoration:none;padding-block:3px;transition:color var(--t)} .crumbs a:hover{color:var(--orange-ink)} .crumbs [aria-current]{color:var(--faint)} .nf-h{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);text-align:center} /* ═══ RELATED — three neighbours, not the whole catalogue ════════════════ */.rel-sec{padding-block:clamp(40px,4.2vw,64px)} .rel-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)} @media (max-width:820px){ .rel-g{grid-template-columns:1fr} } .rel-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;transition:transform var(--t), border-color var(--t), box-shadow var(--t)} .rel-i:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow-card)} .rel-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(245,160,0,.1);border:1px solid rgba(245,160,0,.26);color:var(--orange-ink);overflow:hidden} .rel-ico--logo{background:var(--bg-2);border-color:var(--line)} .rel-ico img{width:22px;height:22px;object-fit:contain} .rel-ico .card-mark{background:transparent;border:0;color:var(--orange-ink);font-size:12px} .rel-t{min-width:0} .rel-t b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .rel-t i{display:block;margin-top:2px;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--mid)} .rel-go{color:var(--faint);transition:color var(--t), transform var(--t)} .rel-i:hover .rel-go{color:var(--orange-ink);transform:translateX(3px)} /* ── contrast corrections found on the entity and service templates ────── The breadcrumb links, the closing band's eyebrow and the filing-card status pill were all inheriting a colour meant for a different ground. Each is now stated for the surface it actually sits on. */ .crumbs a{ color:var(--mid) } :root[data-theme="dark"] .crumbs a{ color:#B7B1A8 } :root[data-theme="dark"] .crumbs [aria-current]{ color:#8B867E } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .crumbs a{ color:#B7B1A8 } :root:not([data-theme="light"]) .crumbs [aria-current]{ color:#8B867E } } /* the closing band sits on --bg-2, a shade deeper than the canvas, so the eyebrow needs the body grey rather than the label grey */ .brk--close .reg{ color:var(--mid) } /* the filing card takes the surface colour, which is dark in dark mode */ :root[data-theme="dark"] .ent-card .status--operating{ color:#7BE8A4; background:rgba(74,222,128,.12); border-color:rgba(123,232,164,.28) } :root[data-theme="dark"] .ent-card .status--deployment{ color:#A9C6FA; background:rgba(125,169,245,.13); border-color:rgba(169,198,250,.28) } :root[data-theme="dark"] .ent-card .status--development{ color:#F7BC4D; background:rgba(245,160,0,.13); border-color:rgba(247,188,77,.28) } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ent-card .status--operating{ color:#7BE8A4; background:rgba(74,222,128,.12); border-color:rgba(123,232,164,.28) } :root:not([data-theme="light"]) .ent-card .status--deployment{ color:#A9C6FA; background:rgba(125,169,245,.13); border-color:rgba(169,198,250,.28) } :root:not([data-theme="light"]) .ent-card .status--development{ color:#F7BC4D; background:rgba(245,160,0,.13); border-color:rgba(247,188,77,.28) } } /* ═══ /group — THE REGISTER ═══════════════════════════════════════════════ This page is the record, so it is set as one: a summary of the classes, the shape of the company as a hierarchy, and then a single dense list grouped by the four relationship words. It deliberately does not reuse the homepage's bento — a register that looks like a landing page is a landing page. */ /* the class summary in the masthead */ .gsum{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(18px,1.8vw,24px); box-shadow:var(--shadow-card); max-width:480px; margin-inline:auto; } .gsum-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line) } .gsum-l{ font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--faint) } .gsum-n{ font-size:12px; color:var(--mid); font-variant-numeric:tabular-nums } .gsum-list{ list-style:none; margin:0; padding:0 } .gsum-list a{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; transition:padding-inline var(--t), background var(--t); } .gsum-list li:last-child a{ border-bottom:0; padding-bottom:0 } .gsum-list a:hover{ background:var(--bg-2); padding-inline:10px } .gsum-k{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink); min-width:82px } .gsum-d{ font-size:12px; line-height:1.4; color:var(--mid) } .gsum-c{ font-family:var(--mo); font-size:12px; color:var(--orange-ink); font-variant-numeric:tabular-nums; } /* the hierarchy */ .gtree-sec{ padding-block:clamp(44px,4.6vw,70px) } .gtree{ display:flex; flex-direction:column; align-items:center; margin-top:8px } .gtree-root{ background:var(--plate); color:var(--on-plate); border-radius:var(--r-pill); padding:13px 26px; box-shadow:0 18px 36px -22px rgba(20,14,4,.5); } .gtree-root span{ font-size:14px; font-weight:700; letter-spacing:.02em } .gtree-stem{ width:1px; height:30px; background:var(--line-2) } .gtree-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px); width:100%; position:relative; } /* the rail that joins the four classes */ .gtree-cols::before{ content:""; position:absolute; top:0; left:12.5%; right:12.5%; height:1px; background:var(--line-2); } @media (max-width:820px){ .gtree-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:26px } .gtree-cols::before{ left:25%; right:25% } } @media (max-width:520px){ .gtree-cols{ grid-template-columns:1fr } .gtree-cols::before{ display:none } } .gtree-col{ display:flex; flex-direction:column; align-items:center; text-align:center } .gtree-drop{ width:1px; height:26px; background:var(--line-2) } .gtree-label{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:8px 15px; border-radius:var(--r-pill); background:var(--bg-2); border:1px solid var(--line); font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--mid); } .gtree-label i{ font-style:normal; font-family:var(--mo); font-size:11px; color:var(--orange-ink); font-variant-numeric:tabular-nums; } .gtree-marks{ display:flex; flex-direction:column; gap:8px; width:100%; align-items:stretch } .gtree-m{ display:flex; align-items:center; gap:10px; justify-content:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:10px 13px; min-width:0; } .gtree-m img{ width:22px; height:22px; object-fit:contain; flex:none } .gtree-m .card-mark{ background:transparent; border:0; color:var(--orange-ink); font-size:12px } .gtree-m b{ font-size:12.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* the one class that is not a holding is drawn as such */ .gtree-col--deployment .gtree-m{ background:transparent; border-style:dashed; border-color:var(--line-2) } .gtree-col--deployment .gtree-label{ border-style:dashed } .gtree-note{ margin:clamp(24px,2.6vw,34px) 0 0; color:var(--faint); font-size:13px; line-height:1.6; max-width:66ch } /* the register itself */ .greg-sec{ padding-block:clamp(44px,4.6vw,70px) } .greg-class{ margin-top:clamp(28px,3vw,42px) } .greg-class:first-child{ margin-top:8px } .greg-head{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr) auto; align-items:baseline; gap:14px clamp(14px,1.8vw,26px); padding-bottom:12px; border-bottom:2px solid var(--ink); } .greg-head h3{ margin:0; font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); white-space:nowrap; } .greg-head p{ margin:0; font-size:13px; line-height:1.5; color:var(--mid) } .greg-n{ font-family:var(--mo); font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums } @media (max-width:760px){ .greg-head{ grid-template-columns:minmax(0,1fr) auto } .greg-head p{ grid-column:1 / -1 } } .greg-row{ display:grid; align-items:center; gap:clamp(10px,1.4vw,20px); grid-template-columns:44px minmax(120px,.85fr) minmax(0,1.7fr) minmax(0,.85fr) auto 108px 16px; padding:16px 4px; border-bottom:1px solid var(--line); text-decoration:none; transition:background var(--t), padding-inline var(--t); } .greg-row:hover{ background:var(--surface); padding-inline:14px 10px } .greg-mark{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none; background:var(--bg-2); border:1px solid var(--line); overflow:hidden; } .greg-mark img{ width:30px; height:30px; object-fit:contain } .greg-mark .card-mark{ background:transparent; border:0; color:var(--orange-ink); font-size:14px } .greg-id b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink) } .greg-id i{ display:block; margin-top:3px; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--faint) } .greg-what{ font-size:13.5px; line-height:1.55; color:var(--mid) } .greg-meta{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--faint) } .greg-mk{ display:inline-flex; align-items:center; gap:6px; line-height:1.35 } .greg-mk svg{ color:var(--orange-ink); flex:none } .greg-pw b{ color:var(--mid); font-weight:700 } .greg-site{ font-size:11.5px; color:var(--faint); text-align:right; overflow-wrap:anywhere } .greg-go{ color:var(--faint); transition:color var(--t), transform var(--t) } .greg-row:hover .greg-go{ color:var(--orange-ink); transform:translateX(3px) } .greg-row .status{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:5px 11px; border-radius:var(--r-pill); background:var(--bg-2); border:1px solid var(--line); color:var(--mid); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .greg-row .status::before{ content:none } .greg-row .status i{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none } .greg-row .status--operating{ color:#1F7A3D; background:rgba(74,222,128,.13); border-color:rgba(31,122,61,.24) } .greg-row .status--deployment{ color:#2C5B9E; background:rgba(125,169,245,.14); border-color:rgba(44,91,158,.24) } .greg-row .status--development{ color:#8A5100; background:rgba(245,160,0,.13); border-color:rgba(138,81,0,.24) } :root[data-theme="dark"] .greg-row .status--operating{ color:#7BE8A4; background:rgba(74,222,128,.12); border-color:rgba(123,232,164,.28) } :root[data-theme="dark"] .greg-row .status--deployment{ color:#A9C6FA; background:rgba(125,169,245,.13); border-color:rgba(169,198,250,.28) } :root[data-theme="dark"] .greg-row .status--development{ color:#F7BC4D; background:rgba(245,160,0,.13); border-color:rgba(247,188,77,.28) } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .greg-row .status--operating{ color:#7BE8A4; background:rgba(74,222,128,.12); border-color:rgba(123,232,164,.28) } :root:not([data-theme="light"]) .greg-row .status--deployment{ color:#A9C6FA; background:rgba(125,169,245,.13); border-color:rgba(169,198,250,.28) } :root:not([data-theme="light"]) .greg-row .status--development{ color:#F7BC4D; background:rgba(245,160,0,.13); border-color:rgba(247,188,77,.28) } } .greg-class--deployment .greg-row{ border-bottom-style:dashed } /* the register reflows rather than scrolling sideways */ @media (max-width:1180px){ .greg-row{ grid-template-columns:44px minmax(0,1fr) auto; row-gap:10px } .greg-what{ grid-column:2 / -1 } .greg-meta{ grid-column:2 / -1; flex-direction:row; flex-wrap:wrap; gap:6px 18px } .greg-site{ grid-column:2; text-align:left } .greg-go{ display:none } } @media (max-width:560px){ .greg-row{ grid-template-columns:40px minmax(0,1fr) } .greg-row .status{ grid-column:2; justify-self:start } .greg-mark{ width:40px; height:40px } } /* the class columns start at the same line, however many entries they hold */ .gtree-col{ align-self:start } /* On a phone the class count fell to its own row beneath the definition; it belongs on the heading line. */ @media (max-width:760px){ .greg-head h3{ grid-column:1; grid-row:1 } .greg-n{ grid-column:2; grid-row:1; justify-self:end } .greg-head p{ grid-column:1 / -1; grid-row:2 } } /* ═══ /group — THE ALTERNATION ════════════════════════════════════════════ white hero · dark band · white hierarchy · dark register · white products · dark footer. Each change of ground marks a change of job: the argument, the shape, the record, the caveat. */ /* the lead band: dark, and sitting directly under a white hero */ .brk--lead{ background:#0D0D0B !important; color:var(--on-plate); border-block:0; padding-block:clamp(40px,4.4vw,64px); box-shadow:0 -18px 40px -30px rgba(20,14,4,.4), 0 22px 46px -30px rgba(20,14,4,.42); } :root[data-theme="dark"] .brk--lead, :root:not([data-theme="light"]) .brk--lead{ box-shadow:none; border-block:1px solid rgba(255,255,255,.12) } .brk--lead .brk-panel{ background:transparent; border:0; box-shadow:none; padding:0 } .brk--lead .brk-top{ border-bottom:0; margin-bottom:0; padding-bottom:0; align-items:center } .brk--lead .brk-h{ color:#FBF8F3; max-width:22ch } .brk--lead .brk-p{ color:rgba(251,248,243,.68) } .brk--lead .brk-alt{ color:rgba(251,248,243,.72) } .brk--lead .brk-alt:hover{ color:var(--orange) } /* ── THE REGISTER, ON THE PLATE ───────────────────────────────────────── A dense record reads well in reverse: hairlines in white at low alpha, the amber reserved for the marks that matter, and a header row of column labels the light version did not need. */ .greg-sec--dark{ background:var(--plate); color:var(--on-plate) } .greg-sec--dark .reg{ color:rgba(251,248,243,.55) } .greg-sec--dark .reg-head h2{ color:#FBF8F3 } .greg-sec--dark .reg-count{ color:rgba(251,248,243,.45) } .greg-sec--dark .greg-head{ border-bottom-color:rgba(251,248,243,.5) } .greg-sec--dark .greg-head h3{ color:var(--orange) } .greg-sec--dark .greg-head p{ color:rgba(251,248,243,.6) } .greg-sec--dark .greg-n{ color:rgba(251,248,243,.45) } .greg-sec--dark .greg-row{ border-bottom-color:rgba(255,255,255,.1) } .greg-sec--dark .greg-row:hover{ background:rgba(255,255,255,.045) } .greg-sec--dark .greg-mark{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.13) } .greg-sec--dark .greg-mark .card-mark{ color:var(--orange) } .greg-sec--dark .greg-id b{ color:#FBF8F3 } .greg-sec--dark .greg-id i{ color:rgba(251,248,243,.45) } .greg-sec--dark .greg-what{ color:rgba(251,248,243,.68) } .greg-sec--dark .greg-meta{ color:rgba(251,248,243,.5) } .greg-sec--dark .greg-mk svg{ color:var(--orange) } .greg-sec--dark .greg-pw b{ color:rgba(251,248,243,.8) } .greg-sec--dark .greg-site{ color:rgba(251,248,243,.45) } .greg-sec--dark .greg-go{ color:rgba(251,248,243,.4) } .greg-sec--dark .greg-row:hover .greg-go{ color:var(--orange) } .greg-sec--dark .greg-row .status{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.13); color:rgba(251,248,243,.7) } .greg-sec--dark .greg-row .status--operating{ color:#7BE8A4; background:rgba(74,222,128,.12); border-color:rgba(123,232,164,.28) } .greg-sec--dark .greg-row .status--deployment{ color:#A9C6FA; background:rgba(125,169,245,.13); border-color:rgba(169,198,250,.28) } .greg-sec--dark .greg-row .status--development{ color:#F7BC4D; background:rgba(245,160,0,.13); border-color:rgba(247,188,77,.28) } /* the Aftaris mark is already white, so it needs no plate on this ground */ .greg-sec--dark .greg-mark /* the column key, shown once above the first class */ .greg-key{ display:grid; align-items:center; gap:clamp(10px,1.4vw,20px); grid-template-columns:44px minmax(120px,.85fr) minmax(0,1.7fr) minmax(0,.85fr) auto 108px 16px; padding:0 4px 10px; margin-bottom:2px; } .greg-key span{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,248,243,.38); } .greg-key span:nth-child(6){ text-align:right } @media (max-width:1180px){ .greg-key{ display:none } } /* ── INSIDE THE PLATFORMS, ON THE PAGE ──────────────────────────────── */ .ins-sec--light .ins-sub{ color:var(--mid) } .ins-sec--light .ins-head h2{ color:var(--ink) } /* /group carries one call to action — the dark band under the hero — and leaves through a quiet action row rather than a second block. */ .ins-acts{ margin-top:clamp(28px,3vw,40px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px } .ins-sec--light{ padding-bottom:clamp(56px,5.6vw,88px) } /* Every venture mark now ships centred inside its own square with its own ground, so no logo needs a per-brand rule to be visible or aligned. The marks were re-cut from source: Aftermath sat hard against the right edge of its tile, AI Data was low and right, INSUQ and UrbanCuts were off by a few pixels, and Aftaris had no ground at all on a light tile. */ .card-logo{ object-fit:contain } /* ── LOGO TILES ────────────────────────────────────────────────────────── Every venture mark now ships as a finished square with its own ground, so the pale tile drawn behind one is redundant: it showed as a light ring around the mark, which is why Aftaris read as a black square on a white background rather than as an icon. Where a tile holds a logo, the logo fills it and the tile's own surface is hidden. Tiles that hold a letter mark or a glyph keep theirs. */ .bt-mark:has(.card-logo), .ent-mark:has(.card-logo), .rel-ico:has(.card-logo), .gtree-m > .card-logo, .greg-mark:has(.card-logo), .str-m:has(.card-logo), .ndrop-i:has(.card-logo), .node i:has(.card-logo), .vstack-c .card-logo, .bt-chip .card-logo, .rw-m:has(.card-logo){ background:transparent; border-color:transparent; padding:0; } .bt-mark .card-logo, .ent-mark .card-logo, .rel-ico .card-logo, .greg-mark .card-logo, .str-m .card-logo, .ndrop-i .card-logo, .node i .card-logo, .rw-m .card-logo{ width:100%; height:100%; border-radius:inherit; object-fit:cover; } .gtree-m .card-logo{ border-radius:7px } .bt-chip .card-logo{ border-radius:5px } .vstack-c .card-logo{ border-radius:7px } /* a sub-heading inside the two-column prose block, for pages where two short arguments belong in one section rather than two */ .why-h{ margin:26px 0 12px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); } /* the quiet exit row every page below the homepage now ends on */ .pg-acts{ margin-top:clamp(28px,3vw,42px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px } /* the two-column prose block on a light ground, for pages whose single argument now sits in the white slot */ .why-sec--light .why-l h2{ color:var(--ink) } .why-sec--light .why-b p{ color:var(--mid) } .why-sec--light .why-b a{ color:var(--orange-ink); border-bottom-color:var(--line-2) } .why-sec--light .why-b a:hover{ border-bottom-color:var(--orange-ink) } .why-sec--light .why-b strong{ color:var(--ink) } .why-sec--light .why-h{ color:var(--orange-ink) } /* ═══ /services — THE PRACTICES, AS A BENTO ═══════════════════════════════ Seven identical tiles said nothing about the practices; every one also carried the word "AFTech" in its footer, on the AFTech page. The grid now has two anchors — the practice the group is asked for most, and the one that carries on after everything else ships — and the rest sit at even weight between them. */ .svb{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.2vw,18px); grid-auto-rows:minmax(0,auto); } .svb-i{ grid-column:span var(--span,2); grid-row:span var(--rows,1); display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; isolation:isolate; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(20px,1.8vw,28px); text-decoration:none; color:inherit; transition:transform var(--t), box-shadow var(--t), border-color var(--t); } .svb-i::before{ content:""; position:absolute; inset:-45% -35% auto; height:75%; z-index:-1; background:radial-gradient(58% 100% at 50% 0%, var(--orange), transparent 70%); opacity:0; transition:opacity .35s var(--ease); } .svb-i:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--line-2) } .svb-i:hover::before{ opacity:.1 } .svb-top{ display:flex; align-items:center; justify-content:space-between; gap:12px } .svb-ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none; background:rgba(245,160,0,.11); border:1px solid rgba(245,160,0,.28); color:var(--orange-ink); transition:background var(--t), color var(--t); } .svb-i:hover .svb-ico{ background:var(--orange); color:#0D0D0B; border-color:transparent } .svb-n{ font-family:var(--mo); font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums } .svb-body{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-width:0 } .svb-k{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) } .svb-name{ font-family:var(--display); font-size:1.2rem; font-weight:700; letter-spacing:-.03em; line-height:1.12; color:var(--ink) } .svb-lede{ font-size:14px; line-height:1.55; color:var(--mid) } .svb-get{ display:flex; flex-direction:column; gap:7px; margin-top:6px } .svb-get span{ position:relative; padding-left:17px; font-size:12.5px; line-height:1.5; color:var(--mid) } .svb-get span::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1.5px; background:var(--orange); border-radius:1px; } .svb-go{ color:var(--faint); transition:color var(--t), transform var(--t); align-self:flex-start } .svb-i:hover .svb-go{ color:var(--orange-ink); transform:translateX(3px) } /* the opening practice */ .svb-i--lead .svb-name{ font-size:clamp(1.4rem,2vw,1.85rem) } .svb-i--lead .svb-lede{ font-size:15.5px; max-width:44ch } .svb-i--lead .svb-ico{ width:52px; height:52px; border-radius:15px } /* the practice that carries on after everything else ships */ .svb-i--wide{ background:var(--plate); border-color:transparent; color:var(--on-plate); flex-direction:row; align-items:center; gap:clamp(20px,3vw,52px); flex-wrap:wrap; } .svb-i--wide::before{ background:radial-gradient(50% 100% at 15% 0%, var(--orange), transparent 70%) } .svb-i--wide:hover::before{ opacity:.18 } .svb-i--wide .svb-top{ flex-direction:column; align-items:flex-start; gap:12px; flex:none } .svb-i--wide .svb-ico{ background:rgba(245,160,0,.14); border-color:rgba(245,160,0,.32); color:var(--orange) } .svb-i--wide .svb-n{ color:rgba(251,248,243,.45) } .svb-i--wide .svb-body{ flex:1 1 260px } .svb-i--wide .svb-k{ color:rgba(251,248,243,.5) } .svb-i--wide .svb-name{ color:#FBF8F3; font-size:clamp(1.3rem,1.8vw,1.6rem) } .svb-i--wide .svb-lede{ color:rgba(251,248,243,.7) } .svb-i--wide .svb-get{ flex-direction:row; flex-wrap:wrap; gap:10px 26px; margin-top:2px; flex:1 1 100% } .svb-i--wide .svb-get span{ color:rgba(251,248,243,.66); flex:1 1 220px } .svb-i--wide .svb-go{ color:rgba(251,248,243,.45); align-self:center } .svb-i--wide:hover .svb-go{ color:var(--orange) } @media (max-width:1100px){ .svb{ grid-template-columns:repeat(4,minmax(0,1fr)) } .svb-i{ grid-column:span 2; grid-row:span 1 } .svb-i--lead{ grid-column:span 4 } .svb-i--wide{ grid-column:span 4 } } @media (max-width:680px){ .svb{ grid-template-columns:1fr } .svb-i,.svb-i--lead,.svb-i--wide{ grid-column:span 1 } .svb-i--wide{ flex-direction:column; align-items:stretch } .svb-i--wide .svb-top{ flex-direction:row; align-items:center; justify-content:space-between } .svb-i--wide .svb-get{ flex-direction:column; gap:7px } } @media (prefers-reduced-motion:reduce){ .svb-i,.svb-i::before,.svb-go,.svb-ico{ transition:none !important } } /* ── THE AI PRODUCT MARKS ──────────────────────────────────────────────── Toby, TobyDrive, MOPO and ATLAS have their own marks, drawn from the group's own sheet. They are applications of Aftaris inside a platform, never listed as peers of the companies, so they appear only where the text already says so. */ .ai-logo{ object-fit:contain; border-radius:7px; flex:none } .ail-chip{ padding-left:8px } .ail-chip .ai-logo{ width:24px; height:24px; border-radius:7px } .ins-m{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; overflow:hidden; } .ins-m .ai-logo{ width:100%; height:100%; border-radius:inherit } .ins-list li{ align-items:center } /* ═══ /company — THE CORPORATE RECORD ═════════════════════════════════════ The page a partner, a journalist or a counterparty reads before doing anything else, so it answers in order: what the company is, what it is not, what it owns, where it works, how it governs itself, and how to write to it. Every figure on it is counted from the register. */ /* what it is · the figures beside the prose */ .cw-sec{ padding-block:clamp(46px,4.8vw,74px) } .cw{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,4vw,64px); align-items:start } @media (max-width:900px){ .cw{ grid-template-columns:1fr; gap:26px } } .cw-l p{ margin:0 0 16px; color:var(--mid); font-size:15.5px; line-height:1.74; max-width:62ch } .cw-l p:last-child{ margin-bottom:0 } .cw-l a{ color:var(--orange-ink); text-decoration:none; border-bottom:1px solid var(--line-2) } .cw-l a:hover{ border-bottom-color:var(--orange-ink) } .cw-facts{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; } .cw-facts > div{ background:var(--surface); padding:clamp(16px,1.6vw,22px); display:flex; flex-direction:column; gap:6px } .cw-facts dt{ order:2; margin:0; color:var(--faint); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase } .cw-facts dd{ order:1; margin:0; color:var(--ink); font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,2.2vw,2rem); line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums } .cw-facts dd.cw-t{ font-size:1rem; line-height:1.3; letter-spacing:-.02em } /* and four things it is not */ .cw-not{ margin-top:clamp(30px,3.2vw,44px) } .cw-not-l{ display:block; margin-bottom:14px; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--faint) } .cw-not-g{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px) } @media (max-width:1000px){ .cw-not-g{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:620px){ .cw-not-g{ grid-template-columns:1fr } } .cw-not-i{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px } .cw-not-k{ display:inline-block; margin-bottom:11px; padding:5px 11px; border-radius:var(--r-pill); background:var(--bg-2); border:1px solid var(--line); color:var(--orange-ink); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .cw-not-i b{ display:block; color:var(--ink); font-size:14.5px; font-weight:700; letter-spacing:-.02em; line-height:1.3 } .cw-not-i p{ margin:8px 0 0; color:var(--mid); font-size:13px; line-height:1.6 } /* where it operates */ .mkt-sec{ padding-block:clamp(46px,4.8vw,74px) } .mkt{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) } .mkt li{ display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:clamp(14px,1.8vw,26px); padding:15px 4px; border-bottom:1px solid var(--line); } .mkt-m{ width:44px; height:44px; border-radius:13px; overflow:hidden; display:grid; place-items:center } .mkt-m img{ width:100%; height:100%; object-fit:cover; border-radius:inherit } .mkt-t b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink) } .mkt-t i{ display:block; margin-top:2px; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--faint) } .mkt-w{ display:inline-flex; align-items:center; gap:9px; font-size:14px; line-height:1.5; color:var(--mid) } .mkt-w svg{ color:var(--orange-ink); flex:none } @media (max-width:760px){ .mkt li{ grid-template-columns:40px minmax(0,1fr); row-gap:8px } .mkt-w{ grid-column:2 } .mkt-m{ width:40px; height:40px } } /* how it is governed — the standards, on the plate */ .st-sec--dark .reg,.st-sec--dark .st-l{ color:rgba(251,248,243,.55) } .st-sec--dark .st-head h2{ color:#FBF8F3 } .st-sec--dark .st-sub{ color:rgba(251,248,243,.68) } .st-sec--dark .st-p--do{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.11) } .st-sec--dark .st-p--do li + li{ border-top-color:rgba(255,255,255,.11) } .st-sec--dark .st-p--do .st-t b{ color:#FBF8F3 } .st-sec--dark .st-p--do .st-t i{ color:rgba(251,248,243,.66) } .st-sec--dark .st-p--do .st-i{ background:rgba(123,232,164,.13); border-color:rgba(123,232,164,.3); color:#7BE8A4 } .st-sec--dark .st-p--dont{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.11) } .go--inv{ color:rgba(251,248,243,.72) } .go--inv:hover{ color:var(--orange) } /* particulars, boilerplate and correspondence */ .part-sec .part{ align-items:start; margin-top:8px } .part-side .ct-l{ margin-bottom:12px } .corr{ margin-top:clamp(30px,3.2vw,44px) } .corr .ct-routes li{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center } .corr-go{ display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 12px; border-radius:var(--r-pill); background:var(--bg-2); border:1px solid var(--line); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); text-decoration:none; white-space:nowrap; transition:background var(--t), color var(--t), border-color var(--t); } .corr-go:hover{ background:var(--orange); border-color:transparent; color:#0D0D0B } .corr-note{ margin:16px 0 0; color:var(--faint); font-size:12.5px; line-height:1.6; max-width:62ch } /* ═══ /company — trimmed ══════════════════════════════════════════════════ The first build printed the particulars three times, the eight register entries twice and the governance standards a third time after /trust and the homepage. Each fact now appears once, on the page that owns it: the particulars in the masthead card, the entries on /group, the standards on /trust. What is left here is what only this page can say. */ .cw-lede{ margin:0 0 clamp(26px,3vw,38px); color:var(--mid); font-size:16px; line-height:1.72; max-width:70ch } .cw-not{ margin-top:0 } /* the shape of what the company owns — counts and marks, not the record */ .own-sec{ padding-block:clamp(48px,5vw,76px) } .own{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px) } @media (max-width:1000px){ .own{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:600px){ .own{ grid-template-columns:1fr } } .own-c{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.11); border-radius:20px; padding:clamp(20px,1.9vw,26px); display:flex; flex-direction:column; gap:12px; } .own-c--deployment{ background:transparent; border-style:dashed; border-color:rgba(255,255,255,.2) } .own-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12) } .own-k{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange) } .own-n{ font-family:var(--mo); font-size:13px; color:rgba(251,248,243,.5); font-variant-numeric:tabular-nums } .own-c p{ margin:0; color:rgba(251,248,243,.66); font-size:13px; line-height:1.6; flex:1 1 auto } .own-m{ display:flex; flex-direction:column; gap:7px } .own-i{ display:flex; align-items:center; gap:10px; text-decoration:none; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid transparent; transition:background var(--t), border-color var(--t); } .own-i:hover{ background:rgba(255,255,255,.1); border-color:rgba(245,160,0,.4) } .own-i img{ width:24px; height:24px; object-fit:cover; border-radius:7px; flex:none } .own-i .card-mark{ background:transparent; border:0; color:var(--orange); font-size:12px } .own-i b{ font-size:12.5px; font-weight:700; letter-spacing:-.01em; color:#FBF8F3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .own-sec .sec-acts{ margin-top:clamp(28px,3vw,40px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px } /* press and correspondence, side by side */ .corr-sec{ padding-block:clamp(46px,4.8vw,74px) } .corr-g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,3.4vw,56px); align-items:start } @media (max-width:900px){ .corr-g{ grid-template-columns:1fr; gap:30px } } .corr-routes li{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center } .vrec-wide{ grid-column:1 / -1 } /* ═══ /services — the habits, and what suits it ═══════════════════════════ The masthead used to show the seven practices as a glyph grid and the bento below repeated them in full; the claim's proof was also stated twice. The practices are now named once, and the proof once, in the band. */ .hab-sec{ padding-block:clamp(48px,5vw,76px) } .hab{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px) } @media (max-width:1000px){ .hab{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:600px){ .hab{ grid-template-columns:1fr } } .hab-i{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.11); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:9px; } .hab-n{ font-family:var(--mo); font-size:11.5px; color:var(--orange); font-variant-numeric:tabular-nums } .hab-i b{ color:#FBF8F3; font-size:15px; font-weight:700; letter-spacing:-.02em; line-height:1.3 } .hab-i p{ margin:0; color:rgba(251,248,243,.66); font-size:13px; line-height:1.6 } .fit-sec{ padding-block:clamp(46px,4.8vw,74px) } .fit{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(26px,4vw,64px); align-items:start } @media (max-width:900px){ .fit{ grid-template-columns:1fr; gap:26px } } .fit-l h2{ margin:14px 0 0; font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.08; letter-spacing:-.04em } .fit-l p{ margin:16px 0 0; color:var(--mid); font-size:15px; line-height:1.7; max-width:44ch } .fit-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) } .fit-list li{ padding:18px 4px; border-bottom:1px solid var(--line) } .fit-list b{ display:block; font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink) } .fit-list i{ display:block; margin-top:5px; font-style:normal; font-size:14px; line-height:1.6; color:var(--mid) } /* ═══ THE MOBILE DRAWER ═══════════════════════════════════════════════════ It used to flatten five menus into five links, so a phone could not reach the ventures, the services or the legal pages at all — the destinations the desktop dropdowns carry. Each menu is now a group with its children beneath it, wearing the same marks the dropdowns use. */ .mpanel{ background:var(--plate); inset:104px 0 0 } .mpanel-in{ padding:8px var(--gut) 40px } .mgroup{ border-bottom:1px solid rgba(255,255,255,.09); padding:6px 0 14px } .mgroup:last-of-type{ border-bottom:0 } .mgroup-h{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:10px 2px; text-decoration:none; border:0; } .mgroup-h b{ display:block; color:#FBF8F3; font-family:var(--display); font-size:1.18rem; font-weight:700; letter-spacing:-.03em; line-height:1.15 } .mgroup-h i{ display:block; margin-top:3px; font-style:normal; font-size:12.5px; line-height:1.4; color:rgba(251,248,243,.5) } .mgroup-h svg{ color:rgba(251,248,243,.4); flex:none } .mgroup-h:hover svg,.mgroup-h:focus-visible svg{ color:var(--orange) } .mgroup-k{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:4px } .mgroup-k a{ display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 11px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:rgba(251,248,243,.82); font-size:12.5px; font-weight:600; line-height:1.3; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.08); } .mgroup-k a:hover,.mgroup-k a:focus-visible{ background:rgba(255,255,255,.09); color:#FBF8F3 } .mk{ width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center; background:rgba(245,160,0,.12); border:1px solid rgba(245,160,0,.26); color:var(--orange); overflow:hidden; } .mk--logo{ background:transparent; border-color:transparent; padding:0 } .mk img{ width:100%; height:100%; object-fit:cover; border-radius:inherit } .mk .card-mark{ background:transparent; border:0; color:var(--orange); font-size:12px } .mpanel .m-cta{ padding:22px 0 8px; border-bottom:0 } .mpanel .m-cta .btn{ width:100%; justify-content:center } @media (max-width:400px){ .mgroup-k{ grid-template-columns:1fr } } /* ═══ THE FOOTER ON A PHONE ═══════════════════════════════════════════════ Four menus across in one row, the brand block carrying more of the company, a larger mark, no enquiry card (the page above already ends on one), and a legal bar that keeps each statement on its own line. */ .foot-more,.foot-reg{ display:none } @media (max-width:1180px){ .foot-g{ grid-template-columns:minmax(0,1fr) repeat(4,minmax(0,1fr)); gap:26px 18px } } @media (max-width:820px){ .foot-g{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 12px } .foot-id{ grid-column:1 / -1 } .foot-cta{ display:none } /* the page already closed on one */ .foot .brand img{ height:38px } .foot-id p{ font-size:14.5px; line-height:1.7; max-width:none } .foot-more{ display:block; margin-top:12px; color:rgba(251,248,243,.55); font-size:13px; line-height:1.68 } .foot-reg{ display:block; margin-top:14px; color:rgba(251,248,243,.45); font-size:12px; letter-spacing:.02em } .f-col h3,.f-col h4{ font-size:10px; letter-spacing:.12em; margin-bottom:10px } .f-col a{ font-size:12.5px; line-height:1.4; padding-block:4px } .foot .foot-bar > .wrap{ flex-direction:column; align-items:flex-start; gap:6px; text-align:left } .foot .foot-bar > .wrap span{ display:block; white-space:nowrap } .foot .foot-bar .fbar-id{ font-size:12px } } @media (max-width:430px){ .foot-g{ gap:22px 8px } .f-col a{ font-size:11.5px } .foot .foot-bar > .wrap span{ white-space:normal } .foot .foot-bar > .wrap span:first-child{ white-space:nowrap } } /* The old flat-drawer rule set justify-content:space-between on every anchor inside the panel, which pushed each child's label to the far edge away from its mark. Scope it to the group headings, which do want it. */ .mgroup-k a{ justify-content:flex-start; text-align:left; min-height:46px } /* the mark is a span too, so it must be excluded or the flex rule stretches it into a wide pill */ .mgroup-k a > span:not(.mk){ flex:1 1 auto; text-align:left } .mgroup-k .mk{ flex:0 0 26px; width:26px; height:26px } .mgroup-k{ grid-template-columns:1fr 1fr } @media (max-width:360px){ .mgroup-k{ grid-template-columns:1fr } } .ct-intro{ margin:-6px 0 14px; color:var(--mid); font-size:13px; line-height:1.6 } /* ═══ THE MOBILE MENU CARD ════════════════════════════════════════════════ Was a full-screen sheet the width of the window. It is now a card that matches the header capsule — same width, same corner, same black — sitting just beneath it. Five rows and the button fit a phone with no scrolling; a menu's pages open inside the card, one group at a time. */ .mpanel{ position:fixed; inset:0 0 auto; z-index:99; background:transparent; border:0; padding:0; display:none; pointer-events:none; } .mpanel[data-open]{ display:block } .mpanel-card{ pointer-events:auto; width:min(var(--maxw), calc(100% - 40px)); margin:0 auto; margin-top:calc(var(--hdr) + 40px); background:#0D0D0B; border:1px solid rgba(255,255,255,.13); border-radius:26px; padding:8px; box-shadow:0 30px 60px -26px rgba(13,13,11,.6); max-height:calc(100dvh - var(--hdr) - 60px); overflow-y:auto; overscroll-behavior:contain; } @supports not (height: 100dvh){ .mpanel-card{ max-height:calc(100vh - var(--hdr) - 60px) } } .mrow{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center } .mrow + .mrow{ border-top:1px solid rgba(255,255,255,.08) } .mrow-a{ display:block; padding:13px 6px 13px 14px; text-decoration:none; border:0; min-height:0; } .mrow-a b{ display:block; color:#FBF8F3; font-size:15.5px; font-weight:700; letter-spacing:-.02em; line-height:1.2 } .mrow-a i{ display:block; margin-top:2px; font-style:normal; font-size:11.5px; line-height:1.35; color:rgba(251,248,243,.5) } .mrow-t{ width:44px; height:44px; margin-right:6px; border-radius:12px; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:rgba(251,248,243,.6); cursor:pointer; transition:background var(--t), color var(--t), transform var(--t); } .mrow-t:hover{ background:rgba(255,255,255,.1); color:#FBF8F3 } .mrow[data-open] .mrow-t{ background:var(--orange); border-color:transparent; color:#0D0D0B; transform:rotate(180deg) } .mrow-k{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:2px 6px 12px } .mrow-k a{ display:flex; align-items:center; gap:8px; min-height:42px; padding:7px 10px; border-radius:11px; text-decoration:none; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); color:rgba(251,248,243,.84); font-size:12px; font-weight:600; line-height:1.25; } .mrow-k a:hover,.mrow-k a:focus-visible{ background:rgba(255,255,255,.1); color:#FBF8F3 } .mrow-k .mk{ flex:0 0 22px; width:22px; height:22px; border-radius:7px } .mrow-k a > span{ flex:1 1 auto; min-width:0 } .mpanel .m-cta{ padding:10px 6px 6px; border:0 } .mpanel .m-cta .btn{ width:100%; justify-content:center; min-height:48px } @media (max-width:360px){ .mrow-k{ grid-template-columns:1fr } } /* ═══ THE FOOTER ON A PHONE ═══════════════════════════════════════════════ Four menus in one row, as asked. At this width the longer service names have to wrap, so the columns are separated by a hairline and set tight and small, and the whole block reads as a directory rather than as four ragged lists. */ @media (max-width:820px){ .foot-g{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; column-gap:0 } .foot-id{ grid-column:1 / -1; margin-bottom:26px } .f-col{ padding:0 9px; border-left:1px solid rgba(255,255,255,.09) } .f-col:first-of-type{ padding-left:0; border-left:0 } .f-col:last-of-type{ padding-right:0 } .f-col h3,.f-col h4{ font-size:9.5px; letter-spacing:.1em; margin-bottom:9px; color:rgba(251,248,243,.55) } .f-col ul{ gap:0 } .f-col a{ font-size:11.5px; line-height:1.35; padding-block:5px; hyphens:auto } } @media (max-width:400px){ .f-col{ padding:0 6px } .f-col a{ font-size:11px } } /* display:grid beats the hidden attribute's own display:none, so every group's children were rendering closed — the card scrolled from the start */ .mrow-k[hidden]{ display:none } /* the old sheet's rule was still splitting each row's label and hint to opposite edges; in the card they stack */ .mpanel .mrow-a{ display:block; justify-content:flex-start; text-align:left } /* ═══ NO SIDEWAYS SCROLL ══════════════════════════════════════════════════ Two causes, both fixed at source rather than hidden: · the menu panel was sizing to the document rather than the viewport, which on an already-wide document made it wider still; · long single links — "Privacy, security and AI responsibility" is 416px — were held on one line by the nowrap the desktop version wants. The clip on the root is a guard, not the fix; it preserves sticky, which overflow:hidden would break. */ html{ overflow-x:clip } body{ overflow-x:clip; max-width:100% } .mpanel{ left:0; right:auto; width:100%; max-width:100vw } @media (max-width:820px){ .go{ white-space:normal; align-items:flex-start; text-align:left } .go svg{ margin-top:.35em; flex:none } .sec-acts,.pg-acts,.acts{ max-width:100% } .sec-acts .btn,.pg-acts .btn{ max-width:100% } } /* ═══ THE OPERATING-MODEL MENU ════════════════════════════════════════════ How We Operate had no menu at all — it was the one nav item that opened nothing. It now previews the four beats, read from the same c_beats() the page prints, and it is drawn on the plate rather than as a light card, so the one menu that describes the company's method looks different from the three that list its pages. */ .navdrop--approach{ background:var(--plate); border-color:rgba(255,255,255,.14); box-shadow:0 30px 60px -26px rgba(13,13,11,.62); min-width:330px; max-width:390px; } .navdrop--approach a{ color:var(--on-plate) } .navdrop--approach a:hover,.navdrop--approach a:focus-visible{ background:rgba(255,255,255,.07) } .navdrop--approach strong{ color:#FBF8F3 } .navdrop--approach small{ color:rgba(251,248,243,.58) } .navdrop--approach .ndrop-i{ background:rgba(245,160,0,.13); border-color:rgba(245,160,0,.3); color:var(--orange); } .ndrop-i--step{ font-family:var(--mo); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } /* the trail down the four steps, so the menu reads as a sequence */ .navdrop--approach a:not(:last-child) .ndrop-i--step::after{ content:""; position:absolute; left:50%; top:100%; width:1px; height:9px; background:rgba(245,160,0,.4); translate:-50% 0; } .navdrop--approach .ndrop-i{ position:relative; overflow:visible } /* ═══ THE HERO RING — SEVEN ═══════════════════════════════════════════════ Aftermath, the manufacturer, was absent while the diagram carried six. The seven are spaced evenly on an ellipse and these percentages are the same coordinates the SVG paths end at, so each line lands on its label. 1 310,79 · 2 507,150 · 3 556,309 · 4 419,436 · 5 201,436 · 6 64,309 7 113,150 */ .node--1{ left:50.00%; top:14.79% } .node--2{ left:81.78%; top:28.05% } .node--3{ left:89.63%; top:57.83% } .node--4{ left:67.64%; top:81.72% } .node--5{ left:32.36%; top:81.72% } .node--6{ left:10.37%; top:57.83% } .node--7{ left:18.22%; top:28.05% } .orbit{ aspect-ratio:1/.9 } @media (max-width:640px){ /* the ring pulls in so seven boxes clear each other on a phone */ .node--1{ left:50%; top:12% } .node--2{ left:79%; top:26% } .node--3{ left:83%; top:58% } .node--4{ left:66%; top:84% } .node--5{ left:34%; top:84% } .node--6{ left:17%; top:58% } .node--7{ left:21%; top:26% } } /* ═══ AUDIT FIXES ═════════════════════════════════════════════════════════ A sweep against the interface checklist found four things worth changing. The type scale itself is left alone at the founder's instruction; this raises only the floor. */ /* 1 · NOTHING BELOW 11px. Fifteen rules declared type under 12px, and two of them set 9.5px — the footer column headings on a phone — with four more at 10px. Uppercase letter-spaced labels can run small, but not that small. The floor is now 11px everywhere; the rest of the scale is untouched. */ .f-col h3,.f-col h4, .gsum-l,.svi-l,.ct-l,.cw-not-l,.own-k,.hab-n,.fnd-k,.mkt-t i, .greg-key span,.bt-kind,.filed dt,.mt-rec dt,.cw-facts dt,.ent-dl dt, .reg,.reg--accent,.reg--mute,.card-kind,.status,.bt .status, .greg-row .status,.ent-card .status,.not-k,.cw-not-k,.svb-k,.rel-t i, .ins-p,.ins-t i,.stg-n,.does-n,.ct-n,.fnd-n,.corr-go,.press-q footer{ font-size:11px; } @media (max-width:820px){ .f-col h3,.f-col h4{ font-size:11px; letter-spacing:.1em } } .greg-id i,.str-k,.bt-rel,.bt-host,.greg-site,.mkt-t i{ font-size:11px } /* 2 · The eyebrow and the small caps that carried 10.5px keep their proportions by tightening the tracking rather than shrinking the type. */ .reg{ letter-spacing:.13em } .f-col h3,.f-col h4{ letter-spacing:.11em } /* 3 · TOUCH. Inline links inside a sentence are exempt from the target minimum, but a standalone one is not: the two on /contact sat at 17px. */ .ct-priv a,.corr-note a,.ct-intro a,.cw-l a,.dp-i a,.why-b a{ display:inline-block; padding-block:3px; } /* 4 · The spam trap is invisible but was still a focusable-sized box in the layout; it is taken out of the flow entirely. */ .hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; pointer-events:none } /* the last two below the floor: the "Software" / "Real world" labels */ .rw-a i{ font-size:11px; letter-spacing:.12em } /* ═══ THE RING ON A PHONE ═════════════════════════════════════════════════ Seven boxes on an even ellipse works at desktop width but not at 390px: UrbanCuts and Aftermath sat at the same height with a 4px gap between them. The phone layout staggers the verticals instead of holding the circle, so no two labels share a line and each keeps clear of the edges. */ @media (max-width:640px){ .node--1{ left:50%; top:10% } /* INSUQ */ .node--2{ left:76%; top:25% } /* BarberData */ .node--3{ left:82%; top:47% } /* AI Data */ .node--4{ left:72%; top:70% } /* UrbanCuts */ .node--5{ left:30%; top:84% } /* Aftermath */ .node--6{ left:18%; top:62% } /* Aftaris */ .node--7{ left:24%; top:30% } /* AFTech */ .orbit{ aspect-ratio:1/1.06 } } /* ═══ THE RING ON A PHONE — MIRRORED ══════════════════════════════════════ A true seven-point circle cannot hold seven labelled pills at 390px: the bottom two sit closest together of any pair, which is why UrbanCuts and Aftermath collided. The phone layout keeps exact left/right symmetry instead — one at the top, then three mirrored pairs, each pair the same distance from the centre line: BarberData ±105 · AI Data ±129 · UrbanCuts ±94 Because the boxes no longer sit on the SVG path endpoints, the connectors are dropped here rather than left pointing at nothing; the rings, the core and the bloom carry the composition. */ @media (max-width:640px){ .node--1{ left:50%; top:9% } /* INSUQ */ .node--2{ left:77%; top:31% } /* BarberData ┐ pair */ .node--7{ left:23%; top:31% } /* AFTech ┘ */ .node--3{ left:83%; top:55% } /* AI Data ┐ pair */ .node--6{ left:17%; top:55% } /* Aftaris ┘ */ .node--4{ left:74%; top:80% } /* UrbanCuts ┐ pair */ .node--5{ left:26%; top:80% } /* Aftermath ┘ */ .orbit{ aspect-ratio:1/1.06 } .orbit-link,.orbit-sig{ display:none } .orbit-ring{ opacity:.85 } } /* ═══ THE HEADER STRIP ════════════════════════════════════════════════════ The capsule design left the original sticky bar's treatment behind it: a backdrop blur with a saturation boost and a hairline border across the full width. Against a floating pill that reads as a translucent band with a line under it. Nothing sits behind the capsule now. */ .top{ backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; background:transparent; } .top.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0 } /* ═══ HOW WE OPERATE, AND THE MARK ════════════════════════════════════════ /approach is a single page, so it carried a menu that only restated it. The menu is gone; the item is set in the accent instead, which tells you it goes straight somewhere rather than opening. */ .mainnav a.navsolo{ color:var(--orange) } .mainnav a.navsolo:hover, .mainnav a.navsolo:focus-visible{ color:#0D0D0B; background:var(--orange) } .mainnav a.navsolo[aria-current]{ color:var(--orange) } .mainnav a.navsolo[aria-current]::after{ background:var(--orange) } /* the mark was reading small against a 72px capsule */ .top .brand img{ height:42px } @media (max-width:1040px){ .top .brand img{ height:36px } } @media (max-width:420px){ .top .brand img{ height:30px } } /* ═══ DROPDOWN DESCRIPTIONS ═══════════════════════════════════════════════ The hint under each menu item was set nowrap, so "What the group builds once and reuses" rendered past the right edge of the panel instead of wrapping inside it. */ .navdrop a small, .navdrop small{ white-space:normal; overflow-wrap:break-word; max-width:100%; } .navdrop{ min-width:312px; max-width:372px } .navdrop a{ align-items:start } .navdrop .ndrop-i{ margin-top:1px } .navdrop--approach{ min-width:330px; max-width:390px } /* How We Operate carries the accent as a fill rather than as text: it is the one nav item that goes straight to a page, and the founder wants it to read that way at a glance. */ .mainnav a.navsolo{ background:var(--orange); color:#0D0D0B; font-weight:700; border-radius:var(--r-pill); padding-inline:16px; } .mainnav a.navsolo:hover, .mainnav a.navsolo:focus-visible{ background:var(--orange-strong); color:#0D0D0B } .mainnav a.navsolo[aria-current]{ background:var(--orange-strong); color:#0D0D0B } .mainnav a.navsolo[aria-current]::after{ display:none } /* ═══ /approach — THE FOUR STAGES ═════════════════════════════════════════ The page used to name Build · Run · Keep · Compound three times: once in the masthead diagram, once as a rail of one-liners, and once at length. The rail is gone. The four are enumerated once in the diagram and then met in depth, on a rail that carries the numerals down the page and closes with the arc back to the top — the loop expressed by the layout rather than drawn a second time. */ .stg2{ list-style:none; margin:0; padding:0 } .stg2-i{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:clamp(18px,2.6vw,44px); position:relative; padding:clamp(26px,3vw,40px) 0; } .stg2-i + .stg2-i{ border-top:1px solid var(--line) } .stg2-rail{ position:relative; display:flex; justify-content:center } .stg2-n{ position:sticky; top:120px; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:1.5px solid var(--orange); color:var(--orange-ink); font-family:var(--display); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; z-index:1; } /* the thread that runs behind the numerals */ .stg2-i::before{ content:""; position:absolute; left:39px; top:0; bottom:0; width:1px; background:var(--line-2); } .stg2-i:first-child::before{ top:clamp(26px,3vw,40px) } .stg2-i:last-child::before{ bottom:auto; height:clamp(26px,3vw,40px) } .stg2-b h3{ margin:0; font-family:var(--display); font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:700; letter-spacing:-.04em; line-height:1.05; color:var(--ink); } .stg2-pull{ margin:10px 0 0; font-family:var(--display); font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:700; letter-spacing:-.025em; line-height:1.25; color:var(--orange-ink); max-width:26ch; } .stg2-line{ margin:16px 0 0; padding-left:16px; border-left:2px solid var(--line-2); font-size:14.5px; line-height:1.6; color:var(--faint); max-width:52ch; } .stg2-b p:not(.stg2-pull):not(.stg2-line){ margin:16px 0 0; font-size:15.5px; line-height:1.76; color:var(--mid); max-width:64ch; } @media (max-width:760px){ .stg2-i{ grid-template-columns:52px minmax(0,1fr); gap:16px } .stg2-n{ width:44px; height:44px; font-size:13px; position:static } .stg2-i::before{ left:26px } } /* the loop closing */ .stg2-close{ position:relative; margin-top:clamp(10px,1.6vw,20px) } .stg2-close svg{ display:block; width:100%; height:74px; overflow:visible } .stg2-arc,.stg2-tip{ fill:none; stroke:var(--orange); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.55; } .stg2-arc{ stroke-dasharray:5 6 } .stg2-close-l{ position:absolute; left:50%; top:56%; translate:-50% -50%; background:var(--bg); padding:0 16px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); white-space:nowrap; } @media (max-width:640px){ .stg2-close-l{ white-space:normal; text-align:center; width:min(100%,30ch); font-size:10.5px } } /* ═══ /approach — WHAT THE MODEL PRODUCED ════════════════════════════════ */ .out-sec{ padding-block:clamp(46px,4.8vw,74px) } .out{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) } .out li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; border-bottom:1px solid var(--line) } .out-n{ font-family:var(--mo); font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums } .out-i{ display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; align-items:center; gap:clamp(12px,1.6vw,22px); padding:15px 4px; text-decoration:none; transition:background var(--t), padding-inline var(--t); } .out-i:hover{ background:var(--surface); padding-inline:12px 8px } .out-m{ width:44px; height:44px; border-radius:13px; overflow:hidden; display:grid; place-items:center } .out-m img{ width:100%; height:100%; object-fit:cover; border-radius:inherit } .out-t b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink) } .out-t i{ display:block; margin-top:2px; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--faint) } .out-in{ font-size:13px; color:var(--mid); white-space:nowrap } .out-in b{ color:var(--orange-ink); font-weight:700 } .out-go{ color:var(--faint); transition:color var(--t), transform var(--t) } .out-i:hover .out-go{ color:var(--orange-ink); transform:translateX(3px) } @media (max-width:700px){ .out-i{ grid-template-columns:40px minmax(0,1fr); row-gap:8px } .out-in{ grid-column:2; white-space:normal } .out-go{ display:none } } /* ═══ THE OPENING ═════════════════════════════════════════════════════════ The slogan, delivered once, before the site appears. Near-black ground lit warm from the left — the same light that falls across the headline — with the three lines arriving in sequence and the ground then lifting off the top of the screen to hand over to the page. Rules it obeys: it plays once per session, any click or key or scroll ends it early, reduced-motion skips it entirely, and the whole thing is driven by CSS with animation-fill-mode:forwards — so if the JavaScript never runs, the ground still lifts on time and the site is never held hostage behind it. */ .intro{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; background: radial-gradient(120% 90% at -10% 40%, rgba(227,154,0,.20) 0%, rgba(227,154,0,.06) 34%, rgba(0,0,0,0) 62%), radial-gradient(90% 70% at 78% 108%, rgba(227,154,0,.10) 0%, rgba(0,0,0,0) 60%), #0B0B0B; padding:clamp(20px,6vw,64px); animation:intro-lift .72s cubic-bezier(.76,0,.24,1) 4.25s forwards; } .intro::after{ /* grain, so the ground is not flat ink */ content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } @keyframes intro-lift{ 0% { clip-path:inset(0 0 0 0); opacity:1 } 99% { clip-path:inset(0 0 100% 0); opacity:1 } 100% { clip-path:inset(0 0 100% 0); opacity:0; visibility:hidden; pointer-events:none } } .intro-in{ position:relative; width:min(100%,880px); animation:intro-push .45s cubic-bezier(.4,0,.2,1) 4.05s forwards; } @keyframes intro-push{ to{ transform:translateY(-14px) scale(1.035); opacity:0 } } .intro-mk{ display:block; width:auto; height:clamp(22px,3.4vw,30px); margin:0 0 clamp(20px,3.6vw,34px); opacity:0; animation:intro-mk .7s cubic-bezier(.16,1,.3,1) .1s forwards; } @keyframes intro-mk{ from{opacity:0;transform:translateY(8px)} to{opacity:.92;transform:none} } .intro-l{ margin:0; font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,8.4vw,4.6rem); line-height:1.04; letter-spacing:-.026em; color:#FBF8F3; opacity:0; will-change:transform,opacity; animation:intro-line .84s cubic-bezier(.16,1,.3,1) forwards; text-shadow: -.012em 0 .03em rgba(255,217,166,.45), .022em .022em 0 rgba(0,0,0,.5), .04em .06em .18em rgba(0,0,0,.55); } .intro-l.l1{ animation-delay:.35s } .intro-l.l2{ animation-delay:.95s } .intro-l.l3{ animation-delay:1.55s; color:transparent; background-image:linear-gradient(178deg,#FFC24D 0%,#F5A000 44%,#D98A00 100%); -webkit-background-clip:text; background-clip:text; text-shadow:none; filter:drop-shadow(-.02em 0 .06em rgba(255,200,120,.6)) drop-shadow(0 0 .5em rgba(245,160,0,.28)); } @keyframes intro-line{ from{ opacity:0; transform:translateY(.42em); filter:blur(9px) } 60% { opacity:1 } to { opacity:1; transform:none; filter:blur(0) } } .intro-l.l3{ animation-name:intro-line-k } @keyframes intro-line-k{ from{ opacity:0; transform:translateY(.42em) } to { opacity:1; transform:none } } .intro-rule{ display:block; height:2px; margin-top:clamp(20px,3.4vw,34px); transform-origin:0 50%; background:linear-gradient(90deg,#F5A000,rgba(245,160,0,0)); transform:scaleX(0); animation:intro-rule .9s cubic-bezier(.16,1,.3,1) 2.2s forwards; } @keyframes intro-rule{ to{ transform:scaleX(1) } } .intro-skip{ position:absolute; right:clamp(14px,4vw,32px); bottom:clamp(14px,4vw,32px); min-height:44px; padding:10px 18px; border-radius:99px; cursor:pointer; font:inherit; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(251,248,243,.72); background:rgba(251,248,243,.06); border:1px solid rgba(251,248,243,.18); opacity:0; animation:intro-mk .5s ease 1.4s forwards; } .intro-skip:hover{ color:#FBF8F3; background:rgba(251,248,243,.12) } .intro-skip:focus-visible{ outline:2px solid #F5A000; outline-offset:3px } .intro--gone{ animation:intro-cut .34s ease forwards } @keyframes intro-cut{ to{ opacity:0; visibility:hidden; pointer-events:none } } .no-intro .intro{ display:none } /* ═══ BETWEEN PAGES ═══════════════════════════════════════════════════════ A curtain that covers the gap while the next page loads. It is only rendered when you arrived from somewhere else on this site, so a first visit is never held behind it, and it lifts on its own after two seconds whether or not the script runs. */ .cur{ position:fixed; inset:0; z-index:8500; pointer-events:none; background: radial-gradient(110% 80% at 0% 40%, rgba(227,154,0,.14) 0%, rgba(0,0,0,0) 58%), #0B0B0B; animation:cur-lift 2s cubic-bezier(.72,0,.22,1) forwards; } .cur::before{ /* the mark holds the eye while it waits */ content:''; position:absolute; left:50%; top:50%; width:44px; height:2px; margin:-1px 0 0 -22px; border-radius:99px; transform-origin:50% 50%; background:linear-gradient(90deg,rgba(245,160,0,0),#F5A000,rgba(245,160,0,0)); animation:cur-pulse 1.1s ease-in-out infinite; } @keyframes cur-pulse{ 0%,100%{ transform:scaleX(.3); opacity:.4 } 50%{ transform:scaleX(1); opacity:1 } } @keyframes cur-lift{ 0%,58%{ clip-path:inset(0 0 0 0); opacity:1 } 99% { clip-path:inset(0 0 100% 0); opacity:1 } 100% { clip-path:inset(0 0 100% 0); opacity:0; visibility:hidden } } .cur--early{ animation:cur-fast .5s cubic-bezier(.72,0,.22,1) forwards } @keyframes cur-fast{ 0% { clip-path:inset(0 0 0 0); opacity:1 } 99% { clip-path:inset(0 0 100% 0); opacity:1 } 100%{ clip-path:inset(0 0 100% 0); opacity:0; visibility:hidden } } /* the outbound half: raised by script the moment an internal link is taken */ .cur--out{ animation:cur-drop .3s cubic-bezier(.4,0,.2,1) forwards; clip-path:inset(100% 0 0 0); opacity:1; visibility:visible; } @keyframes cur-drop{ to{ clip-path:inset(0 0 0 0) } } @media (prefers-reduced-motion:reduce){ .intro,.cur{ display:none !important } } /* ═══ THE FIRST SCREEN ON A PHONE ═════════════════════════════════════════ The hero takes the whole first screen and nothing else shows until you scroll — so the opening statement is the only thing you meet. svh, not vh, so the browser chrome does not push the next section into view. */ @media (max-width:860px){ .hero{ min-height:100svh; padding-bottom:calc(var(--s7,56px) + 24px) } /* The copy owns the whole first screen — the statement, and nothing else. The ring of ventures begins under the fold, so the first thing anyone meets is what the company says about itself, and the proof of it is the reward for scrolling. 104px covers the header in flow plus the hero's own top padding, with a few pixels of slack so the ring cannot creep back up into view on a device whose chrome measures slightly different. */ .hero-copy{ min-height:calc(100svh - 104px); display:flex; flex-direction:column; justify-content:center; } } /* The cue. Not a button — a hairline with a light running down it, which is the same measuring language the rest of the site is built in. No label, no pill, no chrome: it says "down" and nothing else, and it leaves the moment you scroll. The 44px hit area is transparent and larger than the mark. */ .scrolldn{ display:none } .sd-rail{ position:relative; display:block; width:1px; height:38px; background:linear-gradient(180deg,transparent 0%,var(--line) 20%,var(--line) 76%,transparent 100%); } .sd-rail i{ position:absolute; left:50%; top:2px; width:5px; height:5px; margin-left:-2.5px; border-radius:99px; background:var(--orange-disp); box-shadow:0 0 9px rgba(245,160,0,.6); animation:sd-run 2.3s cubic-bezier(.55,0,.45,1) infinite; } @keyframes sd-run{ 0% { transform:translateY(0); opacity:0 } 16% { opacity:1 } 70% { opacity:1 } 100% { transform:translateY(31px); opacity:0 } } .scrolldn::before{ /* a breath of ground, so the mark always reads */ content:''; position:absolute; inset:-16px -30px; z-index:-1; pointer-events:none; background:radial-gradient(58% 68% at 50% 55%, var(--bg) 0%, transparent 74%); } .scrolldn:focus-visible{ outline:2px solid var(--orange-disp); outline-offset:4px; border-radius:6px } .scrolldn:hover .sd-rail i{ background:var(--ink); box-shadow:none } @media (prefers-reduced-motion:reduce){ .sd-rail i{ animation:none; top:16px; opacity:1 } } /* ═══ THE SCROLL CUE ══════════════════════════════════════════════════════ Pinned to the first screen rather than to the foot of the hero. The hero is taller than a phone, so anchored to the section it would sit below the fold and never be seen by the person it is for. */ @media (max-width:860px){ .scrolldn{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); transform:translateX(-50%); z-index:60; display:flex; align-items:flex-start; justify-content:center; width:44px; height:44px; padding:0; border:0; background:none; backdrop-filter:none; text-decoration:none; transition:opacity .3s ease, transform .3s ease; } .scrolldn[data-off]{ opacity:0; pointer-events:none; transform:translate(-50%,10px) } } /* ── Hero venture ring v2 (7 operating + 8 in development) ─────────────── */ .viz{width:100%} .orbit2{position:relative;width:100%;aspect-ratio:900/800;max-width:720px;margin-inline:auto;isolation:isolate} .orbit2 svg{width:100%;height:100%;display:block;overflow:visible} .o-ring{fill:none;stroke:rgba(255,255,255,.09)} .o-ring--soft{fill:none;stroke:rgba(255,255,255,.05)} .lnk-i{fill:none;stroke:var(--orange);stroke-width:1.2;stroke-linecap:round;opacity:.30} .lnk-c{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2.5 5;stroke-linecap:round} .o-core{fill:#141310} .o-core-ring{fill:none;stroke:var(--orange);stroke-width:2;opacity:.85} .o-scan{fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:30 360;opacity:.55;transform-origin:450px 400px;animation:o-spin 8s linear infinite} @keyframes o-spin{to{transform:rotate(360deg)}} .o-glow{position:absolute;inset:8% 0;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(245,160,0,.18),rgba(245,160,0,.04) 40%,transparent 62%)} .node2{position:absolute;z-index:2;translate:-50% -50%;display:flex;align-items:center;gap:7px;background:rgba(20,19,16,.95);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px 10px 6px 6px;box-shadow:0 14px 28px -18px rgba(0,0,0,.75);white-space:nowrap} .node2.rev{flex-direction:row-reverse;padding:6px 6px 6px 10px} .node2 i{width:25px;height:25px;border-radius:7px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.06);overflow:hidden} .node2 i img{width:100%;height:100%;object-fit:contain} .node2 b{font-size:12px;font-weight:700;letter-spacing:-.01em;color:#FBF8F3} .node2 .dot{width:7px;height:7px;border-radius:50%;flex:none} .dot.g{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,.6)} .dot.r{background:#F5334D;box-shadow:0 0 8px rgba(245,51,77,.6);animation:o-pl 2.4s var(--ease,cubic-bezier(.2,.9,.25,1)) infinite} @keyframes o-pl{0%,100%{opacity:1}50%{opacity:.35}} /* ecosystem nodes: icon-only tiles, details on hover / click */ .snode{position:absolute;z-index:2;translate:-50% -50%;width:46px;height:46px;padding:0;border-radius:13px;background:rgba(20,19,16,.95);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 24px -16px rgba(0,0,0,.75);display:grid;place-items:center;cursor:pointer;appearance:none;-webkit-appearance:none;transition:scale .18s var(--ease,cubic-bezier(.2,.9,.25,1)),border-color .18s} .snode img{width:30px;height:30px;object-fit:contain;opacity:.82;pointer-events:none} .snode .dot{position:absolute;top:-3px;right:-3px} .snode.op{border-color:rgba(245,160,0,.32)} .snode.op img{opacity:.96} .snode:hover{scale:1.12;border-color:rgba(245,160,0,.55);z-index:3} .snode.pin{scale:1.12;border-color:rgba(245,160,0,.8);z-index:4} .snode:focus-visible{outline:2px solid var(--orange);outline-offset:2px} .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* node detail popover */ .odetail{position:absolute;z-index:6;width:238px;max-width:72vw;background:rgba(18,17,14,.98);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 15px;box-shadow:0 26px 54px -22px rgba(0,0,0,.88);opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s;pointer-events:none} .odetail.on{opacity:1;transform:none;pointer-events:auto} .odetail::after{content:"";position:absolute;left:var(--arw,50%);width:10px;height:10px;background:rgba(18,17,14,.98);border:1px solid rgba(255,255,255,.14);transform:translateX(-50%) rotate(45deg)} .odetail[data-side="above"]::after{bottom:-6px;border-top:0;border-left:0} .odetail[data-side="below"]::after{top:-6px;border-bottom:0;border-right:0} .od-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px;letter-spacing:-.01em;color:#FBF8F3} .od-st{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;border-radius:999px;white-space:nowrap} .od-op{background:rgba(74,222,128,.16);color:#7BE3A4} .od-dev{background:rgba(245,51,77,.16);color:#F98598} .od-kind{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A857E;margin-top:6px} .od-desc{font-size:12.5px;line-height:1.5;color:#C9C4BC;margin:8px 0 0} .od-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap} .od-dom{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#B7B1A6} .od-link{font-size:12px;font-weight:700;color:var(--orange)} /* mobile grouped grid */ .vstack{display:none} .vstack .grp-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A857E;margin:18px 0 11px} .vstack .grp-h i{width:8px;height:8px;border-radius:50%} .vstack .grp-h i.g{background:#4ADE80}.vstack .grp-h i.r{background:#F5334D} .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .mchip{display:grid;grid-template-columns:30px 1fr auto;align-items:center;column-gap:9px;row-gap:2px;background:rgba(20,19,16,.9);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:9px 11px;min-width:0} .mchip i{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.06);overflow:hidden;grid-row:1/span 2} .mchip i img{width:100%;height:100%;object-fit:contain} .mchip b{font-size:12.5px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .mchip .dot{width:7px;height:7px;border-radius:50%;flex:none} .mchip .msub{grid-column:2/4;font-size:11px;line-height:1.35;color:#8A857E;font-weight:500} @media(max-width:760px){ .orbit2{display:none} .vstack{display:block} } @media(max-width:380px){ .vgrid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .o-scan,.dot.r{animation:none!important} }