/* Stemvo logo (Dean's two-ribbon S, shaded) + ribbon CTA buttons. 30.10.2026 */
html body .logo{display:flex;align-items:center;gap:9px;text-decoration:none}
html body .logo-mark{display:block;height:38px;width:auto;flex:none}
html body .logo-wordwrap{display:block;overflow:hidden;max-width:120px;transition:max-width .45s var(--ease),opacity .3s var(--ease),transform .45s var(--ease)}
html body .logo-wordmark{display:block;height:17px;width:auto;max-width:none}
html body .footer .logo-mark{height:44px}
html body .footer .logo-wordmark{height:20px}
html body .footer .logo-wordwrap{max-width:140px}

/* aubergine CTAs (all of them): plain pill at rest; on hover the pill fades into the top ribbon of the logo
   (rib-l/m/r.png = Dean's ribbon cut from the logo, laid flat; the ends keep their exact shape, the middle stretches).
   Touch screens: once, when the button first comes into view. */
html body .v5 .btn-signal,html body .btn-solid{--h:44px;position:relative;isolation:isolate;overflow:visible;transition:background-color .35s cubic-bezier(.2,.7,.1,1),color .2s}
html body .v5 .btn-signal{background:var(--a1)}
html body .btn-solid{background:var(--a1-ink)}
html body .v5 .btn-signal.v5-btn-lg{margin-bottom:14px}
/* the margin above leaves room for the hover ribbon; keep neighbouring buttons from stretching to it (Dean 30.10 23:17: CTA looked smaller than 'White label') */
html body .v5 :has(> .btn-signal.v5-btn-lg){align-items:flex-start}
html body .v5 .btn-signal::before,html body .btn-solid::before{content:"";position:absolute;z-index:-1;left:-2px;right:-2px;top:-1px;height:calc(var(--h) * 1.417);pointer-events:none;
  --lw:calc(var(--h) * 1.026);--rw:calc(var(--h) * .487);
  background:url("rib-l.png") 0 0/var(--lw) 100% no-repeat,url("rib-r.png") 100% 0/var(--rw) 100% no-repeat,
    url("rib-m.png") calc(var(--lw) - 2px) 0/calc(100% - var(--lw) - var(--rw) + 4px) 100% no-repeat;
  opacity:0;transition:opacity .35s cubic-bezier(.2,.7,.1,1)}
@media (hover:hover){html body .v5 .btn-signal:hover,html body .btn-solid:hover{background:transparent}html body .v5 .btn-signal:hover::before,html body .btn-solid:hover::before{opacity:1}}
html body .v5 .btn-signal:focus-visible,html body .btn-solid:focus-visible{background:transparent}html body .v5 .btn-signal:focus-visible::before,html body .btn-solid:focus-visible::before{opacity:1}
@media (max-width:720px){html body .logo-mark{height:34px}html body .logo-wordmark{height:15px}html body .logo-wordwrap{max-width:100px}html body .v5 .btn-signal{margin-bottom:20px}}
@media (prefers-reduced-motion:reduce){html body .logo-wordwrap,html body .v5 .btn-signal,html body .btn-solid,html body .v5 .btn-signal::before,html body .btn-solid::before{transition:none}}
/* mobile menu CTA: white text on the aubergine button (nav link colour was overriding it) */
html body .nav .nav-mobile-cta .btn-solid,html body .nav .nav-mobile-cta .btn-solid:hover{color:#fff;justify-content:center;width:100%}
/* footer brand line */
html body .foot2-tag{margin:14px 0 0;font:600 18px/1.3 var(--sans);letter-spacing:-.02em;color:var(--a1)}
/* hero: two-tone H1, the slogan is the grey second line at the same size */
html body .v5 .v5-hero h1 .dim{display:block}

/* consent box (Clarity cookies). Accept and Reject: same size, side by side, both one click (Dean 30.10 23:53) */
html body .consent{position:fixed;z-index:60;right:20px;bottom:20px;width:min(440px,calc(100% - 40px));padding:20px 20px 18px;background:#fff;color:var(--ink,#14121a);border:1px solid rgba(20,18,26,.08);border-radius:18px;box-shadow:0 20px 60px -18px rgba(40,20,60,.35);font:400 14px/1.5 var(--sans)}
html body .consent[hidden]{display:none}
html body .consent-copy strong{display:block;margin-bottom:6px;font:600 16px/1.3 var(--sans);letter-spacing:-.01em}
html body .consent-copy p{margin:0;color:var(--muted,#5b5866);font-size:13.5px}
html body .consent-copy a{color:var(--ink,#14121a);text-decoration:underline;text-underline-offset:3px}
html body .consent-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
html body .consent-btns button{min-height:46px;padding:0 16px;border-radius:999px;font:600 14.5px/1 var(--sans);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
html body .consent-yes{background:var(--a1);border:1px solid var(--a1);color:#fff}
html body .consent-yes:hover{background:var(--a1-ink);border-color:var(--a1-ink)}
html body .consent-no{background:#fff;border:1px solid var(--ink,#14121a);color:var(--ink,#14121a)}
html body .consent-no:hover{background:rgba(20,18,26,.05)}
html body .consent-btns button:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
@media (max-width:720px){html body .consent{right:10px;left:10px;bottom:10px;width:auto;padding:16px 16px 14px;border-radius:16px}html body .consent-copy p{font-size:13px}}
/* About: the people behind Stemvo */
html body .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
html body .person{display:flex;gap:18px;align-items:flex-start;padding:22px;background:#fff;border:1px solid var(--line,#e6e3ec);border-radius:18px}
html body .person img{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover}
html body .person h3{margin:0 0 4px;font:600 18px/1.3 var(--sans)}
html body .person-role{margin:0 0 10px;color:var(--a1);font:500 13.5px/1.4 var(--sans)}
html body .person p{margin:0 0 10px}
html body .person a{font-weight:500}
@media (max-width:760px){html body .people{grid-template-columns:1fr}html body .person{flex-direction:column}}