/* Case studies share the landing page's full-width sections and navigation. */
body.flow-case{overflow-x:clip}
body.flow-case main{width:100%;max-width:none;margin:0;padding:clamp(74px,8vw,116px) var(--pad) 0;border-radius:0;box-shadow:none;clip-path:none;background:var(--cloud);color:var(--ink)}
body.flow-case main>*{width:min(1180px,100%);margin-inline:auto}
body.flow-case .case-crumb{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(36px,4vw,60px);font:600 .8rem/1.3 Inter,sans-serif}
body.flow-case .case-crumb a{color:var(--cobalt-deep);border-bottom:1px solid currentColor;padding-bottom:5px;transition:transform .2s ease}
body.flow-case .case-crumb a:hover{transform:translateX(-3px)}
body.flow-case .case-crumb span{color:rgba(14,14,14,.48)}
body.flow-case .chrow{margin-bottom:26px}
body.flow-case .chrow .kicker{font:700 .7rem/1.4 Inter,sans-serif;letter-spacing:.17em;color:var(--cobalt-deep)}
body.flow-case .chrow .clogo{height:auto;max-height:72px;max-width:min(230px,35vw);object-fit:contain}
body.flow-case main>h1{max-width:1180px;font-size:clamp(3.3rem,6.7vw,7.2rem);font-weight:600;letter-spacing:-.035em;line-height:.99;text-wrap:balance;margin-bottom:clamp(24px,3vw,38px)}
body.flow-case main>.lede{max-width:790px;margin-inline:max(0px,calc((100% - 1180px)/2));font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.65;color:rgba(14,14,14,.72)}
body.flow-case .case-quicklinks{display:flex;gap:24px;flex-wrap:wrap;margin-top:35px;margin-bottom:22px}
body.flow-case .case-quicklinks a{font-size:.86rem;font-weight:700;color:var(--ink);padding-bottom:5px;border-bottom:1px solid rgba(14,14,14,.4);transition:color .2s,border-color .2s}
body.flow-case .case-quicklinks a:hover{color:var(--cobalt-deep);border-color:currentColor}
body.flow-case #case-visual,body.flow-case #case-evidence,body.flow-case #case-story,body.flow-case .case-chapter{scroll-margin-top:115px}
body.flow-case .meta{margin-top:0;margin-bottom:clamp(55px,7vw,90px);gap:0}
body.flow-case .meta i{border:0;border-radius:0;padding:0 18px 0 0;margin-inline-end:18px;border-inline-end:1px solid rgba(14,14,14,.24);font:600 .7rem/1.5 Inter,sans-serif;letter-spacing:.09em;color:rgba(14,14,14,.55)}
body.flow-case .meta i:last-child{border-inline-end:0}
body.flow-case .case-snapshot{border-color:rgba(14,14,14,.17);margin-bottom:60px}
body.flow-case .shotframe{padding:0;margin-top:0;margin-bottom:clamp(40px,5vw,72px);border:0;border-radius:0;background:transparent;box-shadow:none}
body.flow-case .shotframe img{border-radius:20px;width:100%;height:auto}
body.flow-case .shotframe .plate{padding:18px 0 0}
body.flow-case .metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 auto;border-block:1px solid rgba(14,14,14,.2)}
body.flow-case .metrics .mt{border:0;border-radius:0;background:transparent;padding:clamp(26px,4vw,48px)}
body.flow-case .metrics .mt:first-child{padding-inline-start:0}
body.flow-case .metrics .mt:not(:last-child){border-inline-end:1px solid rgba(14,14,14,.17)}
body.flow-case .metrics .mt b{font-size:clamp(2.5rem,4.2vw,4.5rem);line-height:1;color:var(--ink)}
body.flow-case .metrics .mt span{font-family:Inter,sans-serif;letter-spacing:.09em;font-weight:700;color:var(--cobalt-deep)}
body.flow-case .metrics .mt p{font-size:.91rem;line-height:1.6;color:rgba(14,14,14,.62)}
body.flow-case main>h2,body.flow-case main>h2+p,body.flow-case main>h2+p+p,body.flow-case main>.scope{max-width:800px}
body.flow-case main>h2{font-size:clamp(2.1rem,3.8vw,3.8rem);line-height:1.08;letter-spacing:-.025em;margin-top:1.8em;margin-bottom:.45em}
body.flow-case main>h2+p,body.flow-case main>h2+p+p{font-size:clamp(1rem,1.45vw,1.17rem);line-height:1.78;color:rgba(14,14,14,.7)}
body.flow-case main>.scope{margin-top:50px}
body.flow-case main>.row{margin-top:30px;margin-bottom:50px}
body.flow-case main>blockquote{max-width:800px}
body.flow-case blockquote a{color:var(--cobalt);text-decoration:underline;text-underline-offset:4px}
body.flow-case main>.nextcase{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:50px;padding:35px 0;border:0;border-top:1px solid rgba(14,14,14,.2);border-radius:0}
body.flow-case main>.nextcase:hover{background:none;color:var(--cobalt-deep)}
body.flow-case main>.cta{position:relative;width:min(1180px,100%);max-width:none;margin-top:70px;padding:clamp(76px,9vw,120px) 0;border:0;border-radius:0;background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
body.flow-case main>.cta h2{font-size:clamp(2.5rem,5vw,5.8rem);line-height:1;letter-spacing:-.03em;max-width:18ch}
body.flow-case main>.cta p{font-size:clamp(1rem,1.5vw,1.2rem);max-width:58ch}
body.flow-case main>.cta .row{margin-top:35px}
body.flow-case main>.cta .pill-ghost{border-color:rgba(255,255,255,.45);color:var(--paper)}
body.flow-case main>.cta .pill-ghost:hover{border-color:var(--paper)}
html[dir="rtl"] body.flow-case .case-crumb,html[dir="rtl"] body.flow-case .chrow .kicker,html[dir="rtl"] body.flow-case .meta i,html[dir="rtl"] body.flow-case .metrics .mt span{font-family:Alexandria,sans-serif;letter-spacing:0}
html[dir="rtl"] body.flow-case main>h1,html[dir="rtl"] body.flow-case main>h2,html[dir="rtl"] body.flow-case main>.cta h2{font-family:Alexandria,sans-serif;font-weight:700;letter-spacing:0;line-height:1.32}
html[dir="rtl"] body.flow-case main>.lede{margin-inline:max(0px,calc((100% - 1180px)/2))}
@media(max-width:760px){
  body.flow-case main{padding-top:68px}
  body.flow-case .case-crumb{margin-bottom:35px;font-size:.72rem}
  body.flow-case .chrow{align-items:flex-start}
  body.flow-case .chrow .clogo{max-width:115px;max-height:54px}
  body.flow-case main>h1{font-size:clamp(2.85rem,11vw,4.5rem)}
  html[dir="rtl"] body.flow-case main>h1{font-size:clamp(2.35rem,9vw,3.5rem);line-height:1.27}
  body.flow-case main>.lede{margin-inline:auto}
  body.flow-case .meta{margin-bottom:60px;row-gap:10px}
  body.flow-case .metrics{grid-template-columns:1fr}
  body.flow-case .metrics .mt,body.flow-case .metrics .mt:first-child{padding:30px 0}
  body.flow-case .metrics .mt:not(:last-child){border-inline-end:0;border-bottom:1px solid rgba(14,14,14,.17)}
  body.flow-case .shotframe img{border-radius:14px}
  body.flow-case main>.cta{margin-top:55px}
  html[dir="rtl"] body.flow-case main>.lede{margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){body.flow-case .case-crumb a,body.flow-case .case-quicklinks a{transition:none}}

/* Project scope, then work, then the decisions behind it. */
body.flow-case .case-label{display:block;font:700 .7rem/1.5 Inter,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt-deep);margin:0}
body.flow-case .case-overview{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:32px;margin-bottom:clamp(36px,4vw,56px);padding-block:22px;border-block:1px solid rgba(14,14,14,.17)}
body.flow-case .case-services{min-width:0}
body.flow-case .case-overview .scope{margin:12px 0 0;gap:8px}
body.flow-case .case-overview .scope i{font:500 .78rem/1.5 Inter,sans-serif;letter-spacing:0;padding:.4em .85em;color:rgba(14,14,14,.74)}
body.flow-case .case-overview .case-quicklinks{margin:0;gap:16px 24px;flex:none}
body.flow-case .case-chapter{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);padding-block:clamp(34px,5vw,66px);border-top:1px solid rgba(14,14,14,.17)}
body.flow-case .case-chapter-head h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1.1;letter-spacing:-.025em;margin:14px 0 0;max-width:19ch;text-wrap:balance}
body.flow-case .case-chapter-copy{padding-top:clamp(0px,1vw,16px)}
body.flow-case .case-chapter-copy p{font-size:clamp(1rem,1.45vw,1.17rem);line-height:1.75;color:rgba(14,14,14,.72);max-width:56ch}
body.flow-case .case-chapter-copy p:last-child{margin-bottom:0}
body.flow-case .case-evidence{margin-block:clamp(32px,4vw,56px) clamp(40px,5vw,72px)}
body.flow-case .case-evidence>.case-label{margin-bottom:20px}
body.flow-case .case-brand-board{margin:0 0 clamp(34px,5vw,66px)}
body.flow-case .case-brand-logo{display:grid;place-items:center;min-height:clamp(230px,27vw,390px);padding:40px;background:#F1F0E9;border:1px solid rgba(20,41,32,.1);border-radius:20px 20px 0 0}
body.flow-case .case-brand-logo img{width:clamp(180px,23vw,300px);height:auto}
body.flow-case .case-brand-colours{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border-radius:0 0 20px 20px}
body.flow-case .case-brand-colours span{padding:18px 24px;font:500 .8rem/1.6 Inter,sans-serif;direction:ltr}
body.flow-case .ph-pine{background:#142920;color:#F1F0E9}
body.flow-case .ph-ivory{background:#F1F0E9;color:#142920;border-top:1px solid rgba(20,41,32,.1)}
body.flow-case .ph-sage{background:#8FB283;color:#142920}
body.flow-case .case-brand-board figcaption{font-size:.78rem;color:rgba(14,14,14,.58);margin-top:10px}
body.flow-case .case-quicklinks a:focus-visible,body.flow-case .case-crumb a:focus-visible{outline:2px solid var(--cobalt-deep);outline-offset:5px}
html[dir="rtl"] body.flow-case .case-label,html[dir="rtl"] body.flow-case .case-overview .scope i{font-family:Alexandria,sans-serif;letter-spacing:0}
html[dir="rtl"] body.flow-case .case-chapter-head h2{font-family:Alexandria,sans-serif;font-weight:700;letter-spacing:0;line-height:1.4;max-width:22ch}
@media(max-width:900px){body.flow-case .case-overview{align-items:flex-start;flex-direction:column;gap:22px}}
@media(max-width:760px){
 body.flow-case .case-chapter{grid-template-columns:1fr;gap:22px}
 body.flow-case .case-chapter-head h2{font-size:clamp(1.8rem,7vw,2.4rem);max-width:22ch}
 body.flow-case .case-chapter-copy{padding-top:0}
 body.flow-case .case-brand-logo{padding:30px;border-radius:14px 14px 0 0}
 body.flow-case .case-brand-colours{border-radius:0 0 14px 14px}
 body.flow-case .case-brand-colours span{padding:14px 12px;font-size:.7rem}
}

/* A recognisable next project, within the existing editorial divider. */
body.flow-case main>.nextcase{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:32px;padding-block:38px}
.nextcase-logo{display:flex;align-items:center;justify-content:center;width:112px;min-height:90px}
.nextcase-logo img{width:auto;max-width:105px;max-height:80px;object-fit:contain}
.nextcase-copy{display:grid;gap:9px;min-width:0}
body.flow-case .nextcase .nk{display:block;font:600 .72rem/1.5 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-deep)}
body.flow-case .nextcase .nt{display:block;font-family:var(--disp);font-size:clamp(1.8rem,3vw,3rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.nextcase-description{display:block;font-size:.98rem;line-height:1.6;color:rgba(14,14,14,.65)}
.nextcase-action{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:.8rem;font-weight:650;border-bottom:1px solid rgba(14,14,14,.35);padding-block:7px}
.nextcase-action svg{transition:transform .25s ease}
.nextcase:hover .nextcase-action svg{transform:translateX(4px)}
.nextcase:focus-visible{outline:2px solid var(--cobalt-deep);outline-offset:8px}
html[dir="rtl"] .nextcase-action svg{scale:-1 1}
html[dir="rtl"] .nextcase .nk{font-family:Alexandria,sans-serif;letter-spacing:0}
@media(max-width:760px){
 body.flow-case main>.nextcase{grid-template-columns:72px minmax(0,1fr);gap:18px;padding-block:30px}
 .nextcase-logo{width:72px;min-height:70px}.nextcase-logo img{max-width:72px;max-height:64px}
 body.flow-case .nextcase .nt{font-size:1.7rem}.nextcase-description{font-size:.85rem}
 .nextcase-action{grid-column:2;width:max-content;margin-top:5px;font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){.nextcase-action svg{transition:none}}