/* This stylesheet applies only to the Our Brands page. */
.brands-page { overflow-wrap: break-word; }
.brands-page .page-gutter { padding-inline: max(24px, calc((100% - 1240px) / 2)); }
.brands-page .page-inner { max-width: 1240px; margin-inline: auto; }
.brands-page .skip-link { position: absolute; left: 20px; top: -80px; z-index: 20; padding: 12px 18px; background: var(--navy); color: var(--white); }
.brands-page .skip-link:focus { top: 12px; }
.brands-page a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.brands-page .nav-links [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold); }
.brands-page .brands-intro { padding-block: 32px 56px; background: var(--canvas); }
.brands-page .breadcrumb { display: flex; gap: 12px; margin-bottom: 42px; font-size: 14px; color: var(--gray); }
.brands-page .breadcrumb a { color: var(--slate); text-underline-offset: 4px; }
.brands-page .eyebrow { letter-spacing: 0; font-size: 14px; color: var(--slate); }
.brands-page h1 { font-size: 80px; line-height: 1.06; text-transform: none; }
.brands-page .brands-lead { margin: 26px 0 20px; font-family: var(--display); font-size: 34px; line-height: 1.16; color: var(--navy); }
.brands-page .brands-summary { max-width: 780px; margin: 0; font-size: 18px; color: var(--slate); }
.brands-page .brand-index { padding-block: 24px; border-block: 1px solid var(--rule); }
.brands-page .index-label { margin: 0 0 14px; font-size: 14px; color: var(--gray); }
.brands-page .brand-index ul { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 0; padding: 0; list-style: none; }
.brands-page .brand-index a { display: inline-block; color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--gold); font-size: 15px; padding-block: 4px; }
.brands-page .company-profile { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; padding-block: 64px; border-bottom: 1px solid var(--rule); scroll-margin-top: 110px; }
.brands-page .company-profile:last-child { border-bottom: 0; }
.brands-page .company-heading, .brands-page .company-body { min-width: 0; }
.brands-page .company-category { display: flex; gap: 18px; margin: 0 0 20px; color: var(--slate); font-size: 14px; font-weight: 700; }
.brands-page .company-number { color: var(--gray); font-weight: 400; }
.brands-page .company-profile h2 { max-width: 450px; font-size: 44px; line-height: 1.1; }
.brands-page .company-body > p:first-child { margin: 0; color: var(--gray); font-size: 18px; }
.brands-page .company-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 30px; padding-top: 20px; border-top: 1px solid var(--rule); }
.brands-page .company-facts dt { margin-bottom: 8px; color: var(--gray); font-size: 14px; }
.brands-page .company-facts dd { margin: 0; color: var(--slate); font-size: 16px; }
.brands-page .company-website { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 18px; border: 1px solid var(--slate); color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.brands-page .company-website:hover { background: var(--navy); color: var(--white); }
.brands-page .website-pending { margin: 0; padding-block: 12px; color: var(--gray); font-size: 15px; font-style: italic; }
.brands-page .portfolio-materials { margin: 0; height: 230px; overflow: hidden; }
.brands-page .portfolio-materials img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; }
.brands-page .portfolio-answers { background: var(--canvas); padding-block: 64px; }
.brands-page .answers-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
.brands-page .portfolio-answers h2 { font-size: 44px; line-height: 1.1; }
.brands-page .approach-link { display: inline-block; margin-top: 24px; color: var(--slate); text-underline-offset: 6px; }
.brands-page .answer-list article + article { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule); }
.brands-page .answer-list h3 { font-size: 23px; line-height: 1.25; }
.brands-page .answer-list p { margin: 12px 0 0; color: var(--gray); font-size: 17px; }
.brands-page .footer-home { color: inherit; text-decoration: none; }
@media (max-width: 920px) {
  .brands-page .company-profile, .brands-page .answers-layout { gap: 36px; }
  .brands-page h1 { font-size: 64px; }
  .brands-page .company-profile h2, .brands-page .portfolio-answers h2 { font-size: 36px; }
}
@media (max-width: 680px) {
  .brands-page .page-gutter { padding-inline: 24px; }
  .brands-page .nav-links a:not(.nav-cta) { display: inline-flex; padding-block: 6px; }
  .brands-page .nav-links { gap: 8px 18px; }
  .brands-page .nav-cta { padding: 6px 10px; }
  .brands-page .brands-intro { padding-block: 24px 38px; }
  .brands-page .breadcrumb { margin-bottom: 30px; }
  .brands-page h1 { font-size: 48px; }
  .brands-page .brands-lead { font-size: 28px; }
  .brands-page .brands-summary { font-size: 17px; }
  .brands-page .brand-index ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .brands-page .company-profile, .brands-page .answers-layout { grid-template-columns: 1fr; gap: 24px; }
  .brands-page .company-profile { padding-block: 40px; scroll-margin-top: 24px; }
  .brands-page .company-category { margin-bottom: 12px; }
  .brands-page .company-profile h2, .brands-page .portfolio-answers h2 { font-size: 34px; }
  .brands-page .company-body > p:first-child { font-size: 17px; }
  .brands-page .company-facts { gap: 20px; }
  .brands-page .company-website { max-width: 100%; }
  .brands-page .portfolio-materials { height: 180px; }
  .brands-page .portfolio-answers { padding-block: 40px; }
}
@media (max-width: 360px) {
  .brands-page .company-facts { grid-template-columns: 1fr; }
  .brands-page h1 { font-size: 44px; }
  .brands-page .company-profile h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.brands-page) { scroll-behavior: auto; }
  .brands-page .company-website { transition: none; }
}