/* Unifuse AI site chrome for secondary pages. Mirrors the homepage tokens and band system (index.html is self-contained). 2026-09-14 */
:root {
  --ink:#050505; --ink-2:#0E0E10; --ink-3:#131316; --text:#FFFFFF; --text-2:#B8B6AD; --text-3:#8A8880;
  --hair:rgba(255,255,255,0.14); --hair-soft:rgba(255,255,255,0.08);
  --accent:#52D1DC; --accent-hover:#6FE0EA; --accent-active:#3DBAC6; --spark:#10B1C2; --lace:#F5F1E3;
  --sans:'Schibsted Grotesk',-apple-system,sans-serif;
  --gutter:clamp(20px,4.5vw,56px); --max:1240px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body { background:var(--ink); color:var(--text); font-family:var(--sans); line-height:1.5; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
::selection { background:rgba(82,209,220,0.30); color:#fff; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* topbar: same as the homepage, takes the tone of the band beneath it */
.topbar { position:sticky; top:0; z-index:10; background:rgba(5,5,5,0.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair-soft); transition:background-color 240ms ease, border-color 240ms ease; }
.topbar-row { display:flex; align-items:center; justify-content:space-between; padding:16px var(--gutter); }
.topbar img { height:26px; display:block; }
.topbar .cta { background:#FFFFFF; color:var(--ink); transition:background-color 240ms ease, color 240ms ease; }
.topbar .cta:hover { background:#E9E6DC; }
.topbar.light { background:rgba(255,255,255,0.9); border-bottom-color:rgba(11,11,12,0.1); }
.topbar.light .cta { background:var(--ink); color:#FFFFFF; }
.topbar.light .cta:hover { background:#26262B; }
.anchors { display:flex; gap:26px; padding:0 var(--gutter) 12px; overflow-x:auto; }
.anchors a { font-size:14px; color:var(--text-3); white-space:nowrap; transition:color 240ms ease; }
.anchors a:hover, .anchors a[aria-current="page"] { color:var(--accent); }
.topbar.light .anchors a { color:rgba(11,11,12,0.55); }
.topbar.light .anchors a:hover, .topbar.light .anchors a[aria-current="page"] { color:#0B0B0C; }

.cta { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 22px; background:var(--accent); color:var(--ink); font-family:var(--sans); font-size:14.5px; font-weight:600; border:0; border-radius:6px; cursor:pointer; transition:background-color 160ms cubic-bezier(0.2,0,0.2,1); }
.cta:hover { background:var(--accent-hover); }
.cta:active { background:var(--accent-active); transform:scale(0.985); }
.cta:disabled { opacity:.6; cursor:default; }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 22px; background:transparent; color:var(--b-fg, var(--text)); border:1px solid var(--b-hair-strong, var(--hair)); border-radius:6px; font-size:14.5px; font-weight:600; transition:border-color 160ms ease-out, color 160ms ease-out; }
.btn-ghost:hover { border-color:var(--b-accent, var(--accent)); }
/* on white the primary action is black with a teal ring on hover (DS) */
.band[data-tone="light"] .cta, .band[data-tone="warm"] .cta { background:var(--ink); color:#FFFFFF; box-shadow:0 0 0 0 var(--spark); transition:box-shadow 160ms ease-out; }
.band[data-tone="light"] .cta:hover, .band[data-tone="warm"] .cta:hover { background:var(--ink); box-shadow:0 0 0 2px var(--spark); }

/* bands */
.band { position:relative; background:var(--b-bg); color:var(--b-fg); transition:background-color 700ms ease, color 700ms ease; }
.band h1, .band h2, .band p, .band .eyebrow, .band .photo, .band .btn-ghost { transition:color 700ms ease, border-color 700ms ease, background-color 700ms ease; }
.band[data-tone="dark"]  { --b-bg:var(--ink);  --b-fg:#FFFFFF; --b-fg2:var(--text-2);        --b-hair:var(--hair);          --b-hair-strong:rgba(255,255,255,0.24); --b-label:var(--accent);       --b-accent:var(--accent); --b-accent-text:var(--accent); --b-accent-soft:rgba(82,209,220,0.14); --b-card:#0F1214; --b-card-2:#15191C; --b-field:#101315; }
.band[data-tone="light"] { --b-bg:#FFFFFF;     --b-fg:#0B0B0C; --b-fg2:rgba(11,11,12,0.66); --b-hair:rgba(11,11,12,0.16); --b-hair-strong:rgba(11,11,12,0.28);   --b-label:rgba(11,11,12,0.72); --b-accent:var(--spark);  --b-accent-text:#0A6E7A;   --b-accent-soft:rgba(16,177,194,0.14); --b-card:#F6F8FA; --b-card-2:#EEF3F6; --b-field:#FFFFFF; }
.band[data-tone="warm"]  { --b-bg:var(--lace); --b-fg:#0B0B0C; --b-fg2:rgba(11,11,12,0.66); --b-hair:rgba(11,11,12,0.16); --b-hair-strong:rgba(11,11,12,0.28);   --b-label:rgba(11,11,12,0.72); --b-accent:var(--spark);  --b-accent-text:#0A6E7A;   --b-accent-soft:rgba(16,177,194,0.14); --b-card:#FFFFFF; --b-card-2:#F6F8FA; --b-field:#FFFFFF; }
.band + .band::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:calc(100% - 2 * var(--gutter)); height:2px; z-index:1;
  background:linear-gradient(90deg, rgba(196,202,208,0) 0%, #B8BFC6 12%, #C9CFD5 50%, #B8BFC6 88%, rgba(196,202,208,0) 100%); }
.inner { max-width:var(--max); margin:0 auto; padding:clamp(48px,8vh,100px) var(--gutter); }
.eyebrow { font-size:14px; font-weight:600; color:var(--b-label); display:block; margin-bottom:16px; }
.band h1 { font-weight:500; font-size:clamp(38px,5.4vw,72px); letter-spacing:-0.04em; line-height:1.0; max-width:18ch; text-wrap:balance; }
.band h1 .hl { color:var(--accent); }
.lede { margin-top:22px; font-size:clamp(16px,1.4vw,19px); color:var(--b-fg2); max-width:60ch; line-height:1.55; }
.lede b { color:var(--b-fg); font-weight:600; }
.page-head .inner { padding-bottom:clamp(40px,6vh,64px); }
.page-head p.meta { margin-top:18px; font-size:14px; color:var(--b-fg2); }
.page-head p.meta b { color:var(--b-fg); font-weight:600; margin-right:6px; }

/* footer */
.footer { border-top:1px solid var(--hair-soft); padding:22px var(--gutter); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text-3); background:var(--ink); }
.footer nav { display:flex; gap:22px; }
.footer a:hover { color:var(--accent); }
.footer .agents::before { content:""; display:inline-block; width:5px; height:5px; border:1px solid currentColor; margin-right:7px; vertical-align:middle; }

/* motion (homepage systems, ported): pixel cursor lives in the whitespace only */
.px-layer { position:fixed; inset:0; pointer-events:none; z-index:50; opacity:0; transition:opacity 400ms ease; }
.px-layer.on { opacity:1; }
.px-layer.on.hush { opacity:0; transition:opacity 180ms ease; }
/* rise-in reveal: blocks marked .rise wait below the fold, then settle into place once ~25% is on screen */
.rise { opacity:0; transform:translateY(22px); transition:opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s); }
.rise.in { opacity:1; transform:none; }
.rise.photo { transform:translateY(22px) scale(1.03); }
.rise.photo.in { transform:none; }
/* headline settle: each word of the page-head h1 rises in on load, lede follows */
.page-head h1 .w { display:inline-block; opacity:0; transform:translateY(0.35em); animation:word-in 620ms cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--i) * 70ms); }
@keyframes word-in { to { opacity:1; transform:none; } }
.page-head .lede.rise { --d:.35s; }
@media (prefers-reduced-motion:reduce) { .rise, .rise.photo { opacity:1; transform:none; transition:none; } .page-head h1 .w { animation:none; opacity:1; transform:none; } .band { transition:none; } }