/* ========================================================================== Business portfolio booklet A 9-page A4 editorial document rendered in the browser. Everything inside .book is scoped so the booklet's generic class names (.page, .title, .body, .list …) never touch the rest of the site, and so the site's own tokens (--black, --white in styles.css) are not overwritten by the booklet's. ========================================================================== */ @page { size: A4; margin: 0; } /* ---------- TOKENS (scoped, not on :root) ---------- */ .book { --black: #111; --dark: #181818; --paper: #f4f3ee; --grey: #666; --line: #cfcfc8; --soft: #e7e6df; /* consistent booklet type system */ --type-display: 44pt; /* hero / major page title */ --type-heading: 18pt; /* section and item headings */ --type-lead: 15pt; /* pull quotes / introductory statements */ --type-body: 10.5pt; /* body copy */ --type-label: 8.5pt; /* eyebrows / metadata */ width: 210mm; margin: 0 auto; color: var(--black); line-height: 1.4; /* the site sets a mono face on ; the booklet is an editorial document */ font-family: 'Segoe UI', Tahoma, Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; transform-origin: top center; } .book .page { width: 210mm; height: 297mm; position: relative; overflow: hidden; page-break-after: always; break-after: page; padding: 18mm; background: var(--paper); } .book .page:last-child { page-break-after: auto; } /* A4 containment. The :not() pair carries real specificity (4 classes), so this deliberately outranks the mm max-widths below: anything sitting directly on a page runs the full 174mm measure, while nested copy keeps its narrower column. */ .book .page> :not(.footer-brand):not(.page-no) { max-width: 100%; } /* ---------- TYPE ---------- */ .book .eyebrow { font-size: var(--type-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #777; } .book .display { font-size: var(--type-display); line-height: .94; letter-spacing: -.045em; font-weight: 700; margin: 0; } .book .title { font-size: var(--type-display); line-height: .94; letter-spacing: -.035em; font-weight: 700; margin: 0; max-width: 165mm; } .book .subtitle { font-size: var(--type-lead); line-height: 1.35; letter-spacing: -.015em; color: #444; max-width: 155mm; } .book .body { font-size: var(--type-body); line-height: 1.48; color: #3d3d3d; max-width: 155mm; } .book .small { font-size: var(--type-label); line-height: 1.45; color: #777; } .book .pull { font-size: var(--type-lead); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; } /* editorial hierarchy carries the structure — no light divider rules */ .book .rule { display: none; } .book .page-no { position: absolute; right: 18mm; bottom: 9mm; font-size: var(--type-label); font-weight: 700; color: #777; letter-spacing: .08em; } .book .footer-brand { position: absolute; left: 18mm; bottom: 9mm; font-size: var(--type-label); font-weight: 700; letter-spacing: .16em; color: #777; } /* lede paragraph that follows a page headline */ .book .lede { margin-top: 9mm; } .book .lede-tight { margin-top: 8mm; } /* headline face — a touch more open than the body face */ .book .display, .book .title, .book .pull, .book .big-line h3, .book .list strong, .book .statement, .book .mvp-block h2, .book .tech-item h3, .book .engage h3, .book .closing .title, .book .ld-hero-left h2, .book .ld-cycle strong, .book .ld-diff-grid strong, .book .ld-statement, .book .ask-item .pull { font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif; font-weight: 700; } .book .logo { display: block; width: 24mm; height: 24mm; object-fit: contain; } .book .logo-white { width: 25mm; height: 25mm; } .book .topline .logo-black, .book .ld-topline .logo-black { width: 16mm; height: 16mm; object-fit: contain; flex: 0 0 auto; } /* ---------- 01 COVER ---------- */ .book .cover { background: var(--black); color: #fff; padding: 17mm; } .book .cover .eyebrow { color: #aaa; } .book .cover-brand { display: flex; align-items: center; gap: 5mm; } .book .cover-brand .logo-white { width: 14mm; height: 14mm; } .book .cover-brand span { font-size: 11pt; font-weight: 800; letter-spacing: .14em; color: #fff; } .book .cover-hero { position: absolute; left: 17mm; right: 17mm; top: 74mm; } .book .cover .display { font-size: 52pt; max-width: 165mm; margin-top: 7mm; } .book .cover .strap { margin-top: 9mm; width: 120mm; color: #c8c8c2; font-size: 14pt; line-height: 1.5; } .book .cover .bottom { position: absolute; left: 17mm; right: 17mm; bottom: 17mm; display: flex; justify-content: space-between; align-items: end; padding-top: 8mm; } .book .cover .bottom span { font-size: 8pt; letter-spacing: .14em; color: #aaa; } /* minimal lifecycle detail, bottom right */ .book .cover-detail { position: absolute; right: 17mm; bottom: 28mm; width: 76mm; color: #d0d0ca; } .book .cover-detail-label { font-size: 6.5pt; font-weight: 700; letter-spacing: .18em; margin-bottom: 3mm; color: #888; } .book .cover-detail-flow { display: flex; align-items: center; gap: 3mm; font-weight: 700; } .book .cover-detail-flow span { white-space: nowrap; font-size: 7.5pt; letter-spacing: .12em; } .book .cover-detail-flow i { display: block; width: 9mm; height: 1px; background: #666; position: relative; } .book .cover-detail-flow i::after { content: ""; position: absolute; right: 0; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: #aaa; } /* ---------- SHARED PAGE COMPOSITIONS ---------- */ .book .topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14mm; } .book .intro-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 17mm; margin-top: 15mm; } .book .intro-grid .big-number { font-size: 64pt; line-height: .8; font-weight: 800; letter-spacing: -.08em; color: #d2d1c9; } .book .columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22mm; } .book .columns.three { grid-template-columns: repeat(3, 1fr); gap: 14mm; } .book .list { margin: 0; padding: 0; list-style: none; } .book .list li { padding: 7mm 0 9mm; position: relative; } .book .list li+li { padding-top: 10mm; } .book .list .n { display: inline-block; width: 13mm; font-size: var(--type-label); font-weight: 700; color: #aaa; vertical-align: top; } .book .list strong { display: inline-block; width: calc(100% - 15mm); font-size: var(--type-heading); line-height: 1.02; letter-spacing: -.015em; } .book .list p { margin: 3mm 0 0 13mm; max-width: 70mm; font-size: var(--type-body); line-height: 1.48; } .book .big-line { display: grid; grid-template-columns: 16mm 1fr; gap: 7mm; padding: 7mm 0 8mm; } .book .big-line+.big-line { padding-top: 9mm; } .book .big-line .num { font-size: var(--type-label); font-weight: 700; color: #aaa; padding-top: 2mm; } .book .big-line h3 { font-size: var(--type-heading); line-height: 1.02; margin: 0 0 3mm; letter-spacing: -.015em; } .book .big-line p { font-size: var(--type-body); line-height: 1.48; max-width: 130mm; margin: 0; } /* key business statements — the loudest line on each page */ .book .statement { margin-top: 18mm; max-width: 165mm; font-size: 21pt; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; } .book .statement::before { content: ""; display: block; width: 16mm; height: 3px; background: var(--black); margin-bottom: 8mm; } /* ---------- 03 CAPABILITIES + MVP ---------- */ .book .combined-page { padding-top: 16mm; padding-bottom: 18mm; } .book .combined-page .topline { margin-bottom: 7mm; } .book .combined-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16mm; align-items: start; margin-top: 6mm; min-height: 24mm; } .book .combined-head .title { font-size: 38pt; line-height: .94; } .book .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12mm; row-gap: 9mm; margin-top: 14mm; } .book .cap-item { min-height: 25mm; padding-right: 3mm; } .book .cap-item span { display: block; font-size: 8pt; color: #aaa; font-weight: 700; margin-bottom: 3mm; } .book .cap-item h3 { margin: 0 0 3.5mm; font-size: 16pt; line-height: 1.08; letter-spacing: -.015em; } .book .cap-item p { margin: 0; font-size: 8.5pt; line-height: 1.4; color: #555; max-width: 57mm; } .book .mvp-block { margin-top: 12mm; padding: 10mm; background: #171717; color: #fff; display: grid; grid-template-columns: .85fr 1.45fr; gap: 12mm; } .book .mvp-block .eyebrow { color: #999; } .book .mvp-block h2 { color: #fff; font-size: 27pt; line-height: .98; margin: 4mm 0; letter-spacing: -.03em; } .book .mvp-block .small { color: #aaa; font-size: 8pt; } .book .mvp-mini { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8mm; row-gap: 4.5mm; align-content: start; } .book .mvp-mini>div { display: grid; grid-template-columns: 8mm 1fr; column-gap: 2mm; align-items: start; } .book .mvp-mini>div:nth-child(7) { grid-column: 1 / -1; max-width: 70mm; } .book .mvp-mini span { font-size: 7.5pt; color: #888; font-weight: 700; } .book .mvp-mini strong { font-size: 9pt; line-height: 1; color: #fff; } .book .mvp-mini p { grid-column: 2; margin: 1.5mm 0 0; font-size: 7.4pt; line-height: 1.22; color: #aaa; } /* ---------- 04 PROCESS ---------- */ .book .process-page .columns { margin-top: 11mm; gap: 14mm; } .book .process-page .list li { padding: 4mm 0 5mm; } .book .process-page .list li+li { padding-top: 5mm; } .book .process-page .list p { margin-top: 2mm; line-height: 1.35; } .book .process-page .statement { margin-top: 10mm; max-width: 155mm; } .book .process-page .statement::before { margin-bottom: 5mm; } /* the third line of "What creates value?" runs to the page edge, so this gap is what keeps the questions clear of the footer brand — do not grow it */ .book .ask-section { margin-top: 20mm; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32mm; align-items: start; } .book .ask-item+.ask-item { padding-left: 6mm; } .book .ask-item .eyebrow { margin-bottom: 10mm; } .book .ask-item .pull { margin: 0; font-size: 38pt; line-height: .96; max-width: 78mm; letter-spacing: -.05em; font-weight: 700; } /* ---------- 05 TECHNOLOGY ---------- */ .book .tech-intro { display: grid; grid-template-columns: 1.3fr .7fr; gap: 15mm; align-items: end; margin-top: 12mm; } /* the pull quote sits with the headline, not the baseline of the grid */ .book .tech-intro>.pull { position: relative; top: -19mm; } .book .tech-stack { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20mm; row-gap: 0; margin-top: 15mm; position: relative; top: -15mm; } .book .tech-item { padding: 8mm 0 10mm; } .book .tech-item h3 { font-size: var(--type-heading); line-height: 1.02; margin: 0 0 3mm; letter-spacing: -.015em; } .book .tech-item p { font-size: var(--type-body); line-height: 1.48; color: #555; max-width: 72mm; margin: 0; } .book .tech-statement { position: relative; top: -15mm; margin-top: 13mm; max-width: 150mm; } .book .tech-statement::before { width: 14mm; margin-bottom: 6mm; } /* ---------- 06 LIFECYCLE + DIFFERENCE ---------- */ .book .lifecycle-difference-page { padding: 14mm 18mm 17mm; background: var(--paper); } .book .ld-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8mm; } .book .ld-hero { background: #171717; color: #fff; min-height: 64mm; padding: 10mm 11mm; display: grid; grid-template-columns: 1.2fr .8fr; gap: 12mm; align-items: end; } .book .ld-hero .eyebrow { color: #999; } .book .ld-hero-left h2 { margin: 5mm 0 0; font-size: var(--type-display); line-height: .94; letter-spacing: -.055em; } .book .ld-hero-right { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .book .ld-hero-mark { font-size: 28pt; line-height: 1; color: #888; } .book .ld-hero-right p { max-width: 50mm; margin: 0; font-size: var(--type-lead); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; text-align: right; } .book .ld-lifecycle { margin-top: 13mm; } .book .ld-section-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7mm; } .book .ld-cycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; } .book .ld-cycle>div { min-height: 19mm; padding-right: 7mm; } .book .ld-cycle>div+div { padding-left: 7mm; border-left: 1px solid #d3d2cb; } .book .ld-cycle span, .book .ld-diff-grid span { display: block; font-size: 7.5pt; color: #aaa; font-weight: 700; margin-bottom: 4mm; } .book .ld-cycle strong { display: block; font-size: 14pt; line-height: 1; letter-spacing: -.025em; } .book .ld-difference { margin-top: 15mm; } .book .ld-diff-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 25mm; row-gap: 0; } .book .ld-diff-grid>div { min-height: 16mm; display: flex; align-items: center; gap: 6mm; } .book .ld-diff-grid span { margin: 0; width: 8mm; flex: none; } .book .ld-diff-grid strong { font-size: var(--type-heading); line-height: 1.02; letter-spacing: -.025em; } .book .ld-statement { margin-top: 13mm; max-width: 145mm; font-size: 21pt; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; } .book .ld-statement::before { content: ""; display: block; width: 12mm; height: 3px; background: var(--black); margin-bottom: 5mm; } /* ---------- 07 ENGAGEMENT ---------- */ .book .engage-lede { max-width: 145mm; margin-top: 8mm; } .book .engagement { margin-top: 13mm; } .book .engage { display: grid; grid-template-columns: 15mm 55mm 1fr; gap: 7mm; align-items: start; padding: 7mm 0 9mm; } .book .engage+.engage { padding-top: 10mm; } .book .engage .num { font-size: 8pt; color: #aaa; font-weight: 700; } .book .engage h3 { margin: 0; font-size: 15pt; line-height: 1.02; letter-spacing: -.01em; } .book .engage p { margin: 0; font-size: var(--type-body); line-height: 1.48; color: #555; } /* ---------- 08 CLIENTS ---------- */ .book .clients-page { padding: 16mm 18mm 17mm; background: var(--paper); } .book .clients-page .topline { margin-bottom: 9mm; } .book .clients-intro { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 18mm; align-items: end; margin-bottom: 10mm; } .book .clients-intro .title { font-size: 38pt; line-height: .94; margin-top: 5mm; } .book .clients-intro .body { max-width: 72mm; margin: 0 0 1mm; line-height: 1.42; } .book .client-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); column-gap: 6mm; row-gap: 2.5mm; height: 190mm; margin-top: 10mm; align-items: center; justify-items: center; } .book .client-logo { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 3mm 1.5mm; display: flex; align-items: center; justify-content: center; } /* capped against the cell, not an absolute measure: these marks are tightly cropped, so a fixed max-width would let wide wordmarks run into their neighbours instead of sitting inside the grid. */ .book .client-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 20mm; object-fit: contain; } /* the opening rows carry the wall — give them more presence */ .book .client-grid .client-logo:nth-child(-n+6) img { max-height: 26mm; } .book .clients-page .footer-brand, .book .clients-page .page-no, .book .combined-page .footer-brand, .book .combined-page .page-no { bottom: 8mm; } /* ---------- 09 CLOSING ---------- */ .book .closing { position: relative; width: 210mm; height: 297mm; padding: 0; overflow: hidden; background: var(--black); color: #fff; } .book .closing>.eyebrow { position: absolute; top: 17mm; left: 18mm; margin: 0; color: #aaa; z-index: 2; } .book .closing-brand { position: absolute; top: 14.5mm; right: 18mm; display: flex; align-items: center; gap: 4mm; margin: 0; z-index: 2; color: #fff; font-size: 9pt; font-weight: 800; letter-spacing: .12em; } .book .closing-brand .logo-white { width: 11mm; height: 11mm; margin: 0; } .book .closing .title { position: absolute; top: 58mm; left: 18mm; right: 18mm; margin: 0; color: #fff; line-height: .9; letter-spacing: -.055em; max-width: 165mm; z-index: 1; } .book .closing .body { position: absolute; top: 111mm; left: 18mm; width: 135mm; max-width: none; margin: 0; color: #bcbcb7; line-height: 1.48; } .book .closing-audience { position: absolute; left: 18mm; right: 18mm; top: 145mm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12mm; } .book .closing-audience .eyebrow { margin: 0 0 4mm; color: #888; } .book .closing-audience p { margin: 0; max-width: 48mm; color: #fff; font-size: 10.5pt; line-height: 1.42; } .book .book-contact { position: absolute; left: 18mm; right: 18mm; bottom: 29mm; margin: 0; padding: 8mm 0 0; border-top: 1px solid #3c3c3c; display: grid; grid-template-columns: 1fr 1fr; gap: 25mm; } .book .book-contact h3 { margin: 0 0 4mm; font-size: 7.5pt; line-height: 1; letter-spacing: .16em; color: #888; } .book .book-contact p { margin: 0; color: #fff; font-size: 10.5pt; line-height: 1.55; } .book .closing .footer-brand, .book .closing .page-no { color: #777; } /* ========================================================================== VIEWER SHELL — how the document is presented on screen ========================================================================== */ .book-shell { background: #2a2a2a; padding: 2.5rem 1.5rem 3.5rem; } .book-toolbar { max-width: 210mm; margin: 0 auto 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; } .book-toolbar-label { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; } .book-print { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #e8e8e8; text-decoration: none; background: transparent; border: 1px solid #4a4a4a; border-radius: 999px; padding: 0.55rem 1.15rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .book-print:hover { background: #1f1f1f; border-color: #8a8a8a; } /* JS writes the scaled height here so the page scrolls correctly */ .book-stage { position: relative; } @media screen { .book .page { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } .book .page+.page { margin-top: 26px; } } /* ========================================================================== MOBILE — the A4 grid reflows into a single readable column. Must stay `screen`-scoped: a bare max-width query also matches the print context, and the reflowed pages then spill onto extra sheets. ========================================================================== */ @media screen and (max-width: 767px) { .book-shell { padding: 1.5rem 0 2.5rem; } .book-toolbar { padding: 0 1.25rem; } .book { width: 100%; transform: none !important; --type-display: clamp(1.9rem, 8.5vw, 2.6rem); --type-heading: 1.15rem; --type-lead: 1.15rem; --type-body: 0.95rem; --type-label: 0.7rem; } .book-stage { height: auto !important; } .book .page { width: 100%; height: auto; min-height: 0; overflow: visible; padding: 2.75rem 1.25rem 3.25rem; box-shadow: none; } .book .page+.page { margin-top: 0; } /* mm-based measures are meaningless once the column is fluid */ .book .page :is(h1, h2, h3, p, div, ul, li, strong) { max-width: none; } /* absolutely-placed A4 furniture returns to normal flow */ .book .cover-hero, .book .cover .bottom, .book .cover-detail, .book .closing>.eyebrow, .book .closing-brand, .book .closing .title, .book .closing .body, .book .closing-audience, .book .book-contact, .book .footer-brand { position: static; left: auto; right: auto; top: auto; bottom: auto; width: auto; } .book .page-no { display: none; } .book .footer-brand { margin-top: 2.5rem; display: block; } /* every multi-column grid collapses */ .book .intro-grid, .book .columns, .book .columns.three, .book .combined-head, .book .cap-grid, .book .mvp-block, .book .mvp-mini, .book .tech-intro, .book .tech-stack, .book .ld-hero, .book .ld-cycle, .book .ld-diff-grid, .book .clients-intro, .book .closing-audience, .book .book-contact, .book .ask-section { grid-template-columns: 1fr; gap: 1.75rem; } .book .cover { padding: 2.75rem 1.25rem 3rem; } .book .cover .display { font-size: var(--type-display); margin-top: 2rem; } .book .cover .strap { width: auto; font-size: 1rem; margin-top: 1.5rem; } .book .cover .bottom { margin-top: 2.5rem; padding-top: 0; } .book .cover-detail { width: auto; margin-top: 2rem; } .book .cover-detail-flow { flex-wrap: wrap; row-gap: 0.5rem; } .book .topline, .book .ld-topline { margin-bottom: 2rem; } .book .intro-grid, .book .process-page .columns, .book .engagement, .book .tech-intro, .book .ld-lifecycle, .book .ld-difference { margin-top: 2rem; } .book .intro-grid .big-number { font-size: 3rem; } .book .statement, .book .ld-statement, .book .tech-statement, .book .process-page .statement { font-size: 1.35rem; margin-top: 2.25rem; top: 0; } .book .statement::before, .book .ld-statement::before, .book .tech-statement::before { width: 2.5rem; margin-bottom: 1rem; } .book .list li, .book .process-page .list li, .book .list li+li, .book .process-page .list li+li { padding: 0 0 1.5rem; } .book .list .n { width: 2.25rem; } .book .list strong { width: calc(100% - 2.5rem); } .book .list p { margin: 0.5rem 0 0 2.25rem; } .book .combined-head .title, .book .clients-intro .title { font-size: var(--type-display); } .book .cap-item { min-height: 0; padding-right: 0; } .book .cap-item h3 { font-size: var(--type-heading); } .book .cap-item p { font-size: var(--type-body); } .book .cap-grid, .book .mvp-block { margin-top: 2rem; } /* Full-bleed dark blocks. The A4 containment rule caps every direct child of a page at the content box; that makes these boxes over-constrained, and CSS resolves it by dropping the right margin — so they bleed left only. The cap has to be lifted explicitly for the negative margins to work on both sides. */ .book .mvp-block, .book .ld-hero { max-width: none !important; } .book .mvp-block { padding: 2rem 1.25rem 2.25rem; margin-left: -1.25rem; margin-right: -1.25rem; } .book .mvp-block h2 { font-size: 1.6rem; } .book .mvp-block .small, .book .mvp-mini span { font-size: var(--type-label); } .book .mvp-mini { gap: 1rem; } .book .mvp-mini>div { grid-template-columns: 2rem 1fr; } .book .mvp-mini>div:nth-child(7) { max-width: none; } .book .mvp-mini strong { font-size: 0.9rem; } .book .mvp-mini p { font-size: 0.85rem; line-height: 1.4; } .book .ask-section { margin-top: 2.5rem; gap: 2rem; } /* the inset only balances the two A4 columns; stacked, it reads as a stray indent */ .book .ask-item+.ask-item { padding-left: 0; } .book .ask-item .eyebrow { margin-bottom: 1rem; } .book .ask-item .pull { font-size: clamp(1.75rem, 8vw, 2.25rem); } .book .tech-intro>.pull, .book .tech-stack, .book .tech-statement { position: static; top: auto; } .book .lede, .book .lede-tight { margin-top: 1.25rem; } .book .tech-stack { margin-top: 2rem; gap: 0; } .book .tech-item { padding: 0 0 1.75rem; } .book .ld-hero { min-height: 0; padding: 2rem 1.25rem 2.25rem; margin-left: -1.25rem; margin-right: -1.25rem; align-items: start; gap: 1.5rem; } .book .ld-hero-left h2 { margin-top: 1rem; } .book .ld-hero-right { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 1rem; } .book .ld-hero-right p { text-align: left; max-width: none; } .book .ld-section-label { margin-bottom: 1.25rem; } .book .ld-cycle { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .book .ld-cycle>div, .book .ld-cycle>div+div { min-height: 0; padding: 0; border-left: 0; } .book .ld-cycle span, .book .ld-diff-grid span { margin-bottom: 0.4rem; } .book .ld-diff-grid { gap: 1.25rem; } .book .ld-diff-grid>div { min-height: 0; gap: 1rem; } .book .ld-diff-grid span { width: 1.75rem; margin: 0; } .book .engage { grid-template-columns: 2.25rem 1fr; gap: 0 1rem; padding: 0 0 1.75rem; } .book .engage+.engage { padding-top: 0; } .book .engage h3 { font-size: var(--type-heading); } .book .engage p { grid-column: 2; margin-top: 0.5rem; } .book .engage-lede { margin-top: 1.25rem; } .book .clients-intro { margin-bottom: 2rem; gap: 1.25rem; } .book .clients-intro .title { margin-top: 1rem; } .book .client-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; height: auto; margin-top: 1.5rem; gap: 1.5rem 1rem; } .book .client-logo { height: auto; padding: 0.5rem; } .book .client-logo img, .book .client-grid .client-logo:nth-child(-n+6) img { max-width: 100%; max-height: 2.75rem; } .book .closing { width: 100%; height: auto; padding: 2.75rem 1.25rem 3.25rem; } .book .closing-brand { margin-top: 1.5rem; justify-content: flex-start; } .book .closing .title { margin-top: 2rem; } .book .closing .body { margin-top: 1.5rem; } .book .closing-audience { margin-top: 2.5rem; gap: 1.5rem; } .book .closing-audience p { max-width: none; } .book .book-contact { margin-top: 2.5rem; padding-top: 1.5rem; gap: 1.5rem; } } /* ========================================================================== PRINT — back to a clean A4 document ========================================================================== */ @media print { .site-header, .site-footer, .book-toolbar { display: none !important; } .book-shell { background: #fff; padding: 0; } .book-stage { height: auto !important; } .book { width: 210mm; margin: 0; transform: none !important; } .book .page { margin: 0 !important; box-shadow: none !important; overflow: hidden; } }