/* Bundled lining figures keep serif numbers aligned across browsers. */
@font-face{font-family:'Portfolio Lining Numerals';src:url('/assets/fonts/lining-numerals.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0030-0039}
html{font-variant-numeric:lining-nums}
/* Shared portfolio typography, spacing and interaction rules. */
:root{--paper:#fff;--ink:#182c3c;--muted:#526370;--line:#d6dee3;--green:#244e6c;--accent:#244e6c;--body:Arial,Helvetica,sans-serif;--display:'Portfolio Lining Numerals',Georgia,'Times New Roman',serif}
body{color:var(--ink);font-family:var(--body);overflow-x:clip}::selection{background:#d7e7ef;color:#182c3c}a{touch-action:manipulation;-webkit-tap-highlight-color:#c6dce7}a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}a:hover{color:var(--accent)}.wrap{padding-left:max(5.5vw,env(safe-area-inset-left));padding-right:max(5.5vw,env(safe-area-inset-right))}header{padding-top:28px;padding-bottom:28px;border:0}.wordmark{font-weight:500;letter-spacing:-.8px}nav a{min-height:32px;display:inline-flex;align-items:center}nav a[aria-current=page]{text-decoration:underline;text-underline-offset:7px;border:0}h1,h2,h3{ text-wrap:balance}h1{font-family:var(--display);font-weight:400;letter-spacing:-.065em}h1 em{font:inherit;letter-spacing:inherit}.eyebrow,.section-label,.meta{text-transform:none;letter-spacing:0}.intro-body{max-width:65ch}.intro-body p:last-child{color:var(--ink)}.text-link{border:0;text-decoration:underline;text-underline-offset:7px;color:var(--accent);padding:8px 0;line-height:1.6}.text-link:hover{text-decoration-thickness:2px}.skip-link{position:fixed;left:20px;top:16px;z-index:20;padding:12px 20px;background:var(--ink);color:white;transform:translateY(-160%)}.skip-link:focus{transform:none;color:white}main:focus{outline:none}footer{padding-top:28px;padding-bottom:max(28px,env(safe-area-inset-bottom));line-height:1.6}footer a{text-decoration:underline;text-underline-offset:5px}
/* Home: the name and portrait introduce the writer before the work. */
.home-hero{padding:65px 0 90px}.home-hero h1{font-size:clamp(70px,9.8vw,150px);margin:0 0 55px;line-height:1.04}.home-hero .hero-content{grid-template-columns:1.25fr 1fr;gap:10vw;align-items:center}.home-summary .intro-lead{font-size:clamp(27px,3.3vw,48px);line-height:1.2;letter-spacing:-.04em;max-width:540px}.home-hero .portrait{max-width:400px}.portrait img{aspect-ratio:1;object-fit:cover}.work-head{border:0;padding:0 0 40px}.work-head h2{font-family:var(--display);font-size:clamp(32px,4vw,50px);letter-spacing:-.045em}.work-head span{font-size:13px}.brand-title{margin-bottom:20px}.brand-title h3{font-size:24px;letter-spacing:-.7px}.brand-title span{font-size:12px}.cards{gap:28px}.preview{padding:32px;transition:none;aspect-ratio:1.4}.preview:hover{transform:none}.preview-name{font-family:var(--display);font-size:clamp(36px,4.7vw,68px);letter-spacing:-.055em;line-height:1.04}.preview .meta{font-size:13px;letter-spacing:0}.preview-bottom{justify-content:flex-start}.placeholder{font-size:12px;opacity:1}.p1{background:#dce7e8;color:#183d47}.p2{background:#254859;color:white}.p3{background:#e0e7ed;color:#243d52}.p4{background:#ece6df;color:#493e32}.project figcaption{font-size:14px;padding:18px 0 0}.project figcaption span{font-size:12px}.endowus{margin-bottom:75px}.other-brands{gap:28px;margin-bottom:95px}.closing{border:0;background:#edf2f4;padding:45px;margin:0 0 65px}.closing p{font-family:var(--display);font-style:normal;font-size:clamp(30px,3.6vw,49px);line-height:1.12;letter-spacing:-.045em}.closing a{border:0;text-decoration:underline;text-underline-offset:6px}
/* About: uninterrupted photograph, quiet biography and compact chronology. */
.photo-label{display:none}.bio-panel{padding:80px 0;gap:8vw}.bio-panel h1{font-size:clamp(45px,5vw,70px);margin:0}.bio-panel .intro-lead{font-size:clamp(22px,2.1vw,29px);line-height:1.45;letter-spacing:-.025em;max-width:52ch}.bio-panel .intro-body{font-size:16px;line-height:1.7}.resume{padding:65px 0 90px;gap:8vw}.resume-heading h2{font-family:var(--display);font-size:clamp(35px,3.5vw,50px);margin:0;font-weight:400;letter-spacing:-.05em}.resume-group h3{font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500;margin-bottom:24px}.resume-row{grid-template-columns:165px 1fr;gap:20px;padding:22px 0}.resume-row dt{font-size:13px;font-variant-numeric:tabular-nums}.resume-row dd{font-size:17px}.resume-row .organisation{font-size:14px;color:var(--muted)}.bio-copy,.resume-groups,.resume-row dd{min-width:0;overflow-wrap:break-word}
@media(max-width:900px){.resume-row{grid-template-columns:1fr;gap:8px}}
@media(max-width:700px){.wrap{padding-left:max(6vw,env(safe-area-inset-left));padding-right:max(6vw,env(safe-area-inset-right))}header{padding:20px 0}nav{gap:20px}.wordmark{font-size:20px}.home-hero{padding:38px 0 65px}.home-hero h1{font-size:clamp(54px,12.5vw,86px);margin-bottom:35px}.home-hero .hero-content{grid-template-columns:1fr;gap:32px}.home-summary .intro-lead{font-size:32px;max-width:360px;margin-bottom:15px}.home-hero .portrait{max-width:none;width:100%}.work-head{align-items:flex-start;gap:20px;padding-bottom:30px}.work-head h2{font-size:36px}.work-head span{font-size:12px;line-height:1.6;text-align:right;max-width:120px}.preview{padding:25px}.preview-name{font-size:48px}.cards{gap:32px}.brand-title h3{font-size:23px}.brand-title span{font-size:11px}.endowus{margin-bottom:50px}.other-brands{gap:50px;margin-bottom:60px}.closing{padding:30px;margin-bottom:40px}.closing p{font-size:34px}.about-hero{height:calc(100svh - 72px);min-height:520px}.bio-panel{padding:48px 0;gap:28px}.bio-panel h1{font-size:48px}.bio-panel .intro-lead{font-size:23px}.bio-panel .intro-body{font-size:15px}.resume{padding:40px 0 60px;gap:32px}.resume-heading h2{font-size:38px;max-width:300px}.resume-row{padding:20px 0}.resume-group+.resume-group{margin-top:38px}footer{align-items:start;font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

@media(max-width:700px){header nav{gap:16px}header .wordmark{font-size:18px}}

/* Keep the shared navigation visible while allowing anchor targets to clear it. */
html{scroll-padding-top:112px}header{position:sticky;top:0;z-index:100;background:var(--paper);isolation:isolate}header nav{align-items:center}
.case-card-summary{display:flex;align-items:center;justify-content:space-between;gap:24px}.case-card-title{font-size:20px;font-weight:400;line-height:1.4;letter-spacing:-.4px}.case-card-title:hover{text-decoration:underline;text-underline-offset:5px}.project-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:48px;padding:13px 23px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fff;font-size:15px;font-weight:400;line-height:1.4;text-decoration:none}.project-button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:700px){html{scroll-padding-top:96px}.case-card-summary{flex-direction:column;align-items:flex-start;gap:18px}}

/* Readable line endings across the site, including future copy. */
p,li,dd,dt,figcaption,.intro-lead,.case-card-title{ text-wrap:pretty;orphans:2;widows:2 }
h1,h2,h3{orphans:2;widows:2;break-after:avoid}
.home-page footer{justify-content:center;text-align:center}
/* Familiar tools, with their native brand colours. */
.tools-section{max-width:1100px;margin:0 auto;padding:0 0 90px;text-align:center}
.tools-section h2{font-family:var(--display);font-size:clamp(35px,3.5vw,50px);font-weight:400;line-height:1.1;letter-spacing:-.05em;margin:0 0 56px}
.tools-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 48px;max-width:1040px;list-style:none;padding:0;margin:0 auto}
.tools-grid li{display:flex;align-items:center;justify-content:center;flex:0 0 80px;width:80px;height:80px}
.tools-grid img{display:block;width:64px;height:64px;object-fit:cover;background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(24,44,60,.08)}
@media(max-width:700px){.tools-section{padding-bottom:60px}.tools-section h2{font-size:34px;margin-bottom:38px}.tools-grid{gap:28px 20px;max-width:400px}.tools-grid li{flex-basis:56px;width:56px;height:56px}.tools-grid img{width:48px;height:48px;border-radius:11px}}

.keep-together{white-space:nowrap}

/* A direct next step after Selected work. */
.home-cta{display:flex;align-items:center;justify-content:space-between;gap:40px;background:#edf2f4;padding:46px 48px;margin:0 0 65px}
.home-cta h2{font-family:var(--display);font-size:clamp(30px,3.4vw,44px);font-weight:400;line-height:1.15;letter-spacing:-.045em;margin:0 0 15px}
.home-cta p{font-size:17px;line-height:1.6;margin:0}
.home-cta-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:48px;padding:13px 26px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fff;font-size:15px;line-height:1.4;text-decoration:none}
.home-cta-button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:700px){.home-cta{flex-direction:column;align-items:flex-start;padding:30px;gap:26px;margin-bottom:45px}.home-cta h2{font-size:32px}.home-cta p{font-size:16px}}

/* Extend the opaque sticky header across the viewport, including page gutters. */
header{background:#fff}header:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#fff;z-index:-1;pointer-events:none}

/* Use one face for each result figure, including its currency prefix and symbols. */
@font-face{font-family:'Portfolio Result Figures';src:url('/assets/fonts/lining-numerals.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
.case-copy .impact-number{font-family:'Portfolio Result Figures',serif;font-variant-numeric:lining-nums}

/* Keep mobile navigation attached to the viewport as Safari's toolbar changes. */
@media(max-width:700px){
  body>.wrap{padding-top:72px}
  header{position:fixed;inset:0 0 auto;width:100%;height:72px;margin:0;padding:20px max(6vw,env(safe-area-inset-right)) 20px max(6vw,env(safe-area-inset-left));background:#fff}
  header:before{inset:auto 0 0;top:calc(-60px - env(safe-area-inset-top,0px));width:auto;transform:none;background:#fff}
}

/* Minimal project navigation, matching the Read more links. */
.case-end .case-nav-link{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font:400 15px/1.5 var(--body);text-decoration:none;white-space:nowrap}
.case-end .case-nav-link:last-child{margin-left:auto}
.case-end .case-nav-link>span[aria-hidden]{font-size:26px;line-height:1}
.case-end .case-nav-link:hover{color:var(--accent)}
.case-end .case-nav-link:hover>span:not([aria-hidden]){text-decoration:underline;text-underline-offset:5px}

.case-end .case-nav-link.case-prev{margin-left:0}

/* Keep editorial blocks balanced on narrow viewports without forced line breaks. */
main p,main li,main dd,main dt,main figcaption{text-wrap:pretty;orphans:2;widows:2}main h1,main h2,main h3{text-wrap:balance;break-after:avoid}

/* Natural paragraph wrapping fills each line without balancing the whole block. */
main p,main li{text-wrap:wrap}
@media(max-width:700px){main p .keep-together{white-space:normal}}