/* ================= "the people behind it": on every ad landing page, just before the form =================
   Melker and Emil, 2026-10-15: the landing pages must not feel faceless; "it must feel safe and that you're buying from us". Emil's
   idea, taken from /bakom: show the people. The whole team with faces, names and roles, and how to reach us. Loaded after the page's
   own CSS, which can set the variables below (and restyle .us h2 in its own look). The markup is the same on every page; copy it. */
.us{background:var(--us-bg,var(--bg));color:var(--us-fg,var(--fg));padding:88px 0 92px}
.us-in{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.us-kick{font-family:var(--us-label,var(--label));font-weight:800;font-size:15px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--us-accent,var(--accent))}
.us h2{font-family:var(--us-display,var(--display));font-size:clamp(42px,6.6vw,88px);line-height:.94;margin:14px 0 20px;max-width:15ch}
.us-lead{font-size:clamp(19px,1.8vw,23px);line-height:1.4;max-width:46ch;margin:0}
.us-team{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(9,1fr);gap:22px 14px}
.us-team img,.us-team .nf{display:block;width:100%;height:auto;aspect-ratio:6/7;object-fit:cover;border-radius:var(--us-radius,16px)}
.us-team .nf{display:grid;place-items:center;background:var(--us-accent,var(--accent));color:var(--us-bg,var(--bg));font-family:var(--us-display,var(--display));font-size:clamp(28px,3vw,40px)}
.us-team b{display:block;margin-top:10px;font-family:var(--us-label,var(--label));font-weight:800;font-size:17px;line-height:1.15}
.us-team b span{display:block}   /* first name over surname: the names are set the same way in every column width */
.us-team li>span{display:block;margin-top:3px;font-size:14px;line-height:1.25;opacity:.78}
.us-team .nw{white-space:nowrap}   /* Co-Founder never breaks at its hyphen */
.us-reach{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin:44px 0 0;font-family:var(--us-label,var(--label));font-weight:700;font-size:17px;line-height:1.3}
.us-reach a{color:inherit;text-underline-offset:4px}
.us-reach .more{color:var(--us-accent,var(--accent))}
@media (max-width:1099px){.us-team{grid-template-columns:repeat(5,1fr)}}
@media (max-width:640px){.us{padding:68px 0 72px}.us-team{grid-template-columns:repeat(3,1fr);gap:18px 10px;margin-top:34px}
  .us-team b{font-size:15px}.us-team li>span{font-size:12.5px}.us-reach{flex-direction:column;align-items:flex-start;gap:10px;margin-top:34px}}

/* the bar with the logo stays at the top once the page is scrolled, so the way back to the start page is always there (lp.js adds .solid) */
.top{position:fixed;transition:background .3s,padding .3s,box-shadow .3s}
.top.solid{background:var(--bar-bg,var(--bg));padding-top:10px;padding-bottom:10px;box-shadow:0 1px 0 var(--bar-line,rgba(127,127,127,.25))}
.top .home{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.top .home small{font-family:var(--us-label,var(--label));font-weight:700;font-size:13px;line-height:1;letter-spacing:.08em;text-transform:uppercase;opacity:.75;
  border-left:1px solid currentColor;padding-left:12px}
@media (max-width:640px){.top .home small{display:none}}