/* Northern Performance about page: story opener, stat strip, and brand wall.
   Loaded per-section Dawn-style: each np-about-* section includes this file via
   {{ 'np-about.css' | asset_url | stylesheet_tag }}; browsers dedupe the href.
   The np-visit band closing the page carries its own np-services.css.
   Palette tokens come from np-header.css :root (global); no new token roots here.
   The greys outside the tokens (#9a9a9a captions) are design values with no
   token equivalent.
   Structural layout (stepped containers 1300/1000/768, the story grid, the
   brand grid columns) is locked, never a merchant setting. */

/* ---------- stepped container ---------- */
/* Mirrors the np-header.css/np-home.css container steps so the page lines up
   with the header; np-home.css is not loaded on the about page. */
.np-container {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 990px) {
  .np-container {
    max-width: 768px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1000px) {
  .np-container {
    max-width: 1000px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1300px) {
  .np-container {
    max-width: 1300px;
  }
}

/* ---------- section heading: sitewide heavy rule + short red tick ---------- */
.np-about__head {
  padding-top: 46px;
}

.np-about__head h2,
.np-about__head h1 {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-charcoal);
}



/* ================= np-about-story: opener ================= */
.np-about-story {
  padding-top: 44px;
}

.np-about-story h1 {
  margin: 0 0 16px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--np-charcoal);
  line-height: 1.15;
}

.np-about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.np-about-story__sub {
  margin: 0 0 12px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--np-charcoal);
}

.np-about-story__copy p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--np-ink-soft);
}

.np-about-story__copy p + p {
  margin-top: 14px;
}

.np-about-story__shot {
  height: 100%;
  min-height: 320px;
  max-height: 420px;
  border-radius: 6px;
  overflow: hidden;
}

.np-about-story__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ================= np-about-stats: the story's numbers ================= */
.np-about-stats {
  background: var(--np-surface);
  border-top: 1px solid var(--np-border);
  border-bottom: 1px solid var(--np-border);
  margin-top: 48px;
}

.np-about-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 32px;
  padding-top: 30px;
  padding-bottom: 32px;
}

.np-about-stat__n {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--np-charcoal);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* the tiny left gap serves "3,000 sq ft" while keeping "40+" reading as one glyph */
.np-about-stat__u {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  margin-left: 0.15em;
}

.np-about-stat__l {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--np-ink-soft);
  margin-top: 6px;
}

/* ================= np-about-brands: brand wall ================= */
.np-about-brands {
  padding-bottom: 8px;
}

.np-about-brands__lede {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--np-ink-soft);
  max-width: 78ch;
}

.np-about-brands__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.np-about-brands__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--np-border);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.1s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.np-about-brands__tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* typographic wordmark fallback until the logo lands in Files */
.np-about-brands__word {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  color: var(--np-charcoal);
}

a.np-about-brands__tile:hover,
a.np-about-brands__tile:focus-visible {
  border-color: rgba(255, 81, 84, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(34, 34, 34, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .np-about-brands__tile {
    transition: none;
  }
}

.np-about-brands__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.np-about-brands__note {
  margin: 0;
  font-size: 13.5px;
  color: var(--np-ink-soft);
}

.np-about-brands__note strong {
  color: var(--np-charcoal);
  font-weight: 700;
}

/* the brands page now ends at the A-Z directory; give the last section
   room before the footer */
.page-brands .np-brand-index {
  padding-bottom: 72px;
}

.np-about-brands__cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 48px;
  padding: 0 26px;
  background: var(--np-red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.15s;
}

.np-about-brands__cta:hover {
  background: var(--np-red-dark);
  color: #fff;
}

.np-about-brands__cta .arr {
  font-weight: 800;
  transition: transform 0.15s;
}

.np-about-brands__cta:hover .arr {
  transform: translateX(3px);
}

/* ---------- steps ---------- */
@media (max-width: 1299.98px) {
  .np-about-story__grid {
    gap: 32px;
  }

  .np-about-stats__grid {
    gap: 24px;
  }

  .np-about-brands__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 999.98px) {
  .np-about-story {
    padding-top: 36px;
  }

  .np-about-story__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .np-about-story__shot {
    min-height: 0;
    height: 240px;
    order: -1;
  }

  .np-about-stats__grid {
    gap: 24px 32px;
  }

  .np-about-stat__n {
    font-size: 27px;
  }

  .np-about-brands__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .np-about-brands__tile {
    height: 68px;
  }

  .np-about-brands__cta {
    height: 44px;
    padding: 0 20px;
    font-size: 12.5px;
  }
}

@media (max-width: 559.98px) {
  .np-about-brands__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ================= np-brand-index: A-Z brand directory ================= */
/* Client-rendered from the productsAPI brand facet (see the section file);
   letter rows read as a ledger: big red letter in a fixed rail, the letter's
   brands wrapping beside it, hairline rules between rows. */
.np-brand-index {
  padding-bottom: 8px;
}

/* the directory heading skips the about pages' viewport-scaled clamp:
   static sizes, and a tighter top than the about sections' 46px */
.np-brand-index .np-about__head {
  padding-top: 16px;
}

.np-brand-index .np-about__head h2 {
  font-size: 32px;
  /* reads as typed - "All Brands A-Z", not ALL BRANDS A-Z */
  text-transform: none;
  letter-spacing: 0.01em;
}

@media (max-width: 599.98px) {
  .np-brand-index .np-about__head h2 {
    font-size: 28px;
  }
}

.np-brand-index__status {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--np-ink-soft);
}

/* letter jump rail: sticks to the top while the directory scrolls */
.np-brand-index__rail {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* no margin, equal padding: 22px on both sides of the boxes, the same
     rhythm the letter rows keep around their rules */
  padding: 22px 0;
  background: #fff;
  border-bottom: 1px solid var(--np-border);
}

.np-brand-index__jump {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--np-charcoal);
  text-decoration: none;
  border: 1px solid #000;
}

.np-brand-index__jump:hover,
.np-brand-index__jump:focus-visible {
  background: var(--np-surface);
  border-color: var(--np-red);
  color: var(--np-red);
}

.np-brand-index__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--np-border);
  /* jump target clearance: the sticky rail plus the sticky header */
  scroll-margin-top: 150px;
}

.np-brand-index__row:last-child {
  border-bottom: 0;
}

.np-brand-index__letter {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--np-red);
}

.np-brand-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

/* every brand is a tile: logo on top (when the snapshot has one, and it
   loads), name always beneath. The logo lives in a fixed-height grid row
   so the names line up across tiles no matter how tall each logo is. */
.np-brand-index__brand {
  display: grid;
  grid-template-rows: 42px auto;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 14px;
  height: 100%;
  min-height: 104px;
  padding: 12px 10px;
  background: #fff;
  border: 1px solid var(--np-border);
  text-align: center;
  text-decoration: none;
}

.np-brand-index__brand:hover,
.np-brand-index__brand:focus-visible {
  border-color: var(--np-red);
}

.np-brand-index__brand img {
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
}

.np-brand-index__name {
  /* pinned to the second row so a logo-less tile's name still lines up */
  grid-row: 2;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--np-charcoal);
}

.np-brand-index__brand:hover .np-brand-index__name,
.np-brand-index__brand:focus-visible .np-brand-index__name {
  color: var(--np-red);
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.np-brand-index) {
    scroll-behavior: smooth;
  }
}

@media (max-width: 679.98px) {
  .np-brand-index__row {
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 18px 0;
  }

  .np-brand-index__letter {
    font-size: 24px;
  }

  .np-brand-index__list {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
  }

  .np-brand-index__brand {
    grid-template-rows: 34px auto;
    min-height: 84px;
    padding: 10px 8px;
  }

  .np-brand-index__brand img {
    max-height: 34px;
  }
}