/* Superb Modular — shareable A4 documents (/catalogue, /brochure).
   On screen each .sheet is an A4 page that scales to the window; in print / PDF each sheet is one page.
   Sizes inside a sheet use cqw (1cqw = 1% of the sheet width) so the layout is identical at any size. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  --paper: #ffffff;
  --ink: #111316;
  --ink-2: #4a4f57;
  --ink-3: #8a8f97;
  --line: #e4e6ea;
  --tint: #f4f5f7;
  --blue: #3c6fe2;          /* the "Modular" blue in the logo */
  --amber: #e2962e;
  --night: #0b0c0e;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #2a2d32; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- toolbar (screen only) ---------- */
.toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: rgba(17,19,22,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #f3f0ea; border-bottom: 1px solid rgba(255,255,255,.08); }
.toolbar .logo img { height: 18px; width: auto; }
.toolbar .title { font: 500 13px/1.2 var(--sans); color: #b9b5ad; margin-inline-end: auto; }
.toolbar a, .toolbar button { font: 600 13px/1 var(--sans); color: #f3f0ea; text-decoration: none; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: none; cursor: pointer; white-space: nowrap; }
.toolbar .primary { background: var(--amber); border-color: var(--amber); color: #1a1206; }
.toolbar .note { font: 500 12px/1 var(--sans); color: #8a8f97; }
@media (max-width: 640px) { .toolbar .title { display: none; } .toolbar .logo { margin-inline-end: auto; } .toolbar a, .toolbar button { padding: 9px 11px; font-size: 12px; } }

/* ---------- sheets ---------- */
.doc { display: grid; gap: 24px; justify-items: center; padding: 24px 16px 64px; }
.sheet { position: relative; width: min(210mm, 100%); aspect-ratio: 210 / 297; background: var(--paper); overflow: hidden; container-type: inline-size; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.sheet.dark { background: var(--night); color: #f3f0ea; }
.pad { padding: 7cqw 7.5cqw; }
.grow { flex: 1; min-height: 0; }

/* type */
.eyebrow { font: 500 1.35cqw/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.dark .eyebrow { color: var(--amber); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 9.5cqw; line-height: .95; }
h2 { font-size: 6.2cqw; line-height: 1.02; margin: 1.6cqw 0 2.2cqw; }
h3 { font-size: 3.4cqw; line-height: 1.1; }
p { font-size: 1.9cqw; line-height: 1.55; color: var(--ink-2); margin: 0 0 1.6cqw; }
.dark p { color: #b9b5ad; }
em.hl { font-style: italic; color: var(--blue); }
.dark em.hl { color: var(--amber); }
.small { font-size: 1.45cqw; line-height: 1.5; color: var(--ink-3); }

/* running footer */
.foot { display: flex; justify-content: space-between; align-items: center; padding: 2.6cqw 7.5cqw; border-top: 1px solid var(--line); font: 500 1.25cqw/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dark .foot { border-color: rgba(255,255,255,.1); color: #7d7a74; }

/* cover */
.cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.05) 30%, rgba(8,9,11,.35) 60%, rgba(8,9,11,.92) 100%); }
.cover-top, .cover-bottom { position: relative; z-index: 1; padding: 7cqw 7.5cqw; color: #f3f0ea; }
.cover-top { display: flex; justify-content: space-between; align-items: center; }
.cover-top img { height: 4.2cqw; width: auto; }
.cover-top span { font: 500 1.3cqw/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #d9d5cc; }
.cover-bottom { margin-top: auto; }
.cover-bottom h1 { color: #fff; }
.cover-bottom h1 em { color: var(--amber); }
.cover-bottom p { color: #d9d5cc; font-size: 2.2cqw; max-width: 70cqw; margin-top: 2.4cqw; }
.cover-meta { display: flex; gap: 4cqw; margin-top: 3.5cqw; padding-top: 2.6cqw; border-top: 1px solid rgba(255,255,255,.22); font: 500 1.3cqw/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #d9d5cc; }
.cover-meta b { display: block; color: #fff; font: 400 3.6cqw/1 var(--serif); letter-spacing: 0; text-transform: none; margin-bottom: .6cqw; }

/* contents */
.toc { columns: 2; column-gap: 5cqw; margin-top: 1cqw; }
.toc-fam { break-inside: avoid; margin-bottom: 3cqw; }
.toc-fam h4 { margin: 0 0 1cqw; font: 600 1.35cqw/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.toc-row { display: grid; grid-template-columns: 9cqw 1fr auto; gap: 1.8cqw; align-items: center; padding: 1cqw 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.toc-row img { width: 9cqw; aspect-ratio: 4/3; object-fit: cover; border-radius: .8cqw; }
.toc-row b { display: block; font: 400 2.5cqw/1.05 var(--serif); }
.toc-row span { font-size: 1.4cqw; color: var(--ink-3); }
.toc-row i { font: 500 1.4cqw/1 var(--mono); font-style: normal; color: var(--ink-3); }

/* product page */
.hero { position: relative; height: 47%; flex: none; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero .fam { position: absolute; inset-inline-start: 7.5cqw; top: 5cqw; font: 600 1.25cqw/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(11,12,14,.6); padding: 1.2cqw 1.6cqw; border-radius: 5cqw; }
.thumbs { display: grid; gap: 1.2cqw; padding: 1.2cqw 7.5cqw 0; grid-template-columns: repeat(4, 1fr); flex: none; }
.thumbs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: .8cqw; }
.pbody { display: grid; grid-template-columns: 1.05fr 1fr; gap: 5cqw; padding: 4.5cqw 7.5cqw 3cqw; flex: 1; min-height: 0; }
.pbody h2 { font-size: 6.6cqw; margin: 0 0 1cqw; }
.pbody .tag { font: 600 1.7cqw/1.3 var(--sans); color: var(--blue); margin-bottom: 2.4cqw; }
.specs { width: 100%; border-collapse: collapse; font-size: 1.55cqw; align-self: start; }
.specs td { padding: 1.15cqw 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.35; }
.specs td:first-child { width: 40%; font: 500 1.2cqw/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-inline-end: 1.5cqw; }
.cta { margin-top: 2.4cqw; padding: 1.8cqw 2cqw; border-radius: 1.2cqw; background: var(--tint); font-size: 1.5cqw; line-height: 1.45; color: var(--ink-2); }
.cta b { color: var(--ink); }

/* generic blocks */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.photo { width: 100%; object-fit: cover; border-radius: 1.2cqw; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 3cqw 0; }
.stats div { padding: 2.4cqw 1.6cqw; border-inline-start: 1px solid var(--line); font-size: 1.4cqw; line-height: 1.4; color: var(--ink-2); }
.stats div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stats b { display: block; font: 400 5cqw/1 var(--serif); color: var(--ink); margin-bottom: .8cqw; }
.stats b small { font: 600 1.5cqw/1 var(--sans); color: var(--blue); margin-inline-start: .4cqw; }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw 3cqw; }
.steps div { counter-increment: s; border-top: 2px solid var(--blue); padding-top: 1.6cqw; font-size: 1.55cqw; line-height: 1.5; color: var(--ink-2); }
.dark .steps div { border-color: var(--amber); color: #b9b5ad; }
.steps div::before { content: counter(s, decimal-leading-zero); display: block; font: 400 4cqw/1 var(--serif); color: var(--ink-3); margin-bottom: 1cqw; }
.steps b { display: block; color: var(--ink); font-size: 1.8cqw; margin-bottom: .6cqw; }
.dark .steps b { color: #f3f0ea; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 1.3cqw 0; border-top: 1px solid var(--line); font-size: 1.6cqw; line-height: 1.45; color: var(--ink-2); }
.list li b { color: var(--ink); }
.dark .list li { border-color: rgba(255,255,255,.12); color: #b9b5ad; }
.dark .list li b { color: #f3f0ea; }
.chips { display: flex; flex-wrap: wrap; gap: 1cqw; }
.chips span { font: 600 1.3cqw/1 var(--sans); padding: 1cqw 1.4cqw; border-radius: 5cqw; border: 1px solid var(--line); color: var(--ink-2); }
.tile { position: relative; border-radius: 1.2cqw; overflow: hidden; }
.tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tile figcaption { padding: 1cqw 0 0; font-size: 1.35cqw; line-height: 1.35; color: var(--ink-3); }
.tile figcaption b { display: block; font: 400 2.2cqw/1.05 var(--serif); color: var(--ink); }
.box { border: 1px solid var(--line); border-radius: 1.6cqw; padding: 3cqw; }
.dark .box { border-color: rgba(255,255,255,.14); }
.price { font: 400 6cqw/1 var(--serif); color: var(--ink); }
.price small { font: 600 1.3cqw/1 var(--mono); letter-spacing: .12em; color: var(--amber); margin-inline-start: 1cqw; }

/* back page / contact */
.contact { display: grid; grid-template-columns: 1fr auto; gap: 5cqw; align-items: end; }
.contact .list li { display: flex; justify-content: space-between; gap: 2cqw; }
.contact .list li span:first-child { font: 500 1.25cqw/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.qr { width: 19cqw; background: #fff; padding: 1.2cqw; border-radius: 1.2cqw; }
.qr + span { display: block; text-align: center; margin-top: 1cqw; font: 500 1.15cqw/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.parent { display: flex; align-items: center; gap: 2.4cqw; margin-top: 4cqw; padding-top: 3cqw; border-top: 1px solid var(--line); font-size: 1.4cqw; color: var(--ink-3); }
.dark .parent { border-color: rgba(255,255,255,.12); }
.parent img { height: 3.4cqw; width: auto; }
.disclaimer { font-size: 1.2cqw; line-height: 1.5; color: var(--ink-3); margin-top: 2.4cqw; }

/* ---------- print / PDF ---------- */
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .toolbar { display: none; }
  .doc { display: block; padding: 0; }
  .sheet { width: 210mm; height: 297mm; aspect-ratio: auto; box-shadow: none; break-after: page; page-break-after: always; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}