/* START FAMILY PAGE */

.family-page {
  padding-top: 120px;
  background: #f4f4f2;
  font-family: 'Oswald', var(--ds-font-heading, sans-serif);
}

.family-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

/* START FAMILY RANGE / CARD TOKENS */
.family-page,
.range-page {
  --ds-range-yellow: #F4B532;
  --ds-range-amber: #FFC400;
  --ds-range-green: #009246;
  --ds-range-red: #CE2B37;
  --ds-card-stroke: rgba(255, 209, 0, .14);
  --ds-card-stroke-strong: rgba(255, 209, 0, .34);
  --ds-card-stroke-special: rgba(255, 196, 0, .58);
}
/* END FAMILY RANGE / CARD TOKENS */

.family-section-head {
  margin-bottom: 24px;
}

.family-section-head__eyebrow,
.family-hero__eyebrow,
.family-feature__eyebrow,
.family-intro__kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a7a73;
}

/* Fix titoli "fantasma": le sezioni-testata stanno su fondo chiaro, ma senza
   un colore esplicito l'h2 ereditava --ds-c-text dark-first (bianco caldo)
   → bianco-su-bianco. Default scuro qui; le sezioni scure (lineup) overridano
   dopo per source-order. (sess.49 P0) */
.family-section-head h2,
.range-lineup-group__head h3 {
  color: #14140f;
}

/* HERO */
.family-hero {
  position: relative;
  min-height: 82svh;
  display: flex;
  align-items: end;
  overflow: hidden;
  background: #000;
}

.family-hero__media,
.family-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.family-hero__media img {
  object-fit: cover;
  object-position: center;
  opacity: .92;
}

.family-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 44%, rgba(0,0,0,.12) 100%),
    linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 42%);
}

.family-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 72px;
  color: #fff;
}

.family-hero__title {
  margin: 0;
  font-size: clamp(56px, 9vw, 124px);
  line-height: .94;
  letter-spacing: -.02em;
}

.family-hero__subtitle {
  max-width: 720px;
  margin: 18px 0 0;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}

/* INTRO */
.family-intro {
  padding: 84px 0 36px;
}

.family-intro__wrap {
  max-width: 980px;
}

.family-intro__text {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #111;
}



/* FAMILY BANDS AUTO */
.family-band {
  padding: 84px 0;
}

.family-band--general {
  background: #3a3a3f;
  color: #fff;
}

.family-band--optics {
  background: #ecebe7;
  color: #111;
}

.family-band--light-control {
  background: #111;
  color: #fff;
}

.family-band__head {
  margin-bottom: 24px;
}

.family-band__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  opacity: .72;
}

.family-band__head h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 64px);
  line-height: .95;
  letter-spacing: -.03em;
  color: inherit;
  position: relative;
}

/* sess.49: chapter marker Apple-style — indice 01/02/03 (ConthraxSB) sopra l'eyebrow.
   counter su .family-band (3 bande per pagina, vale family + range, markup condiviso). */
.family-page,
.range-page { counter-reset: family-chapter; }
.family-band { counter-increment: family-chapter; }
.family-band__head { position: relative; }
.family-band__head::before {
  content: counter(family-chapter, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--ds-font-display, "ConthraxSB", sans-serif);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ds-c-accent);
  opacity: .85;
}

/* doppia linea brand sotto il titolo banda (spessa accent + sottile accent-light) */
.family-band__head h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 9px;
  margin-top: 12px;
  background: linear-gradient(
    to bottom,
    var(--ds-c-accent) 0 4px,
    transparent 4px 7px,
    var(--ds-c-accent-light) 7px 9px
  );
}

.family-band__body {
  min-height: 120px;
}

.family-band-empty {
  padding: 28px 0;
  opacity: .6;
  font-size: 15px;
}

/* sess.60: card apribile a modal (deep-dive family). Affordance discreta:
   cursor + micro-lift su hover (gate hover reale, no sticky iOS) + focus a11y. */
.family-band-card--clickable { cursor: pointer; }
@media (hover: hover) {
  .family-band-card--clickable { transition: transform .18s ease, box-shadow .18s ease; }
  .family-band-card--clickable:hover { transform: translateY(-2px); }
}
.family-band-card--clickable:focus-visible {
  outline: 2px solid var(--ds-c-accent, #F4B532);
  outline-offset: 3px;
}
.family-kf-modal__media { margin: 0 0 14px; }
.family-kf-modal__media img {
  width: 100%; height: auto; display: block; border-radius: 14px;
}

/* START FAMILY SINGLE CARD FIT */
.family-band-card--single {
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  /* sess.49: via l'ombra "glass 2021" (0 20px 54px) → ombra stretta moderna +
     hairline border per definizione (card su fondo dark cinematico). */
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.family-band-card--single .family-band-card__grid {
  min-height: clamp(520px, 42vw, 680px);
}

.family-band-card--single .family-band-card__media {
  min-height: 100%;
  height: 100%;
}

.family-band-card--single .family-band-card__media img,
.family-band-card--single .family-band-card__media video,
.family-band-card--single .family-band-card__video,
.family-band-card--single .family-viewer__slides,
.family-band-card--single .family-viewer__slide img,
.family-band-card--single .family-viewer__slide video,
.family-band-card--single .family-viewer__media-el {
  min-height: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* static product/media image cards: use contain, not crop */
.family-band-card--image.family-band-card--single .family-band-card__media--image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    #000;
}

.family-band-card--image.family-band-card--single .family-band-card__media--image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}
/* END FAMILY SINGLE CARD FIT */

.family-band--optics .family-band-card--single {
  background: #fff;
}

/* START FAMILY BAND MEDIA FIT */
.family-band-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 0;
  align-items: stretch;
}

.family-band-card__media {
  position: relative;
  overflow: hidden;
  background: #000;
  min-height: 360px;
  height: 100%;
}

.family-band-card--single .family-band-card__media {
  height: 100%;
}

.family-band-card__media img,
.family-band-card__media video,
.family-band-card__video,
.family-viewer__slides,
.family-viewer__slide img,
.family-viewer__slide video,
.family-viewer__media-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-band--optics .family-band-card--single .family-band-card__media img,
.family-band--optics .family-band-card--single .family-band-card__media video,
.family-band--optics .family-band-card--single .family-band-card__video,
.family-band--optics .family-band-card--single .family-viewer__slides,
.family-band--optics .family-band-card--single .family-viewer__slide img,
.family-band--optics .family-band-card--single .family-viewer__slide video,
.family-band--optics .family-band-card--single .family-viewer__media-el {
  object-fit: cover;
  object-position: center;
}
/* END FAMILY BAND MEDIA FIT */

.family-band-card__content {
  padding: 30px 32px;
}

.family-band-card__content h3 {
  margin: 0 0 12px;
  font-size: clamp(32px, 3vw, 54px);
  line-height: .96;
  letter-spacing: -.03em;
}

.family-band-card__content p {
  margin: 0 0 10px;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.45;
}

.family-band-card--rail .family-band-card__content > p,
.family-band-card--rail .family-band-card__slidecopy > p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.family-band-card__html p:last-child {
  margin-bottom: 0;
}

/* START FAMILY TEXT-ONLY MUSE FRAME */
.family-band-card--text-only {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.family-band-card--text-only .family-band-card__content {
  position: relative;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 92px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.family-band-card--text-only .family-band-card__content::before,
.family-band-card--text-only .family-band-card__content::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(560px, 74%);
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
}

.family-band-card--text-only .family-band-card__content::before {
  top: 26px;
  background:
    linear-gradient(
      to bottom,
      var(--ds-c-accent) 0 6px,
      transparent 6px 8px,
      var(--ds-c-accent-light) 8px 10px,
      transparent 10px 12px
    );
}

.family-band-card--text-only .family-band-card__content::after {
  bottom: 26px;
  background:
    linear-gradient(
      to bottom,
      var(--ds-c-accent-light) 0 2px,
      transparent 2px 4px,
      var(--ds-c-accent) 4px 10px,
      transparent 10px 12px
    );
}

.family-band-card--text-only .family-band-card__content h3 {
  font-size: clamp(42px, 4.6vw, 80px);
  line-height: .92;
  letter-spacing: -.03em;
  margin-bottom: 18px;
}

.family-band-card--text-only .family-band-card__content > p,
.family-band-card--text-only .family-band-card__content .family-band-card__html {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.family-band-card--text-only .family-band-card__content .family-band-card__html {
  margin-top: 16px;
}
/* END FAMILY TEXT-ONLY MUSE FRAME */
.family-band--light-control .family-band-card--text-only .family-band-card__content,
.family-band--general .family-band-card--text-only .family-band-card__content {
  color: #fff;
}

.family-band--optics .family-band-card--text-only .family-band-card__content {
  color: #111;
}

.family-band-card__video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  background: #000;
}

.family-viewer {
  position: relative;
  width: 100%;
  height: 100%;
}

.family-viewer__slides {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: #000;
  overflow: hidden;
}

.family-viewer__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.family-viewer__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.family-viewer__slide img,
.family-viewer__slide video,
.family-viewer__media-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-viewer__nav {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
}

.family-viewer__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.family-viewer__dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  cursor: pointer;
}

.family-viewer__dot.is-active {
  background: #ffd200;
}

.family-viewer__btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.family-viewer__btn svg { width: 19px; height: 19px; display: block; }

.family-band--optics .family-viewer__btn {
  background: rgba(255,255,255,.68);
  color: #111;
  border-color: rgba(0,0,0,.12);
}

.family-band-card__slidecopy {
  margin-top: 14px;
}

.family-band-card__slide-title {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.1;
}

.family-band-card--rail.family-band-card--interactive .family-band-card__content {
  padding-bottom: 24px;
}


.family-band-rail-frame {
  position: relative;
}

.family-band-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(340px, 42vw);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 0 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.family-band-rail::-webkit-scrollbar {
  display: none;
}

.family-band-card--rail {
  scroll-snap-align: start;
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  /* sess.49: via l'ombra "glass 2021" → ombra stretta moderna + hairline border. */
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  display: grid;
  grid-template-rows: auto 1fr;
}

/* sess.49: hover-lift band card — gate @media (hover:hover) per evitare lo
   sticky-hover iOS (feedback_sticky_hover_ios). */
@media (hover: hover){
  .family-band-card--single,
  .family-band-card--rail{
    transition:
      transform  .26s var(--ds-ease-out, cubic-bezier(0, 0, .2, 1)),
      box-shadow .26s ease,
      border-color .26s ease;
  }
  .family-band-card--single:hover,
  .family-band-card--rail:hover{
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 16px 38px rgba(0,0,0,.40);
  }
}

/* sess.49: icona-firma feature — chip rounded con glyph accent (mask della SVG
   stroke=currentColor → tinta accent coerente su card dark e su optics light).
   mask-image è inline sul glyph (path relativo al documento). */
.family-band-card__sig{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--ds-c-accent-subtle, rgba(244,181,50,.12));
}
.family-band-card__sig-glyph{
  width: 24px;
  height: 24px;
  background: var(--ds-c-accent);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ============================================================================
   sess.49 — FEATURE REEL: carousel bande "iPhone 17" su misura De Sisti.
   Card attiva in primo piano (focus opacity+scale, settle bounce) + controllo
   a pillola sotto (dot-progress accent + play/pause). JS: band-renderer.js.
   ============================================================================ */
.family-band-rail.is-reel .family-band-card--rail{
  opacity: .42;
  transform: scale(.94);
  transition:
    opacity .45s ease,
    transform .6s cubic-bezier(.16, .84, .3, 1.04);   /* settle: atterra e si assesta */
}
.family-band-rail.is-reel .family-band-card--rail.is-reel-active{
  opacity: 1;
  transform: scale(1);
}

/* sess.53: gli atomi del controllo a pillola (.family-reel-*) sono stati spostati
   in components/reel-nav.css (condiviso family/range/product). Qui restano solo
   le regole lineup-specifiche (.family-lineup__reel, .is-navigator) più sotto. */
@media (prefers-reduced-motion: reduce){
  .family-band-rail.is-reel .family-band-card--rail{ opacity: 1; transform: none; transition: none; }
}

.family-band--optics .family-band-card--rail {
  background: #fff;
}

.family-band-card--rail .family-band-card__media {
  height: clamp(280px, 34vw, 420px);
}

.family-band-card--rail .family-band-card__media img {
  min-height: unset;
}

.family-band-rail__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
/* RANGES */
.family-ranges {
  padding: 88px 0;
}

.family-ranges__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.family-range-pill {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 132px;
  padding: 22px 24px 26px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  box-shadow:
    inset 0 1px rgba(255,255,255,1),
    0 18px 42px rgba(0,0,0,.06);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}

.family-range-pill::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -4px;
  height: 44%;
  background: linear-gradient(
    90deg,
    var(--ds-range-green) 0 33.333%,
    #ffffff 33.333% 66.666%,
    var(--ds-range-red) 66.666%
  );
  clip-path: ellipse(120% 72% at 50% 115%);
  opacity: .95;
  z-index: 0;
  pointer-events: none;
}

.family-range-pill::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  border: 3px solid transparent;
  opacity: 0;
  transform: scale(.988);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  pointer-events: none;
}

.family-range-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px rgba(255,255,255,1),
    0 22px 48px rgba(0,0,0,.09);
}

.family-range-pill:hover::before,
.family-range-pill:focus-visible::before {
  opacity: 1;
  transform: scale(1);
  border-color: var(--ds-range-yellow);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.86),
    inset 0 0 0 1px rgba(0,0,0,.24);
}

.family-range-pill > * {
  position: relative;
  z-index: 1;
}

.family-range-pill__label {
  font-family: "ConthraxSB", system-ui, sans-serif;
  font-size: clamp(18px, .9vw + 14px, 26px);
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(18,18,18,.9);

  text-align: center;
  width: 100%;
}

.family-range-pill__meta {
  font-size: 15px;
  line-height: 1.4;
  color: #5d5d58;
  max-width: 42ch;
  text-align: center;
}

/* LINEUP */
.family-lineup {
  padding: 92px 0;
  background: #111;
  color: #fff;
}

.family-lineup .family-section-head__eyebrow {
  color: var(--ds-c-accent);
}

.family-lineup h2 {
  color: #fff;
}
.family-lineup__frame {
  position: relative;
}

.family-lineup__carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 240px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 18px 0 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.family-lineup__carousel::-webkit-scrollbar {
  display: none;
}

.family-product-card {
  position: relative;
  min-height: 360px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(255,209,0,.08);
  border-radius: 24px;
  background: linear-gradient(180deg, #1b1b1b 0%, #141414 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 0 2px var(--ds-card-stroke),
    0 14px 34px rgba(0,0,0,.24);
  text-align: center;
  transition: transform .16s ease, box-shadow .2s ease;
}

.family-product-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 0 2px var(--ds-card-stroke-strong),
    0 18px 42px rgba(0,0,0,.30);
}

.family-product-card img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  margin-bottom: 16px;
}

.family-product-card h3 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1;
color: var(--ds-c-accent);
}

.family-product-card:hover h3 {
  color: var(--ds-range-yellow);
}

.family-product-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.family-range-badge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  box-shadow:
    inset 0 1px rgba(255,255,255,.95),
    0 4px 10px rgba(0,0,0,.16);
  font-family: "ConthraxSB", system-ui, sans-serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(18,18,18,.84);
  overflow: hidden;
}

.family-range-badge::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -2px;
  height: 46%;
  background: linear-gradient(
    90deg,
    var(--ds-range-green) 0 33.333%,
    #ffffff 33.333% 66.666%,
    var(--ds-range-red) 66.666%
  );
  clip-path: ellipse(120% 70% at 50% 115%);
  opacity: .95;
  z-index: 0;
  pointer-events: none;
}

.family-range-badge > * {
  position: relative;
  z-index: 1;
}

.family-product-card--special {
  background: linear-gradient(180deg, #1d1d1d 0%, #141414 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 0 2px var(--ds-card-stroke-strong),
    inset 0 0 0 4px rgba(255, 196, 0, .14),
    0 18px 46px rgba(0,0,0,.35);
}

.family-product-card--special:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 0 2px rgba(255,209,0,.44),
    inset 0 0 0 4px rgba(255,196,0,.22),
    0 20px 52px rgba(0,0,0,.38);
}
.family-lineup__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.family-rail-btn {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.family-rail-btn svg { width: 20px; height: 20px; display: block; }

.family-highlights .family-rail-btn {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
}

/* ============================================================================
   sess.51 — LINEUP carousel: linguaggio "command pill" del Feature Reel, ma
   SELETTORE (niente autoplay, niente dimming). Snap center reale + focus
   leggero sulla card centrata. JS: enhanceLineup() in family-fresnel.js.
   ============================================================================ */
/* nav raccolto in una capsula pill centrata, coerente col reel-ctrl */
.family-lineup__nav{
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin-inline: auto;
  margin-top: 24px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}
.family-lineup__nav .family-rail-btn{
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255,255,255,.06);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: none;
  transition: background .2s ease, color .2s ease, transform .14s ease;
}
.family-lineup__nav .family-rail-btn svg{
  width: 18px;
  height: 18px;
  display: block;
}
.family-lineup__nav .family-rail-btn:active{ transform: scale(.93); }
.family-lineup__nav .family-rail-btn:focus-visible{
  outline: 2px solid var(--ds-c-focus, #F4B532);
  outline-offset: 3px;
}
@media (hover: hover){
  .family-lineup__nav .family-rail-btn:hover{
    background: var(--ds-c-accent);
    color: #111;
  }
}

/* snap CENTER reale (prima dichiarato mandatory ma senza align sui figli = inerte) */
.family-lineup__carousel .family-product-card{
  scroll-snap-align: center;
}

/* ============================================================================
   sess.52 — LINEUP pattern B: "peek + fade" + controlli nel header + progress
   + mount stagger. Resta nella colonna (coerenza sito centrato), ma il taglio
   è VOLUTO (dissolvenza), non accidentale. Scope: SOLO .family-lineup.
   ============================================================================ */
/* foot: progress a sx (flex) + controlli prev/next a dx (pattern Apple, bottom-right) */
.family-lineup__foot{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}
.family-lineup__foot .family-lineup__nav{
  margin: 0;
  padding: 0;
  width: auto;
  background: none;
  border: 0;
  backdrop-filter: none;
  flex: 0 0 auto;
}
.family-lineup__foot.is-static{ display: none; }

/* sess.53: la vecchia mask-fade ai bordi (baseline sess.52, bocciata) è stata
   RIMOSSA — sostituita da pager/navigator (range) e griglia (family). Lasciava
   un alone sfumato sul lato sx dei caroselli non-enhanced (es. Light Box 1 card,
   bordo sx invisibile). Bordi netti ovunque ora. */
.family-lineup__frame{ position: relative; }

/* indicatore scroll a "thumb" (scrollbar elegante) — più coerente del fill 0→100 */
.family-lineup__progress{
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.family-lineup__progress-fill{
  display: block;
  height: 100%;
  width: var(--tw, 40%);
  margin-left: var(--tp, 0%);
  border-radius: inherit;
  background: var(--ds-c-accent, #F4B532);
  transition: margin-left .12s ease, width .12s ease;
}

/* ============================================================================
   sess.53 — STAMP del mount: ogni card "si stampa" UNA A UNA (one-shot, gated
   .lineup-anim-ready + .is-mounted da JS quando la sezione è in vista).
   Effetto EVIDENTE: parte bassa+piccola+trasparente e schiocca in posizione con
   overshoot ("timbro"). Solo opacity+transform (GPU). Stagger ampio = sequenza
   leggibile. L'utente tara ritmo/intensità dopo averlo visto.
   ============================================================================ */
.family-lineup__carousel.lineup-anim-ready .family-product-card{
  opacity: 0;
  transform: translateY(42px) scale(.8);
  transition: opacity .5s ease, transform .62s cubic-bezier(.34, 1.45, .5, 1); /* back-out = pop "timbro" */
  transition-delay: calc(var(--i, 0) * 150ms);
  will-change: opacity, transform;
}
.family-lineup__carousel.lineup-anim-ready.is-mounted .family-product-card{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .family-lineup__carousel.lineup-anim-ready .family-product-card{
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
}

/* focus leggero: la card centrata si solleva e prende un filo d'accento.
   Niente dimming sulle altre (è un selettore, deve restare tutto leggibile). */
.family-lineup__carousel.is-lineup-focus .family-product-card{
  transition:
    transform .42s cubic-bezier(.16, .84, .3, 1.04),
    box-shadow .3s ease,
    border-color .3s ease;
}
.family-lineup__carousel.is-lineup-focus .family-product-card.is-centered{
  transform: translateY(-3px) scale(1.035);
  border-color: rgba(255,209,0,.30);
}
/* mobile: la scala faceva sbordare la card dalla banda → solo accento, niente scale */
body.ds-vp-app .family-lineup__carousel.is-lineup-focus .family-product-card.is-centered{
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .family-lineup__carousel.is-lineup-focus .family-product-card.is-centered{
    transform: none;
  }
}

/* ============================================================================
   sess.53 — LINEUP "CARD A SCOMPARSA" (pager discreto, desktop).
   Il frame mostra ESATTAMENTE K card intere (card-width calcolata via JS →
   zero card parziali, no peek a riposo). Ogni click slitta la striscia di UNA
   card (una esce a sx, una entra a dx). Mobile (ds-vp-app) resta scroll nativo.
   ============================================================================ */
.family-lineup__frame.is-pager-frame{
  overflow: hidden;            /* il frame ritaglia: bordi netti a riposo */
}
.family-lineup__carousel.is-pager{
  overflow: visible;           /* non è più lo scroller: scorre via transform */
  grid-auto-columns: var(--lineup-card-w, 240px);
  scroll-snap-type: none;
  width: max-content;
  transform: translateX(0);
  transition: transform .54s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
  /* via la dissolvenza ai bordi (baseline sess.52 bocciata): qui i bordi sono netti */
  -webkit-mask-image: none;
          mask-image: none;
}
.family-lineup__carousel.is-pager .family-product-card{
  scroll-snap-align: none;
}
@media (prefers-reduced-motion: reduce){
  .family-lineup__carousel.is-pager{ transition: none; }
}

/* bottoni nav: stato disabilitato a fine corsa (pattern Apple) */
.family-lineup__nav .family-rail-btn:disabled{
  opacity: .32;
  cursor: default;
  pointer-events: none;
}

/* NAVIGATOR (pillola stile Feature Reel) — sostituisce thumb+frecce nel pager.
   Riusa .family-reel-* (dot-progress + play/pausa). Centrato come sulle bande. */
.family-lineup__reel{ display: none; margin-top: 0; }
.family-lineup__foot.is-navigator{ justify-content: center; }
.family-lineup__foot.is-navigator .family-lineup__progress,
.family-lineup__foot.is-navigator .family-lineup__nav{ display: none; }
.family-lineup__foot.is-navigator .family-lineup__reel{ display: flex; }
/* pillola autonoma (gruppi range: posata dopo il frame, nessun foot) */
.family-lineup__reel--standalone{ margin-top: 14px; }

/* ============================================================================
   sess.53 — LINEUP A GRIGLIA (family): mostra TUTTI i modelli in wrap multi-riga
   (no carousel). Risolve "sezione scarna/stretta": riempie la larghezza e, con
   fit-on-scroll, l'altezza schermo. Range resta a carousel.
   ============================================================================ */
.family-lineup__carousel.is-grid{
  display: grid;
  grid-template-columns: repeat(var(--lineup-grid-cols, 5), 1fr); /* JS bilancia le righe */
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 20px;
  overflow: visible;
  scroll-snap-type: none;
  transform: none;
  -webkit-mask-image: none;
          mask-image: none;
}
/* mobile/compact-narrow: 2 colonne (no riga lunghissima da scrollare) */
@media (max-width: 1099.98px){
  .family-lineup__carousel.is-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
/* fit-on-scroll: la sezione lineup riempie lo schermo, contenuto centrato (desktop) */
@media (min-width: 1100px){
  .family-page .family-lineup{
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .family-page .family-lineup > .family-container{ width: 100%; }
}

.family-ranges h2,
.family-lineup h2,
.family-projects h2,
.family-feature__content h2,
.family-hero__title,
.family-intro__text,
.family-product-card h3 {
  font-family: 'Oswald', var(--ds-font-heading, sans-serif);
}



/* PROJECTS */
.family-projects {
  padding: 88px 0 120px;
}

.family-projects .portfolio-hero {
  margin-top: 8px;
}

/* RESPONSIVE */
@media (min-width: 1400px) and (max-width: 1849.98px) {
  .family-container {
    max-width: 1180px;
  }

  .family-ranges__list {
    grid-template-columns: 1fr;
  }

  .family-feature__grid,
  .family-feature:nth-of-type(even) .family-feature__grid {
    grid-template-columns: 1fr;
  }

  .family-highlights__rail {
    grid-auto-columns: minmax(360px, 56vw);
  }

  .family-band-rail {
    grid-auto-columns: minmax(360px, 56vw);
  }

}

@media (max-width: 1399.98px) {
  .family-page {
    padding-top: 96px;
  }

  .family-container {
    padding: 0 20px;
  }

  .family-hero {
    min-height: 64svh;
  }

  .family-hero__content {
    padding-bottom: 40px;
  }

  .family-intro,
  .family-highlights,
  .family-feature,
  .family-ranges,
  .family-lineup,
  .family-projects {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .family-highlights__rail {
    grid-auto-columns: 84vw;
  }

  .family-highlight-card {
    min-height: 440px;
  }

  .family-highlight-card__media {
    height: 240px;
  }

  .family-lineup__carousel {
    grid-auto-columns: 240px;
  }

  .family-ranges__list {
    grid-template-columns: 1fr;
  }

  .family-band {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .family-band-card__grid {
    grid-template-columns: 1fr;
  }

  .family-band-card__media img {
    min-height: 240px;
  }

  .family-band-rail {
    grid-auto-columns: 84vw;
  }

  .family-band-card--rail {
    min-height: 440px;
  }

  .family-band-card--rail .family-band-card__media {
    height: 240px;
  }

  .family-band-card__video,
  .family-viewer__slides {
    min-height: 240px;
  }

  .family-viewer__nav {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .family-band-card--text-only {
    min-height: 420px;
  }

  .family-band-card--text-only .family-band-card__content {
    padding: 72px 20px;
  }

  .family-band-card--text-only .family-band-card__content::before,
  .family-band-card--text-only .family-band-card__content::after {
    width: min(360px, 78%);
  }

}
/* END FAMILY PAGE */


.family-product-card {
  scroll-snap-align: start;
}

/* START RANGE PAGE EXTENSIONS */
.range-page {
  padding-top: 120px;
  background: #f4f4f2;
  font-family: 'Oswald', var(--ds-font-heading, sans-serif);
}

.range-page .family-hero {
  min-height: 82svh;
}

.range-page .family-intro,
.range-page .range-dmx,
.range-page .range-families,
.range-page .range-lineup,
.range-page .family-projects {
  padding-top: 84px;
  padding-bottom: 84px;
}

.range-page .range-main,
.range-page .page-shell {
  background: #f4f4f2;
}

.range-hero--vwc .family-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 28%, rgba(255, 210, 0, .22), rgba(255, 210, 0, 0) 24%),
    radial-gradient(circle at 14% 72%, rgba(52, 112, 255, .18), rgba(52, 112, 255, 0) 22%),
    linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.18) 45%, rgba(0,0,0,.08));
  pointer-events: none;
}

.range-band--white {
  background:
    linear-gradient(180deg, #f4f2ea 0%, #e9e6dc 100%);
  color: #111;
  border-top: 1px solid rgba(209,179,0,.18);
  border-bottom: 1px solid rgba(209,179,0,.18);
}

.range-band--white .family-band__eyebrow,
.range-band--white .family-band__head h2,
.range-band--white .family-band-card__content,
.range-band--white .family-band-card__content h3,
.range-band--white .family-band-card__content p,
.range-band--white .family-band-card__slidecopy,
.range-band--white .family-band-card__slidecopy h4,
.range-band--white .family-band-card__slidecopy p,
.range-band--white .family-band-card__html,
.range-band--white .family-band-card__html p {
  color: #111 !important;
}

.range-band--color {
  background:
    radial-gradient(circle at 70% 20%, rgba(255,209,0,.08), transparent 40%),
    #1d1d22;
  color: #fff;
}

.range-band--color .family-band__eyebrow,
.range-band--color .family-band__head h2,
.range-band--color .family-band-card,
.range-band--color .family-band-card--rail,
.range-band--color .family-band-card--single,
.range-band--color .family-band-card__content,
.range-band--color .family-band-card__content h3,
.range-band--color .family-band-card__content p,
.range-band--color .family-band-card__slidecopy,
.range-band--color .family-band-card__slidecopy h4,
.range-band--color .family-band-card__slidecopy p,
.range-band--color .family-band-card__html,
.range-band--color .family-band-card__html p,
.range-band--color .family-band-card__summary {
  color: #fff !important;
}

.range-band--color .family-band-card--rail,
.range-band--color .family-band-card--single,
.range-band--color .family-band-card__content {
  background: #3a3a3f !important;
}

.range-band--modes {
  background: #111;
  color: #fff;
}

.range-dmx {
  background: #e9e7df;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* sess.50 — sfondo DMX "light pool" (direzione GD, vista a schermo).
   Velo 1: occhiello di luce radiale dietro la card (centro più caldo/chiaro →
   sfuma nel beige) = parla di LUCE, rima col tema, NON di hardware.
   Velo 2: grana cinema finissima (SVG fractalNoise) per togliere il piatto.
   STATICO di proposito: è una sezione utility, deve stare ferma (no scan-line,
   no verticali — bocciati guardando la pagina). Fascia theme-fixed → ok dark+light. */
.range-dmx::before{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    /* cono di luce CALDO direzionale dall'alto-centro (taglio ambra, ~0.22) */
    radial-gradient(95% 78% at 50% -8%, rgba(244,181,50,.22), rgba(244,181,50,.08) 40%, transparent 68%),
    /* lift chiaro dietro la card per profondità */
    radial-gradient(56% 62% at 50% 54%, rgba(255,252,246,.55), transparent 72%);
}
.range-dmx::after{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* card/contenuto sopra i veli */
.range-dmx .family-container{ position: relative; z-index: 1; }

/* sess.50 — REVEAL: la sezione DMX si rivela come le bande (.ds-sreveal via
   scroll-reveal.js), e la CARD ha la SUA entrata evidente (pop+overshoot,
   ritardata sul reveal della sezione = "spunta" dopo che la banda è salita).
   Non è utility: è la mappatura canali del range nella pagina marketing. */
.range-dmx.ds-sreveal #dmx-widget{
  opacity: 0;
  transform: scale(.92) translateY(14px);
  transition:
    opacity 520ms cubic-bezier(0, 0, .2, 1) 200ms,
    transform 640ms cubic-bezier(.2, .9, .25, 1.16) 200ms;  /* overshoot evidente */
  will-change: opacity, transform;
}
.range-dmx.ds-sreveal-in #dmx-widget{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .range-dmx.ds-sreveal #dmx-widget,
  .range-dmx.ds-sreveal-in #dmx-widget{ opacity: 1; transform: none; transition: none; }
}

/* ===== sess.50 — DMX in-page CTA (SOLO range) ============================
   Era una .dmx-card.widget--glass-pro (glass DARK) su fascia BEIGE chiara →
   sfondo trasparente + testo bianco-su-beige = card fantasma (solo il
   bottone giallo si vedeva, stirato). Ridisegnata come CTA-card chiara
   leggibile e coerente col sistema bande (doppia linea brand, accento per
   colonna, surface-tier).
   • Scope `.range-dmx #dmx-widget` → il DMX del PRODUCT (.dmx-strip) NON è
     toccato; il MODAL (.dmx-modal-*) NON è toccato.
   • La fascia è theme-fixed (sempre beige) quindi la card è sempre chiara:
     testo SCURO HARDCODED di proposito (come la banda optics) — usare
     var(--ds-c-text) la renderebbe chiara in dark-mode = di nuovo fantasma.
   • Specificità: i selettori includono #dmx-widget per battere le regole
     ID di dmx.css (caricato DOPO family.css). ======================== */
.range-dmx #dmx-widget.dmx-card.widget--glass-pro{
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f6f4ee);
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 28px;
  /* card full-row → accento su ENTRAMBI i lati (regola colonna logica) */
  box-shadow:
    0 10px 30px rgba(17,17,17,.10),
    inset 3px 0 0 rgba(244,181,50,.55),
    inset -3px 0 0 rgba(244,181,50,.55);
  overflow: hidden;
}
/* velo tecnico GHOST (consiglio AD): numeri canale DMX sfumati nell'aria morta
   in alto a dx — dice "controllo" senza le righe verticali bocciate. Clippato
   dall'overflow:hidden della card. Sotto al contenuto (z-index). */
.range-dmx #dmx-widget::before{
  content: "001  002  003  004  005  006  007  008";
  position: absolute; top: 18px; right: 26px; z-index: 0;
  font-family: var(--ds-font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .34em;
  color: #141414; opacity: .055;
  white-space: nowrap; pointer-events: none;
}
.range-dmx #dmx-widget .widget-content{
  position: relative; z-index: 1;
  padding: clamp(28px, 3.4vw, 44px);
}
.range-dmx #dmx-widget .dmx-head{
  margin: 0 0 18px;
  display: flex; flex-direction: column;   /* abilita il kicker SOPRA il titolo (order) */
}
.range-dmx #dmx-widget .dmx-title{
  margin: 0;
  font-family: var(--ds-font-heading);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #141414;
}
/* firma coerente con le bande: doppia linea brand (spessa accent + fine light) */
.range-dmx #dmx-widget .dmx-title::after{
  content: "";
  display: block;
  width: 56px; height: 9px; margin-top: 12px;
  background: linear-gradient(to bottom,
    var(--ds-c-accent) 0 4px, transparent 4px 7px, var(--ds-c-accent-light) 7px 9px);
}
/* "Active range: VW+C" è ridondante (siamo GIÀ nel range VW+C) → si tiene il
   codice range ma come KICKER discreto SOPRA il titolo, stile eyebrow come le
   bande (niente pill, niente label "Active range:"). */
.range-dmx #dmx-widget .dmx-range{
  order: -1;                 /* sopra il titolo nel flex-column di .dmx-head */
  margin: 0 0 12px;
  display: flex; align-items: center;
}
.range-dmx #dmx-widget .dmx-range [data-i18n="dmx.rangePrefix"]{ display: none; } /* via "Active range:" */
.range-dmx #dmx-widget .dmx-range-slug{
  font-family: var(--ds-font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #141414; opacity: .72;
  background: none; box-shadow: none; padding: 0; border-radius: 0;
}
/* azzera il glass-box interno: niente box-dentro-box, diventa la riga CTA
   (lead a sx, CTA a dx) — flex-direction:row esplicito per battere il
   column ereditato da dmx.css */
.range-dmx #dmx-widget .dmx-body .glass-box{
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  background: none; box-shadow: none; padding: 0; border: 0;
}
.range-dmx #dmx-widget .dmx-lead{
  margin: 0; flex: 1 1 auto; max-width: 60ch;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5;
  color: rgba(20,20,20,.66);
}
.range-dmx #dmx-widget .btn.primary.dmx-open-btn{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  width: auto; white-space: nowrap;
  padding: 14px 26px;
  font-size: 15px; font-weight: 700;
  border-radius: 14px;
  background: var(--b-brand);
  color: #111; border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(244,181,50,.30);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
@media (hover:hover){
  .range-dmx #dmx-widget .btn.primary.dmx-open-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(244,181,50,.42);
    filter: brightness(1.02);
  }
}
.range-dmx #dmx-widget .btn.primary.dmx-open-btn:active{ transform: translateY(0); }
/* freccia MONOCROMA (nero su giallo) — sostituisce la ↗ blu emoji (off-brand) */
.range-dmx #dmx-widget .btn.primary.dmx-open-btn::after{
  content: "→";
  font-size: 16px; line-height: 1;
}

@media (max-width: 760px){
  .range-dmx #dmx-widget .dmx-body .glass-box{
    flex-direction: column; align-items: stretch;
  }
  .range-dmx #dmx-widget .btn.primary.dmx-open-btn{ width: 100%; justify-content: center; }
}

.range-families {
  background: #111;
  color: #fff;
}

.range-families .family-section-head__eyebrow {
  color: var(--ds-c-accent);
}

.range-families h2 {
  color: #fff;
}
.range-families__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.range-family-card {
  appearance: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 24px 24px 28px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 18px 40px rgba(0,0,0,.22);
  color: #fff;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
}

.range-family-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 24px 56px rgba(0,0,0,.28);
}

.range-family-card[data-family-trigger="fresnel"] h3 {
  color: var(--ds-c-accent);
}

.range-family-card[data-family-trigger="softled"] h3,
.range-family-card[data-family-trigger="lightbox"] h3 {
  color: var(--ds-c-accent);
}

.range-family-card[data-family-trigger="softled"] h3 span,
.range-family-card[data-family-trigger="lightbox"] h3 span {
  color: #fff;
}

.range-family-card__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.64);
}

.range-family-card h3 {
  margin: 0 0 12px;
  font-size: clamp(30px, 2.5vw, 54px);
  line-height: .9;
  letter-spacing: -.03em;
  font-weight: 800;
  min-height: 2.05em;
  display: flex;
  align-items: flex-end;
}

.range-family-card h3 span {
  color: #fff;
}

.range-family-card p:last-child {
  margin: 0;
  max-width: 24ch;
  color: rgba(255,255,255,.78);
}

.range-lineup {
  background: #181818;
  color: #fff;
}

.range-lineup .family-section-head__eyebrow,
.range-lineup h2 {
  color: #fff;
}

.range-lineup-group + .range-lineup-group {
  margin-top: 34px;
}

.range-lineup-group__head {
  margin-bottom: 14px;
}

.range-lineup-group__head h3 {
  margin: 0;
  font-size: clamp(28px, 2vw, 42px);
  line-height: .96;
  letter-spacing: -.03em;
  color: var(--ds-c-accent);
}

.range-page .family-product-card {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 0 2px var(--ds-card-stroke),
    0 14px 34px rgba(0,0,0,.24);
}

.range-page .family-product-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 0 2px var(--ds-card-stroke-strong),
    0 18px 42px rgba(0,0,0,.30);
}

.range-page .family-projects {
  padding-top: 88px;
  padding-bottom: 120px;
}

@media (min-width: 1400px) and (max-width: 1849.98px) {
  .range-families__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1399.98px) {
  .range-page {
    padding-top: 96px;
  }

  .range-page .family-hero {
    min-height: 64svh;
  }

  .range-page .family-intro,
  .range-page .range-dmx,
  .range-page .range-families,
  .range-page .range-lineup,
  .range-page .family-projects {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .range-families__grid {
    grid-template-columns: 1fr;
  }

  .range-family-card {
    min-height: 180px;
  }
}
/* END RANGE PAGE EXTENSIONS */

/* START FAMILY PRODUCT RANGE POWER */
.family-product-card__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  align-items: flex-start;
}

.family-product-card__range-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 44px;
}

.family-product-card__range-power {
  display: block;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  text-align: center;
  white-space: nowrap;
}

.family-product-card--special .family-product-card__range-power {
  color: rgba(255,214,64,.95);
}
/* END FAMILY PRODUCT RANGE POWER */