/* House — official 14-page A4. Red / black / white. Graphic, not a text dump. */
@page { size: A4 portrait; margin: 0 }
* { box-sizing: border-box }
html, body { margin: 0; padding: 0; background: #111 }
body { font-family: Inter, Helvetica, Arial, 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 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;
}

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

.k { letter-spacing: .26em; text-transform: uppercase; font-size: 8pt; font-weight: 800; color: #c8102e; margin: 0 0 4mm }
.pn { position: absolute; right: 16mm; top: 14mm; z-index: 4; font-size: 8pt; letter-spacing: .2em; text-transform: uppercase; color: #c8102e; font-weight: 800 }
h2 { margin: 0 0 6mm; font-size: 26pt; line-height: .92; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase }
p { margin: 0 0 4mm; font-size: 10.5pt; line-height: 1.45 }
.foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #0a0a0a; color: #fff; padding: 4mm 16mm;
  display: flex; justify-content: space-between; font-size: 8pt; letter-spacing: .14em; text-transform: uppercase;
}
.foot b { color: #c8102e }

/* 01 cover */
.cover { background: #0a0a0a; color: #fff; padding: 0 }
.cover .band { position: absolute; left: 0; top: 0; bottom: 0; width: 18mm; background: #c8102e }
.cover .face {
  position: absolute; right: 0; top: 0; bottom: 0; width: 92mm;
  background: #111 center 12%/cover no-repeat;
}
.cover .copy { position: absolute; left: 28mm; right: 100mm; top: 28mm; bottom: 22mm; display: flex; flex-direction: column }
.cover img.logo { height: 18mm; width: auto; margin-bottom: 18mm }
.cover h1 { margin: auto 0 6mm; font-size: 34pt; line-height: .88; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase }
.cover .tag { font-size: 12pt; font-weight: 600; margin: 0 0 10mm }
.cover .meta { margin-top: auto; font-size: 8.5pt; letter-spacing: .14em; text-transform: uppercase; color: #c8102e }

/* 02 contents */
.pad { padding: 22mm 16mm 22mm }
.toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10mm }
.toc li { display: grid; grid-template-columns: 12mm 1fr; gap: 4mm; border-top: 1px solid #e5e5e5; padding: 3.6mm 0 }
.toc b { color: #c8102e; font-size: 9pt }
.toc span { font-size: 10.5pt; font-weight: 700 }

/* 03 letter */
.letter { display: grid; grid-template-columns: 82mm 1fr; min-height: 297mm }
.letter .ph { background: #111 center 12%/cover no-repeat }
.letter .copy { padding: 22mm 14mm 22mm 12mm }
.letter h2 { font-size: 22pt }
.sign { margin-top: 10mm; font-weight: 800 }
.sign em { display: block; color: #c8102e; font-style: normal; font-size: 8.5pt; letter-spacing: .16em; text-transform: uppercase; margin-top: 2mm }

/* 04 facts */
table.facts { width: 100%; border-collapse: collapse; margin-top: 4mm }
table.facts td { border-bottom: 1px solid #e5e5e5; padding: 3.2mm 0; vertical-align: top }
table.facts td:first-child { width: 48mm; font-weight: 800; color: #c8102e; text-transform: uppercase; font-size: 8pt; letter-spacing: .14em }

/* 05 intent */
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5mm; margin-top: 4mm }
.three article { background: #0a0a0a; color: #fff; padding: 7mm 6mm; min-height: 92mm }
.three .n { width: 10mm; height: 10mm; background: #c8102e; color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 6mm }
.three h3 { margin: 0 0 3mm; font-size: 11pt; letter-spacing: .12em; text-transform: uppercase }
.three p { font-size: 9.5pt; color: #fff }
.note { position: absolute; left: 16mm; right: 16mm; bottom: 18mm; background: #c8102e; color: #fff; padding: 7mm }
.note p { margin: 0; color: #fff; font-size: 10.5pt }

/* 06 services */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm }
.svc a {
  display: grid; grid-template-columns: 14mm 1fr; gap: 5mm; align-items: center;
  background: #0a0a0a; color: #fff; padding: 5mm 6mm; min-height: 27mm;
}
.svc b { width: 12mm; height: 12mm; background: #c8102e; color: #fff; display: grid; place-items: center; font-size: 8pt }

/* 07 gates */
.gates { list-style: none; margin: 0; padding: 0 }
.gates li { display: grid; grid-template-columns: 42mm 1fr; gap: 6mm; border-top: 1px solid #ddd; padding: 5mm 0 }
.gates b { color: #c8102e; letter-spacing: .08em; text-transform: uppercase; font-size: 10pt }

/* 08 why */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm }
.why article { background: #f4f4f4; padding: 7mm; min-height: 48mm; border-top: 4mm solid #c8102e }
.why h3 { margin: 0 0 3mm; font-size: 12pt; text-transform: uppercase; letter-spacing: .06em }
.why p { margin: 0; font-size: 10pt }

/* 09 / 10 split photo */
.split { display: grid; grid-template-columns: 92mm 1fr; min-height: 297mm }
.split .ph { background: #111 center/cover no-repeat }
.split .copy { padding: 22mm 14mm 22mm 12mm }
.ip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3mm; margin-top: 8mm }
.ip div { background: #0a0a0a; color: #fff; padding: 4mm }
.ip dt { font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #c8102e; margin: 0 0 1mm }
.ip dd { margin: 0; font-weight: 800; font-size: 10pt }

/* 11 founder */
.founder { display: grid; grid-template-columns: 98mm 1fr; min-height: 297mm }
.founder .ph { background: #111 center 10%/cover no-repeat }
.founder .copy { padding: 22mm 14mm 22mm 12mm }
.role { color: #c8102e; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 8.5pt; margin: 0 0 5mm }
.stack { display: grid; gap: 3mm; margin-top: 8mm }
.stack div { background: #f4f4f4; padding: 4mm 5mm }
.stack dt { font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #c8102e; margin: 0 0 1mm }
.stack dd { margin: 0; font-weight: 700 }

/* 12 industries */
.ind { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm }
.ind article { background: #0a0a0a; color: #fff; padding: 7mm; min-height: 42mm }
.ind h3 { margin: 0 0 2mm; font-size: 12pt; text-transform: uppercase }
.ind p { margin: 0; color: #fff; font-size: 9.5pt }

/* 13 media */
.media { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4mm }
.media article { background: #f4f4f4; padding: 6mm; min-height: 40mm; border-left: 3mm solid #c8102e }
.media h3 { margin: 0 0 2mm; font-size: 11pt; text-transform: uppercase }
.hero-ph { height: 78mm; background: #111 center/cover no-repeat; margin: 0 0 8mm }

/* 14 close */
.close { background: #c8102e; color: #fff }
.close .copy { position: absolute; left: 16mm; right: 90mm; top: 36mm }
.close h1 { margin: 0 0 10mm; font-size: 34pt; line-height: .88; font-weight: 800; text-transform: uppercase; letter-spacing: -.03em }
.close .wa { display: inline-block; background: #0a0a0a; color: #fff; padding: 5mm 8mm; font-size: 12pt }
.close .meta { margin-top: 14mm; font-size: 10pt; line-height: 1.55 }
.close .ring {
  position: absolute; right: 16mm; bottom: 28mm; width: 68mm; height: 68mm;
  border-radius: 50%; padding: 3mm; background: #0a0a0a;
}
.close .ring i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: #111 center 12%/cover no-repeat;
}

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