/* Shared case study layout: nav, hero, sticky contents, figure containers, rows, results panel,
   next case study and footer. Each page sets --accent, --deep and --tint, and keeps its own extras inline. */
@font-face{font-family:"PP Valve";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/pp-valve-500.woff2) format("woff2")}
@font-face{font-family:"PP Valve";font-weight:500;font-style:italic;font-display:swap;src:url(fonts/pp-valve-500-italic.woff2) format("woff2")}
  :root{
    --ground:#F7F6F3; --ink:#272331; --muted:#6C6774; --line:#DEDBDC; --soft:#EFEDEA;
    /* each case study overrides these three to its own colours */
    --accent:#6442AC; --deep:#3C2A40; --tint:#EEE8ED;
    --body:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --punch:"PP Valve", "Schibsted Grotesk", sans-serif;
    --gutter:clamp(20px,5.5vw,88px); --max:1280px; --nav:72px;
  }
  html{color-scheme:light; scroll-behavior:smooth; overflow-x:clip}
  body{margin:0; background:var(--ground); color:var(--ink); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip}
  *{box-sizing:border-box}
  h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote{margin:0}
  ul,ol{padding:0; list-style:none}
  img{display:block; max-width:100%; height:auto}
  a{color:var(--accent)}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
  .wrap{width:min(var(--max), calc(100% - var(--gutter)*2)); margin-inline:auto; position:relative}
  .eyebrow{font:550 11px/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
  .aside{font:italic 400 19px/1.5 var(--body); color:var(--muted); max-width:60ch}
  .h2{font:500 clamp(30px,3.4vw,44px)/1.06 var(--punch); letter-spacing:-.02em; text-wrap:balance; max-width:22ch}
  .h2 em{font-style:italic; color:var(--accent)}
  p.body{max-width:62ch}
  p.muted{color:var(--muted); max-width:62ch; font-size:17px}
  .tag{font:400 11.5px/1.4 var(--body); color:var(--muted)}
  .evs{display:flex; flex-wrap:wrap; gap:0 6px}
  .evs .tag + .tag::before{content:"·"; margin-right:6px; color:var(--line)}
  .method{font:400 12.5px/1.6 var(--body); color:var(--muted); padding-top:14px; border-top:1px solid var(--line)}

  /* nav + reading progress */
  .site-nav{position:sticky; top:0; z-index:40; background:rgba(247,246,243,.97); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .site-nav .wrap{display:flex; justify-content:space-between; align-items:center; height:var(--nav)}
  .site-nav .word{font:500 19px/1 var(--punch); letter-spacing:-.03em; color:var(--ink); text-decoration:none}
  .site-nav nav a{color:var(--muted); text-decoration:none; font-size:13px; margin-left:28px}
  .site-nav nav a:hover,.site-nav .word:hover{color:var(--accent)}
  .progress{position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left}

  /* hero */
  .hero{padding-block:64px 0; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px 72px}
  .back{grid-column:1 / -1; display:flex; justify-content:space-between; font-size:13px; color:var(--muted)}
  .back a{color:var(--muted); text-decoration:none} .back a:hover{color:var(--ink)}
  .hero > *{min-width:0}
  .hero h1{font:500 clamp(40px,5.4vw,72px)/1.02 var(--punch); letter-spacing:-.035em; text-wrap:balance; margin:14px 0 22px}
  .hero h1 em{font-style:italic; color:var(--accent)}
  .hero .lede{font-size:19px; color:var(--muted); max-width:56ch}
  .facts{display:grid; border-top:1px solid var(--line); align-self:start}
  .facts div{display:grid; grid-template-columns:90px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px}
  .facts dt{font:400 10.5px/1.9 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
  .facts dd{margin:0}
  .meta{display:grid; gap:28px; align-content:start}
  .tldr{display:grid; grid-template-columns:repeat(2,1fr); border-bottom:1px solid var(--line)}
  .tldr > div{padding:0 16px 18px 0}
  .tldr > div + div{padding-left:16px; border-left:1px solid var(--line)}
  .tldr .eyebrow{margin-bottom:10px}
  .tldr p{font-size:13px; line-height:1.5; color:var(--muted)}
  .tldr strong{font:500 28px/1.05 var(--body); color:var(--ink); letter-spacing:-.04em; display:block; margin-bottom:6px}

  /* containers: every screen sits on a tinted surface, opens full size */
  .cover{grid-column:1 / -1; background:var(--deep); color:#F1E5EC; border-radius:6px; padding:24px 32px 20px}
  .cover-top,.cover figcaption{display:flex; justify-content:space-between; gap:20px; font-size:11px}
  .cover-top{margin-bottom:20px} .cover-top .eyebrow{color:#F1E5EC; font-size:10px}
  .cover figcaption{margin-top:14px; opacity:.75}
  .cover .zoom img{width:100%; aspect-ratio:16/7.5; object-fit:cover; border-radius:3px; box-shadow:none}
  .surface{background:var(--tint); border-radius:5px; padding:clamp(14px,2.6vw,34px); position:relative}
  .zoom{display:block; position:relative; cursor:zoom-in; text-decoration:none; color:inherit}
  .zoom img{border-radius:3px; box-shadow:0 2px 14px rgba(39,35,49,.08); margin-inline:auto}
  .zoom.cut img{box-shadow:none; border-radius:0}
  .zoom .zl{position:absolute; right:10px; bottom:10px; padding:6px 10px; font-size:10px; line-height:1.4; background:#fff; color:var(--deep); border:1px solid var(--line); border-radius:4px; opacity:0; transition:opacity .2s}
  .zoom:hover .zl,.zoom:focus-visible .zl{opacity:1}
  .figure figcaption{display:flex; justify-content:space-between; gap:20px; margin-top:12px; font-size:12px; line-height:1.6; color:var(--muted)}
  .figure figcaption .n{white-space:nowrap; font-size:10px; letter-spacing:.06em; padding-top:2px}
  .image-dialog{padding:0; border:0; border-radius:6px; width:min(1280px,94vw); max-width:94vw; max-height:92dvh; background:var(--ground); color:var(--ink)}
  .image-dialog::backdrop{background:rgba(39,30,46,.78); backdrop-filter:blur(5px)}
  .dialog-bar{position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 20px; background:var(--ground); border-bottom:1px solid var(--line); font-size:13px}
  .dialog-bar button{border:0; background:var(--soft); width:36px; height:36px; border-radius:50%; font-size:19px; cursor:pointer; color:var(--ink)}
  .image-dialog img{width:100%; height:auto; padding:20px}

  /* story: sticky contents beside the chapters */
  .story{display:grid; grid-template-columns:170px minmax(0,1fr); gap:clamp(40px,6vw,92px); margin-top:96px; align-items:start}
  .toc{position:sticky; top:calc(var(--nav) + 32px)}
  .toc > p{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
  .toc a{display:flex; align-items:center; gap:12px; min-height:38px; padding:7px 0; text-decoration:none; font-size:12px; color:var(--muted)}
  .toc a span{font-size:10px; font-variant-numeric:tabular-nums; opacity:.75}
  .toc a:hover,.toc a[aria-current=true]{color:var(--ink)}
  .toc a[aria-current=true]::after{content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); margin-left:auto}
  .toc .top{margin-top:22px; border-top:1px solid var(--line); padding-top:16px; font-size:11px; min-height:0}

  section{padding-bottom:96px; scroll-margin-top:calc(var(--nav) + 24px)}
  section + section{border-top:1px solid var(--line); padding-top:64px}
  .head .eyebrow{color:var(--accent); margin-bottom:16px}
  .head .h2{margin-bottom:22px}
  .stack{display:grid; gap:16px}

  /* 01 the world: six-week gantt */
  .gantt{margin-top:40px; border-block:1px solid var(--line); padding:22px 0 18px}
  .gantt .weeks{display:grid; grid-template-columns:repeat(6,1fr); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
  .gantt .weeks span{border-left:1px solid var(--line); padding-left:8px}
  .gantt .rows{display:grid; gap:8px}
  .gantt .row{display:grid; grid-template-columns:repeat(12,1fr); align-items:center; height:30px}
  .gantt .bar{grid-column:var(--s) / span var(--l); height:24px; border-radius:4px; display:flex; align-items:center; padding:0 10px; font:500 10.5px/1 var(--body); letter-spacing:.04em; white-space:nowrap; color:#fff; background:var(--accent); transform-origin:left; transform:scaleX(0); transition:transform .9s cubic-bezier(.22,1,.36,1)}
  .gantt.is-in .bar{transform:scaleX(1)}
  .gantt .bar.them{background:#CFE5E2; color:#1E5753} .gantt .bar.both{background:var(--deep)}
  .gantt .row:nth-child(2) .bar{transition-delay:.1s} .gantt .row:nth-child(3) .bar{transition-delay:.2s} .gantt .row:nth-child(4) .bar{transition-delay:.3s} .gantt .row:nth-child(5) .bar{transition-delay:.4s} .gantt .row:nth-child(6) .bar{transition-delay:.5s}
  .gantt .key{display:flex; gap:18px; margin-top:16px; font-size:11.5px; color:var(--muted)}
  .gantt .key i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}

  /* 02 broken */
  .probs{margin-top:36px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:32px 48px; align-items:center}
  .probs .surface{padding:clamp(18px,3vw,36px)}
  .plist{display:grid}
  .p{display:grid; grid-template-columns:36px 1fr; padding:18px 0; border-top:1px solid var(--line)}
  .p:last-child{border-bottom:1px solid var(--line)}
  .p > b{grid-row:span 2; font:500 13px/1.7 var(--body); color:var(--accent); font-variant-numeric:tabular-nums}
  .p h4{font:500 19px/1.25 var(--body); letter-spacing:-.02em; margin-bottom:4px}
  .p p{font-size:15px; color:var(--muted)}
  .goals{margin-top:48px}
  .goals .eyebrow{margin-bottom:14px}
  .goals ol{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
  .goals li{font-size:15px; color:var(--muted); padding-top:14px; border-top:2px solid var(--ink)}
  .goals li b{display:block; font:500 18px/1.25 var(--body); color:var(--ink); margin-bottom:4px}

  /* 03 learned */
  .methods{margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-bottom:28px; border-bottom:1px solid var(--line)}
  .methods div{font-size:14.5px; color:var(--muted)}
  .methods div b{display:block; font:500 17px/1.3 var(--punch); color:var(--ink); margin-bottom:6px}
  .finds{counter-reset:f}
  .f{display:grid; grid-template-columns:44px 1fr; gap:6px 0; padding:26px 0; border-bottom:1px solid var(--line); counter-increment:f}
  .f::before{content:counter(f, decimal-leading-zero); grid-row:span 4; font:500 13px/2.1 var(--body); color:var(--accent)}
  .f h3{font:500 22px/1.2 var(--punch); letter-spacing:-.015em}
  .f p{font-size:15.5px; color:var(--muted); max-width:64ch}
  .f .so{color:var(--accent); font-size:15px}
  .f .so b{font-weight:500}

  /* 04 client-ese */
  .strip{margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
  .hx{background:var(--tint); border-radius:5px; padding:10px; transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .hx:hover{transform:translateY(-3px)}
  .hx img{aspect-ratio:16/8; object-fit:cover; object-position:left top; width:100%; box-shadow:none}
  .hx .cap{display:flex; justify-content:space-between; gap:8px; padding:10px 2px 2px; font-size:12px; color:var(--muted)}
  .hx .cap .tag{font-size:11px}
  .hx.pick{background:var(--deep); color:#F1E5EC}
  .hx.pick .cap,.hx.pick .cap .tag{color:#F1E5EC}
  .convergence{margin-top:36px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:16px; align-items:start; font-size:15px; color:var(--muted)}
  .convergence .step{padding-top:14px; border-top:1px solid var(--line)}
  .convergence .step:last-child{border-top:2px solid var(--accent)}
  .convergence .step b{display:block; font:550 10.5px/1.8 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:4px}
  .convergence .arr{font-size:22px; color:var(--line); padding-top:18px}

  /* 05 decided */
  .final{margin-top:36px}
  .final .figure .zoom{max-height:720px; overflow:hidden}
  .final .figure .zoom::after{content:""; position:absolute; inset:85% 0 0; background:linear-gradient(transparent, var(--tint)); pointer-events:none}
  .side{margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
  .d{padding-top:16px; border-top:1px solid var(--line); display:grid; gap:8px; align-content:start}
  .d h3{font:500 19px/1.25 var(--body); letter-spacing:-.02em}
  .d p{font-size:15px; color:var(--muted)}
  .anc{margin-top:72px; display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:32px 48px; align-items:center}
  .anc .surface img{max-width:440px; width:100%}
  .nudges{margin-top:24px; border-top:1px solid var(--line)}
  .nudges div{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px}
  .nudges div span:first-child{font:550 10.5px/2 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
  .callout{margin-top:44px}

  /* 06 results: one quiet dark panel */
  #results .panel{background:var(--deep); color:#fff; border-radius:6px; padding:clamp(28px,4vw,52px)}
  #results .eyebrow{color:rgba(255,255,255,.6)}
  #results .h2 em{color:#D7C7F2}
  #results p.muted{color:rgba(255,255,255,.72)}
  .ladder{margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:0}
  .s{padding:18px 20px 18px 0; display:grid; gap:6px; align-content:start; border-top:1px solid rgba(255,255,255,.18)}
  .s + .s{padding-left:20px; border-left:1px solid rgba(255,255,255,.18)}
  .s strong{font:500 clamp(30px,3vw,42px)/1 var(--body); letter-spacing:-.04em}
  .s p{font-size:14px; color:rgba(255,255,255,.7)}
  .s1{grid-column:1 / -1; grid-template-columns:auto 1fr; align-items:end; gap:8px 28px; padding:0 0 24px; border-top:0}
  .s1 .eyebrow{grid-column:1 / -1}
  .s1 strong{font:500 clamp(60px,8vw,108px)/.9 var(--punch); letter-spacing:-.04em}
  .s1 p{max-width:48ch}
  .s2{padding-left:0}
  .s2 + .s{padding-left:20px}
  .ladder .s2{border-left:0; padding-left:0}
  .quotes{margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
  .qq{border-left:1px solid rgba(255,255,255,.25); padding:4px 0 4px 18px}
  .qq q{display:block; font:italic 400 18px/1.45 var(--body); color:rgba(255,255,255,.92)}
  .qq q::before,.qq q::after{content:none}
  .qq small{display:block; margin-top:10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55)}
  #results .method{border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.6); margin-top:32px}

  /* 07 differently */
  .notes .body{font-size:19px; line-height:1.6}
  .notes .body + .body{margin-top:22px}

  /* next case study */
  .nxb{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:8px; padding:56px 0 64px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink)}
  .nxb h2{font:500 clamp(34px,4vw,54px)/1.05 var(--punch); letter-spacing:-.035em; max-width:16ch; margin-top:18px}
  .nxb h2 em{font-style:italic; color:var(--accent)}
  .nxb .go{display:inline-flex; align-items:center; gap:14px; margin-top:26px; font-size:13px; font-weight:500; padding:11px 16px; border:1px solid rgba(39,35,49,.24); border-radius:4px; transition:background-color .2s, color .2s, border-color .2s}
  .nxb:hover .go{background:var(--ink); color:var(--ground); border-color:var(--ink)}
  .nxb .go span{transition:transform .2s} .nxb:hover .go span{transform:translateX(4px)}
  .nxb-art{background:var(--tint); border-radius:5px; padding:28px; overflow:hidden}
  .nxb-art img{border-radius:3px; max-height:300px; width:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1)}
  .nxb:hover .nxb-art img{transform:scale(1.02)}

  /* footer */
  .footer{border-top:1px solid var(--line); padding:36px 0 40px; margin-top:0}
  .footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:28px}
  .footer-name{font:500 19px/1 var(--punch); letter-spacing:-.03em; color:var(--ink); text-decoration:none}
  .footer p{font-size:12px; color:var(--muted); margin-top:8px}
  .footer-links,.footer-links .links{display:flex; gap:26px}
  .footer-links a{font-size:12px; min-height:44px; display:inline-flex; align-items:center; color:var(--ink); text-decoration:none}
  .footer-links a:hover{text-decoration:underline}
  .analytics-note{margin-top:0 !important}

  .rv{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
  .rv.is-in{opacity:1; transform:none}
  .after{margin-top:24px}

  @media (max-width:1100px){
    .story{grid-template-columns:130px minmax(0,1fr); gap:40px}
    .side{grid-template-columns:1fr} .anc,.probs{grid-template-columns:1fr}
  }
  @media (max-width:900px){
    :root{--nav:62px}
    .hero{grid-template-columns:1fr; padding-top:40px}
    .story{display:block; margin-top:56px}
    .toc{top:var(--nav); z-index:30; display:flex; gap:24px; overflow-x:auto; scrollbar-width:none; background:var(--ground); border-block:1px solid var(--line); margin:0 calc(var(--gutter) * -1) 40px; padding:0 var(--gutter)}
    .toc > p,.toc .top{display:none}
    .toc a{white-space:nowrap; flex-shrink:0; min-height:48px; position:relative}
    .toc a[aria-current=true]::after{position:absolute; left:0; bottom:0; width:100%; height:2px; border-radius:0; margin:0}
    section{padding-bottom:64px; scroll-margin-top:calc(var(--nav) + 64px)} section + section{padding-top:48px}
    .goals ol,.methods{grid-template-columns:1fr}
    .strip{grid-template-columns:1fr 1fr}
    .convergence{grid-template-columns:1fr} .convergence .arr{display:none}
    .ladder{grid-template-columns:1fr 1fr} .s3 + .s{border-left:0; padding-left:0}
    .quotes{grid-template-columns:1fr}
    .gantt .bar{font-size:0; padding:0}
    .cover{padding:16px 14px 14px}
    .nxb{grid-template-columns:1fr; gap:28px; padding:40px 0 48px}
    .footer .wrap{flex-direction:column; align-items:flex-start; gap:14px} .footer-links{gap:20px; flex-wrap:wrap}
  }
  @media (max-width:560px){
    .site-nav nav a{margin-left:16px; font-size:12px}
    .tldr strong{font-size:26px} .tldr > div + div{padding-left:16px}
    .strip{grid-template-columns:1fr} .ladder{grid-template-columns:1fr} .s + .s{padding-left:0; border-left:0}
    .nudges div{grid-template-columns:1fr; gap:2px} .f{grid-template-columns:1fr} .f::before{grid-row:auto}
    .zoom .zl{display:none}
    .s1{grid-template-columns:1fr} .s1 strong{font-size:clamp(48px,14vw,72px)}
  }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} .rv{opacity:1; transform:none} .gantt .bar{transform:none} }