/* Brands share the site's navy surfaces and cyan technical accents. */
.brands-page, .brands-teaser {
  --brand-surface: #0d202c;
  --brand-border: #2c4655;
}
.nav a[aria-current='page'] { color: var(--accent); }
.nav a[aria-current='page']:not(.nav-cta):not(.lang-toggle) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

.brands-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 172px 0 62px;
  background: radial-gradient(ellipse at 86% 22%, #194b613d, transparent 55%), #07131c;
}
.brands-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .3;
  background-image: linear-gradient(#74e6ff0a 1px, transparent 1px), linear-gradient(90deg, #74e6ff0a 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent 20%, #000);
  pointer-events: none;
}
.brands-hero-layout {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: center;
  gap: 60px;
}
.brands-hero-layout > * { min-width: 0; }
.brands-hero .section-kicker { margin-bottom: 24px; }
.brands-hero .display-title {
  max-width: 820px;
  font-size: clamp(3.2rem, 5.35vw, 5.05rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.065em;
}
.brands-hero .display-title span { display: block; color: var(--accent); }
.brands-intro {
  max-width: 575px;
  margin-top: 25px;
  color: #b4c9d6;
  font-size: 15px;
  line-height: 1.9;
}
.brands-hero-links { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 24px; }
.brands-hero-links .text-link { color: #c5e8f2; }
.brands-hero-links .text-link:hover { color: var(--accent); }
.brands-orb {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid #74e6ff19;
  border-radius: 50%;
  background: radial-gradient(circle, #74e6ff10 0 20%, transparent 65%), linear-gradient(90deg, transparent calc(50% - .5px), #74e6ff22 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), #74e6ff22 50%, transparent calc(50% + .5px));
  box-shadow: 0 0 0 27px #74e6ff03, 0 0 70px #74e6ff08;
  pointer-events: none;
}
.brands-orb::before, .brands-orb::after, .brands-orb-ring {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid #74e6ff45;
}
.brands-orb::before {
  inset: 11%;
  border-top-color: #b1f3ff;
  border-left-color: transparent;
  box-shadow: 0 -5px 25px #74e6ff05;
}
.brands-orb::after { inset: 25%; border-style: dashed; border-color: #74e6ff46; }
.brands-orb-ring { inset: 37%; border: 2px solid #74e6ff30; border-right-color: #a9f2ff; }
.brands-orb-core, .brands-orb-wordmark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d8f7ff;
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -.04em;
}
html.brands-motion-ready.motion-ready .brands-orb::before { animation: brands-orbit-turn 55s linear infinite; }
html.brands-motion-ready.motion-ready .brands-orb::after { animation: brands-orbit-turn 80s linear infinite reverse; }

/* Equal ribbon groups make the midpoint loop exact. The fallback stays still. */
.brands-ribbon-shell { padding: 22px 0 0; border-block: 1px solid #2c4655; background: var(--brand-surface, #0d202c); }
.brands-ribbon-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1280px, calc(100% - 96px));
  margin: 0 auto 10px;
}
.brands-ribbon-top > :not(.brands-pause) { color: #94b2c3; font: 500 10px/1.6 ui-monospace, 'Cascadia Code', Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.brands-pause {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #365565;
  border-radius: 6px;
  color: #cae5f1;
  background: #0d202c;
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}
html.brands-motion-ready .brands-pause { display: inline-flex; }
.brands-pause:hover { border-color: #74e6ff85; color: var(--accent); }
.brands-pause:disabled { cursor: default; color: #91adbc; }
.brands-pause svg { width: 14px; height: 14px; flex-basis: 14px; }
.brands-ribbon {
  overflow: hidden;
  padding-bottom: 15px;
  background: var(--brand-surface, #0d202c);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.brands-ribbon-track { display: flex; width: max-content; background: var(--brand-surface, #0d202c); }
.brands-ribbon-group { display: flex; flex: 0 0 auto; align-items: center; gap: 24px; padding-right: 24px; background: var(--brand-surface, #0d202c); }
.brands-ribbon-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 172px;
  width: 172px;
  min-height: 110px;
  padding: 10px 16px;
  background: var(--brand-surface, #0d202c);
}
html.brands-motion-ready.motion-ready .brands-ribbon-track { animation: brands-ribbon-travel 76s linear infinite; }
.brands-ribbon:focus-within .brands-ribbon-track { animation-play-state: paused; }

/* Sprite dimensions and source positions remain unchanged for exact cropping. */
.brand-logo-art {
  display: inline-block;
  flex: 0 0 auto;
  width: 98px;
  min-width: 98px;
  height: 82px;
  min-height: 82px;
  background-repeat: no-repeat;
  background-image: url('images/brands/brand-reference.jpg');
  background-size: 1600px 1056px;
  filter: grayscale(1) invert(1) brightness(3);
  mix-blend-mode: screen;
}
.brand-logo-stage img, .brands-ribbon-mark img {
  width: auto;
  max-width: min(140px, 100%);
  height: auto;
  max-height: 90px;
  object-fit: contain;
  filter: grayscale(1) invert(1) brightness(3);
  mix-blend-mode: screen;
}
.brand-logo-stage img.brand-logo-transparent, .brands-ribbon-mark img.brand-logo-transparent {
  filter: grayscale(1) brightness(0) invert(1);
  mix-blend-mode: normal;
}
.brand-logo-pair { display: grid; width: 100%; justify-items: center; gap: 9px; }
.brand-logo-pair img { max-width: min(120px, 100%); max-height: 40px; }
.brands-directory { padding: 94px 0 98px; background: #07131c; }
.brands-directory-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 0 75px;
  margin-bottom: 40px;
}
.brands-directory-heading .section-kicker { grid-column: 1 / -1; margin-bottom: 22px; }
.brands-directory-heading h2 { max-width: 640px; font-size: clamp(2.2rem, 3.2vw, 3rem); font-weight: 600; letter-spacing: -.055em; }
.brands-directory-heading > p:not(.section-kicker) { max-width: 420px; color: #a9bfcc; font-size: 14px; line-height: 1.9; }
.brands-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.brand-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--brand-border, #2c4655);
  border-radius: 10px;
  background: var(--brand-surface, #0d202c);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.brand-card:hover, .brand-card:focus-within { border-color: #74e6ff8a; box-shadow: 0 12px 28px #0003; }
.brand-logo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 130px;
  padding: 14px 9px;
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-surface, #0d202c);
}
.brand-name { display: block; color: #c9dce7; font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.brand-card > .brand-name { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 9px; border-top: 1px solid #294451; }
html.brands-motion-ready.motion-ready:not(.motion-paused):not(.motion-reduced) .brand-card:hover { transform: translateY(-3px); }

.brands-contact { padding-top: 0; background: #07131c; }
.brands-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 44px 48px;
  border: 1px solid #365c6e;
  border-radius: 14px;
  background: radial-gradient(ellipse at 85% 10%, #74e6ff0e, transparent 70%), #0d2330;
}
.brands-contact-card > div { min-width: 0; max-width: 745px; }
.brands-contact-card .section-kicker { margin-bottom: 17px; }
.brands-contact-card h2 { font-size: clamp(1.8rem, 2.8vw, 2.7rem); font-weight: 600; line-height: 1.2; letter-spacing: -.045em; }
.brands-contact-card p:not(.section-kicker) { margin-top: 18px; max-width: 600px; color: #acc7d6; font-size: 14px; line-height: 1.9; }
.brands-contact-card .button { flex: 0 0 auto; }

/* The home preview leads into the complete manufacturer directory. */
.brands-teaser { border-bottom: 1px solid #294451; background: radial-gradient(ellipse at 90% 20%, #194b6133, transparent 60%), #091923; }
.brands-teaser-card { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 72px; }
.brands-teaser-copy { min-width: 0; }
.brands-teaser .section-kicker { margin-bottom: 24px; }
.brands-teaser .display-title { font-size: clamp(2.1rem, 3.6vw, 3.5rem); }
.brands-teaser .brands-intro { font-size: 14px; }
.brands-teaser .button { margin-top: 27px; }
.brands-teaser-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.brands-teaser-logos .brand-logo-stage {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 155px;
  padding: 15px 7px;
  border: 1px solid #2e4d5e;
  border-radius: 10px;
}
.brands-teaser-logos .brand-name { font-size: 11px; }
.brands-teaser-logos img { max-width: min(140px, 100%); }

@keyframes brands-ribbon-travel { to { transform: translateX(-50%); } }
@keyframes brands-orbit-turn { to { rotate: 360deg; } }

@media (min-width: 769px) and (max-width: 1180px) {
  .header-container { gap: 18px; }
  .nav { gap: clamp(8px, 1.3vw, 15px); }
  .nav a { font-size: 12px; }
  .nav .lang-toggle { margin-left: 0; padding-inline: 8px; }
  .nav .nav-cta { gap: 9px; padding-inline: 12px; font-size: 11px; }
}
@media (min-width: 769px) and (max-width: 940px) {
  .header-container { gap: 13px; }
  .logo img { height: 39px; }
  .nav { gap: 9px; }
  .nav a { font-size: 11px; }
  .nav .nav-cta { gap: 6px; padding-inline: 9px; font-size: 10px; }
  .nav .lang-toggle { padding-inline: 6px; font-size: 10px; }
}
@media (max-width: 1100px) {
  .brands-hero-layout { gap: 34px; }
  .brands-orb { width: min(300px, 100%); }
  .brands-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .brands-ribbon-top { width: calc(100% - 64px); }
  .brands-directory-heading { gap: 0 45px; }
  .brands-contact-card { padding: 36px; gap: 30px; }
  .brands-teaser-card { gap: 38px; }
}
@media (max-width: 960px) {
  .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brands-hero-layout { grid-template-columns: 1.5fr .5fr; gap: 24px; }
  .brands-orb { width: 230px; max-width: 100%; }
  .brands-directory-heading { grid-template-columns: 1fr 1fr; }
  .brands-contact-card { align-items: flex-start; flex-direction: column; }
  .brands-teaser-card { grid-template-columns: 1fr 1fr; gap: 30px; }
  .brands-teaser-logos { gap: 8px; }
  .brands-teaser-logos .brand-logo-stage { min-height: 140px; padding-inline: 4px; }
}
@media (max-width: 768px) {
  .brands-hero { padding: 134px 0 48px; }
  .brands-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .brands-hero .display-title { max-width: 640px; font-size: clamp(3rem, 8vw, 4.3rem); }
  .brands-intro { font-size: 14px; }
  .brands-orb { width: 210px; justify-self: start; margin-left: 15px; }
  .brands-ribbon-top { width: calc(100% - 40px); }
  .brands-ribbon-group { gap: 16px; padding-right: 16px; }
  .brands-ribbon-mark { flex-basis: 148px; width: 148px; padding-inline: 6px; }
  .brands-directory { padding-block: 70px; }
  .brands-directory-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 32px; }
  .brands-directory-heading .section-kicker { margin-bottom: 0; }
  .brands-directory-heading h2 { font-size: clamp(2rem, 5.4vw, 2.8rem); }
  .brands-directory-heading > p:not(.section-kicker) { max-width: 560px; font-size: 13px; }
  .brands-grid { gap: 12px; }
  .brand-logo-stage { min-height: 124px; }
  .brands-contact-card { padding: 32px; }
  .brands-contact-card p:not(.section-kicker) { font-size: 13px; }
  .brands-teaser-card { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .brands-teaser-copy { max-width: 600px; }
  .brands-teaser-logos { gap: 12px; }
  .brands-teaser-logos .brand-logo-stage { min-height: 150px; padding: 15px 7px; }
}
@media (max-width: 480px) {
  .brands-hero { padding: 122px 0 42px; }
  .brands-hero .section-kicker { margin-bottom: 20px; }
  .brands-hero .display-title { font-size: clamp(2.5rem, 10vw, 3.3rem); letter-spacing: -.055em; }
  .brands-intro { margin-top: 22px; font-size: 13px; }
  .brands-hero-links { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 19px; }
  .brands-hero-links .text-link { width: 100%; justify-content: space-between; }
  .brands-orb { width: 170px; margin-block: 5px 0; }
  .brands-ribbon-shell { padding-top: 16px; }
  .brands-ribbon-top { gap: 10px; margin-bottom: 7px; }
  .brands-ribbon-top > :not(.brands-pause) { max-width: 160px; font-size: 9px; letter-spacing: .07em; }
  .brands-pause { padding-inline: 10px; font-size: 10px; }
  .brands-ribbon { mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
  .brands-ribbon-mark { flex-basis: 132px; width: 132px; }
  .brands-ribbon-mark img { max-width: 120px; }
  .brands-directory { padding-block: 58px; }
  .brands-directory-heading { gap: 18px; }
  .brands-directory-heading h2 { font-size: clamp(1.9rem, 8.5vw, 2.35rem); }
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brand-logo-stage { min-height: 114px; padding-inline: 5px; }
  .brand-logo-stage img { max-width: min(140px, 100%); max-height: 82px; }
  .brand-card > .brand-name { min-height: 43px; padding: 10px 6px; font-size: 11px; }
  .brands-contact-card { padding: 27px 22px; gap: 25px; border-radius: 11px; }
  .brands-contact-card h2 { font-size: 1.8rem; }
  .brands-contact-card .button { width: 100%; justify-content: space-between; }
  .brands-teaser .display-title { font-size: clamp(2rem, 8.7vw, 2.5rem); }
  .brands-teaser .button { width: 100%; justify-content: space-between; }
  .brands-teaser-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brands-teaser-logos .brand-logo-stage { min-height: 142px; padding-inline: 5px; }
}

/* Pausing stops hover travel too; OS and shared controls cover every new effect. */
html.motion-paused .brands-ribbon-track, body.motion-paused .brands-ribbon-track { animation-play-state: paused !important; }
html.motion-paused .brand-card, body.motion-paused .brand-card,
html.motion-reduced .brand-card, body.motion-reduced .brand-card { transform: none !important; transition: none !important; }
body.motion-paused .brands-orb::before, body.motion-paused .brands-orb::after { animation-play-state: paused !important; }
html:not(.brands-motion-ready) .brands-ribbon-track,
html.motion-reduced .brands-ribbon-track, body.motion-reduced .brands-ribbon-track { animation: none !important; transform: none; }
html.motion-reduced .brands-orb::before, html.motion-reduced .brands-orb::after,
body.motion-reduced .brands-orb::before, body.motion-reduced .brands-orb::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .brands-ribbon-track, .brands-orb::before, .brands-orb::after { animation: none !important; transform: none; }
  .brand-card { transform: none !important; transition: none !important; }
}