@charset "UTF-8"; /*============================================================== Neura Digital — group design system --------------------------------------------------------------- One black canvas. One type system. One set of components. Divisions differ by signal colour only. Set the division on any element: Themes: digital (default) | ai | neurasec | enterprise | msp Sections: 01 tokens 02 reset & base 03 layout 04 typography 05 buttons & links 06 header / navigation (includes the group switcher used on practice sites) 07 hero 08 thesis 09 division cards 10 process 11 principles 12 statement band 13 cta band 14 prose (legal / long-form) 15 footer 16 motion & reveal ==============================================================*/ /*-------------------------------------------------------------- 01 · Tokens --------------------------------------------------------------*/ :root { /* Canvas — near-black, so surfaces and depth stay readable */ --bg: #050608; --bg-raised: #0a0d12; --surface: #0e1218; --surface-2: #121821; /* Ink */ --text: #f4f7fb; --text-muted: #a4afbd; --text-soft: #7f8a98; /* Structure */ --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.18); /* Division signals */ --d-ai: #ff8a2a; --d-ai-bright: #ffb04a; --d-sec: #2f80ff; --d-sec-bright: #35b8ff; --d-ent: #9b6cff; --d-ent-bright: #b99aff; --d-msp: #23d6a5; --d-msp-bright: #4be7bd; /* The masterbrand signal is light, not colour. Neura Digital owns the black canvas and the white line; the practices own the hues. */ --signal: #d7dee8; --signal-soft: rgba(215, 222, 232, 0.16); /* Default (masterbrand) accent is that same neutral signal */ --accent: var(--signal); --accent-bright: #ffffff; --accent-soft: var(--signal-soft); /* Type */ --font-display: "Montserrat", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Rhythm */ --container: 1240px; --gutter: clamp(20px, 5vw, 48px); --section-y: clamp(72px, 10vw, 136px); --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } [data-theme="ai"] { --accent: var(--d-ai); --accent-bright: var(--d-ai-bright); --accent-soft: rgba(255, 138, 42, 0.16); } [data-theme="neurasec"] { --accent: var(--d-sec); --accent-bright: var(--d-sec-bright); --accent-soft: rgba(47, 128, 255, 0.16); } [data-theme="enterprise"] { --accent: var(--d-ent); --accent-bright: var(--d-ent-bright); --accent-soft: rgba(155, 108, 255, 0.16); } [data-theme="msp"] { --accent: var(--d-msp); --accent-bright: var(--d-msp-bright); --accent-soft: rgba(35, 214, 165, 0.16); } /*-------------------------------------------------------------- 02 · Reset & base --------------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.65; font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; } figure { margin: 0; } :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 3px; } ::selection { background: rgba(255, 255, 255, 0.18); } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 18px; background: var(--text); color: #000; font-weight: 600; border-radius: 0 0 8px 8px; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /*-------------------------------------------------------------- 03 · Layout --------------------------------------------------------------*/ .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 880px; } .section { position: relative; padding-block: var(--section-y); } .section--tight { padding-block: clamp(56px, 7vw, 96px); } .section--raised { background: var(--bg-raised); } /* A one-pixel rule that fades out at both ends: the group's divider. Light, not colour — the practices own the hues, the group owns the line. */ .rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--signal), transparent); opacity: 0.28; } .grid { display: grid; gap: clamp(20px, 2.6vw, 32px); } /*-------------------------------------------------------------- 04 · Typography --------------------------------------------------------------*/ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); margin: 0; font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); letter-spacing: -0.032em; } h2 { font-size: clamp(2rem, 4.1vw, 3.1rem); } h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.22; } h4 { font-size: 1.06rem; line-height: 1.3; } p { margin: 0 0 1.15em; color: var(--text-muted); } p:last-child { margin-bottom: 0; } strong, b { color: var(--text); font-weight: 600; } .eyebrow { display: inline-flex; /* Keeps the signal bar on the first line when the label wraps. */ align-items: flex-start; gap: 11px; margin: 0 0 22px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-soft); } .eyebrow::before { content: ""; width: 26px; height: 2px; margin-top: 0.62em; border-radius: 2px; /* Masterbrand shows the neutral signal; a practice shows its own colour. */ background: var(--accent); flex: 0 0 auto; } .lead { font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.6; color: var(--text-muted); max-width: 62ch; } .section-head { /* rem, not ch: ch resolves against this block's body font, not the heading. */ max-width: 34rem; margin-bottom: clamp(40px, 5vw, 64px); } .section-head p { margin-top: 20px; max-width: 58ch; } /*-------------------------------------------------------------- 05 · Buttons & links --------------------------------------------------------------*/ a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 4px; transition: color 0.2s var(--ease); } a:hover { color: var(--accent-bright); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .btn { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--border-strong); display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 1px solid var(--btn-bd); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), background-color 0.22s var(--ease), color 0.22s var(--ease); } .btn:hover { transform: translateY(-2px); color: var(--btn-fg); } .btn svg { flex: 0 0 auto; transition: transform 0.22s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn--primary { --btn-bg: var(--text); --btn-fg: #05070a; --btn-bd: var(--text); } .btn--primary:hover { --btn-bg: #ffffff; --btn-bd: #ffffff; --btn-fg: #05070a; } /* Practice sites: primary actions take the division signal, like the orange header button on /ai. Dark ink on the fill — white on --d-sec fails contrast. */ [data-theme="neurasec"] .btn--primary, [data-theme="enterprise"] .btn--primary, [data-theme="msp"] .btn--primary { --btn-bg: var(--accent); --btn-fg: #04101f; --btn-bd: var(--accent); } [data-theme="neurasec"] .btn--primary:hover, [data-theme="enterprise"] .btn--primary:hover, [data-theme="msp"] .btn--primary:hover { --btn-bg: var(--accent-bright); --btn-bd: var(--accent-bright); --btn-fg: #04101f; } .btn--ghost:hover { --btn-bd: var(--text); } .btn--sm { padding: 10px 20px; font-size: 0.88rem; } /* Inline "read on" link with an arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--text); text-decoration: none; } .link-arrow svg { transition: transform 0.22s var(--ease); } .link-arrow:hover { color: var(--accent-bright); } .link-arrow:hover svg { transform: translateX(4px); } /*-------------------------------------------------------------- 06 · Header / navigation --------------------------------------------------------------*/ /* Group switcher — the /ai pattern reused on NeuraSec, Enterprise and MSP. Not sticky: it yields to the practice header on scroll, matching NeuraAI. */ .ngroup-bar { background: var(--bg); border-bottom: 1px solid var(--border); font-size: 0.8125rem; line-height: 1.4; } .ngroup-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-block: 9px; } .ngroup-home { display: inline-flex; align-items: center; gap: 9px; color: var(--text-muted); text-decoration: none; transition: color 0.2s var(--ease); } .ngroup-home strong { color: var(--text); font-weight: 600; } .ngroup-home:hover { color: var(--text); } .ngroup-signal { width: 26px; height: 3px; border-radius: 2px; flex: 0 0 auto; background: var(--signal); } .ngroup-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .ngroup-nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; color: var(--text-muted); text-decoration: none; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); } .ngroup-nav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; } .ngroup-nav a[data-div="ai"]::before { background: var(--d-ai); opacity: 1; } .ngroup-nav a[data-div="neurasec"]::before { background: var(--d-sec); opacity: 1; } .ngroup-nav a[data-div="enterprise"]::before { background: var(--d-ent); opacity: 1; } .ngroup-nav a[data-div="msp"]::before { background: var(--d-msp); opacity: 1; } .ngroup-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); } .ngroup-nav a.is-current { color: var(--text); background: rgba(255, 255, 255, 0.08); } .ngroup-nav a.is-current::after { content: " (you are here)"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 575px) { .ngroup-bar-inner { justify-content: flex-start; } .ngroup-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-left: -10px; } .ngroup-nav::-webkit-scrollbar { display: none; } } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(5, 6, 8, 0.72); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); } .site-header.is-scrolled { background: rgba(5, 6, 8, 0.93); border-bottom-color: var(--border); } .site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 74px; } /* Brand lockup — a joined wordmark, no separator character. NEURA carries the family weight; the suffix carries the practice. The two are set solid so they read as one word with two voices. */ .brand-lockup { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-size: 1.32rem; line-height: 1; color: var(--text); text-decoration: none; white-space: nowrap; } .brand-family { font-weight: 800; letter-spacing: 0.07em; /* Cancel the trailing letter-space, then re-open a hair so the joint reads as one word in two voices rather than as a word space. */ margin-right: -0.07em; padding-right: 0.05em; } .brand-suffix { font-weight: 400; letter-spacing: 0.005em; /* Masterbrand: silver. Practice: its own signal, set per element. */ color: var(--suffix, var(--signal)); } /* Links carry their own accessible name, so the split spans stay silent. */ a.brand-lockup:hover .brand-suffix, a.brand-lockup:focus-visible .brand-suffix { color: var(--text); } /* The lockup never wraps, so it steps down before it can crowd the menu button on the narrowest handsets. */ @media (max-width: 400px) { .site-header .brand-lockup { font-size: 1.14rem; } } .site-nav { margin-left: auto; } .site-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; } .site-nav__list > li > a, .site-nav__list > li > button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 0; border-radius: 999px; background: none; color: var(--text-muted); font-family: var(--font-display); font-size: 0.92rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); } .site-nav__list > li > a:hover, .site-nav__list > li > button:hover, .site-nav__list > li > a[aria-current] { color: var(--text); background: rgba(255, 255, 255, 0.06); } .site-nav__caret { transition: transform 0.2s var(--ease); } [aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); } /* Divisions dropdown */ .has-menu { position: relative; } .menu-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -6px); width: min(560px, calc(100vw - 32px)); padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; list-style: none; opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; } .has-menu[data-open="true"] .menu-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .menu-panel a { display: block; padding: 12px 14px; border-radius: var(--radius-sm); text-decoration: none; transition: background-color 0.18s var(--ease); } .menu-panel a:hover { background: rgba(255, 255, 255, 0.05); } .menu-panel a[aria-current="true"] { background: rgba(255, 255, 255, 0.07); box-shadow: inset 3px 0 0 var(--dot, var(--text)); } .menu-panel__name { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text); } .menu-panel__name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--text-soft)); flex: 0 0 auto; } .menu-panel__desc { display: block; margin-top: 3px; font-size: 0.83rem; color: var(--text-soft); line-height: 1.45; } .nav-cta { display: inline-flex; } /* Practice identity sits below the group header on wide screens. Its links move into the single overlay menu at mobile widths. */ .practice-bar { position: relative; z-index: 80; background: rgba(8, 10, 14, 0.96); border-bottom: 1px solid var(--border); } .practice-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; } .practice-bar__brand { color: var(--text); font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .practice-bar__brand::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 9px; border-radius: 2px; background: var(--accent); vertical-align: middle; } .practice-bar nav { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; } .practice-bar nav::-webkit-scrollbar { display: none; } .practice-bar nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--text-muted); font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .practice-bar nav a:hover, .practice-bar nav a[aria-current="page"] { color: var(--text); } .practice-bar nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); } .mobile-practice-nav { display: none; } /* Mobile */ .nav-toggle__close { display: none; } body.nav-open .nav-toggle__open { display: none; } body.nav-open .nav-toggle__close { display: block; } .nav-toggle { display: none; margin-left: auto; -webkit-tap-highlight-color: transparent; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; } @media (max-width: 940px) { /* A backdrop-filter makes the header a containing block for position:fixed descendants in Chromium and Safari, which traps the overlay nav inside the 74px bar instead of the viewport. Drop the blur wherever the hamburger nav is in play. */ .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 6, 8, 0.97); } .nav-toggle { display: inline-flex; } .nav-cta { display: none; } .site-nav { position: fixed; inset: 0; z-index: 1; margin: 0; background: var(--bg); padding: 92px var(--gutter) 40px; overflow-y: auto; overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s; } /* The overlay covers the bar, so the brand and the toggle have to sit above it — otherwise there is no way to close the menu. */ .brand-lockup, .nav-toggle { position: relative; z-index: 2; } body.nav-open { overflow: hidden; } body.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; } .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .site-nav__list > li > a, .site-nav__list > li > button { width: 100%; justify-content: space-between; padding: 15px 6px; font-size: 1.1rem; border-bottom: 1px solid var(--border); border-radius: 0; } .menu-panel { position: static; transform: none; width: auto; grid-template-columns: 1fr; opacity: 1; visibility: visible; background: none; border: 0; box-shadow: none; padding: 6px 0 10px; display: none; } .has-menu[data-open="true"] .menu-panel { display: grid; transform: none; } .site-nav .btn-row { margin-top: 28px; } .practice-bar { display: none; } .mobile-practice-nav { display: block; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); } .mobile-practice-nav > p { margin: 0 0 8px; color: var(--text); font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .mobile-practice-nav ul { margin: 0; padding: 0; list-style: none; } .mobile-practice-nav a { display: block; padding: 12px 6px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-display); text-decoration: none; } .mobile-practice-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 3px 0 0 var(--accent); padding-left: 14px; } } @media (min-width: 941px) { .site-nav .btn-row { display: none; } } /* Practice sites: the sticky bar is the division header, not the group nav. Suffix takes the practice signal; current page gets the same underline cue as the old practice bar. Hamburger arrives earlier because local labels (especially NeuraMSP) are longer than the group links. */ .site-header--practice .brand-lockup { --suffix: var(--accent-bright); } body[data-theme="enterprise"] .site-header--practice .brand-lockup, body[data-theme="msp"] .site-header--practice .brand-lockup { --suffix: var(--accent); } .site-header--practice .site-nav__list > li > a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); } @media (max-width: 1199px) { /* Backdrop filters create a containing block for position:fixed descendants in Chromium. Drop the blur while the overlay menu is in use. */ .site-header--practice { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 6, 8, 0.97); } } @media (min-width: 941px) and (max-width: 1199px) { body.nav-open:has(.site-header--practice) { overflow: hidden; } .site-header--practice .nav-toggle { display: inline-flex; } .site-header--practice .nav-cta { display: none; } .site-header--practice .site-nav { position: fixed; inset: 0; z-index: 1; margin: 0; background: var(--bg); padding: 92px var(--gutter) 40px; overflow-y: auto; overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s; } .site-header--practice .brand-lockup, .site-header--practice .nav-toggle { position: relative; z-index: 2; } body.nav-open .site-header--practice .site-nav { opacity: 1; visibility: visible; transform: none; } .site-header--practice .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .site-header--practice .site-nav__list > li > a, .site-header--practice .site-nav__list > li > button { width: 100%; justify-content: space-between; padding: 15px 6px; font-size: 1.1rem; border-bottom: 1px solid var(--border); border-radius: 0; } .site-header--practice .site-nav .btn-row { display: flex; margin-top: 28px; } } /*-------------------------------------------------------------- 07 · Hero --------------------------------------------------------------*/ .hero { position: relative; padding-block: clamp(64px, 9vw, 120px) clamp(72px, 10vw, 128px); overflow: hidden; } /* Fine engineered grid, densest behind the signal, fading to nothing */ .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(120% 90% at 78% 34%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 90% at 78% 34%, #000 0%, transparent 72%); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .hero h1 { margin-bottom: 26px; } .hero__copy p:not(.eyebrow) { max-width: 54ch; } .hero .btn-row { margin-top: 36px; } .hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border); list-style: none; font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); } .hero__proof li { display: flex; align-items: center; gap: 9px; } .hero__proof li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); } .hero__signal { position: relative; } .hero__signal svg { width: 100%; height: auto; } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero__signal { order: -1; max-width: 440px; margin-inline: auto; opacity: 0.9; } } /* Single-column hero, used by the division landing pages. Constrain the copy, not the wrap — the wrap's auto margins would centre the whole column and break alignment with the header and the sections below. */ .hero--simple .hero__inner { grid-template-columns: minmax(0, 1fr); } .hero--simple .hero__copy { max-width: 50rem; } .hero--simple .hero__grid { -webkit-mask-image: radial-gradient(100% 80% at 22% 26%, #000 0%, transparent 68%); mask-image: radial-gradient(100% 80% at 22% 26%, #000 0%, transparent 68%); } .hero--simple h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); } .hero--simple .notice { margin-top: 40px; max-width: 58ch; } /*-------------------------------------------------------------- 08 · Thesis --------------------------------------------------------------*/ .thesis__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(32px, 5vw, 76px); align-items: start; } .pullout { position: relative; padding: 30px 30px 30px 34px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .pullout::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--signal); opacity: 0.55; } .pullout p { margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.34rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; color: var(--text); } .contrast { display: grid; gap: 14px; margin-top: 24px; list-style: none; } .contrast li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .contrast__tag { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-soft); white-space: nowrap; } .contrast li[data-state="ours"] { border-color: rgba(255, 255, 255, 0.2); background: var(--surface-2); } .contrast li[data-state="ours"] .contrast__tag { color: #05070a; background: var(--text); border-color: var(--text); } .contrast p { margin: 0; font-size: 0.98rem; } @media (max-width: 860px) { .thesis__inner { grid-template-columns: 1fr; } } @media (max-width: 520px) { .contrast li { grid-template-columns: 1fr; gap: 12px; } .contrast__tag { justify-self: start; } } /*-------------------------------------------------------------- 09 · Division cards --------------------------------------------------------------*/ /* Four cards read as a set in 2x2; three-up leaves an orphan. */ .divisions { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 780px) { .divisions { grid-template-columns: minmax(0, 1fr); } } .division { --dot: var(--text-soft); position: relative; min-width: 0; display: flex; flex-direction: column; padding: 34px 30px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; isolation: isolate; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease); } /* Signal hairline across the top of the card */ .division::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--dot); opacity: 0.75; transition: opacity 0.3s var(--ease); } /* Restrained glow, only on hover, only from the top edge */ .division::after { content: ""; position: absolute; inset: -60% 0 auto 0; height: 200px; background: radial-gradient(60% 100% at 50% 100%, var(--dot), transparent 72%); opacity: 0; z-index: -1; transition: opacity 0.4s var(--ease); pointer-events: none; } .division:hover, .division:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--dot), transparent 55%); background: var(--surface-2); } .division:hover::after, .division:focus-within::after { opacity: 0.14; } /* Card lockup: the practice signal is the suffix colour. */ .division .brand-lockup { --suffix: var(--dot); font-size: 1.24rem; margin-bottom: 18px; } .division__tagline { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; letter-spacing: -0.018em; line-height: 1.18; color: var(--text); margin: 0 0 14px; } .division__copy { font-size: 0.97rem; margin-bottom: 22px; } /* Capability signals — a short spoken line, not a service catalogue. The root sells the group; the catalogues live below it. */ .signals { display: flex; flex-wrap: wrap; margin: 0 0 26px; list-style: none; font-family: var(--font-display); font-size: 0.86rem; font-weight: 500; line-height: 1.55; color: var(--text-muted); } /* Trailing rather than leading, so a wrapped line starts on a word instead of on a stranded separator. */ .signals li:not(:last-child)::after { content: "·"; padding: 0 9px; color: var(--text-soft); } .chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 26px; list-style: none; } .chips li { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; line-height: 1.3; color: var(--text-muted); transition: border-color 0.3s var(--ease); } .division:hover .chips li { border-color: color-mix(in srgb, var(--dot), transparent 72%); } .division .link-arrow { margin-top: auto; color: var(--dot); } .division .link-arrow:hover { color: var(--text); } /*-------------------------------------------------------------- 10 · Flow — Decide / Design / Secure / Operate --------------------------------------------------------------- A story and a practice navigator at the same time. Each stage is a real link to the practice that leads it. The connecting line is neutral: the group owns the line, each practice owns its node. --------------------------------------------------------------*/ .flow { --flow-gap: clamp(20px, 2.6vw, 32px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--flow-gap); margin: 0; padding: 0; list-style: none; } .flow__item { --dot: var(--text-soft); --dot-bright: var(--text); position: relative; min-width: 0; display: flex; flex-direction: column; padding-top: 34px; } .flow__item::before { content: ""; position: absolute; top: 8px; left: 0; right: calc(-1 * var(--flow-gap)); height: 1px; background: var(--border-strong); } .flow__item:last-child::before { right: 0; background: linear-gradient(90deg, var(--border-strong), transparent); } .flow__item::after { content: ""; position: absolute; top: 4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot), transparent 86%); transition: box-shadow 0.3s var(--ease); } /* Hover and keyboard focus get the same node response. */ .flow__item:hover::after, .flow__item:focus-within::after { box-shadow: 0 0 0 8px color-mix(in srgb, var(--dot), transparent 78%); } /* The link is the whole stage block, so the touch target is generous. The description sits outside it, keeping the accessible name short. */ .flow__link { display: block; margin: 0 -14px 14px; padding: 10px 14px 14px; border-radius: var(--radius-sm); text-decoration: none; transition: background-color 0.25s var(--ease); } .flow__link:hover { background: var(--surface); } .flow__index { display: block; font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; color: var(--text-soft); margin-bottom: 12px; } .flow__stage { display: block; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.22; color: var(--text); } /* The practice name always appears in words; colour is a second cue only. */ .flow__practice { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; font-family: var(--font-display); font-size: 0.87rem; font-weight: 600; color: var(--dot-bright); } .flow__practice svg { transition: transform 0.22s var(--ease); } .flow__link:hover .flow__practice svg, .flow__link:focus-visible .flow__practice svg { transform: translateX(4px); } .flow__desc { font-size: 0.96rem; max-width: 34ch; margin: 0; } .process-note { max-width: 66ch; margin-top: clamp(40px, 5vw, 60px); padding-top: 28px; border-top: 1px solid var(--border); } /* Below the four-across breakpoint the flow stacks and the connector turns vertical, so the sequence still reads as a sequence. */ @media (max-width: 900px) { .flow { grid-template-columns: minmax(0, 1fr); gap: 0; } .flow__item { padding: 0 0 30px 32px; } .flow__item::before { top: 7px; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; } .flow__item:last-child::before { background: linear-gradient(180deg, var(--border-strong), transparent); } .flow__item::after { top: 3px; } .flow__link { margin-left: -12px; padding-left: 12px; } .flow__index { margin-bottom: 8px; } } /*-------------------------------------------------------------- 11 · Principles — Why Neura --------------------------------------------------------------*/ /* An editorial list rather than a grid: five items never tile evenly. */ .why__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: start; } .why__inner .section-head { margin-bottom: 0; } @media (min-width: 901px) { .why__inner .section-head { position: sticky; top: 118px; } } @media (max-width: 900px) { .why__inner { grid-template-columns: minmax(0, 1fr); } } .principles { display: block; list-style: none; } .principle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px clamp(20px, 3vw, 36px); padding: 26px 4px 28px; border-top: 1px solid var(--border); transition: background-color 0.3s var(--ease); } .principle:last-child { border-bottom: 1px solid var(--border); } .principle:hover { background: var(--bg-raised); } .principle h3 { font-size: 1.18rem; margin-bottom: 10px; } .principle p { font-size: 0.96rem; margin: 0; max-width: 54ch; } .principle__num { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.9; color: var(--text-soft); transition: color 0.3s var(--ease); } .principle:hover .principle__num { color: var(--text); } @media (max-width: 480px) { .principle { grid-template-columns: minmax(0, 1fr); gap: 10px; } .principle__num { line-height: 1; } } /*-------------------------------------------------------------- 12 · Statement band --------------------------------------------------------------*/ .statement { position: relative; background: var(--bg-raised); border-block: 1px solid var(--border); overflow: hidden; } .statement::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--signal), transparent); opacity: 0.32; } .statement__inner { /* The grid column already sets the measure. */ max-width: none; } .statement h2 { /* Sized to break into three or four lines, not seven. */ font-size: clamp(2.1rem, 3.7vw, 3.2rem); letter-spacing: -0.03em; } .statement__body { max-width: 52ch; margin-top: 28px; } .statement__body p:first-child { font-size: clamp(1.06rem, 1.5vw, 1.2rem); color: var(--text); } @media (min-width: 900px) { .statement .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .statement__body { margin-top: 8px; } } /*-------------------------------------------------------------- 13 · CTA band --------------------------------------------------------------*/ .cta { position: relative; overflow: hidden; } /* Kept well below the fold of the section and heavily blurred: light rising under the closing CTA, not a colour effect. */ .cta__glow { position: absolute; left: 50%; bottom: -420px; width: min(1200px, 140vw); height: 560px; transform: translateX(-50%); background: var(--signal); filter: blur(180px); opacity: 0.09; pointer-events: none; } .cta__inner { position: relative; max-width: 720px; } .cta h2 { margin-bottom: 22px; } .cta .btn-row { margin-top: 34px; } /*-------------------------------------------------------------- 14 · Prose — legal & long-form content --------------------------------------------------------------*/ .page-head { padding-block: clamp(56px, 8vw, 96px) clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--border); } .page-head p { margin-top: 20px; max-width: 58ch; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 0.85rem; color: var(--text-soft); } .breadcrumb a { color: var(--text-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--text); } .breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--border-strong); } .prose { max-width: 74ch; } .prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 2.2em 0 0.7em; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.14rem; margin: 1.8em 0 0.6em; } .prose p, .prose li { color: var(--text-muted); } .prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; } .prose li { margin-bottom: 0.5em; } .prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .prose__meta { margin-bottom: 40px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; } .prose__meta p { margin: 0; } /* Simple content cards, reused by about / contact / insights */ .cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { min-width: 0; display: flex; flex-direction: column; padding: 28px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .card:hover { border-color: var(--border-strong); transform: translateY(-3px); } .card h3 { margin-bottom: 12px; } .card p { font-size: 0.96rem; } .card .link-arrow { margin-top: auto; padding-top: 20px; } .card__date { font-family: var(--font-display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 14px; } /* A considered aside, not a placeholder: solid border with the practice signal on the leading edge. A dashed box reads as "unfinished". */ .notice { padding: 20px 24px; border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg-raised); font-size: 0.95rem; } .notice p { margin: 0; } /*-------------------------------------------------------------- About page — one connected group, four practice signals --------------------------------------------------------------*/ .hero--about .hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.98fr); } .hero--about .hero__copy { max-width: 47rem; } .hero--about h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); } .hero--about .hero__grid { -webkit-mask-image: radial-gradient(110% 88% at 64% 38%, #000 0%, transparent 72%); mask-image: radial-gradient(110% 88% at 64% 38%, #000 0%, transparent 72%); } .about-map { position: relative; width: min(100%, 520px); aspect-ratio: 1; justify-self: end; isolation: isolate; } .about-map::before, .about-map::after { content: ""; position: absolute; pointer-events: none; } .about-map::before { inset: 9%; z-index: -2; border: 1px solid var(--border); border-radius: 50%; background: radial-gradient(circle at 28% 24%, rgba(255, 138, 42, 0.09), transparent 24%), radial-gradient(circle at 76% 26%, rgba(47, 128, 255, 0.09), transparent 24%), radial-gradient(circle at 27% 75%, rgba(155, 108, 255, 0.09), transparent 24%), radial-gradient(circle at 76% 74%, rgba(35, 214, 165, 0.09), transparent 24%); box-shadow: inset 0 0 90px rgba(255, 255, 255, 0.025); } .about-map::after { inset: 22%; z-index: -1; border: 1px dashed rgba(255, 255, 255, 0.11); border-radius: 50%; } .about-map__halo { position: absolute; inset: 37%; border-radius: 50%; background: rgba(215, 222, 232, 0.08); box-shadow: 0 0 70px rgba(215, 222, 232, 0.08); } .about-map__core { position: absolute; inset: 50% auto auto 50%; z-index: 2; width: 172px; padding: 21px 18px 18px; border: 1px solid var(--border-strong); border-radius: 14px; background: rgba(14, 18, 24, 0.96); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42); font-family: var(--font-display); font-size: 1rem; text-align: center; transform: translate(-50%, -50%); } .about-map__core::before { content: ""; position: absolute; inset: 0 18px auto; height: 2px; background: linear-gradient(90deg, var(--d-ai), var(--d-sec), var(--d-ent), var(--d-msp)); } .about-map__core .brand-family { font-weight: 800; letter-spacing: 0.07em; } .about-map__core .brand-suffix { color: var(--signal); } .about-map__core small, .about-map__node small { display: block; margin-top: 6px; color: var(--text-soft); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .about-map__path { position: absolute; z-index: -1; width: 31%; height: 1px; background: linear-gradient(90deg, transparent, var(--dot)); opacity: 0.62; transform-origin: right center; } .about-map__path--ai { --dot: var(--d-ai); top: 37%; left: 22%; transform: rotate(34deg); } .about-map__path--sec { --dot: var(--d-sec); top: 37%; right: 22%; background: linear-gradient(90deg, var(--dot), transparent); transform: rotate(-34deg); transform-origin: left center; } .about-map__path--ent { --dot: var(--d-ent); bottom: 37%; left: 22%; transform: rotate(-34deg); } .about-map__path--msp { --dot: var(--d-msp); right: 22%; bottom: 37%; background: linear-gradient(90deg, var(--dot), transparent); transform: rotate(34deg); transform-origin: left center; } .about-map__node { position: absolute; z-index: 1; min-width: 122px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: rgba(10, 13, 18, 0.92); font-family: var(--font-display); font-size: 0.78rem; line-height: 1.2; } .about-map__node > span { display: block; width: 22px; height: 2px; margin-bottom: 10px; background: var(--dot); box-shadow: 0 0 18px var(--dot); } .about-map__node strong { font-weight: 600; } .about-map__node--ai { --dot: var(--d-ai); top: 8%; left: 9%; } .about-map__node--sec { --dot: var(--d-sec); top: 8%; right: 5%; } .about-map__node--ent { --dot: var(--d-ent); bottom: 8%; left: 5%; } .about-map__node--msp { --dot: var(--d-msp); right: 8%; bottom: 8%; } .about-practices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-practice { --dot: var(--signal); position: relative; min-width: 0; display: flex; flex-direction: column; min-height: 270px; padding: 34px 32px 30px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--dot), transparent 93%), transparent 42%), var(--surface); overflow: hidden; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .about-practice::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--dot); } .about-practice:hover, .about-practice:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--dot), transparent 50%); } .about-practice__signal { margin-bottom: 20px; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--dot); } .about-practice h3 { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; } .about-practice__dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--dot); box-shadow: 0 0 16px var(--dot); } .about-practice > p:not(.about-practice__signal) { max-width: 47ch; font-size: 0.96rem; } .about-practice .link-arrow { margin-top: auto; padding-top: 18px; color: var(--text); } .about-practice .link-arrow:hover, .about-practice .link-arrow:focus-visible { color: var(--dot); } .about-thread { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 5vw, 68px); margin-top: clamp(50px, 7vw, 80px); padding-top: 35px; } .about-thread__line { position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, var(--d-ai), var(--d-sec) 34%, var(--d-ent) 66%, var(--d-msp)); opacity: 0.68; } .about-thread__step { position: relative; } .about-thread__step::before { content: ""; position: absolute; top: -40px; left: 0; width: 11px; height: 11px; border: 3px solid var(--bg-raised); border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1px var(--border-strong); } .about-thread__step > span { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; color: var(--text-soft); } .about-thread__step strong { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 1rem; color: var(--text); } .about-thread__step p { max-width: 30ch; font-size: 0.91rem; line-height: 1.55; } .about-work .section-head p:last-child { max-width: 40ch; } .about-principles .principle { position: relative; padding-left: 18px; overflow: hidden; } .about-principles .principle::before { content: ""; position: absolute; inset: 25px auto 25px 0; width: 2px; border-radius: 2px; background: var(--dot); opacity: 0.7; } .about-principles .principle__num { color: var(--dot); } .about-principles .principle:hover .principle__num { color: var(--dot); } .about-people-section { overflow: hidden; } .about-people-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent 8%, var(--d-ai), var(--d-sec), var(--d-ent), var(--d-msp), transparent 92%); opacity: 0.48; } .about-people { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr); gap: clamp(48px, 8vw, 110px); align-items: center; } .about-people__copy .lead { margin-top: 24px; max-width: 46ch; } .about-people__copy .btn-row { margin-top: 30px; } .about-people__panel { position: relative; padding: 12px 30px; border: 1px solid var(--border); border-radius: var(--radius); background: radial-gradient(circle at 90% 10%, rgba(155, 108, 255, 0.1), transparent 34%), var(--surface); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.26); } .about-people__panel::before { content: ""; position: absolute; inset: 0 24px auto; height: 2px; background: linear-gradient(90deg, var(--d-ai), var(--d-sec), var(--d-ent), var(--d-msp)); } .about-people__item { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 20px; align-items: center; padding: 25px 0; border-bottom: 1px solid var(--border); } .about-people__item:last-child { border-bottom: 0; } .about-people__item span { font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); } .about-people__item strong { font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.35; } @media (max-width: 960px) { .hero--about .hero__inner, .about-people { grid-template-columns: minmax(0, 1fr); } .about-map { width: min(100%, 500px); justify-self: center; margin-top: 12px; } .about-people__panel { width: 100%; } } @media (max-width: 720px) { .about-practices, .about-thread { grid-template-columns: minmax(0, 1fr); } .about-practice { min-height: 0; } .about-thread { gap: 30px; padding: 0 0 0 30px; } .about-thread__line { inset: 0 auto 0 4px; width: 1px; height: auto; background: linear-gradient(180deg, var(--d-ai), var(--d-sec), var(--d-ent), var(--d-msp)); } .about-thread__step::before { top: 5px; left: -31px; border-color: var(--bg-raised); } } @media (max-width: 560px) { .about-map { width: 100%; min-height: 360px; aspect-ratio: auto; } .about-map::before { inset: 8% 2%; } .about-map::after { inset: 24% 18%; } .about-map__core { width: 150px; padding: 18px 12px 15px; font-size: 0.88rem; } .about-map__node { min-width: 108px; padding: 11px 12px; font-size: 0.7rem; } .about-map__node--ai { top: 4%; left: 0; } .about-map__node--sec { top: 4%; right: 0; } .about-map__node--ent { bottom: 4%; left: 0; } .about-map__node--msp { right: 0; bottom: 4%; } .about-map__path--ai, .about-map__path--ent { left: 17%; } .about-map__path--sec, .about-map__path--msp { right: 17%; } .about-practice { padding: 28px 24px 25px; } .about-people__panel { padding-inline: 22px; } .about-people__item { grid-template-columns: minmax(0, 1fr); gap: 8px; } } /*-------------------------------------------------------------- 15 · Footer --------------------------------------------------------------*/ .site-footer { border-top: 1px solid var(--border); background: var(--bg); padding-block: clamp(56px, 7vw, 84px) 40px; font-size: 0.94rem; } .site-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(32px, 4vw, 56px); padding-bottom: 44px; border-bottom: 1px solid var(--border); } .site-footer .brand-lockup { font-size: 1.24rem; } .site-footer__strap { margin-top: 18px; max-width: 34ch; font-family: var(--font-display); font-weight: 500; color: var(--text); } .site-footer__family { margin-top: 18px; font-size: 0.88rem; color: var(--text-soft); } .footer-col h4 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 18px; } .footer-col ul { list-style: none; display: grid; gap: 11px; } .footer-col a { color: var(--text-muted); text-decoration: none; } .footer-col a:hover { color: var(--text); } .footer-col p { margin: 0 0 8px; font-size: 0.92rem; } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-top: 28px; color: var(--text-soft); font-size: 0.86rem; } .site-footer__bottom p { margin: 0; color: inherit; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; } .site-footer__legal a { color: var(--text-soft); text-decoration: none; } .site-footer__legal a:hover { color: var(--text); } .social { display: flex; gap: 10px; list-style: none; } .social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .social a:hover { color: var(--text); border-color: var(--border-strong); } /*-------------------------------------------------------------- 16 · Motion & reveal --------------------------------------------------------------*/ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Slow signal travel in the hero diagram */ .signal-flow { stroke-dasharray: 26 340; animation: signal-travel 9s linear infinite; } .signal-flow--2 { animation-delay: -2.2s; } .signal-flow--3 { animation-delay: -4.4s; } .signal-flow--4 { animation-delay: -6.6s; } @keyframes signal-travel { from { stroke-dashoffset: 366; } to { stroke-dashoffset: 0; } } .signal-node { animation: node-breathe 5.5s var(--ease) infinite; transform-origin: center; } @keyframes node-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } .signal-flow { stroke-dasharray: none; } .btn:hover, .division:hover, .card:hover { transform: none; } }