/* Shared logo collection: original artwork, with a static collection fallback. */
.logofolio-section { padding-top: 76px; padding-bottom: 76px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.logofolio-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:36px; }
.logofolio-heading .eyebrow { display:block; margin-bottom:18px; color:var(--muted); }
.logofolio-heading h2 { font-size:clamp(42px,6.7vw,94px); }
.logofolio-heading p { max-width:370px; color:#c8c3cf; font-size:17px; }
.logo-marquee { overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--purple) #101010; }
.logo-track, .logo-group { display:flex; width:max-content; }
.logo-group { flex:none; align-items:center; margin:0; padding:0; list-style:none; }
.logo-group li { flex:none; padding:0 12px; }
.logo-mark { display:flex; width:92px; height:96px; align-items:center; justify-content:center; }
.logo-mark img { width:76px; height:76px; object-fit:contain; }
.logo-marquee.is-animated { overflow:hidden; }
.is-animated .logo-track { animation:logo-drift 100s linear infinite; will-change:transform; }
.logo-marquee.is-paused .logo-track, .motion-paused .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state:paused; }
@media (hover:hover) { .logo-marquee:hover .logo-track { animation-play-state:paused; } }
@keyframes logo-drift { to { transform:translateX(-50%); } }
.logofolio-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:30px; }
.logo-pause { border:1px solid #77717f; border-radius:30px; padding:10px 18px; background:transparent; color:var(--paper); cursor:pointer; font-size:13px; }
.logo-pause:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
.logo-pause[hidden] { display:none; }
.logofolio-intro { padding-top:64px; padding-bottom:48px; }
.logofolio-intro .eyebrow { display:block; margin-bottom:24px; color:var(--muted); }
.logofolio-intro h1 { font-size:clamp(50px,7vw,100px); margin-bottom:28px; }
.logofolio-intro h1 span { color:var(--lime); }
.logofolio-intro p { max-width:700px; color:#c8c3cf; font-size:20px; }
.logo-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; padding-bottom:80px; }
.logo-card { min-width:0; scroll-margin-top:30px; }
.logo-card a { display:flex; align-items:center; justify-content:center; min-height:145px; }
.logo-card img { width:96px; height:96px; object-fit:contain; }
.logo-card a:focus-visible { outline-offset:-6px; }
.logofolio-context { padding-top:55px; padding-bottom:75px; border-top:1px solid var(--line); }
.logofolio-context h2 { font-size:clamp(34px,4vw,56px); margin-bottom:24px; }
.logofolio-context p { max-width:720px; color:#c8c3cf; margin-bottom:24px; }
.logofolio-context .profile-links { display:flex; flex-wrap:wrap; gap:22px; }
.footer-seo-links { display:flex; flex-wrap:wrap; gap:22px; padding:22px 4%; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
@media(max-width:900px) { .logo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:760px) {
  html { scroll-padding-top:145px; }
  .header { flex-wrap:wrap; gap:10px; padding:14px 5%; }
  .header .brand, .header .logo { width:96px; }
  .header .header-note { display:block; flex:1; text-align:right; }
  .header nav { width:100%; gap:8px 14px; justify-content:space-between; flex-wrap:wrap; font-size:12px; }
  .header nav > a { white-space:nowrap; }
  .header nav .nav-cta { padding:7px 10px; }
  .logofolio-intro h1 { font-size:clamp(40px,10.7vw,72px); }
  .logo-card { scroll-margin-top:145px; }
  .logofolio-heading { align-items:start; flex-direction:column; gap:22px; }
  .logofolio-section { padding-top:52px; padding-bottom:52px; }
  .logo-mark { width:76px; height:80px; }
  .logo-mark img { width:64px; height:64px; }
  .logo-group li { padding:0 8px; }
  .logo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .logo-card a { min-height:112px; }
  .logo-card img { width:72px; height:72px; }
  .logofolio-intro p { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .logo-marquee.is-animated { overflow-x:auto; }
  .is-animated .logo-track { animation:none; transform:none; }
  .logo-group[aria-hidden=true] { display:none; }
  .logo-pause { display:none; }
}
@media(max-width:380px) {
  .header nav { font-size:11px; gap:6px; }
  .header nav .nav-cta { padding:7px 8px; }
}