/* ============================================================ FluxNova Capital — home Register: deep field + one warm emergence. Flux (violet→cyan) is the graphic language; nova (amber) is reserved for the single point of emergence and the primary action. Never both at once. Type system, strictly divided: Instrument Serif → editorial display headings only Inter Tight → wordmark, UI, body JetBrains Mono → indices, kickers, technical labels ============================================================ */ :root { /* Deep field */ --void: #080c17; --void-deep: #05070e; --deep: #0a1020; --raised: #111930; --raised-2: #16203c; /* Light editorial */ --paper: #f4f6fa; --paper-2: #ffffff; --ink: #0e1524; --ink-soft: #5a6478; /* On dark */ --on-dark: #c9d4e8; --on-dark-soft: #8c9ec4; /* Flux + nova */ --flux: #7b61ff; --flux-deep: #5233d1; --cyan: #35d0e0; --cyan-deep: #0a6f7c; --nova: #ffb45c; --nova-light: #ffd9a3; --nova-deep: #8a4f08; /* Rules */ --rule-dark: rgba(140, 158, 196, 0.22); --rule-light: rgba(14, 21, 36, 0.14); /* Layout */ --shell: 84rem; --gutter: clamp(1.25rem, 4.2vw, 4rem); --section-pad: clamp(5rem, 9vw, 9.5rem); /* Type */ --display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Tempo — quick/editorial register (see reveal.css) */ --dur-entrance: 620ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --reveal-rise: 22px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 20rem; background: var(--void); color: var(--on-dark); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* Form controls inherit the page font. `body` must NOT be in this list: the `font` shorthand resets font-family to the inherited value, which for is the browser default (Times) — it silently overrode font-family: var(--sans) above. */ button, input, textarea { font: inherit; } button, input, textarea { color: inherit; } a { color: inherit; } img, svg, video { display: block; max-width: 100%; } p, h1, h2, h3, blockquote, ul, ol { margin-top: 0; } button, a, input, textarea { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--nova); outline-offset: 3px; border-radius: 2px; } ::selection { background: rgba(123, 97, 255, 0.35); color: #fff; } .shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.75rem 1rem; background: var(--nova); color: var(--void); font-weight: 600; text-decoration: none; border-radius: 4px; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* ── Shared type ──────────────────────────────────────────── */ .display-heading { font-family: var(--display); font-weight: 400; font-size: clamp(2.15rem, 4.6vw, 3.9rem); line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 0; } .display-heading em { font-style: italic; color: var(--nova); } .section-kicker { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 0; line-height: 1.5; } .section-kicker::before { content: ""; display: inline-block; width: 1.75rem; height: 1px; margin-right: 0.75rem; vertical-align: 0.28em; background: linear-gradient(90deg, var(--flux), var(--cyan)); } .section-intro { margin-top: 1.5rem; margin-bottom: 0; max-width: 46ch; font-size: clamp(1rem, 1.15vw, 1.1rem); color: var(--on-dark-soft); } .large-copy { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; letter-spacing: -0.005em; } /* ── Buttons ──────────────────────────────────────────────── */ .button { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.9rem; padding: 0.7rem 1.4rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: transform 220ms var(--ease), opacity 220ms var(--ease); } .button:hover { transform: translateY(-2px); } .button:active { transform: translateY(0); } .button-nova { background: var(--nova); color: #12161f; font-weight: 600; } .button-nova:hover { background: var(--nova-light); } .button-outline { border-color: var(--rule-dark); color: inherit; background: transparent; } .button-outline:hover { border-color: var(--cyan); } .button-small { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: 0.85rem; } .text-link { display: inline-flex; align-items: center; gap: 0.45rem; padding-block: 0.5rem; font-size: 0.92rem; color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--rule-dark); transition: border-color 220ms var(--ease), color 220ms var(--ease); } .text-link:hover { color: var(--cyan); border-color: var(--cyan); } /* ── Header ───────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(8, 12, 23, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(140, 158, 196, 0.12); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; } .brand-mark { width: 2.4rem; height: auto; } .brand-words { display: flex; align-items: baseline; gap: 0.5rem; } .brand-name { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; color: #eef2f9; } .brand-suffix { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-soft); } .primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); } .nav-link { font-size: 0.9rem; color: var(--on-dark-soft); text-decoration: none; transition: color 200ms var(--ease); } .nav-link:hover { color: #eef2f9; } /* ── Hero ─────────────────────────────────────────────────── */ .hero { position: relative; background: var(--void); padding-block: clamp(3.5rem, 7vw, 6rem) 0; overflow: hidden; } /* Static wash — a single soft flux bloom behind the hero. No loop, no runtime cost; it is a background-image, not an animation. */ .field-wash { position: absolute; inset: -20% -10% auto -10%; height: 120%; pointer-events: none; background: radial-gradient(48rem 34rem at 68% 34%, rgba(123, 97, 255, 0.16), transparent 62%), radial-gradient(34rem 26rem at 88% 52%, rgba(53, 208, 224, 0.10), transparent 65%), radial-gradient(30rem 22rem at 12% 12%, rgba(255, 180, 92, 0.06), transparent 68%); } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } .eyebrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; padding: 0; list-style: none; } .eyebrow span { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-soft); padding: 0.35rem 0.7rem; border: 1px solid var(--rule-dark); border-radius: 999px; } .hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.9rem, 6.4vw, 5.4rem); line-height: 1.02; letter-spacing: -0.022em; color: #f2f5fb; margin-bottom: 1.6rem; } .hero h1 em { font-style: italic; background: linear-gradient(96deg, var(--nova-light), var(--nova) 55%, var(--flux)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lede { max-width: 44ch; font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--on-dark-soft); margin-bottom: 2.25rem; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; } /* ── Flux card ────────────────────────────────────────────── */ .flux-card { position: relative; padding: clamp(1.1rem, 1.8vw, 1.6rem); background: linear-gradient(168deg, rgba(22, 32, 60, 0.9), rgba(10, 16, 32, 0.75)); border: 1px solid var(--rule-dark); border-radius: 18px; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9); } .flux-topline { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-soft); padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule-dark); } .flux-index { color: var(--nova); } .flux-stage { position: relative; aspect-ratio: 760 / 580; margin-block: 0.75rem; } .flux-graphic { width: 100%; height: 100%; } .fx-node circle { fill: var(--nova-light); } .fx-seed circle { opacity: 0.55; } .flux-tag { position: absolute; margin: 0; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); white-space: nowrap; } .flux-tag-in { left: 0; top: 1%; } .flux-tag-out { right: 0; top: 1%; color: var(--cyan); } .flux-tag-screen { left: 51.6%; top: 70%; transform: translateX(-50%); color: var(--nova); } .flux-legend { list-style: none; margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--rule-dark); display: grid; gap: 0.6rem; font-size: 0.82rem; color: var(--on-dark-soft); } .flux-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: start; } .flux-legend strong { color: #e6ecf7; font-weight: 500; } .legend-key { width: 0.6rem; height: 0.6rem; margin-top: 0.42rem; border-radius: 999px; flex: none; } .legend-key-in { background: var(--flux); } .legend-key-screen { background: var(--nova); } .legend-key-out { background: var(--cyan); } /* ── Focus strip ──────────────────────────────────────────── */ .focus-strip { position: relative; display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); width: min(100%, var(--shell)); margin: clamp(3rem, 6vw, 5rem) auto 0; padding: 1.35rem var(--gutter); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); text-decoration: none; transition: background 260ms var(--ease); } .focus-strip:hover { background: rgba(123, 97, 255, 0.07); } .focus-label { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); } .focus-strip strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 2.1vw, 1.7rem); letter-spacing: -0.01em; color: #eef2f9; } .focus-arrow { margin-left: auto; color: var(--nova); font-size: 1.1rem; } /* ── 01 The role (dark, continues the hero field) ─────────── */ .position-section { background: var(--void); padding-block: var(--section-pad); } .editorial-grid { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .editorial-grid .section-kicker { padding-top: 0.65rem; } .position-copy { margin-top: 2rem; max-width: 54ch; } .position-copy p:last-child { margin-bottom: 0; font-size: 1.02rem; color: var(--on-dark-soft); } /* ── 02 How it works (light block starts) ─────────────────── */ .approach-section { background: var(--paper); color: var(--ink); padding-block: var(--section-pad); } /* Light-block token overrides — one place, not per component. */ .approach-section, .focus-section, .contact-section { --on-dark: var(--ink); --on-dark-soft: var(--ink-soft); --rule-dark: var(--rule-light); } .approach-section .display-heading, .focus-section .display-heading, .contact-section .display-heading { color: var(--ink); } .approach-section .display-heading em, .focus-section .display-heading em, .contact-section .display-heading em { color: var(--flux-deep); } .approach-section .text-link:hover, .focus-section .text-link:hover, .contact-section .text-link:hover { color: var(--cyan-deep); border-color: var(--cyan-deep); } .approach-section .button-outline:hover, .focus-section .button-outline:hover, .contact-section .button-outline:hover { border-color: var(--flux-deep); } .section-heading { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: clamp(3rem, 5.5vw, 4.5rem); } .section-heading .section-kicker { padding-top: 0.65rem; } .compact-heading { align-items: start; } .process-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule-light); border-block: 1px solid var(--rule-light); } .process-item { background: var(--paper); padding: clamp(1.75rem, 2.6vw, 2.5rem) clamp(1.25rem, 1.8vw, 1.75rem); display: flex; flex-direction: column; gap: 0.6rem; } .process-number { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; color: var(--flux-deep); } .process-item h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; margin-bottom: 0.25rem; color: var(--ink); } .process-item p { margin-bottom: 0; font-size: 0.94rem; color: var(--ink-soft); } .approach-principle { margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(2rem, 3.5vw, 3rem); background: var(--void); border-radius: 16px; display: grid; gap: 1rem; justify-items: center; text-align: center; } .standard-label { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nova); margin-bottom: 0; } .approach-principle blockquote { margin: 0; max-width: 24ch; font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.16; letter-spacing: -0.015em; color: #f2f5fb; } /* ── 03 Focus (light block ends; owns the gap below) ──────── */ .focus-section { background: var(--paper); color: var(--ink); padding-block: 0 var(--section-pad); } .focus-index { border-top: 1px solid var(--rule-light); } .focus-row { display: grid; grid-template-columns: 4rem 16rem minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: baseline; padding-block: clamp(1.4rem, 2.2vw, 2rem); border-bottom: 1px solid var(--rule-light); } .focus-num { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; color: var(--flux-deep); } .focus-row h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.12; margin-bottom: 0; color: var(--ink); } .focus-row p { margin-bottom: 0; color: var(--ink-soft); font-size: 0.96rem; } .focus-note { margin-top: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 0; max-width: 62ch; color: var(--ink-soft); font-size: 0.96rem; } .focus-note span { display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.5rem; } /* ── 04 Who we work with (dark block starts) ──────────────── */ .partners-section { background: var(--deep); padding-block: var(--section-pad); } .partner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .partner-card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--rule-dark); border-radius: 16px; background: linear-gradient(170deg, rgba(22, 32, 60, 0.7), rgba(10, 16, 32, 0.4)); } .partner-card-primary { border-color: rgba(255, 180, 92, 0.45); background: linear-gradient(170deg, rgba(255, 180, 92, 0.14), rgba(10, 16, 32, 0.4)); } .partner-card-top { display: flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); } .card-index { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1px solid var(--rule-dark); color: var(--nova); font-size: 0.66rem; } .partner-card h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; margin-bottom: 0; color: #eef2f9; } .partner-card > p { margin-bottom: 0; color: var(--on-dark-soft); } .clean-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: 0.94rem; } .clean-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: center; padding-block: 0.35rem; border-bottom: 1px solid var(--rule-dark); } .clean-list li::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 999px; background: var(--cyan); } /* Buttons sit at the card foot so paired cards end on the same line. */ .partner-card .button { margin-top: auto; align-self: flex-start; } /* ── 05 Principles (dark block ends; owns the gap below) ──── */ .principles-section { background: var(--deep); padding-block: 0 var(--section-pad); } .principles-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .principles-head .display-heading { margin-top: 1.5rem; max-width: 19ch; } .principle-list { display: grid; gap: 0; } .principle-list article { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding-block: 1.35rem; border-bottom: 1px solid var(--rule-dark); } .principle-list article:first-child { border-top: 1px solid var(--rule-dark); } .principle-num { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; color: var(--cyan); padding-top: 0.3rem; } .principle-list h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.3rem; color: #eef2f9; } .principle-list p { margin-bottom: 0; font-size: 0.94rem; color: var(--on-dark-soft); } .boundary-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: clamp(3rem, 5vw, 4rem); padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--rule-dark); border-left: 2px solid var(--nova); border-radius: 12px; background: rgba(255, 180, 92, 0.05); } .boundary-mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--nova); color: var(--void); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; } .boundary-note p { margin-bottom: 0; font-size: 0.94rem; color: var(--on-dark-soft); } .boundary-note strong { color: #eef2f9; font-weight: 600; } /* ── 06 Contact (light) ───────────────────────────────────── */ .contact-section { background: var(--paper); color: var(--ink); padding-block: var(--section-pad); } .contact-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .contact-intro .display-heading { margin-top: 1.5rem; margin-bottom: 1.5rem; } .contact-intro p { color: var(--ink-soft); max-width: 40ch; } .demo-note { margin-top: 1.5rem; margin-bottom: 0; padding: 0.85rem 1rem; border-left: 2px solid var(--flux-deep); background: rgba(82, 51, 209, 0.05); font-size: 0.88rem; } .demo-note strong { color: var(--ink); } .contact-workspace { border: 1px solid var(--rule-light); border-radius: 16px; background: var(--paper-2); overflow: hidden; } .form-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-light); } .form-tab { padding: 1rem 1.25rem; min-height: 3.25rem; background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer; transition: color 200ms var(--ease), border-color 200ms var(--ease); } .form-tab:hover { color: var(--ink); } .form-tab.is-active { color: var(--ink); font-weight: 500; border-bottom-color: var(--flux-deep); } /* Without JS both panels show, each under its own heading — the page still works, it just isn't tabbed. */ .contact-panel { padding: clamp(1.5rem, 2.6vw, 2.25rem); } .contact-panel + .contact-panel { border-top: 1px solid var(--rule-light); } .form-tabs-ready .contact-panel + .contact-panel { border-top: 0; } .form-tabs { display: none; } .form-tabs-ready .form-tabs { display: grid; } .form-heading { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-light); } .form-heading span { display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.4rem; } .form-heading p { margin-bottom: 0; font-size: 0.85rem; color: var(--ink-soft); } .demo-form { display: grid; gap: 1rem; } .field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .demo-form label { display: grid; gap: 0.4rem; } .demo-form label span { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-soft); } .demo-form input, .demo-form textarea { width: 100%; min-height: 2.85rem; padding: 0.65rem 0.85rem; background: var(--paper); border: 1px solid var(--rule-light); border-radius: 8px; font-size: 0.94rem; transition: border-color 200ms var(--ease), background 200ms var(--ease); } .demo-form textarea { min-height: 5.5rem; resize: vertical; } .demo-form input::placeholder, .demo-form textarea::placeholder { color: #99a2b4; } .demo-form input:focus, .demo-form textarea:focus { border-color: var(--flux-deep); background: var(--paper-2); } .form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; } .form-status { font-size: 0.82rem; color: var(--ink-soft); flex: 1 1 14rem; min-width: 0; } /* ── Footer ───────────────────────────────────────────────── */ .site-footer { background: var(--void-deep); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; border-top: 1px solid rgba(140, 158, 196, 0.12); } .footer-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding-bottom: 2.5rem; } .brand-footer .brand-mark { width: 3rem; } .brand-footer .brand-name { font-size: 1.3rem; } .footer-line { margin-bottom: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.25; color: var(--on-dark-soft); } .site-footer nav { display: grid; gap: 0.5rem; justify-items: start; } .site-footer nav a { font-size: 0.88rem; color: var(--on-dark-soft); text-decoration: none; transition: color 200ms var(--ease); } .site-footer nav a:hover { color: #eef2f9; } .footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; border-top: 1px solid rgba(140, 158, 196, 0.12); } .footer-legal p { margin-bottom: 0; font-size: 0.76rem; line-height: 1.5; color: #6f7f9e; max-width: 62ch; } /* ============================================================ Responsive — contract is 1280 / 1440 / 1680 desktop and 360 / 390 / 430 mobile. ============================================================ */ @media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .flux-card { max-width: 40rem; } .editorial-grid, .section-heading { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .editorial-grid .section-kicker, .section-heading .section-kicker { padding-top: 0; } .principles-grid, .contact-layout { grid-template-columns: minmax(0, 1fr); } .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .focus-row { grid-template-columns: 3rem 13rem minmax(0, 1fr); } } @media (max-width: 860px) { .nav-link { display: none; } .partner-grid { grid-template-columns: minmax(0, 1fr); } .footer-main { grid-template-columns: minmax(0, 1fr); } .site-footer nav { grid-auto-flow: column; grid-auto-columns: max-content; gap: 1.25rem; flex-wrap: wrap; } } @media (max-width: 760px) { /* Labels drop off the graphic; the legend below already carries them. */ .flux-tag { display: none; } .focus-row { grid-template-columns: 2.5rem minmax(0, 1fr); } .focus-row p { grid-column: 2; } .focus-strip { flex-wrap: wrap; } .focus-arrow { margin-left: 0; } } @media (max-width: 600px) { .process-grid { grid-template-columns: minmax(0, 1fr); } .field-pair { grid-template-columns: minmax(0, 1fr); } .hero-actions { gap: 1rem; } .hero-actions .button { width: 100%; justify-content: center; } .form-tabs { grid-template-columns: minmax(0, 1fr); } .form-tab { border-bottom: 1px solid var(--rule-light); } .footer-legal { flex-direction: column; } /* Authored line breaks are for wide measures only. */ .display-heading br { display: none; } } @media (max-width: 400px) { .brand-suffix { display: none; } .eyebrow span { font-size: 0.6rem; padding: 0.3rem 0.55rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button:hover { transform: none; } * { transition-duration: 1ms !important; } }