:root { --navy-deep: #071a33; --navy: #0d2950; --amber: #e19133; --amber-deep: #c77a1f; --fog: #b8c4d6; --dim: #8395af; --paper: #ffffff; --backdrop: #f1f4f8; --ink: #26313f; --slate: #63718a; --hairline: #dde3ec; --accent: #e19133; --border: #dde3ec; --display: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif; --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; --gutter: clamp(20px, 5vw, 64px); --maxw: 1180px; --bar: 60px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Sticky footer: on short pages (error pages especially — a couple lines of text plus a header/footer) this keeps the footer pinned to the bottom of the viewport instead of leaving bare white space below it. Every direct child of becomes a flex item stacked in a column, which is a no-op for existing sections (they already behave like block-level width:100% elements under stretch) except the footer, which gets pushed down via margin-top: auto below. */ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } .shell { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; } h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.005em; line-height: 1.05; color: var(--navy); } .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; } /* ---------- fixed bar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background 0.25s ease, border-color 0.25s ease; } .topbar.is-stuck { background: rgba(7, 26, 51, 0.96); border-bottom-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.5); } .topbar .shell { display: flex; align-items: center; gap: 22px; height: var(--bar); } .brandlock { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; } .brandlock svg { width: 24px; height: 29px; display: block; flex: none; } .brandlock b { font-family: var(--display); font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; } .navlinks { display: flex; gap: 24px; } .navlinks a { position: relative; padding-bottom: 3px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); text-decoration: none; } .navlinks a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--amber); transition: right 0.2s ease; } .navlinks a:hover { color: var(--amber); } .navlinks a:hover::after { right: 0; } .topcall { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.28); padding: 7px 13px; border-radius: 999px; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .topcall:hover { border-color: var(--amber); color: var(--amber); } /* shared circular icon badge for icon-only topbar buttons (back, mail) */ .topcall__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; flex: none; transition: transform 0.15s ease; } .topcall--back { padding: 6px; } .topcall--back .topcall__icon { background: rgba(255, 255, 255, 0.14); } .topcall--back:hover .topcall__icon { transform: translateX(-3px); } /* mail button — icon-only filled pill, matches the site's amber CTA language */ .topcall.email { padding: 6px; background: var(--amber); border-color: var(--amber); color: var(--navy-deep); font-weight: 600; box-shadow: 0 4px 16px -4px rgba(225, 145, 51, 0.55); } .topcall.email .topcall__icon { background: rgba(7, 26, 51, 0.14); } .topcall.email:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 8px 22px -4px rgba(225, 145, 51, 0.6); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; background: var(--navy); background-image: radial-gradient( 1000px 700px at 84% 6%, #17457c 0%, transparent 62% ); color: #fff; min-height: 100vh; min-height: 100svh; padding: calc(var(--bar) + clamp(28px, 5vw, 56px)) 0 clamp(36px, 5vw, 56px); display: flex; align-items: center; } .hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(30px, 5vw, 64px); align-items: end; width: 100%; position: relative; z-index: 2; align-items: center; } .rail { position: absolute; left: calc(var(--gutter) / 2 - 6px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 3; } .rail .line { width: 1px; height: clamp(40px, 9vh, 90px); background: linear-gradient(var(--amber), transparent); } .rail .line.b { background: linear-gradient(transparent, var(--amber)); } .rail span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); white-space: nowrap; } .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 15vw, 100px); line-height: 0.9; letter-spacing: -0.015em; text-transform: uppercase; color: #fff; } .hero h1 .amber { color: var(--amber); } .proof { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: clamp(22px, 3vw, 32px); padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-family: var(--display); font-weight: 600; font-size: clamp(13px, 1.5vw, 15px); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; } .proof i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); display: inline-block; } .hero .lede { color: var(--fog); font-size: clamp(15px, 1.4vw, 17px); margin-top: 22px; max-width: 54ch; } .hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 26px; } /* ---------- primary button (white with orange/navy accent) ---------- */ .btn { display: inline-flex; align-items: stretch; border-radius: 5px; overflow: hidden; text-decoration: none; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .btn .ic { display: flex; align-items: center; padding: 0 14px; background: var(--amber); /* Orange accent block */ } .btn .ic svg { width: 17px; height: 17px; display: block; /* The SVG stroke is already set to #071A33 (navy) in your HTML */ } .btn .tx { background: #fff; color: var(--navy-deep); /* Navy text */ padding: 13px 20px 13px 16px; font-size: 14.5px; } /* ---------- secondary ghost button (outline, for dark/navy backgrounds) ---------- */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1.35rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 9999px; background: transparent; color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--amber); color: var(--amber); transform: translateY(-2px); } .btn-ghost:active { transform: translateY(0); } .btn-ghost .arrow { transition: transform 0.15s ease; } .btn-ghost:hover .arrow { transform: translateX(3px); } .ticket { position: relative; overflow: hidden; background: #fff; border-radius: 12px; padding: 26px 26px 20px; box-shadow: 0 26px 50px -14px rgba(4, 14, 28, 0.55), 0 3px 10px rgba(4, 14, 28, 0.22); } .hero-cta { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.55rem 0.45rem 0.45rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; transition: 0.2s ease; } .hero-cta:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); } .hero-cta__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); } .hero-cta__icon svg { width: 16px; height: 16px; } .hero-cta__icon svg * { stroke: currentColor; } /* ---------- glassmorphism ---------- */ .glass { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.5); } /* amber tab instead of a full top border — lighter, more current */ .ticket::before { content: ""; position: absolute; top: 0; left: 26px; width: 56px; height: 4px; background: var(--amber); border-radius: 0 0 3px 3px; } .ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--hairline); } .ticket-head > span { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--slate); } /* status pill */ .status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(30, 142, 62, 0.1); color: #14713c; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .status i { width: 7px; height: 7px; border-radius: 50%; background: #1e8e3e; animation: ping 2.8s ease-out infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(30, 142, 62, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(30, 142, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 142, 62, 0); } } /* rows */ .ticket dl { display: grid; grid-template-columns: auto 1fr; } .ticket dt, .ticket dd { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-family: var(--mono); text-transform: uppercase; } .ticket dt { font-size: 9.5px; letter-spacing: 0.16em; color: var(--slate); padding-right: 22px; align-self: center; } .ticket dd { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; color: var(--navy); text-align: right; } .ticket dl > :nth-last-child(1), .ticket dl > :nth-last-child(2) { border-bottom: none; padding-bottom: 2px; } @media (max-width: 640px) { .ticket { padding: 22px 20px 16px; } .ticket dt { font-size: 9px; letter-spacing: 0.12em; padding-right: 14px; } .ticket dd { font-size: 10.5px; } } @media (prefers-reduced-motion: reduce) { .status i { animation: none; } } .ticket dt, .ticket dd { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--mono); font-size: 11.5px; } .ticket dt { color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; padding-right: 20px; align-self: center; } .ticket dd { color: #fff; text-align: right; } .ticket dl > :nth-last-child(1), .ticket dl > :nth-last-child(2) { border-bottom: none; } .ghost-mark { position: absolute; right: -8%; bottom: -30%; width: min(40vw, 440px); opacity: 0.05; pointer-events: none; z-index: 1; } /* ---------- coverage strip ---------- */ .strip { background: var(--navy-deep); color: var(--fog); padding: 15px 0; } .strip .shell { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; } .strip b { color: var(--amber); font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; } .strip span { color: var(--dim); } /* ---------- bands ---------- */ .band { padding: clamp(56px, 8vw, 96px) 0; } .band-tint { background: var(--backdrop); } .band-navy { background: var(--navy); color: #fff; } .band-navy h2 { color: #fff; } .band h2 { font-size: clamp(28px, 3.8vw, 44px); max-width: 19ch; } .band .intro { color: var(--slate); margin-top: 14px; max-width: 62ch; font-size: 16.5px; } .band-navy .intro { color: var(--fog); } /* ---------- risk ledger ---------- */ .ledger { margin-top: 42px; border-top: 1px solid rgba(255, 255, 255, 0.18); } .ledger-head, .ledger-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(18px, 4vw, 48px); padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .ledger-head { padding: 10px 0; } .ledger-head span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); } .ledger-row .risk { color: var(--fog); font-size: 15px; } .ledger-row .ans { color: #fff; font-size: 15px; position: relative; padding-left: 22px; } .ledger-row .ans::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 6px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(-45deg); } .ledger-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .ledger-note { color: var(--dim); font-size: 13.5px; font-family: var(--mono); } /* ---------- scope rows ---------- */ .rows { margin-top: 38px; border-top: 1px solid var(--hairline); } .row { display: grid; grid-template-columns: minmax(180px, 0.85fr) 2fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--hairline); } .row h3 { font-size: 21px; } .row p { color: var(--slate); font-size: 15px; } .row .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); white-space: nowrap; } /* ---------- closeout ---------- */ .steps { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; } .step { background: var(--paper); border-top: 2px solid var(--navy); padding: 18px 16px 20px; } .step .n { font-family: var(--mono); font-size: 11px; color: var(--amber); letter-spacing: 0.14em; } .step b { display: block; font-family: var(--display); font-size: 17px; color: var(--navy); margin: 8px 0 5px; } .step p { font-size: 13.5px; color: var(--slate); line-height: 1.5; } /* ---------- credentials ---------- */ .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .deflist { margin-top: 28px; border-top: 1px solid var(--hairline); } .deflist > div { padding: 14px 0; border-bottom: 1px solid var(--hairline); } .deflist dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 4px; } .deflist dd { font-size: 15px; color: var(--ink); } .checks { margin-top: 28px; list-style: none; } .checks li { position: relative; padding: 0 0 16px 26px; font-size: 15px; line-height: 1.6; color: var(--ink); } .checks li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(-45deg); } .checks a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; } /* ---------- contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 60px); align-items: center; } /* contact CTA — glass button on the navy band (base .hero-cta relies on --surface/--text, which are undefined, so it renders near-invisible here; .glass supplies the frosted background/border/blur) */ .contact-grid .hero-cta { margin: 28px 0 8px; color: #fff; } .contact-grid .hero-cta:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--amber); box-shadow: 0 0 0 4px rgba(225, 145, 51, 0.18), 0 8px 30px -14px rgba(0, 0, 0, 0.5); } .contact-grid .hero-cta__icon { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); } /* ---------- contact: sector icon tiles (offset cluster, right column) ---------- */ .sector-tiles { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-width: 260px; margin-left: auto; } .sector-tiles .tile:nth-child(2n) { margin-top: 12px; } /* soft amber + blue glow behind the glass tiles so the frosted blur picks up color instead of sitting flat on the navy band background */ .sector-tiles::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: radial-gradient(circle at 25% 20%, rgba(225, 145, 51, 0.45), transparent 55%), radial-gradient(circle at 75% 80%, rgba(46, 129, 219, 0.45), transparent 55%); filter: blur(40px); } .tile { aspect-ratio: 1; border-radius: 22%; display: grid; place-items: center; box-shadow: 0 16px 30px -12px rgba(4, 14, 28, 0.5); } .tile svg { width: 42%; height: 42%; } .tile--a { background: var(--navy-deep); color: #fff; width: 100%; justify-self: end; } .tile--b { background: var(--amber); color: var(--navy-deep); width: 70%; justify-self: start; } .tile--c { background: #17457c; color: var(--amber); width: 84%; justify-self: end; } .tile--d { background: #fff; color: var(--navy); width: 58%; justify-self: start; } /* glass tiles override the per-variant solid colors above with a unified frosted look — .tile.glass (0,2,0) beats .tile--a/b/c/d (0,1,0) */ .tile.glass { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; } .sector-tiles-caption { margin-top: 16px; max-width: 260px; margin-left: auto; text-align: right; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } @media (max-width: 980px) { .sector-tiles, .sector-tiles-caption { margin-left: 0; text-align: left; } } .contact-lines { display: grid; gap: 15px; } .contact-lines a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; font-family: var(--mono); font-size: 15px; } .contact-lines small { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); min-width: 62px; } .contact-lines a:hover span { color: var(--amber); } /* ---------- contact page: split window (navy context / white form) ---------- */ /* Because this layout sits edge-to-edge in both colors, the fixed topbar can't rely on the "transparent until scrolled" trick (it would go illegible over the white pane) — .contact-page forces it solid from the start. */ .contact-page .topbar { background: rgba(7, 26, 51, 0.94); border-bottom-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); } .contact-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; } .contact-split__context { position: relative; overflow: hidden; background: var(--navy); background-image: radial-gradient(560px 420px at 18% 12%, rgba(225, 145, 51, 0.16), transparent 60%), radial-gradient(900px 700px at 96% 100%, #17457c 0%, transparent 62%); color: #fff; display: flex; align-items: center; padding: calc(var(--bar) + clamp(40px, 6vw, 72px)) clamp(28px, 5vw, 64px) clamp(40px, 6vw, 72px); } .contact-split__context-inner { position: relative; z-index: 2; max-width: 46ch; } .contact-split__accent { width: 56px; height: 4px; border-radius: 2px; background: var(--amber); margin-bottom: 20px; } .contact-split__context h1 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.06; letter-spacing: -0.01em; color: #fff; margin-top: 6px; } .contact-split__context .intro { margin-top: 16px; } .contact-split__context .contact-lines { margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid rgba(255, 255, 255, 0.16); } .contact-split__ghost { position: absolute; right: -12%; bottom: -18%; width: min(46vw, 380px); opacity: 0.06; pointer-events: none; z-index: 1; } .contact-split__form-wrap { background: var(--paper); display: flex; align-items: center; padding: calc(var(--bar) + clamp(40px, 6vw, 72px)) clamp(28px, 5vw, 64px) clamp(40px, 6vw, 72px); } .contact-split__form-inner { width: 100%; max-width: 46ch; } .contact-split__form-inner > .eyebrow { color: var(--amber); } .contact-split__form-inner h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 4px; margin-bottom: 24px; } .contact-form { display: grid; gap: 20px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { display: grid; gap: 6px; } .field label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); } .field input, .field textarea { width: 100%; border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 15px; padding: 12px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(225, 145, 51, 0.15); } .field textarea { resize: vertical; min-height: 130px; } /* honeypot: hidden from sighted users and keyboard tab order, but present in the DOM for bots */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .btn-submit { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border: none; border-radius: 999px; background: var(--amber); color: var(--navy-deep); font-family: var(--body); font-weight: 600; font-size: 15px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; } .btn-submit:hover { background: var(--amber-deep); box-shadow: 0 6px 18px rgba(225, 145, 51, 0.3); transform: translateY(-2px); } .btn-submit:active { transform: translateY(0); } .btn-submit:disabled, .btn-submit.is-submitting { cursor: default; opacity: 0.75; transform: none; } .btn-submit .spinner { display: none; width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid rgba(7, 26, 51, 0.3); border-top-color: var(--navy-deep); border-radius: 50%; animation: btn-spin 0.7s linear infinite; } .btn-submit.is-submitting .spinner { display: inline-block; } .btn-submit.is-submitting .arrow { display: none; } @keyframes btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn-submit .spinner { animation-duration: 1.5s; } } .btn-submit .arrow { transition: transform 0.15s ease; } .btn-submit:hover .arrow { transform: translateX(3px); } .form-note { border-radius: 8px; padding: 14px 16px; font-size: 14px; line-height: 1.5; } .form-note--ok { background: rgba(30, 142, 62, 0.08); border: 1px solid rgba(30, 142, 62, 0.25); color: #14713c; } .form-note--err { background: rgba(222, 63, 31, 0.06); border: 1px solid rgba(222, 63, 31, 0.25); color: #b1331a; } .form-note--err span { font-weight: 600; } .form-consent { font-size: 12px; line-height: 1.5; color: var(--navy); opacity: 0.6; } /* ---------- error pages (400/401/403/404/429/500) ---------- */ .error-page { min-height: 60vh; display: flex; align-items: center; padding-top: calc(var(--bar) + clamp(48px, 8vw, 96px)); padding-bottom: clamp(48px, 8vw, 96px); } .error-page__inner { max-width: 560px; } .error-page__code { font-family: var(--display); font-weight: 700; font-size: clamp(64px, 10vw, 120px); line-height: 1; letter-spacing: -0.02em; color: var(--navy); } .error-page__inner h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); color: var(--navy); margin-top: 8px; } .error-page__message { color: var(--slate); font-size: 16px; line-height: 1.6; margin-top: 14px; max-width: 46ch; } .error-page__actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; } .error-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; text-decoration: none; font-family: var(--body); font-weight: 600; font-size: 15px; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .error-btn--primary { background: var(--amber); color: var(--navy-deep); border: 1px solid transparent; } .error-btn--primary:hover { background: var(--amber-deep); box-shadow: 0 6px 18px rgba(225, 145, 51, 0.3); transform: translateY(-2px); } .error-btn--ghost { background: transparent; color: var(--navy); border: 1px solid var(--hairline); } .error-btn--ghost:hover { border-color: var(--amber); color: var(--amber-deep); transform: translateY(-2px); } .form-note--err ul { margin: 6px 0 0 18px; } /* ---------- footer ---------- */ .foot { background: var(--navy-deep); color: var(--dim); padding: 26px 0 34px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .foot .shell { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; } .foot .mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; } /* ---------- responsive ---------- */ @media (max-width: 1080px) { .rail { display: none; } } @media (max-width: 980px) { .hero { min-height: auto; padding-bottom: clamp(44px, 7vw, 64px); } .hero-grid, .two, .contact-grid { grid-template-columns: 1fr; } .contact-split { grid-template-columns: 1fr; min-height: 0; } .contact-split__context, .contact-split__form-wrap { padding-top: clamp(32px, 6vw, 48px); padding-bottom: clamp(32px, 6vw, 48px); } .contact-split__context { padding-top: calc(var(--bar) + clamp(32px, 6vw, 48px)); } .hero-grid { gap: 36px; align-items: start; } .steps { grid-template-columns: repeat(2, 1fr); } .navlinks { display: none; } .ghost-mark { bottom: -14%; right: -22%; width: 66vw; } } @media (max-width: 640px) { .row, .ledger-row { grid-template-columns: 1fr; gap: 8px; } .field-row { grid-template-columns: 1fr; gap: 20px; } .ledger-head { display: none; } .ledger-row .risk::before { content: "Blind assignment · "; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } .row .tag { order: -1; } .steps { grid-template-columns: 1fr; } .hero-actions, .ledger-cta { flex-direction: column; align-items: stretch; } .btn { width: 100%; } .btn .tx { flex: 1; text-align: center; } .btn-ghost { justify-content: center; } .proof { gap: 6px 12px; letter-spacing: 0.1em; } .ticket dt, .ticket dd { font-size: 11px; } } /* ---------- metrics dashboard ---------- */ .metrics-login { max-width: 360px; padding-top: 40px; padding-bottom: 8px; } .metrics-login__form { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .metrics-login__form label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); } .metrics-login__form input { padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; font-family: var(--body); } .metrics-login__form input:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; } .metrics-login__error { color: #c0392b; font-size: 13.5px; } .metrics-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; } .metrics-signout { font-family: var(--mono); font-size: 12.5px; color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--border); } .metrics-signout:hover { color: var(--amber-deep); border-color: var(--amber-deep); } .metrics-tiles { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--hairline); border: 1px solid var(--hairline); } .metrics-tile { background: var(--paper); padding: 20px 22px; } .metrics-tile__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); } .metrics-tile__value { font-family: var(--display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: var(--navy); margin: 8px 0 4px; font-variant-numeric: tabular-nums; } .metrics-tile__sub { font-size: 12.5px; color: var(--slate); } .metrics-chart { margin-top: 36px; display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 0 2px; border-bottom: 1px solid var(--hairline); } .metrics-bar { flex: 1; height: var(--h); min-height: 4px; background: var(--amber); border-radius: 3px 3px 0 0; opacity: 0.85; transition: opacity 0.15s ease; } .metrics-bar:hover { opacity: 1; background: var(--amber-deep); } .metrics-tables { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); } .metrics-tables__heading { color: var(--amber-deep); } .metrics-table { width: 100%; border-collapse: collapse; } .metrics-table td { padding: 9px 4px; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--ink); } .metrics-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; white-space: nowrap; } .metrics-empty { color: var(--slate); font-size: 13.5px; padding: 10px 0; } .metrics-note { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--hairline); color: var(--slate); font-size: 12.5px; max-width: 72ch; } .metrics-note a { color: var(--amber-deep); } @media (max-width: 780px) { .metrics-tiles { grid-template-columns: 1fr 1fr; } .metrics-tables { grid-template-columns: 1fr; } } /* ---------- site footer ---------- */ .site-footer { position: relative; background: var(--navy-deep); color: var(--fog); padding: clamp(48px, 6vw, 72px) 0 0; margin-top: auto; } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--amber) 20%, var(--amber) 80%, transparent ); } .site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .site-footer__mark { display: inline-flex; align-items: center; gap: 10px; color: var(--amber); text-decoration: none; } .site-footer__mark b { font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -0.005em; } .site-footer__brand p { margin: 14px 0 16px; max-width: 34ch; font-size: 13.5px; color: var(--dim); line-height: 1.6; } .site-footer__email { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--fog); text-decoration: none; } .site-footer__email:hover { color: var(--amber); } .site-footer__email i { color: var(--amber); font-size: 11px; } .site-footer__heading { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; } .site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .site-footer__col a { font-size: 14px; color: var(--fog); text-decoration: none; } .site-footer__col a:hover { color: #fff; } .site-footer__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--dim); } @media (max-width: 780px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } .site-footer__fine { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .status i { animation: none; } .btn, .topbar { transition: none; } .btn:hover { transform: none; } } /* ---------- doc pages (terms, cookies, accessibility, capability) ---------- */ .doc-shell { max-width: 720px; } .doc-shell .intro { font-size: 16.5px; line-height: 1.65; } .doc-toc { margin-top: 28px; padding: 18px 22px; background: var(--backdrop); border-radius: 8px; } .doc-toc__label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .doc-toc ol { list-style: none; columns: 2; column-gap: 28px; } .doc-toc li { break-inside: avoid; margin-bottom: 8px; font-size: 13.5px; line-height: 1.4; } .doc-toc a { color: var(--navy); text-decoration: none; } .doc-toc a:hover { color: var(--amber-deep); text-decoration: underline; text-decoration-color: var(--amber); } @media (max-width: 560px) { .doc-toc ol { columns: 1; } } .doc-meta-strip { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; color: var(--slate); } .doc-meta-strip__item b { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: 500; margin-bottom: 2px; } .doc-meta-strip__item.is-accent { color: var(--amber-deep); } .doc-meta-strip__item.is-ok { color: #1e8e3e; } .print-btn { margin-top: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; padding: 10px 18px; cursor: pointer; } .print-btn:hover { border-color: var(--amber); color: var(--amber-deep); } .doc-sec { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--hairline); } .doc-sec__title { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.005em; color: var(--navy); margin-bottom: 14px; scroll-margin-top: 90px; } .doc-sec p { color: var(--ink); font-size: 16px; line-height: 1.7; max-width: 68ch; } .doc-sec p a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; } .doc-table { margin-top: 22px; margin-left: -14px; margin-right: -14px; border-top: 1px solid var(--hairline); } .doc-table__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 14px; border-bottom: 1px solid var(--hairline); border-radius: 4px; } .doc-table__row:nth-of-type(even) { background: var(--backdrop); } .doc-table__label { flex: 1 1 auto; min-width: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); } .doc-table__sub { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--slate); } .doc-table__val { flex: 0 0 auto; max-width: 42%; font-family: var(--mono); font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--navy); text-align: right; white-space: normal; } .doc-table__val.is-free { color: #1e8e3e; } .doc-table__val.is-fee { color: #c0392b; } .doc-footnote { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.6; color: var(--dim); max-width: 68ch; } @media (max-width: 640px) { .doc-table__row { flex-direction: column; gap: 4px; } .doc-table__val { max-width: none; text-align: left; } } /* ---------- cookie notice ---------- */ .cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 640px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: var(--navy-deep); color: var(--fog); border-radius: 10px; padding: 16px 20px; box-shadow: 0 12px 32px rgba(7, 26, 51, 0.28); font-size: 13.5px; line-height: 1.5; } .cookie-notice[hidden] { display: none; } .cookie-notice p { margin: 0; flex: 1 1 320px; } .cookie-notice a { color: var(--paper); text-decoration: underline; } .cookie-notice__actions { flex: 0 0 auto; margin-left: auto; } .cookie-notice__accept { border: 0; border-radius: 6px; background: var(--amber); color: var(--navy-deep); font-family: var(--body); font-weight: 600; font-size: 13.5px; padding: 8px 18px; cursor: pointer; } .cookie-notice__accept:hover { background: var(--amber-deep); } /* glass tint override — the notice floats over the page (usually light), so .glass's default light-on-dark frost is swapped for a dark frosted panel */ .cookie-notice.glass { background: rgba(7, 26, 51, 0.72); border-color: rgba(255, 255, 255, 0.14); } .cookie-notice__accept.glass { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); } .cookie-notice__accept.glass:hover { background: rgba(255, 255, 255, 0.22); border-color: var(--amber); } @media (prefers-reduced-motion: reduce) { .cookie-notice__accept { transition: none; } }