/* 3R Company — brands section stylesheet (isolated, self-contained)
   Task: 3r_company_brands_responsive_component
   Parent: build_3r_company_magazin_zapchastey_kontakt_whol
   Scope: brands section only. No global selectors, no element resets outside
   .brands, no external references. Targets the integrated page markup
   (.brands, .brands-inner, .brand-grid, .brand-card, .all-brands) plus the
   isolated harness markup (.brand-head, .brand-sub, .brand-more).
   Tokens: section bg #e8f0f2, ink #07141e, muted #687b86, accent #0b7891,
   card ink #23404f (desktop master). Arial/system sans.
   Geometry — 1440px: full-width section, content 1280px inside 80px gutters,
   five equal 230px cards, 20px column gap, 17px row gap, 48px card height.
   768px: 48px gutters, 3-column grid, no overflow.
   390px (breakpoint <=767px): 24px gutters, 2 columns, 12px gap, card cap
   163px, 48px height, no overflow.
   Typography: heading 30px desktop / 24px mobile (line-height 1.2, weight 700),
   card labels 16px. Includes focus-visible outline >=2px and
   prefers-reduced-motion.
*/
/* Integrated artifact revision: mobile navigation and favicon correction. */
.brands{
  width:100%;
  background:#e8f0f2;
  padding:64px 80px 60px;
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.2;
  color:#07141e;
  box-sizing:border-box;
}
.brands *,.brands *::before,.brands *::after{box-sizing:border-box}
.brands-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:1280px;
  margin:0 auto;
}
.brands-inner > h2,
.brands h2{
  margin:0;
  font-size:30px;
  font-weight:700;
  line-height:1.2;
  color:#07141e;
}
.brands-inner > p,
.brand-sub{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.2;
  color:#687b86;
}
.brand-head{
  width:100%;
  max-width:1280px;
}
.brand-head h2{
  margin:0;
  font-size:30px;
  font-weight:700;
  line-height:1.2;
  color:#07141e;
}
.brand-grid{
  display:grid;
  grid-template-columns:repeat(5,230px);
  column-gap:20px;
  row-gap:17px;
  justify-content:start;
  width:100%;
  max-width:1280px;
  margin:43px 0 0;
}
.brand-card{
  display:flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 12px;
  border-radius:8px;
  background:#fff;
  color:#23404f;
  font-size:16px;
  font-weight:400;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  transition:transform 160ms ease,box-shadow 160ms ease;
}
a.brand-card{
  width:100%;
}
.brand-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(7,20,30,.12);
}
.brand-card:focus-visible,
.all-brands:focus-visible,
.brand-more:focus-visible{
  outline:2px solid #0b7891;
  outline-offset:2px;
}
.all-brands,
.brand-more{
  display:inline-block;
  margin:28px 0 0;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  color:#0b7891;
  text-decoration:none;
  transition:color 160ms ease;
}
.all-brands:hover,
.brand-more:hover{color:#07141e}
/* Tablet: 768px — 48px gutters, 3-column grid, 24px heading, no overflow.
   The task's mobile heading gate (24px) applies at the 768px viewport while
   the 3-column layout holds; the phone layout stays at the sole <=767px
   breakpoint. max-width:768px covers both gates in one query. */
@media (max-width:768px){
  .brands{padding:64px 48px 60px}
  .brands-inner > h2,
  .brands h2,
  .brand-head h2{font-size:24px}
  .brand-grid{
    grid-template-columns:repeat(3,1fr);
    column-gap:16px;
    row-gap:16px;
  }
}
/* Phone: breakpoint <=767px — 24px gutters, 2 columns, 12px gap, 163px cap */
@media (max-width:767px){
  .brands{padding:64px 24px 60px}
  .brands-inner{width:100%}
  .brands-inner > h2,
  .brand-head h2{font-size:24px}
  .brand-grid{
    grid-template-columns:repeat(2,1fr);
    column-gap:12px;
    row-gap:12px;
  }
  .brand-card{
    max-width:163px;
    justify-self:center;
    height:48px;
  }
}
@media (prefers-reduced-motion:reduce){
  .brand-card,.all-brands,.brand-more{transition:none}
  .brand-card:hover{transform:none;box-shadow:none}
}