/* Simon Bullows — ratified Focus Ledger system, 30 October 2026.
   Additive presentation layer. Original pages, copy, URLs and source assets retained. */
:root {
  --sb-paper:#f8f8f3; --sb-surface:#fdfdf9; --sb-ink:#111111;
  --sb-muted:#62625e; --sb-rule:#ccccc6; --sb-rule-strong:#111111;
  --sb-electric:#1717f5; --sb-electric-soft:#ededff;
  --sb-attention:#c53b0a; --sb-attention-text:#ae2d00; --sb-attention-soft:#fff1e1;
  --sb-success:#237a35; --sb-danger:#b42318;
  --sb-font-sans:Arial,Helvetica,sans-serif;
  --sb-font-editorial:Georgia,"Times New Roman",serif;
  --sb-font-mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --paper:var(--sb-paper); --ink:var(--sb-ink); --muted:var(--sb-muted);
  --blue:var(--sb-electric); --line:var(--sb-rule);
}
html {scroll-padding-top:24px}
body {max-width:1680px;margin-inline:auto;background:var(--sb-paper);color:var(--sb-ink);font:16px/1.6 var(--sb-font-sans)}
header,.section,.index,.vendor-strip {margin-inline:42px}
header {padding:28px 0;gap:24px;border-color:var(--sb-rule-strong)}
.wordmark {font-size:26px;line-height:.88;font-weight:900;letter-spacing:-1.6px;flex-shrink:0}
nav {font-size:14px;gap:24px;flex-wrap:wrap;justify-content:flex-end}
nav a,footer>a {min-height:44px;display:inline-flex;align-items:center;padding-block:10px}
nav a:not(.login):hover {color:var(--sb-electric);text-decoration:underline;text-underline-offset:7px}
.login {border:1px solid var(--sb-ink);border-radius:0;min-height:44px;padding:10px 16px}
.login:hover {background:var(--sb-ink);color:var(--sb-surface)}
.hero {padding:48px 42px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px}
.hero>* {min-width:0}
h1 {font-size:clamp(44px,5.5vw,82px);line-height:1.05;letter-spacing:-.045em;font-weight:750;overflow-wrap:normal}
h1 em,h2 em {font-family:var(--sb-font-editorial);font-weight:400;color:var(--sb-electric)}
h2 {font-size:clamp(32px,3.8vw,56px);line-height:1.12;letter-spacing:-.035em;font-weight:700}
h3 {font-weight:700;letter-spacing:-.025em;line-height:1.25}
.eyebrow,.index,.number,.tool-list span,.hero-art figcaption,.product-hero figcaption {font-family:var(--sb-font-mono)}
.eyebrow {font-size:12px;line-height:1.5;letter-spacing:.1em}
.index {font-size:12px;line-height:1.6;gap:12px 24px;flex-wrap:wrap;border-top-color:var(--sb-ink)}
.intro {font-size:19px;line-height:1.6;max-width:34rem}
.button {border-radius:0;min-height:48px;padding:14px 20px;gap:24px;font-size:14px;font-weight:600;line-height:1.5;max-width:100%}
.button:hover {background:var(--sb-electric)}
.light:hover {background:var(--sb-electric-soft);color:var(--sb-ink)}
.offer-link {color:var(--sb-electric);font-size:14px;min-height:44px;padding-block:10px;margin-top:16px;text-underline-offset:5px}
.section {padding-block:64px}
.section-head {gap:32px;margin-bottom:40px}
.service-grid {border-top-color:var(--sb-rule-strong)}
.service-grid p,.service-grid ul,.approach p,.vendor-grid p {font-size:16px;line-height:1.65}
.service-grid p {min-height:0}
.service-grid ul {padding-left:20px}
.number {font-size:12px;letter-spacing:.1em}
.about-copy>p,.ecosystems p:not(.eyebrow) {font-size:17px;line-height:1.7;max-width:70ch}
.about-copy p.large {font-size:24px;line-height:1.45}
.approach {padding-top:24px}
.principle {background:var(--sb-electric-soft);border-radius:0;border-left-color:var(--sb-electric)}
.tool-list span {font-size:12px;border-radius:0}
.vendor-grid>a {border-radius:0;box-shadow:none;background:var(--sb-surface)}
.vendor-grid>a:hover {border-color:var(--sb-electric)}
.vendor-grid h3 {font-size:18px;font-weight:700}
.vendor-grid span,.vendor-note {font-size:12px;line-height:1.6}
.product-hero,.portrait-hero {background:var(--sb-electric-soft)}
.product-hero figcaption,.hero-art figcaption {font-size:12px;line-height:1.6;letter-spacing:0}
.interface-shot {background:var(--sb-surface);border-radius:0}
.interface-shot figcaption {font-size:14px;line-height:1.6}
.interface-shot figcaption a,.product-hero figcaption a {text-decoration:underline;text-underline-offset:3px}
.offer-detail {max-width:840px;margin-inline:auto;padding-inline:24px}
.offer-detail h1 {font-size:clamp(36px,5vw,64px);margin-bottom:24px}
.offer-detail h2 {font-size:clamp(26px,3vw,36px);margin-top:40px}
.offer-detail p {max-width:70ch;line-height:1.65}
.offer-detail ul {padding-left:24px}
.contact {padding:48px 42px 64px;background:var(--sb-electric)}
.contact h2 {font-size:clamp(44px,5.5vw,82px);letter-spacing:-.035em}
.contact h2 em {color:var(--sb-surface)}
.contact .email {font-size:14px;text-decoration:underline;text-underline-offset:4px;padding-block:8px}
footer {padding:24px 42px;font-size:12px;line-height:1.6}
footer strong {font-weight:800}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid var(--sb-electric);outline-offset:3px}
.contact a:focus-visible {outline-color:var(--sb-surface)}
.skip {position:fixed;left:16px;top:8px;transform:translateY(-180%);z-index:100;background:var(--sb-ink);color:var(--sb-surface);min-height:44px;padding:10px 16px}
.skip:focus {top:8px;transform:none}
main:focus {outline:none}
@media(max-width:1100px) {
 header,.section,.index,.vendor-strip {margin-inline:24px}
 .hero {padding-inline:24px;gap:32px}
 .contact,footer {padding-inline:24px}
 nav {gap:16px}
 .offer-detail {margin-inline:auto}
}
@media(max-width:760px) {
 header,.section,.index,.vendor-strip {margin-inline:18px}
 header {padding:22px 0;flex-wrap:wrap;gap:16px}
 .wordmark {font-size:23px}
 nav {gap:4px 16px;font-size:14px;justify-content:flex-start}
 nav a:nth-child(2) {display:inline-flex}
 .hero {grid-template-columns:1fr;padding:32px 18px;gap:32px}
 h1 {font-size:clamp(42px,8.6vw,64px);letter-spacing:-.04em}
 .eyebrow {font-size:12px;margin-bottom:20px}
 .intro {font-size:18px}
 .index {font-size:12px;letter-spacing:0}
 .section {padding-block:40px}
 .section-head,.about,.ecosystems {grid-template-columns:1fr;gap:16px}
 .section-head {margin-bottom:24px}
 .about .monogram {display:none}
 h2 {font-size:clamp(30px,6.6vw,44px)}
 .service-grid,.four-offers {grid-template-columns:1fr}
 .service-grid article,.service-grid article+article,.four-offers article,.four-offers article+article {padding:24px 0;border-left:0;border-bottom:1px solid var(--sb-rule)}
 .service-grid h3 {font-size:24px}
 .service-grid ul {font-size:16px}
 .about-copy p.large {font-size:22px}
 .contact {padding:36px 18px 40px;margin-top:40px}
 .contact-row {grid-template-columns:1fr;gap:24px}
 .contact h2 {font-size:clamp(40px,8vw,60px)}
 .contact-row p {font-size:17px}
 .offer-detail {margin-inline:18px;padding-inline:0}
 .offer-detail h1 {font-size:clamp(36px,8vw,54px);overflow-wrap:anywhere}
 .product-hero {height:auto}
 .product-hero figcaption,.interface-shot figcaption {font-size:12px}
 footer {padding:24px 18px;flex-wrap:wrap;align-items:flex-start;gap:12px}
 footer strong,footer>span {width:100%}
}
@media(max-width:420px) {
 header nav {width:100%;justify-content:space-between;gap:4px 12px}
 .button {font-size:14px;gap:12px;padding:12px 16px}
 .vendor-grid {grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 *,*::before,*::after {animation:none!important;transition:none!important}
}
/* Preserve intentional service-heading line breaks; hiding br joined words on mobile. */
@media(max-width:760px) {
  .service-grid h3 br {display:revert}
}