:root {
  --paper: #d4c2e6;
  --paper-light: #e4d8ef;
  --black: #050505;
  --ink: #101012;
  --blue: #2549e6;
  --red: #f0442d;
  --acid: #dfff00;
  --white: #f5f1f9;
  --muted: #5f5569;
  --line: rgba(5, 5, 5, .28);
  --display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  line-height: 1.4;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: .16;
  background-image: radial-gradient(rgba(255,255,255,.7) .5px, transparent .8px), radial-gradient(rgba(0,0,0,.22) .45px, transparent .8px);
  background-position: 0 0, 11px 13px;
  background-size: 17px 17px, 23px 23px;
  mix-blend-mode: multiply;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.dossier-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 16px 5vw;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 9px var(--mono);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dossier-nav a { color: var(--ink); margin-right: auto; }
.dossier-nav a:hover, .dossier-link:hover { color: var(--red); }
.dossier-main { width: min(1420px, 100%); margin: 0 auto; padding: 0 5vw; }
.dossier-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr); gap: 30px; align-items: end; padding: 105px 0 78px; }
.dossier-hero > *:first-child { grid-column: 1 / -1; }
.eyebrow { color: var(--red); font: 800 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dossier-hero h1 { max-width: 980px; margin: 22px 0 0; font: 900 clamp(61px, 9vw, 142px)/.79 var(--display); letter-spacing: -.11em; text-transform: uppercase; }
.dossier-hero h1 em { color: var(--red); font-style: normal; }
.dossier-hero p { max-width: 455px; margin: 0 0 6px; color: var(--muted); font-size: 15px; font-weight: 600; line-height: 1.5; }
.dossier-signal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; grid-column: 1 / -1; margin-top: 23px; }
.dossier-signal span { min-height: 44px; padding: 13px 12px; background: var(--black); color: var(--acid); font: 800 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.dossier-signal span:nth-child(2) { background: var(--blue); color: var(--white); }
.dossier-signal span:nth-child(3) { background: var(--acid); color: var(--black); }
.family-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 9px; }
.family-card { display: flex; min-height: 630px; flex-direction: column; overflow: hidden; border: 1px solid var(--black); background: var(--paper-light); }
.family-card:hover .family-media img { transform: scale(1.025); }
.family-card-w1 { background: var(--black); color: var(--white); }
.family-card-head { display: flex; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--black); font: 800 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.family-card-w1 .family-card-head { border-color: rgba(245,241,249,.28); color: var(--acid); }
.family-media { position: relative; overflow: hidden; min-height: 370px; background: #eee; }
.family-media img { width: 100%; height: 100%; min-height: 370px; object-fit: cover; transition: transform .45s ease; }
.family-card-kwr .family-media img { object-position: center 47%; mix-blend-mode: multiply; }
.family-card-w1 .family-media { background: #eee; }
.family-card-w1 .family-media img { object-fit: contain; padding: 10px 4%; }
.family-media::after { position: absolute; right: 14px; bottom: 14px; left: 14px; z-index: 1; padding: 8px 10px; content: attr(data-label); background: var(--black); color: var(--acid); font: 800 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.family-card-copy { display: flex; flex: 1; flex-direction: column; padding: 22px 18px 20px; }
.family-card-copy h2 { margin: 0; font: 900 clamp(37px, 4.3vw, 65px)/.84 var(--display); letter-spacing: -.1em; }
.family-card-copy h2 span { color: var(--red); }
.family-card-w1 .family-card-copy h2 span { color: var(--acid); }
.family-card-copy p { max-width: 570px; margin: 21px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.48; }
.family-card-w1 .family-card-copy p { color: #b8b0bd; }
.family-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 26px; }
.family-tags span { padding: 7px 8px; border: 1px solid currentColor; color: var(--red); font: 800 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.family-card-w1 .family-tags span { color: var(--acid); }
.dossier-link { display: inline-flex; align-self: flex-start; margin-top: 22px; padding: 10px 12px; background: var(--black); color: var(--acid); font: 800 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.family-card-w1 .dossier-link { background: var(--acid); color: var(--black); }
.dossier-section { padding: 112px 0 96px; }
.dossier-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .5fr); gap: 30px; align-items: end; }
.black-strip { display: inline-flex; align-items: center; justify-self: start; min-height: 28px; padding: 7px 10px; background: var(--black); color: var(--white); font: 800 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dossier-section h2 { max-width: 850px; margin: 24px 0 0; font: 900 clamp(49px, 6vw, 94px)/.82 var(--display); letter-spacing: -.11em; }
.dossier-section h2 span { color: var(--blue); }
.dossier-section-head p { max-width: 410px; margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.48; }
.folder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 51px; }
.folder-card { display: flex; min-height: 184px; flex-direction: column; padding: 16px; border: 1px solid var(--black); background: var(--paper-light); transition: background .2s ease, color .2s ease, transform .2s ease; }
.folder-card:hover { transform: translateY(-3px); background: var(--black); color: var(--white); }
.folder-card > span { color: var(--red); font: 800 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.folder-card strong { margin-top: 32px; font: 900 28px/.9 var(--display); letter-spacing: -.08em; }
.folder-card small { max-width: 280px; margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.35; }
.folder-card:hover small { color: var(--paper); }
.folder-card-acid { background: var(--acid); }
.folder-card-acid:hover { background: var(--red); color: var(--black); }
.folder-card-acid small { color: var(--black); }
.dossier-note { margin: 18px 0 0; color: var(--muted); font: 800 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.dossier-footer { display: flex; align-items: center; gap: 22px; min-height: 82px; padding: 17px 5vw; border-top: 1px solid var(--line); color: var(--muted); font: 800 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.dossier-footer a { margin-right: auto; color: var(--ink); }

.package-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr); gap: 38px; align-items: end; padding: 93px 0 66px; }
.package-hero h1 { margin: 18px 0 0; font: 900 clamp(55px, 8vw, 120px)/.8 var(--display); letter-spacing: -.11em; text-transform: uppercase; }
.package-hero h1 em { color: var(--red); font-style: normal; }
.package-hero-copy p { max-width: 445px; margin: 24px 0 0; color: var(--muted); font-size: 15px; font-weight: 600; line-height: 1.5; }
.package-status { display: inline-flex; margin-top: 23px; padding: 9px 11px; background: var(--black); color: var(--acid); font: 800 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.package-hero-media { position: relative; overflow: hidden; min-height: 440px; border: 1px solid var(--black); background: #eee; }
.package-hero-media img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.package-hero-media img.contain { object-fit: contain; padding: 3%; }
.package-hero-media::after { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 8px 10px; content: attr(data-label); background: var(--black); color: var(--acid); font: 800 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.package-signal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 8px; }
.package-signal div { min-height: 105px; padding: 13px; background: var(--black); color: var(--white); }
.package-signal div:nth-child(2) { background: var(--blue); }
.package-signal div:nth-child(3) { background: var(--acid); color: var(--black); }
.package-signal div:nth-child(4) { background: var(--red); color: var(--black); }
.package-signal span { display: block; font: 800 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.package-signal strong { display: block; margin-top: 30px; font: 900 29px/.8 var(--display); letter-spacing: -.08em; }
.package-gallery { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: 230px 200px; gap: 8px; margin-top: 48px; }
.package-gallery figure { position: relative; overflow: hidden; min-height: 200px; border: 1px solid var(--black); background: #eee; }
.package-gallery figure:first-child { grid-row: 1 / span 2; }
.package-gallery img { width: 100%; height: 100%; object-fit: cover; }
.package-gallery figcaption { position: absolute; right: 9px; bottom: 9px; left: 9px; padding: 7px 8px; background: var(--black); color: var(--acid); font: 800 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.package-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 34px; align-items: start; padding: 95px 0 25px; }
.package-copy h2 { margin: 0; font: 900 clamp(45px, 5vw, 77px)/.83 var(--display); letter-spacing: -.1em; }
.package-copy h2 span { color: var(--blue); }
.package-copy p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.52; }
.package-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 34px; }
.package-folder { display: flex; min-height: 142px; flex-direction: column; padding: 14px; border: 1px solid var(--black); background: var(--paper-light); }
.package-folder:hover { background: var(--black); color: var(--white); }
.package-folder span { color: var(--red); font: 800 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.package-folder strong { margin-top: 28px; font: 900 23px/.9 var(--display); letter-spacing: -.07em; }
.package-folder small { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.package-folder:hover small { color: var(--paper); }
.package-disclaimer { margin: 18px 0 0; padding-top: 15px; border-top: 4px solid var(--black); color: var(--muted); font: 800 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.package-video { margin-top: 8px; border: 1px solid var(--black); background: var(--black); }
.package-video video { width: 100%; max-height: 540px; object-fit: contain; background: var(--black); }

@media (max-width: 900px) {
  .dossier-hero, .dossier-section-head, .package-hero, .package-copy { grid-template-columns: 1fr; }
  .dossier-hero > *:first-child { grid-column: auto; }
  .family-grid { grid-template-columns: 1fr; }
  .family-card { min-height: 0; }
  .folder-grid { grid-template-columns: 1fr 1fr; }
  .package-hero-media { min-height: 360px; }
  .package-hero-media img { min-height: 360px; }
}
@media (max-width: 600px) {
  .dossier-nav { flex-wrap: wrap; gap: 10px 16px; padding: 14px 20px; }
  .dossier-nav a { width: 100%; margin-right: 0; }
  .dossier-main { padding: 0 20px; }
  .dossier-hero { padding: 70px 0 55px; }
  .dossier-hero h1 { font-size: 59px; }
  .dossier-signal, .folder-grid, .package-signal, .package-folders { grid-template-columns: 1fr; }
  .family-media, .family-media img { min-height: 290px; }
  .dossier-section { padding: 74px 0 66px; }
  .dossier-section h2 { font-size: 52px; }
  .package-hero { padding: 65px 0 50px; }
  .package-hero h1 { font-size: 60px; }
  .package-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 245px 170px 170px; }
  .package-gallery figure:first-child { grid-column: 1 / -1; grid-row: 1; }
  .package-gallery figure { min-height: 170px; }
  .package-copy { padding-top: 70px; }
  .package-copy h2 { font-size: 50px; }
  .package-video video { min-height: 210px; }
  .dossier-footer { flex-wrap: wrap; gap: 8px 16px; padding: 16px 20px; }
  .dossier-footer a { width: 100%; margin-right: 0; }
}