/* TOG unified page system. Every page is 1920x1080 and splits on the 960px axis. */
@page { size: 1920px 1080px; margin: 0; }
:root { --orange:#F4553B; --char:#262A2E; --paper:#FAF7F3; --mute:#6E7276; --line:#E4DFD8; --soft:#D8D5D0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: "IBM Plex Sans Arabic", "Kohinoor Bangla", sans-serif; color: var(--char); }
.page { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--paper); break-after: page; }
.page:last-child { break-after: auto; }
.lead { font-weight: 700; }
.sup { font-weight: 300; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* Logo: same position on every page */
.logo { position: absolute; top: 24px; right: 110px; width: 170px; z-index: 5; }
.logoTag { position: absolute; top: 0; right: 0; width: 320px; height: 96px; background: var(--char); z-index: 4; }

.kicker { font-size: 30px; font-weight: 500; color: var(--orange); }
.cut { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--orange); color: #fff; font-size: 30px; font-weight: 700; flex: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 0 74%); }

/* Halves: photo on the left, panel on the right */
.ph { position: absolute; top: 0; left: 0; width: 960px; height: 1080px; object-fit: cover; object-position: var(--x, 0%) var(--y, 40%); }
.panel { position: absolute; top: 0; right: 0; width: 960px; height: 1080px; }
.panel.dark { background: var(--char); color: #fff; }
.body { position: absolute; top: 170px; right: 110px; width: 780px; }

.body.mid { top: 50%; transform: translateY(-50%); }

/* Opener: same on every initiative */
.opener h1 { font-size: 210px; line-height: 1.1; font-weight: 700; margin-top: 34px; }
.opener .tag { font-size: 56px; line-height: 1.35; margin-top: 8px; }
.opener .desc { font-size: 34px; font-weight: 300; margin-top: 40px; padding-top: 24px; border-top: 3px solid var(--orange); }
.opener .intro { font-size: 30px; font-weight: 300; line-height: 1.5; margin-top: 18px; color: var(--soft); }
.opener .note { position: absolute; bottom: 44px; right: 110px; font-size: 22px; font-weight: 300; color: #B9B6B1; }

/* Portfolio cover */
.opener.main h1 { font-size: 104px; line-height: 1.24; margin-top: 26px; }
.opener.main .tag { font-size: 40px; font-weight: 300; line-height: 1.45; margin-top: 22px; }
.opener.main .desc { font-size: 32px; line-height: 1.5; margin-top: 30px; padding-top: 22px; }
.brands { position: absolute; bottom: 88px; right: 110px; width: 780px; display: flex; align-items: center; gap: 34px; }
.brands .nwc { height: 56px; flex: none; }
.brands .all { width: 572px; flex: none; }
.opener.main .note { bottom: 30px; }

/* Text blocks used by the general pages */
.say-lead.sm { font-size: 60px; }
.sentence { font-size: 42px; font-weight: 300; line-height: 1.5; margin-top: 30px; }
.small.wide-copy { line-height: 1.5; }
.hero { position: absolute; bottom: 74px; right: 110px; width: 780px; border-top: 3px solid var(--orange); padding-top: 20px; }
.hero .n { font-size: 128px; line-height: 1.15; font-weight: 700; color: var(--orange); }
.hero .c { font-size: 38px; font-weight: 300; }
.closeline { position: absolute; bottom: 54px; right: 110px; left: 110px; border-top: 3px solid var(--orange); padding-top: 18px; font-size: 48px; }
.grid3 { position: absolute; top: 292px; right: 110px; left: 110px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tile3 img { width: 100%; height: 430px; object-fit: cover; object-position: 50% 35%; display: block; }
.tile3 h3 { font-size: 46px; font-weight: 700; margin-top: 16px; }
.tile3 p { font-size: 32px; font-weight: 300; color: var(--mute); }

/* Six figures */
.tiles6 { position: absolute; top: 112px; right: 110px; left: 110px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 352px; gap: 16px; }
.stat { position: relative; overflow: hidden; background: var(--char); }
.stat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.stat .shade { position: absolute; inset: 35% 0 0 0; background: linear-gradient(to top, rgba(38,42,46,.95) 18%, rgba(38,42,46,0)); }
.stat .n { position: absolute; bottom: 52px; right: 28px; color: #fff; font-size: 66px; font-weight: 700; line-height: 1.1; }
.stat .c { position: absolute; bottom: 14px; right: 28px; color: #EDEAE5; font-size: 28px; font-weight: 300; }
.nextstep { position: absolute; bottom: 0; right: 0; left: 0; height: 232px; background: var(--char); color: #fff; padding: 0 110px; display: flex; flex-direction: column; justify-content: center; }
.nextstep .t { font-size: 40px; line-height: 1.4; }
.nextstep .src { font-size: 24px; font-weight: 300; color: #B9B6B1; margin-top: 14px; }

/* Today and tomorrow */
.cmp .half img { height: 420px; object-position: 50% var(--y, 40%); }
.cmp .list { position: absolute; top: 420px; bottom: 110px; right: 0; left: 0; padding: 30px 70px 0; }
.cmp .before .list { background: var(--char); color: #fff; }
.cmp .after .list { background: var(--paper); }
.cmp .list h3 { font-size: 46px; font-weight: 700; color: var(--orange); margin-bottom: 8px; }
.cmp .list div { font-size: 37px; font-weight: 500; line-height: 1.68; }
.strip { position: absolute; bottom: 0; left: 0; right: 0; height: 110px; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; z-index: 5; }

/* Portfolio index */
.groups { position: absolute; top: 292px; right: 110px; left: 110px; display: grid; grid-template-columns: 2fr 2fr 3fr; gap: 26px; }
.grp h3 { background: var(--char); color: #fff; font-size: 36px; font-weight: 700; padding: 8px 24px 12px; }
.grp .items { display: grid; gap: 14px; margin-top: 14px; }
.item { position: relative; }
.item img { width: 100%; height: 380px; object-fit: cover; object-position: var(--x, 50%) var(--y, 30%); display: block; }
.item .idx { position: absolute; top: 0; right: 0; background: var(--orange); color: #fff; font-size: 30px; font-weight: 700; padding: 2px 16px 6px; }
.item p { font-size: 30px; font-weight: 700; line-height: 1.32; margin-top: 12px; }
.alllink { position: absolute; bottom: 44px; right: 110px; left: 110px; border-top: 3px solid var(--orange); padding-top: 16px; font-size: 36px; font-weight: 300; }

/* Narrative */
.time { font-size: 104px; font-weight: 700; line-height: 1.1; color: var(--orange); margin-top: 6px; }
.time small { font-size: 42px; font-weight: 300; margin-right: 14px; }
.say-lead { font-size: 72px; line-height: 1.25; font-weight: 700; margin-top: 30px; }
.say-sup { font-size: 52px; line-height: 1.32; font-weight: 300; }
.small { font-size: 32px; font-weight: 300; margin-top: 30px; color: var(--soft); }
.nums { margin-top: 34px; }
.nums .r { display: flex; align-items: baseline; gap: 30px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.nums .n { font-size: 56px; font-weight: 700; white-space: nowrap; }
.nums .c { font-size: 32px; font-weight: 300; color: var(--soft); }
.nums .hot .n { color: var(--orange); }
.card { margin-top: 36px; width: 640px; background: #fff; color: var(--char); padding: 24px 32px 28px; clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px)); }
.card .from { font-size: 26px; font-weight: 700; color: var(--orange); }
.card .t { font-size: 38px; font-weight: 700; line-height: 1.3; margin-top: 2px; }
.card .d { font-size: 28px; font-weight: 300; line-height: 1.35; }
.rail4 { position: absolute; bottom: 66px; right: 110px; width: 780px; display: flex; }
.rail4 .st { flex: 1; position: relative; padding-top: 28px; font-size: 32px; font-weight: 300; color: #C9C6C1; }
.rail4 .st::before { content: ""; position: absolute; top: 8px; right: 0; left: 0; height: 2px; background: rgba(255,255,255,.35); }
.rail4 .st::after { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: #8C8A86; }
.rail4 .st.on { color: var(--orange); font-weight: 700; }
.rail4 .st.on::after { background: var(--orange); }
.rail4 .st.done::after { background: #fff; }
.lines .l { font-size: 74px; font-weight: 300; line-height: 1.42; }
.lines .l b { font-weight: 700; }
.lines .l.hot { color: var(--orange); font-weight: 700; }

/* Comparison: two equal halves, before on the right */
.half { position: absolute; top: 0; width: 960px; height: 1080px; overflow: hidden; }
.half.before { right: 0; }
.half.after { left: 0; }
.half img { display: block; width: 960px; height: 930px; object-fit: cover; object-position: 50% var(--y, -100px); }
.half.before img { filter: saturate(.55) brightness(.94); }
.half .band2 { position: absolute; bottom: 0; right: 0; left: 0; height: 150px; display: flex; align-items: center; gap: 28px; padding: 0 70px; }
.half.before .band2 { background: var(--char); color: #fff; }
.half.after .band2 { background: var(--paper); color: var(--char); }
.tagp { flex: none; font-size: 26px; font-weight: 500; padding: 4px 20px 8px; background: #fff; color: var(--char); }
.half.after .tagp { background: var(--orange); color: #fff; }
.band2 .line { font-size: 46px; font-weight: 700; white-space: nowrap; }
.axis { position: absolute; top: 0; bottom: 0; left: 957px; width: 6px; background: #fff; z-index: 3; }
.topic { position: absolute; top: 0; left: 0; height: 96px; display: flex; align-items: center; gap: 22px; background: var(--char); color: #fff; padding: 0 40px 0 34px; z-index: 4; white-space: nowrap; }
.topic .cut { width: 52px; height: 52px; font-size: 24px; }
.topic .t { font-size: 32px; font-weight: 500; }
.ring { position: absolute; width: 84px; height: 84px; border: 5px solid var(--orange); border-radius: 50%; }

/* Galleries */
.head { position: absolute; top: 108px; right: 110px; left: 110px; }
.head h2 { font-size: 62px; line-height: 1.25; font-weight: 700; }
.head p { font-size: 38px; line-height: 1.4; font-weight: 300; color: var(--mute); }
.grid4 { position: absolute; top: 292px; right: 110px; left: 110px; height: 740px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.poster { position: relative; overflow: hidden; background: var(--char); }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.poster .shade { position: absolute; inset: 40% 0 0 0; background: linear-gradient(to top, rgba(38,42,46,.94) 12%, rgba(38,42,46,0)); }
.poster .name { position: absolute; top: 0; right: 0; background: var(--orange); color: #fff; font-size: 40px; font-weight: 700; padding: 8px 30px 12px; }
.poster .word { position: absolute; bottom: 84px; right: 30px; left: 30px; color: #fff; font-size: 84px; font-weight: 700; line-height: 1.1; text-align: right; }
.poster .lang { position: absolute; bottom: 24px; right: 30px; color: #E9E6E1; font-size: 27px; font-weight: 300; }
.grid5 { position: absolute; top: 292px; right: 110px; left: 110px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.stop img { width: 100%; height: 500px; object-fit: cover; object-position: 50% 30%; display: block; }
.stop .rail { position: relative; height: 64px; margin-top: 26px; }
.stop .rail::before { content: ""; position: absolute; top: 31px; right: 0; left: -20px; height: 3px; background: var(--orange); }
.stop:last-child .rail::before { left: 0; }
.stop .cut { position: relative; }
.stop h3 { font-size: 40px; font-weight: 700; margin-top: 12px; white-space: nowrap; }
.stop p { font-size: 29px; font-weight: 300; color: var(--mute); margin-top: 2px; line-height: 1.35; white-space: nowrap; }

/* Ministry logo beside TOG, emblem on photo pages (build.py adds .logo2 next to every .logo) */
.logo2 { position: absolute; top: 18px; right: 306px; width: 214px; z-index: 5; }
.logoTag { width: 550px; }
.page:has(> .ph)::after, .page:has(> .wide)::after, .page:has(> .half)::after {
  content: ""; position: absolute; left: 30px; bottom: 30px; width: 92px; height: 92px; z-index: 6;
  background: none center / contain no-repeat; }
.page:has(> .wide)::after { bottom: 294px; }
.page:has(> .half)::after { bottom: 180px; }
.page.cmp::after { bottom: 690px; }
.page.pair::after { bottom: 140px; }

/* Date in running text */
.date { color: var(--orange); font-weight: 700; font-size: 1.28em; }

/* Statement page: type only */
.statement { background: var(--char); color: #fff; }
.statement .kicker { position: absolute; top: 220px; right: 110px; font-size: 40px; }
.statement h1 { position: absolute; top: 300px; right: 110px; left: 110px; font-size: 136px; line-height: 1.26; font-weight: 700; }
.statement h1 .to { display: block; color: var(--orange); }
.statement .sentence { position: absolute; top: 700px; right: 110px; left: 300px; font-size: 44px; color: var(--soft); margin: 0; text-wrap: balance; }

/* Worked example: three monthly bills */
.bars { display: flex; align-items: flex-end; gap: 28px; margin-top: 34px; }
.bars .b { flex: 1; }
.bars .v { font-size: 36px; font-weight: 700; text-align: right; white-space: nowrap; }
.bars .bar { background: #8C8A86; margin-top: 8px; }
.bars .l { font-size: 30px; font-weight: 300; color: var(--soft); margin-top: 12px; padding-top: 10px; border-top: 2px solid rgba(255,255,255,.35); }
.bars .hot .v { color: var(--orange); }
.bars .hot .bar { background: var(--orange); }
.bars .hot .l { color: #fff; font-weight: 500; }

/* Time shift: the past is grey, the future is orange and in full colour */
.half.before img { filter: grayscale(1) contrast(.94) brightness(.9); }
.half.before .band2 { background: #565A5F; color: #E9E7E3; }
.half.after .band2 { background: var(--orange); color: #fff; }
.half.after .tagp { background: #fff; color: var(--orange); }
.half.before .tagp { background: var(--orange); color: #fff; }
.cmp .before .list { background: #565A5F; color: #E9E7E3; }
.cmp .before .list h3 { color: #fff; }
.cmp .after .list { background: var(--orange); color: #fff; }
.cmp .after .list h3 { color: #fff; }
.cmp .strip { background: linear-gradient(to left, #3A3E43 10%, #F4553B 90%); }
.axis { background: linear-gradient(to bottom, #fff, #fff); }
.axis::after { content: ""; position: absolute; left: -44px; top: calc(50% - 47px); width: 94px; height: 94px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 94'%3E%3Ccircle cx='47' cy='47' r='44' fill='%23F4553B' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M56 26 L34 47 L56 68' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Initiatives whose title is the full product name */
.opener.long h1 { font-size: 112px; line-height: 1.24; margin-top: 26px; }
.opener.long .desc { font-size: 36px; line-height: 1.55; margin-top: 44px; padding-top: 28px; }

/* Four numbered stations and an unnumbered five-photo gallery */
.stops4 { position: absolute; top: 292px; right: 110px; left: 110px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stops4 .stop p { white-space: normal; text-wrap: balance; }
.grid5.plain .rail { display: none; }
.grid5.plain img { height: 590px; }
.grid5.plain h3 { margin-top: 22px; }

/* Two moments side by side, both in full colour */
.pair .half img { height: 970px; }
.pair .half.before img { filter: none; }

/* Full-width moment */
.wide { position: absolute; top: 0; left: 0; width: 1920px; height: 816px; object-fit: cover; object-position: 50% 40%; }
.band { position: absolute; bottom: 0; right: 0; left: 0; height: 264px; background: var(--char); color: #fff; padding: 46px 110px; }
.band .lead { font-size: 72px; line-height: 1.25; }
.band .sup { font-size: 44px; line-height: 1.4; color: #E2DFDA; }

/* Paper panels: reactions and proof */
.panel h2 { font-size: 60px; line-height: 1.25; font-weight: 700; }
.q { padding: 34px 0 38px; border-top: 2px solid var(--line); }
.q:first-of-type { margin-top: 50px; }
.who { font-size: 30px; font-weight: 500; color: var(--orange); }
.q .say { font-size: 50px; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.row { display: flex; align-items: center; gap: 34px; margin-top: 46px; }
.row h3 { font-size: 66px; line-height: 1.15; font-weight: 700; }
.row.fit h3 { font-size: 58px; white-space: nowrap; }
.row p { font-size: 32px; font-weight: 300; color: var(--mute); }
.res { position: absolute; bottom: 74px; right: 110px; width: 780px; padding-top: 24px; border-top: 3px solid var(--orange); font-size: 42px; }

/* ==== Cinematic style: every photo fills the screen, type sits on it ==== */
.page { background: #0E1012; color: #fff; }
body { background: #0E1012; }
h1, h2, .say-lead, .stop h3, .tile3 h3, .band .lead, .grp h3, .band2 .line, .lines .l, .closeline .lead, .list h3 { font-family: "Alexandria", "IBM Plex Sans Arabic", sans-serif; }
.hdr { position: absolute; top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, rgba(10,12,14,.8), rgba(10,12,14,0)); z-index: 4; pointer-events: none; }
.logoTag { display: none; }

/* Full-bleed photo with text on it */
.ph { width: 1920px; height: 1080px; object-position: var(--cx, 50%) var(--cy, 24%); }
.panel, .panel.dark { left: 0; width: 1920px; background: none; color: #fff; }
.panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(10,12,14,.94) 0%, rgba(10,12,14,.74) 34%, rgba(10,12,14,0) 62%), linear-gradient(to top, rgba(10,12,14,.8) 0%, rgba(10,12,14,0) 38%); }
.body, .body.mid { top: auto; bottom: 110px; transform: none; width: 820px; }
.panel:has(.rail4) .body { bottom: 180px; }
.panel:has(.res) .body { bottom: 240px; }
.panel:has(.hero) .body { bottom: 370px; }
.opener.main .body { bottom: 220px; }
.opener h1 { font-size: 168px; line-height: 1.15; margin-top: 10px; }
.opener.main h1, .opener.long h1 { font-size: 118px; line-height: 1.2; }
.opener .tag { font-size: 54px; }
.opener .note { bottom: 28px; }
.say-lead { font-size: 92px; line-height: 1.18; margin-top: 12px; }
.say-lead.sm { font-size: 66px; }
.say-sup { font-size: 50px; line-height: 1.35; }
.small, .small.wide-copy { color: #DDD; }
.panel h2 { font-size: 72px; }
.q { border-top-color: rgba(255,255,255,.28); }
.row p { color: #D8D5D0; }
.row h3 { font-family: "Alexandria", sans-serif; }
.res { color: #fff; }
.lines .l { font-size: 92px; }

/* Step rail: a segmented progress bar along the bottom */
.rail4 { bottom: 50px; right: 110px; left: 160px; width: auto; gap: 10px; }
.rail4 .st { padding-top: 22px; color: #D8D5D0; font-size: 30px; }
.rail4 .st::before { top: 0; height: 8px; background: rgba(255,255,255,.3); }
.rail4 .st::after { display: none; }
.rail4 .st.done::before { background: #fff; }
.rail4 .st.on::before { background: var(--orange); }

/* Before and after: one diagonal cut across the screen */
.half { height: 1080px; }
.half.after { left: 0; right: auto; width: 1010px; clip-path: polygon(0 0, 100% 0, 90.1% 100%, 0 100%); }
.half.before { left: 910px; right: auto; width: 1010px; clip-path: polygon(9.9% 0, 100% 0, 100% 100%, 0 100%); }
.half img, .cmp .half img, .pair .half img { width: 100%; height: 1080px; object-position: 50% var(--hy, 50%); }
.half::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,14,.92) 0%, rgba(10,12,14,0) 42%); }
.pair .half::after { display: none; }
.half .band2, .half.before .band2, .half.after .band2 { background: none; height: auto; bottom: 64px; display: block; padding: 0 80px; z-index: 2; color: #fff; }
.half.before .band2 { padding-right: 90px; }
.half.after .band2 { padding-right: 130px; }
.band2 .line { display: block; font-size: 54px; margin-top: 12px; white-space: nowrap; }
.tagp { display: inline-block; }
.axis { top: 0; bottom: 0; left: 0; right: 0; width: auto; background: var(--orange); clip-path: polygon(52.3% 0, 52.8% 0, 47.65% 100%, 47.15% 100%); z-index: 3; }
.axis::after { display: none; }
.page:has(> .axis)::before { content: ""; position: absolute; left: 913px; top: calc(50% - 47px); width: 94px; height: 94px; z-index: 6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 94'%3E%3Ccircle cx='47' cy='47' r='44' fill='%23F4553B' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M56 26 L34 47 L56 68' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.page:has(> .half)::after, .page.pair::after { bottom: 30px; }
.page.pair::after { bottom: 140px; }
.cmp .list, .cmp .before .list, .cmp .after .list { position: absolute; top: auto; bottom: 140px; left: 0; right: 0; background: none; color: #fff; padding: 0 100px; z-index: 2; }
.cmp .half.after .list { padding-right: 170px; }
.cmp .half::after { background: linear-gradient(to top, rgba(10,12,14,.96) 0%, rgba(10,12,14,.82) 45%, rgba(10,12,14,0) 72%); }
.cmp .list h3, .cmp .before .list h3, .cmp .after .list h3 { color: var(--orange); font-size: 56px; }
.cmp .list div { font-size: 38px; line-height: 1.55; font-weight: 300; }
.strip, .cmp .strip { z-index: 5; }
.page.cmp::after { bottom: 140px; }

/* Filmstrips: tall photos edge to edge */
.page:has(> .head)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 430px; background: linear-gradient(to bottom, rgba(10,12,14,.88) 45%, rgba(10,12,14,0)); z-index: 2; }
.head { top: 120px; z-index: 3; }
.head h2 { font-size: 78px; }
.head p { color: #E2DFDA; }
.grid5, .stops4 { top: 0; right: 0; left: 0; height: 1080px; gap: 3px; }
.stop { position: relative; height: 1080px; overflow: hidden; }
.stop img, .grid5.plain img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,14,.97) 6%, rgba(10,12,14,0) 48%); }
.stop .rail { position: absolute; bottom: 216px; right: 26px; left: 0; height: 64px; margin: 0; z-index: 2; }
.stop .rail::before, .stop:last-child .rail::before { display: none; }
.stop h3, .grid5.plain h3 { position: absolute; bottom: 128px; right: 26px; left: 10px; margin: 0; z-index: 2; color: #fff; font-size: 38px; white-space: nowrap; }
.grid5.plain h3 { bottom: 60px; font-size: 44px; }
.stop p, .stops4 .stop p { position: absolute; top: 960px; right: 26px; left: 16px; z-index: 2; margin: 0; color: #E2DFDA; font-size: 26px; white-space: normal; text-wrap: balance; }
.grid3 { top: 0; right: 0; left: 0; gap: 3px; }
.tile3 { position: relative; height: 1080px; overflow: hidden; }
.tile3 img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile3::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,14,.97) 22%, rgba(10,12,14,0) 62%); }
.tile3 h3 { position: absolute; bottom: 262px; right: 40px; z-index: 2; color: #fff; font-size: 62px; margin: 0; }
.tile3 p { position: absolute; bottom: 200px; right: 40px; z-index: 2; color: #E2DFDA; }
.closeline { z-index: 3; color: #fff; bottom: 48px; }
.grid4 { top: 0; right: 0; left: 0; height: 1080px; gap: 3px; }
.poster .name { top: auto; bottom: 166px; right: 30px; }
.poster .word { bottom: 74px; }
.tiles6 { top: 0; right: 0; left: 0; grid-auto-rows: 424px; gap: 3px; }
.nextstep { background: #15181B; height: 232px; }
.grp h3 { background: var(--orange); }
.item p, .alllink { color: #fff; }

/* Full-width moment with its line on the photo */
.wide { height: 1080px; object-position: 50% 40%; }
.band { background: linear-gradient(to top, rgba(10,12,14,.95) 34%, rgba(10,12,14,0)); height: 420px; padding: 190px 110px 0; z-index: 2; }
.page:has(> .wide)::after { bottom: 30px; }
.fullimg { position: absolute; inset: 0; width: 1920px; height: 1080px; object-fit: cover; }
.page:has(> .fullimg)::after { content: ""; position: absolute; left: 30px; bottom: 30px; width: 92px; height: 92px; z-index: 6; background: none center / contain no-repeat; }

/* Mood board */
.mood { position: absolute; top: 0; left: 0; right: 0; height: 868px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; }
.mood img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.band.moodband { background: #0E1012; height: 212px; padding: 28px 110px 0; }
.band.moodband .lead { font-size: 62px; }
.statement { background: #0E1012; }

/* Alexandria runs wider than a kufi face, so headline sizes step down */
.opener h1 { font-size: 136px; }
.opener.main h1, .opener.long h1 { font-size: 92px; line-height: 1.3; }
.opener .tag { font-size: 46px; }
.say-lead { font-size: 70px; line-height: 1.3; }
.say-lead.sm { font-size: 54px; }
.statement h1 { font-size: 100px; line-height: 1.4; top: 320px; }
.lines .l { font-size: 70px; line-height: 1.5; }
.panel h2 { font-size: 58px; }
.head h2 { font-size: 62px; }
.row h3 { font-size: 52px; }
.row.fit h3 { font-size: 46px; }
.band2 .line { font-size: 42px; }
.stop h3 { font-size: 30px; }
.grid5.plain h3 { font-size: 36px; }
.tile3 h3 { font-size: 50px; }
.grp h3 { font-size: 30px; }
.cmp .list h3, .cmp .before .list h3, .cmp .after .list h3 { font-size: 44px; }
.band .lead { font-size: 60px; }
.band.moodband .lead { font-size: 50px; }

/* Six-up filmstrip, two-up columns, three-up with results, closing page */
.grid5.six { grid-template-columns: repeat(6, 1fr); }
.duo { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.duo .col { position: relative; overflow: hidden; }
.duo .col img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo .col::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,14,.97) 12%, rgba(10,12,14,0) 52%); }
.duo .col h3 { position: absolute; bottom: 150px; right: 70px; left: 40px; z-index: 2; font: 700 48px/1.5 "Alexandria", sans-serif; display: flex; align-items: center; gap: 22px; }
.duo .col h3 .cut { width: 56px; height: 56px; font-size: 26px; }
.duo .col p { position: absolute; bottom: 56px; right: 70px; left: 60px; z-index: 2; font-size: 34px; font-weight: 300; line-height: 1.45; color: #E2DFDA; }
.grid3.tall { height: 1080px; }
.grid3.tall .tile3 h3 { bottom: 176px; }
.grid3.tall .tile3 p { bottom: 116px; font-size: 30px; }
.tile3 .out { position: absolute; bottom: 52px; right: 40px; z-index: 2; color: var(--orange); font-size: 34px; font-weight: 700; }
.thanksfade { position: absolute; inset: 0; background: linear-gradient(to left, rgba(10,12,14,.92) 0%, rgba(10,12,14,.5) 42%, rgba(10,12,14,0) 70%); }
.thanks { position: absolute; bottom: 70px; right: 110px; font: 700 176px/1.4 "Alexandria", sans-serif; color: #fff; }
.ph[src*="04/cover"], .ph[src*="05/cover"], .ph[src*="06/cover"], .ph[src*="07/cover"], .ph[src*="08/cover"], .ph[src*="09/cover"] { --sx: 0px; }

/* No corner emblem on photos: the ministry logo lives in the header */
.page::after { content: none !important; }
.rail4 { left: 110px; }

/* Per-photo crops: keep the subject clear of the text column */
.ph { transform: translateX(var(--sx, -260px)) scaleX(var(--fl, 1)); }
.panel::before { background: linear-gradient(to left, rgba(10,12,14,.98) 0%, rgba(10,12,14,.97) 16%, rgba(10,12,14,.72) 36%, rgba(10,12,14,0) 62%), linear-gradient(to top, rgba(10,12,14,.8) 0%, rgba(10,12,14,0) 38%); }
.ph[src*="00/cover"] { --cy: 62%; }
.ph[src*="00/idea"] { --cy: 58%; --fl: -1; }
.ph[src*="00/screen"] { --cy: 30%; }
.ph[src*="01/bill"] { --cy: 20%; --fl: -1; --sx: -120px; }
.ph[src*="01/react"] { --cy: 26%; --fl: -1; --sx: -240px; }
.ph[src*="01/measure"] { --cy: 56%; }
.ph[src*="02/s2"] { --cy: 22%; --fl: -1; --sx: -100px; }
.ph[src*="02/s3"] { width: 1240px; --cy: 45%; --sx: 0px; }
.ph[src*="03/cover"] { width: 1340px; --cy: 30%; --sx: 0px; }
.ph[src*="03/s1"] { --cy: 36%; --fl: -1; --sx: -100px; }
.ph[src*="01/cover"], .ph[src*="02/cover"], .ph[src*="02/s1"], .ph[src*="02/s4"], .ph[src*="02/garden"], .ph[src*="01/close"], .ph[src*="02/close"] { --sx: 0px; }
.ph[src*="02/pilot"] { --sx: -330px; }

/* The full-width certificate moment sits above its caption */
.wide { transform: translateY(-90px); }

/* Alexandria's marks stack tall: give every headline room so lines never touch */
h1, h2, .opener h1, .opener.main h1, .opener.long h1, .say-lead, .say-lead.sm, .lines .l, .head h2, .panel h2, .band .lead, .row h3 { line-height: 1.5; }
.opener h1 { margin-top: 0; }
.kicker { margin-bottom: 8px; line-height: 1.5; }
.say-lead { margin-top: 4px; }
.say-sup { line-height: 1.5; }
.opener .tag { line-height: 1.5; margin-top: 0; }
.time { line-height: 1.3; }
.head p { margin-top: 2px; }
.ph[src*="09/cover"] { --sx: -100px; }
.ph[src*="00/family4"], .ph[src*="00/crowd101"] { --sx: 0px; }
.endlogo { position: absolute; right: 110px; z-index: 5; }
.draftnote { position: absolute; bottom: 26px; right: 110px; font-size: 24px; font-weight: 400; line-height: 1.5; color: #E8E4DE; white-space: nowrap; z-index: 3; }

/* Text always sits in the foreground, above every photo, scrim and header layer */
.head, .body, .band, .band2, .list, .closeline, .strip, .res, .hero, .note, .brands, .rail4, .alllink, .nextstep, .thanks, .draftnote, .topic,
.statement h1, .statement .kicker, .statement .sentence, .stop h3, .stop p, .stop .rail, .tile3 h3, .tile3 p, .tile3 .out, .duo .col h3, .duo .col p,
.poster .name, .poster .word, .poster .lang, .stat .n, .stat .l, .stat .t, .stat p, .stat h3 { z-index: 7; }
.groups { z-index: 7; }

/* Stations overview: the picture stays bright, dark only sits right behind the words */
.page:has(img[src*="03/o1"])::before { height: 400px; background: radial-gradient(ellipse 50% 100% at 100% 0%, rgba(10,12,14,.86) 0%, rgba(10,12,14,.6) 55%, rgba(10,12,14,0) 100%); }
.page:has(img[src*="03/o1"]) .hdr { height: 120px; opacity: .7; }
.page:has(img[src*="03/o1"]) .stop { background: rgb(10,12,14); }
.page:has(img[src*="03/o1"]) .stop img { height: 84%; bottom: auto; filter: brightness(1.2) saturate(1.06); }
.page:has(img[src*="03/o1"]) .stop::after { background: linear-gradient(to top, rgb(10,12,14) 15%, rgba(10,12,14,.82) 22%, rgba(10,12,14,0) 40%); }
.stop img[src*="03/o1"] { object-position: 60% 50%; }
.stop img[src*="03/o2"] { object-position: 42% 50%; transform: scaleX(-1); }
.stop img[src*="03/o4"] { object-position: 54% 50%; }

/* The caravan from every angle */
.truck-angles .hero-truck { position: absolute; top: 132px; left: 70px; width: 990px; z-index: 3; }
.truck-angles .desk-truck { position: absolute; top: 470px; right: 130px; width: 500px; z-index: 3; }
.truck-angles .ta-strip { position: absolute; left: 60px; right: 60px; bottom: 34px; height: 236px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; z-index: 3; }
.truck-angles .ta { display: flex; align-items: center; justify-content: center; padding: 16px 12px; background: rgba(255,255,255,.05); border-top: 3px solid #F4553B; }
.truck-angles .ta img { max-width: 100%; max-height: 100%; object-fit: contain; }
.truck-angles::after { content: "" !important; position: absolute; left: 0; right: 0; top: 620px; height: 170px; background: radial-gradient(ellipse 36% 60% at 32% 50%, rgba(255,255,255,.09), rgba(255,255,255,0)); }

/* Index and initiative dividers */
.index, .divider { background: #0E1012; }
.ixlist { position: absolute; top: 236px; right: 110px; left: 110px; z-index: 7; }
.ixrow { display: grid; grid-template-columns: 120px 800px 1fr 90px; align-items: center; height: 106px; border-top: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; }
.ixrow:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.ixrow .n { font: 700 44px/1 "Alexandria", sans-serif; color: var(--orange); }
.ixrow b { font: 700 46px/1.3 "Alexandria", sans-serif; }
.ixrow .s { font-size: 32px; color: #C9CCD0; white-space: nowrap; }
.ixrow .pg { font: 500 38px/1 "Alexandria", sans-serif; color: var(--orange); text-align: left; }
.divider .num { position: absolute; left: 100px; top: 262px; font: 700 400px/1 "Alexandria", sans-serif; color: var(--orange); direction: ltr; z-index: 7; }
.dv { position: absolute; top: 250px; bottom: 230px; right: 110px; width: 1120px; display: flex; flex-direction: column; justify-content: center; z-index: 7; }
.dv .kicker { font-size: 40px; margin: 0 0 14px; }
.dv h1 { font: 700 96px/1.34 "Alexandria", sans-serif; color: #fff; margin: 0; text-wrap: balance; }
.dv .sub { font-size: 42px; color: #C9CCD0; margin-top: 22px; }
.drail { position: absolute; right: 110px; left: 110px; bottom: 86px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; z-index: 7; }
.drail span { border-top: 6px solid #3A3D41; padding-top: 12px; font: 500 28px/1.3 "Alexandria", sans-serif; color: #8D9196; text-align: right; }
.drail .on { border-top-color: var(--orange); color: #fff; }

.thanksrule { position: absolute; top: 372px; right: 110px; width: 120px; height: 7px; background: var(--orange); z-index: 7; }