/* ============================================
   PRODUCTS / BRAND CATALOGUES
   Kanat + Ritver paints & coatings ranges.
   Built on the tokens in main.css; each brand
   page scopes its own --brand accent.

   Grids here are deliberately fixed-column
   rather than auto-fill: every section chooses
   a count that divides its cards evenly, so no
   row is ever left with a single orphan card.
   ============================================ */

/* ----- Brand hero (dark band, brand-tinted, with a photographic bed) ----- */
.brand-hero {
  --brand: var(--accent);
  --brand-ink: var(--accent-light);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #14212C;
  color: #fff;
  padding-block: clamp(2.25rem, 5vw, 3.25rem) clamp(3rem, 7vw, 4.5rem);
}
/* Optional photo bed, set with style="--hero-image:url(...)" */
.brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.06);
  animation: brandHeroDrift 18s ease-out both;
}
.brand-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 90% at 88% 6%, rgba(255, 255, 255, 0.14), transparent 62%),
    linear-gradient(100deg, rgba(14, 27, 39, 0.97) 0%, rgba(16, 30, 43, 0.92) 42%, rgba(16, 30, 43, 0.62) 100%);
}
@keyframes brandHeroDrift { to { transform: scale(1); } }
.brand-hero > .container { position: relative; z-index: 1; }

.brand-hero .breadcrumb { color: rgba(255, 255, 255, 0.6); margin-bottom: 2rem; }
.brand-hero .breadcrumb a { color: rgba(255, 255, 255, 0.82); }
.brand-hero .breadcrumb a:hover { color: var(--brand-ink); }
.brand-hero .breadcrumb .sep { color: rgba(255, 255, 255, 0.35); }
.brand-hero .breadcrumb [aria-current] { color: var(--brand-ink); }
.brand-hero .section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--brand-ink);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.brand-hero .section-label::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-ink);
}
.brand-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0.75rem 0 1.125rem;
}
.brand-hero h1 span { color: var(--brand-ink); }
.brand-hero .lead { color: rgba(255, 255, 255, 0.8); font-size: 1.0625rem; max-width: 62ch; }
.brand-hero .lead strong { color: #fff; font-weight: 600; }
.brand-hero .lead + .lead { margin-top: 0.875rem; }

.brand-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}
.brand-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 66px;
  padding: 0.75rem 1.125rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.brand-mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .brand-hero .breadcrumb,
  .brand-hero .brand-hero-top,
  .brand-hero .section-label,
  .brand-hero h1,
  .brand-hero .lead,
  .brand-hero .fact-strip { animation: brandHeroEnter 760ms var(--ease-soft) both; }
  .brand-hero .brand-hero-top { animation-delay: 60ms; }
  .brand-hero .lead { animation-delay: 160ms; }
  .brand-hero .lead + .lead { animation-delay: 220ms; }
  .brand-hero .fact-strip { animation-delay: 300ms; }
  @keyframes brandHeroEnter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ----- Fact strip ----- */
.fact-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 2.75rem);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(4px);
}
@media (max-width: 900px) { .fact-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .fact-strip { grid-template-columns: repeat(2, 1fr); } }
.fact-strip div {
  background: rgba(255, 255, 255, 0.06);
  padding: 1.125rem 1.25rem;
}
.fact-strip dt {
  display: block;
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fact-strip dd {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
}

/* ----- Sticky jump nav ----- */
.catalog-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.catalog-nav .container {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-block: 0.625rem;
  scrollbar-width: none;
}
.catalog-nav .container::-webkit-scrollbar { display: none; }
.catalog-nav a {
  flex-shrink: 0;
  padding: 0.5rem 0.9375rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color 200ms var(--ease-quint), background 200ms var(--ease-quint), border-color 200ms var(--ease-quint);
}
.catalog-nav a:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: rgba(199, 154, 62, 0.3);
}
.catalog-nav a[aria-current] {
  color: #fff;
  background: var(--bg-deep);
  border-color: var(--bg-deep);
}

/* ----- Section heading with a count chip ----- */
.catalog-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.catalog-heading > div { flex: 1 1 32ch; }
.catalog-heading .section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-dark);
}
.catalog-heading .section-label::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand, var(--accent));
}
.catalog-heading h2 { margin: 0.5rem 0 0.5rem; font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -0.025em; }
.catalog-heading p { max-width: 68ch; margin: 0; }
.catalog-heading .document-count {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.catalog-heading .document-count::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand, var(--accent));
}

/* ============================================================
   PRODUCT FAMILY CARDS
   Fixed column counts keep every row complete.
   ============================================================ */
.family-grid { display: grid; gap: 1.25rem; align-items: stretch; }
.family-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.family-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.family-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards that deliberately fill a leftover row */
.family-card.span-2 { grid-column: span 2; }
.family-card.span-full { grid-column: 1 / -1; }

@media (max-width: 1050px) {
  .family-grid.cols-3, .family-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-card.span-2, .family-card.span-full { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .family-grid.cols-2, .family-grid.cols-3, .family-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .family-card.span-2, .family-card.span-full { grid-column: auto; }
}

.family-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: box-shadow 320ms var(--ease-quint), transform 320ms var(--ease-quint), border-color 320ms var(--ease-quint);
}
.family-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  background: var(--brand, var(--accent));
}
.family-card:hover {
  box-shadow: 0 16px 38px rgba(27, 42, 56, 0.14);
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand, var(--accent)) 55%, var(--border));
}

/* Card media */
.family-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.family-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-quint);
}
.family-card:hover .family-media img { transform: scale(1.055); }
.family-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 33, 44, 0.05) 0%, transparent 38%, rgba(20, 33, 44, 0.3) 100%);
  pointer-events: none;
}
/* Product boards (collages) read better uncropped on a light bed */
.family-media.media-contain { background: #fff; aspect-ratio: 16 / 9; }
.family-media.media-contain img { object-fit: contain; padding: 0.5rem; }
.family-media.media-contain::after { display: none; }

/* Range number floated over the media */
.family-media .family-index {
  position: absolute;
  z-index: 2;
  left: 0.875rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(10, 18, 26, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.family-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}
.family-card > header,
.family-body > header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}
.family-card .family-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 1.0625rem;
}
.family-card h3 { margin: 0; font-size: 1.125rem; letter-spacing: -0.015em; }
.family-card .family-kicker {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
}
.family-body > p, .family-card > p { font-size: 0.9375rem; margin-bottom: 1.125rem; }

/* Item list inside a family card */
.item-list {
  list-style: none;
  margin: 0 0 1.125rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.item-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9063rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.item-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand, var(--accent));
}
.item-list strong { color: var(--text-primary); font-weight: 600; }
/* Long lists split into two readable columns when the card is wide */
.span-2 .item-list, .span-full .item-list {
  display: block;
  columns: 2;
  column-gap: 2rem;
}
.span-2 .item-list li, .span-full .item-list li { break-inside: avoid; margin-bottom: 0.4rem; }
@media (max-width: 680px) {
  .span-2 .item-list, .span-full .item-list { columns: 1; }
}

/* Standards footer inside a family card */
.spec-tags {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.spec-tags .spec-tags-label {
  width: 100%;
  font-size: 0.6563rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
  margin-bottom: 0.15rem;
}
.spec-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.58rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ----- Wide banner strip between sections ----- */
.catalog-banner {
  position: relative;
  margin-block: clamp(2rem, 5vw, 3rem) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 6;
  min-height: 200px;
  background: var(--bg-deep);
}
.catalog-banner img { width: 100%; height: 100%; object-fit: cover; }
.catalog-banner figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(0deg, rgba(14, 27, 39, 0.9), rgba(14, 27, 39, 0.45) 55%, transparent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}
.catalog-banner figcaption strong { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.2rem; }
@media (max-width: 680px) { .catalog-banner { aspect-ratio: 4 / 3; } }

/* ----- Specification tables ----- */
.spec-block + .spec-block { margin-top: 2.25rem; }
.spec-block h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.0625rem;
  margin-bottom: 0.875rem;
}
.spec-block h3 i { color: var(--brand, var(--accent)); font-size: 0.9375rem; }
.spec-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.spec-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.spec-table caption {
  caption-side: bottom;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--text-light);
  text-align: left;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}
.spec-table th,
.spec-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.spec-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-deep);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.6563rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr { transition: background-color 180ms ease; }
.spec-table tbody tr:hover { background: color-mix(in srgb, var(--brand, var(--accent)) 7%, #fff); }
.spec-table td:first-child {
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spec-table .std { color: var(--text-secondary); }
.spec-table .lab { color: var(--text-light); white-space: nowrap; }
.spec-table .proj { font-weight: 700; color: var(--heading); white-space: normal; min-width: 22ch; }

/* ----- Reference list grouped by country (balanced columns, never orphaned) ----- */
.ref-columns {
  columns: 3;
  column-gap: 1.25rem;
}
@media (max-width: 1050px) { .ref-columns { columns: 2; } }
@media (max-width: 680px) { .ref-columns { columns: 1; } }
.ref-group {
  break-inside: avoid;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.375rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 260ms var(--ease-quint), border-color 260ms var(--ease-quint);
}
.ref-group:hover { box-shadow: var(--shadow-card-hover); border-color: color-mix(in srgb, var(--brand, var(--accent)) 50%, var(--border)); }
.ref-group h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  padding-bottom: 0.625rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.ref-group h4 i { color: var(--brand, var(--accent)); font-size: 0.8125rem; }
.ref-group ul { list-style: none; margin: 0; padding: 0; }
.ref-group li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.2rem 0;
  line-height: 1.5;
}

/* ----- Brand chooser cards (hub page) ----- */
.brand-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 860px) { .brand-choice-grid { grid-template-columns: minmax(0, 1fr); } }
.brand-choice {
  --brand: var(--accent);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 320ms var(--ease-quint), transform 320ms var(--ease-quint), border-color 320ms var(--ease-quint);
  color: inherit;
}
.brand-choice:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(27, 42, 56, 0.18);
  border-color: var(--brand);
}
.brand-choice-media {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--bg-deep);
}
.brand-choice-media img.brand-choice-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-quint);
}
.brand-choice:hover .brand-choice-media img.brand-choice-photo { transform: scale(1.06); }
.brand-choice-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 27, 39, 0.25), rgba(14, 27, 39, 0.72));
}
.brand-choice-logo {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  height: 52px;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
.brand-choice-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.brand-choice-media .badge {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  top: 1.25rem;
  background: rgba(255, 255, 255, 0.94);
  border-color: transparent;
}
.brand-choice-body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.5rem, 3vw, 1.875rem); }
.brand-choice h3 { font-size: 1.25rem; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.brand-choice-body > p { font-size: 0.9375rem; }
.brand-choice .item-list { margin-top: 1.125rem; }
.brand-choice .card-arrow {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.brand-choice:hover .card-arrow i { transform: translateX(5px); }
.brand-choice .card-arrow i { transition: transform 260ms var(--ease-quint); }

/* ----- Pricing / enquiry note ----- */
.price-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand, var(--accent));
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.5rem;
}
.price-note i { color: var(--brand, var(--accent)); font-size: 1.125rem; margin-top: 0.2rem; flex-shrink: 0; }
.price-note h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.price-note p { font-size: 0.9375rem; margin: 0; }

/* ----- Compact cards for services / business units ----- */
.unit-grid { display: grid; gap: 1rem; }
.unit-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unit-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1050px) { .unit-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .unit-grid.cols-2, .unit-grid.cols-3 { grid-template-columns: minmax(0, 1fr); } }
.unit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: box-shadow 280ms var(--ease-quint), transform 280ms var(--ease-quint), border-color 280ms var(--ease-quint);
}
.unit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--brand, var(--accent)) 50%, var(--border));
}
.unit-card .family-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 1.0625rem;
  margin-bottom: 0.875rem;
}
.unit-card h3 { font-size: 1rem; margin-bottom: 0.375rem; }
.unit-card p { font-size: 0.875rem; margin: 0; }
/* Unit card with a photo header */
.unit-card.has-media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.unit-card.has-media .unit-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-surface); }
.unit-card.has-media .unit-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-quint); }
.unit-card.has-media:hover .unit-media img { transform: scale(1.055); }
.unit-card.has-media .unit-body { padding: 1.375rem 1.5rem 1.5rem; }
.unit-card.has-media .family-icon { margin-top: -2.75rem; position: relative; background: #fff; box-shadow: var(--shadow-card); }

@media (max-width: 640px) {
  .brand-mark { min-width: 110px; height: 56px; }
  .catalog-heading { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-hero::before { animation: none; transform: none; }
  .family-card:hover, .brand-choice:hover, .unit-card:hover { transform: none; }
  .family-card:hover .family-media img,
  .brand-choice:hover .brand-choice-media img.brand-choice-photo,
  .unit-card.has-media:hover .unit-media img { transform: none; }
}

/* A five-item fact strip leaves a hole on 2- and 3-column layouts; let the
   trailing item span the gap so the strip always reads as a filled block. */
@media (max-width: 900px) {
  .fact-strip div:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@media (max-width: 520px) {
  .fact-strip div:last-child:nth-child(odd) { grid-column: span 2; }
}

/* A long list of short names should flow in columns rather than run down one
   side of the card and leave the rest of it empty. */
.item-list.item-list-cols {
  display: block;
  columns: 2;
  column-gap: 1.75rem;
}
.item-list.item-list-cols li { break-inside: avoid; margin-bottom: 0.4rem; }
@media (max-width: 420px) {
  .item-list.item-list-cols { columns: 1; }
}

/* Cards in the same row must agree: a photo card next to a text-only card
   reads as a missing image. Text-only cards therefore carry the range number
   in the header kicker instead of over media. */
.family-card:not(:has(.family-media)) .family-body { padding-top: 1.625rem; }

/* Banner captions sit over unpredictable photography, so the scrim has to
   carry the text on light images too, not only dark ones. */
.catalog-banner figcaption {
  padding-top: clamp(3rem, 8vw, 5rem);
  background: linear-gradient(0deg,
    rgba(12, 22, 32, 0.94) 0%,
    rgba(12, 22, 32, 0.86) 34%,
    rgba(12, 22, 32, 0.55) 68%,
    rgba(12, 22, 32, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.catalog-banner figcaption strong { letter-spacing: -0.015em; }

/* Card lift and easing were diverging across files (-2, -3, -4, -5, -6px, four
   easing curves, three bespoke shadows). One token, one curve, one scale. */
.family-card, .brand-choice, .unit-card {
  transition: box-shadow 280ms var(--ease-quint), transform 280ms var(--ease-quint), border-color 280ms var(--ease-quint);
}
.family-card:hover, .brand-choice:hover, .unit-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--e3);
}
/* color-mix has no fallback, so declare a plain border first. */
.family-card:hover, .unit-card:hover, .brand-choice:hover { border-color: var(--accent); }

/* ============================================================
   CATALOGUE JUMP RAIL
   Ten long labels could not fit at any width, so the rail
   clipped its last item against the right edge with nothing to
   show it was scrollable. It wraps on wide screens now, and
   where it does still scroll a masked edge says so.
   ============================================================ */
.catalog-nav .container {
  flex-wrap: wrap;
  row-gap: 0.25rem;
  justify-content: flex-start;
}
@media (max-width: 860px) {
  .catalog-nav .container {
    flex-wrap: nowrap;
    /* fade the trailing edge so the rail reads as scrollable */
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    padding-right: 2.5rem;
  }
}

/* ============================================================
   CATALOGUE PHONE PASS
   Two real defects and one density pass.

   The section banner is a 21:6 figure with the caption absolutely
   positioned over the bottom of the photograph, and the figure
   clips. At 680px it drops to 4:3, which is 210px tall at a
   320px viewport — and the longest caption on the products index
   runs to about 213px there, so its last line was being cut off
   by the figure's own overflow:hidden. Below 600px the caption
   comes out of the photograph and sits under it on the same navy,
   which is the only version that cannot clip.

   The two horizontal rails — the chip nav and the specification
   tables — both scroll inside their own box, but neither stopped
   the swipe from chaining to the document once it hit the end,
   which on iOS is the back-navigation gesture.
   ============================================================ */

.catalog-nav .container,
.spec-table-wrap { overscroll-behavior-x: contain; }

@media (max-width: 600px) {
  .catalog-banner {
    aspect-ratio: auto;
    min-height: 0;
    background: var(--bg-deep);
  }
  .catalog-banner img { height: auto; aspect-ratio: 16 / 10; }
  .catalog-banner figcaption {
    position: static;
    padding: 1.125rem 1.25rem 1.25rem;
    background: var(--bg-deep);
    text-shadow: none;
    font-size: 0.875rem;
  }
  .catalog-banner figcaption strong { font-size: 1rem; margin-bottom: 0.35rem; }

  /* Card interiors, matched to the shared phone value in main.css. */
  .family-body { padding: 1.25rem; }
  .unit-card { padding: 1.25rem; }
  .unit-card.has-media .unit-body { padding: 1.125rem 1.25rem 1.25rem; }
  .brand-choice-body { padding: 1.25rem; }
  .ref-group { padding: 1.125rem 1.25rem; margin-bottom: 1rem; }
  .price-note { padding: 1.125rem 1.25rem; gap: 0.75rem; }
  .family-card:not(:has(.family-media)) .family-body { padding-top: 1.375rem; }

  .family-grid, .unit-grid, .brand-choice-grid { gap: 1rem; }
  .brand-hero { padding-block: 1.75rem 2.25rem; }
  .brand-hero .breadcrumb { margin-bottom: 1rem; }
  .catalog-heading { margin-bottom: 1.5rem; }
  .spec-block + .spec-block { margin-top: 1.75rem; }

  /* The logo plate, the range badge and the heading were all sized against a
     two-column card. */
  .brand-hero-top { gap: 0.875rem 1.25rem; }
  .family-media .family-index { left: 0.75rem; bottom: 0.625rem; }
}

/* ============================================================
   CATALOGUE BANNER: min-height was inflating the width
   `.catalog-banner` pairs `aspect-ratio: 21 / 6` with
   `min-height: 200px`. Once the container is narrow enough that
   21:6 would compute shorter than 200px, the min-height wins and
   the aspect ratio resolves the *other* way — inflating the box
   to 200 x 21/6 = exactly 700px wide, regardless of the column it
   is sitting in. Between roughly 680px (where the ratio switches
   to 4/3) and ~750px the banner therefore burst its container and
   its right edge was clipped off the page.

   An explicit width stops the ratio from having a say in the
   inline axis; height falls back to the min-height, and the image
   is object-fit: cover so it crops rather than distorts.
   ============================================================ */
.catalog-banner { width: 100%; }