/* Simple — official 8-page A4 company profile. Red / black / white. */
@page { size: A4 portrait; margin: 0 }
* { box-sizing: border-box }
html, body { margin: 0; padding: 0; background: #111 }
body { font-family: Montserrat, Arial, Helvetica, sans-serif; color: #0a0a0a }
a { color: inherit; font-weight: 800; text-decoration: none }

.screen-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: #0a0a0a; color: #fff;
  font: 700 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.screen-bar .how { flex: 1; font-weight: 600; letter-spacing: .04em; text-transform: none; opacity: .9 }
.screen-bar a, .screen-bar button {
  background: #c8102e; color: #fff; border: 0; padding: 10px 14px;
  font: 800 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
}

.page {
  width: 210mm; height: 297mm; max-height: 297mm;
  page-break-after: always; break-after: page; page-break-inside: avoid;
  position: relative; overflow: hidden; background: #fff;
}
.page:last-of-type { page-break-after: auto; break-after: auto }

.kicker {
  letter-spacing: .28em; text-transform: uppercase; font-size: 8pt; font-weight: 800;
  color: #c8102e; margin: 0 0 5mm;
}
.pg {
  position: absolute; right: 16mm; top: 16mm; z-index: 4;
  font-size: 8pt; letter-spacing: .2em; text-transform: uppercase; color: #c8102e; font-weight: 800;
}

/* ===== 01 COVER ===== */
.cover { background: #0a0a0a; color: #fff }
.shard { position: absolute; background: #c8102e }
.shard.a { left: -20mm; top: 0; width: 90mm; height: 110mm; clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%) }
.shard.b { right: 0; top: 0; width: 70mm; height: 80mm; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 70%) }
.shard.c { left: 0; bottom: 0; width: 100%; height: 48mm; clip-path: polygon(0 55%, 100% 0, 100% 100%, 0 100%) }
.photo-ring {
  position: absolute; right: 14mm; top: 28mm;
  width: 92mm; height: 92mm; border-radius: 50%; padding: 3mm; background: #c8102e;
}
.photo-ring .face, .close-ring .face {
  width: 100%; height: 100%; border-radius: 50%;
  background: #111 center 20%/cover no-repeat; filter: grayscale(.15) contrast(1.05);
}
.cover-copy { position: absolute; left: 16mm; top: 118mm; right: 16mm; z-index: 2 }
.cover-copy .kicker { color: #c8102e; margin: 0 0 6mm }
.cover-copy h1 {
  margin: 0; font-size: 38pt; line-height: .86; font-weight: 800;
  letter-spacing: -.03em; text-transform: uppercase;
}
.cover-copy h1 span { display: block; font-size: 46pt }
.rule { width: 42mm; height: 2.2mm; background: #c8102e; margin: 6mm 0 5mm }
.cover-copy .tag { margin: 0; font-size: 12pt; font-weight: 600; letter-spacing: .04em }
.logo-lock { position: absolute; left: 16mm; top: 16mm; z-index: 3; height: 22mm; width: auto }
.cover-foot {
  position: absolute; left: 16mm; right: 16mm; bottom: 10mm; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: 8pt; letter-spacing: .16em; text-transform: uppercase;
}

/* ===== 02 ABOUT ===== */
.p2 { background: #fff }
.blob {
  position: absolute; right: -18mm; top: -10mm;
  width: 118mm; height: 118mm; border-radius: 0 0 0 80mm;
  background: #111 center/cover no-repeat; filter: grayscale(.2);
}
.red-panel {
  position: absolute; right: 0; top: 112mm;
  width: 92mm; height: 56mm; background: #c8102e; color: #fff;
  padding: 8mm 8mm 8mm 10mm;
}
.red-panel h3 { margin: 0 0 3mm; font-size: 11pt; letter-spacing: .16em; text-transform: uppercase }
.red-panel p { margin: 0; font-size: 10pt; line-height: 1.4 }
.p2-copy { position: absolute; left: 16mm; top: 18mm; width: 88mm }
.p2-copy h2 { margin: 0 0 6mm; font-size: 24pt; line-height: .92; text-transform: uppercase; font-weight: 800 }
.p2-copy p { margin: 0 0 4mm; font-size: 10pt; line-height: 1.45 }
.facts {
  position: absolute; left: 16mm; right: 16mm; bottom: 16mm;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4mm;
  margin: 0;
}
.facts div { background: #0a0a0a; color: #fff; padding: 5mm 6mm }
.facts dt { font-size: 7.5pt; letter-spacing: .18em; text-transform: uppercase; color: #c8102e; margin: 0 0 1.5mm }
.facts dd { margin: 0; font-size: 10pt; font-weight: 700 }
.facts.stack { position: static; display: grid; grid-template-columns: 1fr; margin-top: 8mm }
.facts.stack div { background: #f4f4f4; color: #0a0a0a }
.facts.stack dt { color: #c8102e }

/* ===== 03 INTENT ===== */
.p3-intent { padding: 22mm 16mm 18mm }
.p3-intent h2 { margin: 0 0 12mm; font-size: 28pt; text-transform: uppercase; font-weight: 800; line-height: .92 }
.nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5mm }
.nums article { background: #0a0a0a; color: #fff; padding: 7mm 6mm; min-height: 78mm }
.nums .n {
  width: 10mm; height: 10mm; background: #c8102e; color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 11pt; margin-bottom: 5mm;
}
.nums h3 { margin: 0 0 3mm; font-size: 11pt; letter-spacing: .12em; text-transform: uppercase }
.nums p { margin: 0; font-size: 9.5pt; line-height: 1.4 }
.intent-note { position: absolute; left: 16mm; right: 16mm; bottom: 18mm; background: #c8102e; color: #fff; padding: 8mm }
.intent-note p { margin: 0; font-size: 10.5pt; line-height: 1.45 }

/* ===== 04 SERVICES ===== */
.p4 { background: #fff }
.p4-inner { padding: 16mm 16mm 18mm }
.p4 h2 { margin: 0 0 10mm; font-size: 28pt; text-transform: uppercase; font-weight: 800 }
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 6mm }
.svc a {
  display: grid; grid-template-columns: 14mm 1fr; gap: 5mm; align-items: center;
  background: #0a0a0a; color: #fff; padding: 5mm 6mm; min-height: 28mm;
}
.svc b {
  width: 12mm; height: 12mm; background: #c8102e; color: #fff;
  display: grid; place-items: center; font-size: 8pt;
}

/* ===== 05 METHOD ===== */
.p5 { padding: 22mm 16mm 16mm }
.p5 h2 { margin: 0 0 8mm; font-size: 26pt; text-transform: uppercase; font-weight: 800; line-height: .92 }
.gates { list-style: none; margin: 0 0 10mm; padding: 0 }
.gates li {
  display: grid; grid-template-columns: 42mm 1fr; gap: 6mm; align-items: baseline;
  border-top: 1px solid #ddd; padding: 4mm 0;
}
.gates b { color: #c8102e; letter-spacing: .08em; text-transform: uppercase; font-size: 10pt }
.gates span { font-size: 10pt; line-height: 1.35 }
.flag { display: grid; grid-template-columns: 72mm 1fr; gap: 8mm; background: #0a0a0a; color: #fff }
.flag-ph { min-height: 52mm; background: #111 center/cover no-repeat; filter: grayscale(.2) }
.flag > div:last-child { padding: 7mm 7mm 7mm 0 }
.flag h3 { margin: 0 0 3mm; font-size: 16pt; text-transform: uppercase }
.flag p { margin: 0; font-size: 9.5pt; line-height: 1.4 }

/* ===== 06 WORK ===== */
.p6 { padding: 22mm 16mm 16mm }
.p6 h2 { margin: 0 0 10mm; font-size: 26pt; text-transform: uppercase; font-weight: 800; line-height: .92 }
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm }
.work article { background: #0a0a0a; color: #fff }
.wph { height: 58mm; background: #111 center/cover no-repeat; filter: grayscale(.15) }
.work h3 { margin: 4mm 5mm 1mm; font-size: 11pt; letter-spacing: .08em; text-transform: uppercase }
.work p { margin: 0 5mm 5mm; font-size: 9pt; line-height: 1.35 }

/* ===== 07 FOUNDER ===== */
.p7 { background: #fff }
.p7-photo {
  position: absolute; left: 0; top: 0; bottom: 0; width: 88mm;
  background: #111 center 12%/cover no-repeat; filter: none;
}
.p7-copy { position: absolute; left: 100mm; right: 16mm; top: 22mm; bottom: 16mm }
.p7-copy h2 { margin: 0 0 2mm; font-size: 22pt; line-height: .95; text-transform: uppercase; font-weight: 800 }
.p7-copy .role { color: #c8102e; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 9pt; margin: 0 0 5mm }
.p7-copy > p { margin: 0 0 4mm; font-size: 10pt; line-height: 1.45 }

/* ===== 08 CLOSE ===== */
.close { background: #0a0a0a; color: #fff }
.close .shard.a { clip-path: polygon(0 0, 70% 0, 30% 100%, 0 100%); width: 80mm; height: 100% }
.close .shard.b { right: 0; top: auto; bottom: 0; width: 90mm; height: 90mm; clip-path: polygon(100% 0, 100% 100%, 0 100%) }
.close-copy {
  position: absolute; left: 16mm; right: 16mm; top: 42mm; z-index: 2;
}
.close-copy .kicker { color: #c8102e }
.close-copy h1 { margin: 0 0 10mm; font-size: 36pt; line-height: .88; text-transform: uppercase; font-weight: 800 }
.close-copy .wa {
  display: inline-block; background: #c8102e; color: #fff; padding: 5mm 8mm;
  font-size: 13pt; letter-spacing: .04em;
}
.close-copy .meta { margin-top: 12mm; font-size: 10pt; line-height: 1.55 }
.close-copy .meta p { margin: 0 0 2mm }
.close-ring {
  position: absolute; right: 16mm; bottom: 22mm; width: 64mm; height: 64mm;
  border-radius: 50%; padding: 3mm; background: #c8102e; z-index: 2;
}

@media print {
  .screen-bar { display: none !important }
  html, body { background: #fff !important; height: auto !important }
  .page { height: 297mm !important; max-height: 297mm !important; overflow: hidden !important }
}