:root{
  --bg: #ffffff;
  --ink: #111;
  --tile-gap: 18px;
  --max-grid-width: 1400px; /* caps at 5 columns on big screens */
  color-scheme: light;
}

/* Reset-ish */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  background-color: #ffffff !important;
}

/* Header */
.site-header{
  display: grid;
  place-items: center;
  padding: 36px 16px 10px;
}

/* BIGGER pinkchild logo */
.llc-logo{
  width: min(80vw, 800px);   /* make it large; scales on small screens */
  height: auto;
  display: block;
  margin-bottom: 80px;
}

/* Brand grid */
.brand-grid{
  width: 96vw;
  margin: 0 auto;
  padding: 0 16px 56px;
  display: grid;
  gap: var(--tile-gap);
  grid-template-columns: repeat(5, 1fr); /* up to 5 across */
}

/* Square tiles with no box, no shadow, no hover effects */
.brand-card{
  display: grid;
  place-items: center;
  background: transparent;   /* no box */
  border: 0;                 /* no border */
  border-radius: 0;          /* no rounding */
  box-shadow: none;          /* no shadow */
  aspect-ratio: 1 / 1;       /* perfect square */
  overflow: hidden;
  transition: none;          /* kill hover transitions */
}

.brand-card:hover{
  transform: none;
  box-shadow: none;
}

.brand-card img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* your 2048×2048 logos fit cleanly */
  display: block;
}

/* Screen reader only text (unchanged) */
.sr-only{
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important;
}

/* Responsive column counts */
@media (prefers-color-scheme: dark) {
  html, body { background-color: #ffffff !important; }
}

@media (max-width: 1200px){
  .brand-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px){
  .brand-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px){
  .brand-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .brand-grid{ grid-template-columns: 1fr; }
}