/* ───────────────────────────────────────────────────────────── Ċawla = the Maltese jackdaw. Charcoal body, silver nape, a pale ice-blue eye. That bird is the palette: cool paper, ink, silver, and one restrained ice accent. Deliberately cold and quiet, the opposite register to direct-response orange, because the buyer here is a clinic evaluating a supplier, not an impulse click. One accent, one radius scale, one theme per mode. Shared by the French page (/) and the English one (/en/). It was inlined in the head until 28/07; two languages meant two copies drifting apart, so it lives here now — one file, one design. ───────────────────────────────────────────────────────────── */ :root{ --paper:#f3f4f6; /* cool paper, never warm cream */ --surface:#ffffff; --sunk:#e9ebee; --ink:#111316; --ink-2:#3d434b; --mut:#6b7280; --line:#dcdfe4; --accent:#2d6b96; /* jackdaw eye, deepened for AA contrast */ --accent-soft:#e4eef5; --ok:#2f7d5b; --no:#a3454a; --r:14px; /* cards and frames */ --r-s:9px; /* inputs */ } @media (prefers-color-scheme: dark){ :root{ --paper:#101215; --surface:#171a1f; --sunk:#1d2126; --ink:#eceef1; --ink-2:#b9bfc8; --mut:#8b93a0; --line:#282d34; --accent:#8fc0dd; --accent-soft:#1b2a35; --ok:#5fbf92; --no:#e08b8f; } } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Geist',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3{line-height:1.08;letter-spacing:-.028em;font-weight:600} a{text-decoration:none;color:inherit} img{max-width:100%;height:auto;display:block} .wrap{max-width:1160px;margin:0 auto;padding:0 24px} .mono{font-family:'Geist Mono',ui-monospace,monospace} .eyebrow{font-family:'Geist Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} /* buttons: pill, one primary (ink), one secondary (outline) */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px; font-weight:600;font-size:.95rem;padding:14px 26px;white-space:nowrap;transition:transform .16s,background .16s,border-color .16s;border:1.5px solid transparent} .btn-solid{background:var(--ink);color:var(--paper)} .btn-solid:hover{transform:translateY(-1px)} .btn-solid:active{transform:scale(.985)} .btn-line{border-color:var(--line);color:var(--ink)} .btn-line:hover{border-color:var(--ink)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} /* ── header ─────────────────────────────────────────────── */ header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px} .logo{display:flex;align-items:center;gap:11px;font-weight:600;font-size:1.06rem;letter-spacing:-.01em} .logo span{white-space:nowrap} .logo .mark{width:30px;height:30px;flex:none} .nav nav{display:flex;gap:26px;font-size:.9rem;color:var(--mut)} .nav nav a:hover{color:var(--ink)} @media(max-width:900px){.nav nav{display:none}} /* language switch: a quiet pill, never competing with the CTA next to it. Kept outside