/* A printed book on a dark navy desk. Portrait A4 pages, Montserrat, navy, sky and gold from KHC's brand.
   One page is 100em wide: every size below is a share of the page, so type and pictures scale with the book. */
:root{
  color-scheme:dark;
  --ink:#071f42;--ink2:#0d2c5c;--desk:#04142c;--sky:#11a9e2;--royal:#2457c5;--gold:#c6a14a;
  --paper:#fbfcfe;--mist:#f0f5fa;--slate:#45587a;--pale:#b6c6dc;--line:rgba(7,31,66,.16);--line-d:rgba(220,235,246,.22);
  --font:"Montserrat","Segoe UI",system-ui,sans-serif;
}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat.woff) format("woff");font-weight:300 800;font-display:swap}
html,body{height:100%}
body{background:radial-gradient(110% 85% at 50% 18%,#123868 0%,var(--ink) 46%,var(--desk) 100%) var(--desk);color:#dcebf6;font-family:var(--font);-webkit-font-smoothing:antialiased}
.stage{box-sizing:border-box;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow:hidden}
.shelf{width:min(100%,calc((100dvh - 84px)*1.4142));max-width:1560px;flex:none}
.book{width:100%;max-width:none!important;min-width:0!important;min-height:0!important;transition:transform .55s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 26px 34px rgba(0,0,0,.5))}
.book.closed{transform:translateX(-25%)}
.book.ended{transform:translateX(25%)}
@media (max-width:799px),(max-height:650px){.shelf{width:min(100%,calc((100dvh - 84px)*.7071))}}

/* The page turner */
.stf__parent{position:relative;display:block;box-sizing:border-box;transform:translateZ(0);touch-action:pan-y}
.stf__wrapper,.sft__wrapper{position:relative;width:100%;box-sizing:border-box}
.stf__parent canvas{position:absolute;width:100%;height:100%;left:0;top:0}
.stf__block{position:absolute;width:100%;height:100%;box-sizing:border-box;perspective:2000px}
.stf__item{display:none;position:absolute;transform-style:preserve-3d}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{position:absolute;left:0;top:0}

/* Controls under the book */
.turn{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.turn span{min-width:7.5em;text-align:center}
.turn .site{margin-right:10px;color:#dcebf6;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.turn .site:hover{color:#fff}
.turn button{width:44px;height:40px;border:0;border-radius:8px;background:rgba(220,235,246,.1);color:#fff;font:400 26px/1 var(--font);cursor:pointer}
.turn button:hover{background:rgba(220,235,246,.2)}
.turn button:disabled{opacity:.35;cursor:default}
.turn button:focus-visible,.turn a:focus-visible,.toc button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* A page */
.page{background:var(--paper);color:var(--ink);overflow:hidden;container-type:inline-size}
.in{position:absolute;inset:0;overflow:hidden;font-size:1cqw;line-height:1.45}
.in *{box-sizing:border-box}
.in h1,.in h2,.in h3,.in p,.in ul,.in ol,.in dl,.in dd,.in dt,.in figure{margin:0;padding:0;list-style:none}
.in img{display:block;max-width:100%}
.in svg{display:block}
/* The fold: pages darken gently into the spine. */
.page::after{content:"";position:absolute;inset:0;pointer-events:none}
.page.left::after{background:linear-gradient(270deg,rgba(7,20,44,.26),rgba(7,20,44,.07) 3%,transparent 9%)}
.page.right::after{background:linear-gradient(90deg,rgba(7,20,44,.26),rgba(7,20,44,.07) 3%,transparent 9%)}
.book.single .page::after{display:none}

.stack{position:absolute;inset:9em 9em 12em 9em;display:flex;flex-direction:column;gap:2.6em}
.stack.bottom{justify-content:flex-end}
.stack.below-pic{top:62em}
.in h2{font-size:7.6em;font-weight:800;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
.in h3{font-size:3.5em;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.in p,.in li{font-size:3.3em}
.in .big{font-size:4em;line-height:1.38}
.in .lead{font-size:3.5em;color:var(--slate)}
.in .label{font-size:2.35em;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--royal)}
.folio{position:absolute;bottom:4.2em;font-size:2.2em;font-weight:600;color:var(--slate)}
.left .folio{left:4.2em}
.right .folio{right:4.2em}

/* Paper tones */
.white{background:#fff}
.tint{background:var(--mist)}
.ink{background:var(--ink);color:#fff}
.ink .label{color:var(--sky)}
.ink h3{color:var(--gold)}
.ink .folio{display:none}
.ink .ticks li{color:var(--pale)}
.navy{color:var(--royal)}
.swoosh{position:absolute;right:0;top:0;width:66%;height:auto}

/* Covers */
.cover{background:var(--ink);color:#fff}
.in svg.emboss{position:absolute;right:-16em;bottom:-22em;width:auto;height:150em}
.spine{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(255,255,255,.07) 2.4%,rgba(0,0,0,.2) 3.4%,transparent 7%)}
.back .spine{transform:scaleX(-1)}
.logo{position:absolute;left:11em;top:11em;display:flex;align-items:center;gap:2.2em}
.mark{height:17em;width:auto;flex:none}
.logo-type{display:grid;gap:.5em;font-size:6em;font-weight:300;line-height:1;letter-spacing:-.01em}
.logo-type b{font-weight:800}
.logo-type small{font-size:.48em;font-weight:600;letter-spacing:.47em;color:var(--sky);text-align:center}
.cover-low{position:absolute;left:11em;right:9em;bottom:13em;display:flex;flex-direction:column;gap:3em}
.in .gold{font-size:2.6em;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.cover h1{font-size:13.4em;font-weight:800;line-height:1.02;letter-spacing:-.026em}
.in .cover-line{font-size:2.9em;font-weight:500;color:#dcebf6;padding-top:1em;border-top:1px solid var(--gold)}
.back-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5em}
.back-mark{height:34em}
.back-in p{font-size:4em;font-weight:700;letter-spacing:-.01em}

/* Contents */
.toc{display:grid}
.toc li{font-size:1em}
.toc button{width:100%;display:flex;justify-content:space-between;gap:2em;padding:1.05em 0;background:none;border:0;border-top:1px solid var(--line-d);color:#fff;font:600 3.5em/1.2 var(--font);cursor:pointer;text-align:left}
.toc button:hover{color:var(--sky)}

/* Facts */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:4em 4em;margin-top:auto}
.facts>div{display:flex;flex-direction:column;gap:.8em;padding-top:2em;border-top:.35em solid var(--sky)}
.facts dd{font-size:10em;font-weight:800;line-height:1;letter-spacing:-.02em}
.facts dt{font-size:3em;line-height:1.35;color:var(--slate)}

/* Full pictures with words on them */
.full,.spread{background:var(--ink)}
.scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,31,66,.94),rgba(7,31,66,.62) 28%,rgba(7,31,66,0) 54%)}
.cap{position:absolute;left:9em;right:9em;bottom:11em;display:flex;flex-direction:column;gap:2em;color:#fff}
.cap .label{color:#7fd4f5}
.spread img{position:absolute;top:0;width:200%;height:100%;max-width:none;object-fit:cover}
.spread-l img{left:0}
.spread-r img{left:-100%}
.spread .scrim{background:linear-gradient(0deg,rgba(7,31,66,.8),rgba(7,31,66,.3) 22%,rgba(7,31,66,0) 42%)}
.spread-l .cap{left:9em;right:2em}
.spread-r .cap{left:2em;right:9em;text-align:right}
.spread .cap h2{font-size:7.6em}
.spread-r .cap h2{text-wrap:balance}

/* Lists */
.ticks{display:grid;gap:.5em}
.ticks li{position:relative;padding-left:1.15em;font-size:3.05em;line-height:1.35;color:var(--slate)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.62em;height:.12em;background:var(--sky)}
.pillars{display:grid;gap:3.4em;margin-top:1.4em}
.pillars>div{display:grid;gap:1.3em;padding-top:2.2em;border-top:1px solid var(--line)}
.pillars h3{color:var(--royal)}
.pillars .ticks{grid-template-columns:1fr 1fr;gap:.7em 3em}
.rows{display:grid}
.rows li{padding:.8em 0;border-top:1px solid var(--line);font-size:3.3em;font-weight:600}

/* Supplies */
.supply .ticks{grid-template-columns:1fr 1fr;gap:.5em 2.4em}
.supply img{width:82em;height:auto}

/* Pictures of the work */
.tile{position:relative;overflow:hidden;border-radius:.8em;background:var(--ink)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile figcaption{position:absolute;inset:auto 0 0 0;padding:4.5em 1.5em 1.3em;font-size:2.4em;font-weight:600;color:#fff;background:linear-gradient(0deg,rgba(7,31,66,.84),transparent)}
.frames{display:grid;grid-template-columns:40em 19em 19em;grid-template-rows:35em 35em;gap:2em}
.frames .tall{grid-row:span 2}
.pairs{display:grid;grid-template-columns:40em 40em;grid-auto-rows:42em;gap:2em}
.pairs .tile img{object-position:50% 70%}
.pairs.flat{grid-auto-rows:40em}
.pairs.flat .tile img{object-position:50% 40%}
.note{display:flex;align-items:flex-end;padding:3em;background:var(--ink)}
.in .note p{color:#fff;font-size:2.9em;font-weight:500;line-height:1.4}

/* Our approach */
.asks{display:grid;gap:0;margin-top:1em}
.asks li{display:grid;gap:.8em;padding:3em 0;border-top:1px solid var(--line);font-size:1em}
.asks p{color:var(--slate);font-size:3.3em}

/* Our team */
.people{display:grid;gap:2.6em}
.people li{display:grid;gap:.5em;font-size:1em}
.people p{font-size:2.95em;color:var(--slate);line-height:1.38}
.in .people .study{font-size:2.6em;font-weight:600;color:var(--royal)}

/* Clients */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4em 5em;align-items:center}
.logos li{grid-column:span 2;font-size:1em}
.logos li.wide{grid-column:span 3;order:-1}
.logos img{width:100%;height:19em;object-fit:contain}
.sup{display:grid;gap:2.6em;margin-top:auto;padding-top:3em;border-top:1px solid var(--line)}
.sup ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3em 4em;align-items:center}
.sup li{grid-column:span 2;font-size:1em}
.sup li:nth-child(n+4){grid-column:span 3}
.sup img{width:100%;height:15em;object-fit:contain}

/* Talk to us */
.steps{counter-reset:step;display:grid;gap:1.3em}
.steps li{counter-increment:step;display:flex;align-items:center;gap:.9em;font-size:3.1em;font-weight:500;color:#dcebf6}
.steps li::before{content:counter(step);display:grid;place-items:center;width:1.9em;height:1.9em;flex:none;border-radius:50%;background:var(--sky);color:var(--ink);font-weight:700;font-size:.82em}
.in .phone{font-size:9em;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-top:.6em}
.in .fine{font-size:2.2em;color:var(--pale);padding-top:1.2em;border-top:1px solid var(--gold)}

/* Without the page turner, and in the PDF: plain pages, one after another. */
.flat .stage{height:auto;display:block;overflow:visible}
.flat .turn{display:none}
.flat .shelf{width:min(100%,840px);margin:0 auto}
.flat .book{display:grid;gap:18px;filter:none;transform:none}
.flat .page{position:relative;aspect-ratio:210/297}
.flat .page::after{display:none}
@page{size:210mm 297mm;margin:0}
@media print{
  html,body{height:auto;background:#fff}
  .flat .stage{padding:0}
  .flat .shelf{width:210mm;max-width:none}
  .flat .book{gap:0;display:block}
  .flat .page{width:210mm;height:297mm;break-after:page;break-inside:avoid}
  .page,.page *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){.book{transition:none}}