@font-face{font-family:"Libre Franklin";src:url(/fonts/lf.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(/fonts/lf-i.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@view-transition{navigation:auto}

:root{
  --navy:#12294d;--pale:#e4ecf5;--white:#fff;
  --bg:var(--pale);--ink:var(--navy);--soft:#44597a;--line:#12294d33;--accent:var(--navy);--on-accent:#fff;
  --gutter:clamp(16px,4.5vw,72px);
  --step-1:clamp(.875rem,.84rem + .15vw,.95rem);--step0:clamp(1.03rem,1rem + .2vw,1.15rem);
  --step1:clamp(1.25rem,1.15rem + .5vw,1.6rem);--step2:clamp(1.65rem,1.4rem + 1.2vw,2.5rem);
  --step3:clamp(2.3rem,1.7rem + 3vw,4.4rem);--step4:clamp(3.4rem,.5rem + 11.2vw,12.5rem);
}
.w-base{--bg:var(--pale);--ink:var(--navy);--soft:#44597a;--line:#12294d33;--accent:var(--navy);--on-accent:#fff}
.w-greenback{--bg:#f4f1e4;--ink:#12301f;--soft:#4c5f54;--line:#12301f2e;--accent:#1b5e37;--on-accent:#fff}
.w-ffs{--bg:#17191d;--ink:#f2f3f4;--soft:#b0b6bd;--line:#ffffff26;--accent:#b5001e;--on-accent:#fff}
.w-tsd{--bg:#090806;--ink:#f3eadb;--soft:#b9ad9b;--line:#ffffff24;--accent:#d96a1d;--on-accent:#150a02}
.w-nsu{--bg:#12294d;--ink:#fff;--soft:#c0cfe3;--line:#ffffff2e;--accent:#fff;--on-accent:#12294d}
.w-paul{--bg:#fff;--ink:#0d0d0d;--soft:#55555a;--line:#0000001f;--accent:#0d0d0d;--on-accent:#fff}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pale);color:var(--navy);font:400 var(--step0)/1.6 "Libre Franklin",Arial,sans-serif;overflow-x:clip;transition:background-color .6s ease}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:2px}
h1,h2,h3,p,figure,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
p{text-wrap:pretty}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;z-index:60}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* world sections paint themselves; JS lets the body carry the colour so worlds melt together */
.world{background:var(--bg);color:var(--ink);padding-block:clamp(72px,11vw,168px)}
.morph .world{background:transparent}
.wrap{padding-inline:var(--gutter);max-width:1560px;margin-inline:auto}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:10px var(--gutter);color:var(--hc,var(--navy));background:var(--hcb,var(--pale));transition:color .45s,background-color .45s}
.top .home{font-weight:700;letter-spacing:-.01em;text-decoration:none}
.top nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.top nav a{text-decoration:none;font-size:var(--step-1);font-weight:600}
.top nav a:hover{text-decoration:underline}
.idx-btn{font:600 var(--step-1)/1 "Libre Franklin",sans-serif;color:inherit;background:transparent;border:1.5px solid currentColor;border-radius:99px;padding:.6em 1em;min-height:40px;cursor:pointer;display:inline-flex;gap:.5em;align-items:center}
.idx-btn:hover{background:currentColor}
.idx-btn:hover span{filter:invert(1);color:var(--hcb,#fff)}
.idx-now{font-weight:400;opacity:.8}
@media(max-width:560px){.idx-now{display:none}}

/* index overlay */
#index{border:0;margin:0;padding:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:#0d1d38;color:#fff}
#index::backdrop{background:#0d1d38}
#index[open]{animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.idx-inner{display:grid;grid-template-rows:auto 1fr;height:100%;padding:14px var(--gutter) 24px}
.idx-head{display:flex;justify-content:space-between;align-items:center}
.idx-list{align-self:center;display:grid;gap:clamp(2px,.8vh,10px)}
.idx-list a{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;text-decoration:none;border-bottom:1px solid #ffffff22;padding-block:clamp(6px,1.1vh,14px)}
.idx-list b{font-size:clamp(1.7rem,1rem + 3.2vw,4.2rem);font-weight:700;letter-spacing:-.025em;line-height:1.05;transition:transform .25s ease}
.idx-list a:hover b,.idx-list a:focus-visible b{transform:translateX(.25em)}
.idx-list small{font-size:var(--step-1);color:#c0cfe3;text-align:right}
@media(max-width:700px){.idx-list small{display:none}}

/* hero */
.hero{--bg:var(--pale);min-height:100svh;display:grid;background:var(--bg);color:var(--ink);padding:clamp(72px,10vh,104px) var(--gutter) clamp(24px,4vh,44px);position:relative;transition:background-color .55s ease,color .55s ease;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,64px);max-width:1560px;width:100%;margin-inline:auto}
.hero h1{grid-column:1;font-size:var(--step4);font-weight:800;letter-spacing:-.045em;line-height:.92;margin-bottom:clamp(20px,3.5vh,44px);position:relative;z-index:2}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 i{display:block;font-style:normal;animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
.hero h1 span+span i{animation-delay:.09s}
@keyframes rise{from{transform:translateY(105%)}}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0}
.lede{font-size:var(--step1);line-height:1.35;max-width:32ch;font-weight:500}
.auds{display:grid;margin-top:clamp(14px,2vh,24px);border-top:1.5px solid var(--line)}
.aud{all:unset;box-sizing:border-box;display:block;width:100%;padding:clamp(10px,1.6vh,16px) 0;border-bottom:1.5px solid var(--line);cursor:pointer;transition:padding .25s ease}
.aud b{display:block;font-size:var(--step2);font-weight:700;letter-spacing:-.025em;line-height:1.08}
.aud small{display:block;font-size:var(--step-1);color:var(--soft);margin-top:.25em}
.aud:hover,.aud[aria-pressed=true]{padding-left:.75rem}
.aud[aria-pressed=true] b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.14em}
.aud:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:.55em 1.15em;background:var(--accent);color:var(--on-accent);font-weight:650;text-decoration:none;border-radius:4px;border:1.5px solid var(--accent);font-size:var(--step-1);cursor:pointer;font-family:inherit}
.btn:hover{text-decoration:underline}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.stage{position:relative;grid-column:2;grid-row:1/span 2;min-height:clamp(320px,60vh,760px);align-self:stretch}
.stage figure{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.1,1);display:flex;justify-content:flex-end}
.stage figure.on{opacity:1;transform:none}
.stage img{height:100%;width:100%;object-fit:cover;object-position:50% 25%;border-radius:4px}
.stage .shot img{object-position:50% 22%;width:100%}
.stage a{display:contents}
.hero[data-aud=greenback]{--bg:#f4f1e4;--ink:#12301f;--soft:#4c5f54;--line:#12301f2e;--accent:#1b5e37}
.hero[data-aud=ffs]{--bg:#17191d;--ink:#f2f3f4;--soft:#b0b6bd;--line:#ffffff26;--accent:#b5001e}
.hero[data-aud=tsd]{--bg:#090806;--ink:#f3eadb;--soft:#b9ad9b;--line:#ffffff24;--accent:#d96a1d;--on-accent:#150a02}
.mini{position:absolute;left:0;bottom:0;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;overflow:hidden;opacity:0;transition:opacity .4s;border:3px solid var(--bg)}
.mini img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.hero[data-aud] .mini{opacity:1}
@media(max-width:860px){
  .hero{min-height:0}
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .stage{order:-1;grid-column:1;grid-row:auto;aspect-ratio:4/5;min-height:0;max-height:62vh;margin-bottom:18px}
  .hero h1{order:-2;grid-column:1}
  .stage figure{justify-content:flex-start}
  .stage img{width:100%}
  .mini{left:auto;right:10px;bottom:10px}
}

/* chapter layout */
.chap-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(36px,6vw,84px)}
.chap-logo{height:clamp(44px,5vw,72px);width:auto;margin-bottom:22px}
.chap-logo.tile{background:#fefefe;padding:6px;border-radius:4px;height:clamp(60px,6vw,84px)}
.chap-title{font-size:var(--step3)}
.role{font-weight:600;margin-top:.9em;font-size:var(--step0)}
.when{color:var(--soft);font-size:var(--step-1)}
.chap-sum{max-width:58ch}
.chap-sum p+p{margin-top:.8em}
.chap-sum .btn{margin-top:1.4em}
@media(max-width:860px){.chap-head{grid-template-columns:minmax(0,1fr);align-items:start}}
.grid2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:start}
.grid2.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media(max-width:860px){.grid2,.grid2.flip{grid-template-columns:minmax(0,1fr)}}
figcaption{font-size:var(--step-1);color:var(--soft);margin-top:.7em;line-height:1.45;max-width:60ch}
.round{border-radius:4px}
h3.sub{font-size:var(--step1);letter-spacing:-.015em;line-height:1.2;margin-bottom:.6em}

/* zoomable */
[data-zoom]{all:unset;display:block;cursor:zoom-in;width:100%}
[data-zoom]:focus-visible{outline:3px solid currentColor;outline-offset:3px}
[data-zoom] img{width:100%;border-radius:4px;transition:transform .35s cubic-bezier(.2,.7,.1,1)}
@media(hover:hover){[data-zoom]:hover img{transform:translateY(-4px)}}
#zoom{border:0;padding:0;background:transparent;max-width:min(94vw,1200px);max-height:92dvh;overflow:visible}
#zoom::backdrop{background:#000d}
#zoom img{max-height:88dvh;width:auto;max-width:100%;margin:auto;border-radius:4px}
#zoom p{color:#fff;font-size:var(--step-1);margin-top:8px;text-align:center}
#zoom button{position:fixed;top:12px;right:12px;background:#fff;color:#000;border:0;border-radius:99px;min-height:44px;padding:0 18px;font:600 .95rem "Libre Franklin",sans-serif;cursor:pointer}

/* survey explorer */
.survey{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
@media(max-width:860px){.survey{grid-template-columns:minmax(0,1fr)}}
.answer,.q-list{min-width:0}
.q-list{display:grid;border-top:1.5px solid var(--line)}
.q{all:unset;box-sizing:border-box;width:100%;padding:12px 0 12px;border-bottom:1.5px solid var(--line);cursor:pointer;font-weight:550;font-size:var(--step0);line-height:1.3;transition:padding .2s}
.q[aria-pressed=true]{padding-left:.7rem;font-weight:750;color:var(--accent)}
.q:hover{padding-left:.7rem}
.q:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.answer .big{font-size:var(--step3);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.answer p{margin-top:.5em;max-width:44ch}
.dots{display:grid;grid-template-columns:repeat(auto-fill,minmax(13px,1fr));gap:5px;margin-top:20px;max-width:560px}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--line);transition:background-color .35s ease,transform .35s ease}
.dots i.on{background:var(--accent)}
.source{font-size:var(--step-1);color:var(--soft);margin-top:1.1em;max-width:62ch}

/* filmstrip of carousel slides */
.strip-wrap{position:relative}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(190px,22vw,300px);gap:clamp(8px,1vw,14px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--soft) transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.strip>*{scroll-snap-align:start}
.strip-ctl{display:flex;gap:8px;margin-top:6px;align-items:center;flex-wrap:wrap}
.arrow{min-width:44px;min-height:44px;background:transparent;color:inherit;border:1.5px solid currentColor;border-radius:99px;cursor:pointer;font:600 1.05rem/1 "Libre Franklin",sans-serif}
.arrow:hover{background:var(--ink);color:var(--bg)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.tab{min-height:44px;padding:0 15px;border-radius:99px;background:transparent;color:inherit;border:1.5px solid var(--line);font:600 var(--step-1) "Libre Franklin",sans-serif;cursor:pointer}
.tab[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tabpanel[hidden]{display:none}
.caption-card{border-left:3px solid var(--accent);padding:.1em 0 .1em 1.1em;max-width:60ch;white-space:pre-line}
.caption-card small{display:block;color:var(--soft);margin-top:.9em;font-size:var(--step-1)}

/* reels */
.phone{max-width:300px;width:100%;margin-inline:auto}
.phone video{width:100%;border-radius:14px;background:#000;aspect-ratio:9/16;object-fit:cover}

/* calendar */
.cal{width:100%;border-collapse:collapse;font-size:var(--step-1)}
.cal th{font-weight:600;text-align:left;color:var(--soft);padding:.4em .9em .4em 0;border-bottom:1.5px solid var(--line)}
.cal td{padding:.55em .9em .55em 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.35}
.cal td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.st{white-space:nowrap}
.st::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-right:.45em;background:currentColor}
.st.sch::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

/* browser frame */
.frame{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000}
.frame .bar{display:flex;gap:6px;padding:9px 12px;align-items:center;background:#1c1a17;color:#b9ad9b;font-size:.78rem}
.frame .bar::before{content:"";width:9px;height:9px;border-radius:50%;background:#5a5346;box-shadow:15px 0 0 #5a5346,30px 0 0 #5a5346;margin-right:36px}
.shots{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);gap:clamp(10px,1.6vw,22px);align-items:end}
.shots .ph{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.links{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600;font-size:var(--step-1)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
@media(max-width:560px){.shots{grid-template-columns:1fr}.shots .ph{max-width:62%}}

/* timeline */
.tl{border-left:2px solid var(--line);margin-left:6px;display:grid;gap:clamp(20px,3vw,34px)}
.tl li{padding-left:clamp(18px,3vw,36px);position:relative}
.tl li::before{content:"";position:absolute;left:-7px;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
.tl time{font-size:var(--step-1);color:var(--soft);display:block}
.tl h3{font-size:var(--step1);letter-spacing:-.015em;line-height:1.2;margin:.1em 0 .25em}
.tl p{max-width:58ch}
.tl .now::before{background:var(--ink)}
.interests{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1em}
.interests li{border:1px solid var(--line);border-radius:99px;padding:.2em .85em;font-size:var(--step-1)}

/* signature */
.sig{--w:clamp(250px,52vw,780px);width:var(--w);aspect-ratio:2058/764;background:var(--ink);-webkit-mask:url(/img/me/signature.webp) center/contain no-repeat;mask:url(/img/me/signature.webp) center/contain no-repeat}
.sig-clip{display:block;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.45,.05,.3,1)}
.sig-clip.in{clip-path:inset(-4% -4% -4% -4%)}
.no-js .sig-clip{clip-path:none}
.foot-sig .sig{--w:150px;background:currentColor}
.paul-photos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.4vw,20px)}

/* contact */
.end-title{font-size:var(--step3);max-width:17ch}
.end-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.8em}
.contact-list{display:grid;gap:.25em;font-size:var(--step1);font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
footer.foot{background:#0d1d38;color:#d7e1ee;padding:clamp(36px,5vw,64px) 0;font-size:var(--step-1)}
.foot-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:end}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}

/* case study pages */
.case-hero{padding-top:clamp(104px,14vh,160px);padding-bottom:clamp(40px,6vw,80px);background:var(--bg);color:var(--ink)}
.case-hero h1{font-size:var(--step3);max-width:20ch;margin-top:.3em}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px 28px;margin-top:clamp(28px,4vw,52px);border-top:1.5px solid var(--line);padding-top:18px}
.facts dt{font-size:var(--step-1);color:var(--soft)}
.facts dd{font-weight:600;line-height:1.35}
.case{background:var(--bg);color:var(--ink);padding-block:clamp(36px,5vw,72px)}
.case+.case{padding-top:0}
.case>.wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(24px,4vw,64px)}
.case>.wrap>*{grid-column:2;min-width:0}
.case>.wrap>h2{grid-column:1;grid-row:1/span 40;font-size:var(--step1);letter-spacing:-.015em;line-height:1.15;position:sticky;top:76px;align-self:start;margin-bottom:.6em}
@media(max-width:860px){.case>.wrap{grid-template-columns:minmax(0,1fr)}.case>.wrap>*,.case>.wrap>h2{grid-column:1;grid-row:auto;position:static}.case>.wrap>h2{font-size:var(--step2)}}
.prose{max-width:62ch}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:.85em}
.prose ul li{padding-left:1.1em;position:relative;margin-top:.4em}
.prose ul li::before{content:"";position:absolute;left:0;top:.65em;width:.45em;height:2px;background:currentColor}
.note{font-size:var(--step-1);color:var(--soft)}
.next{display:block;text-decoration:none;background:var(--bg);color:var(--ink);padding-block:clamp(40px,6vw,88px);border-top:1px solid var(--line)}
.next small{display:block;color:var(--soft)}
.next b{font-size:var(--step3);letter-spacing:-.03em;line-height:1.05}
.next:hover b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.1em}

/* work index */
.filter{display:flex;flex-wrap:wrap;gap:6px;margin-block:18px 30px}
.work-grid{columns:4 240px;column-gap:14px}
.work-grid>figure{break-inside:avoid;margin-bottom:22px}
.work-grid>figure[hidden]{display:none}
.work-grid h3{font-size:var(--step0);letter-spacing:-.01em;margin-top:.55em;line-height:1.25}

/* resume */
.res h2{font-size:var(--step1);margin:2em 0 .7em;padding-bottom:.35em;border-bottom:1.5px solid var(--line)}
.res h3{font-size:var(--step0);letter-spacing:-.01em;line-height:1.3;margin-top:1.3em}
.res li{padding-left:1.1em;position:relative;margin-top:.25em;max-width:76ch}
.res li::before{content:"";position:absolute;left:0;top:.68em;width:.45em;height:2px;background:currentColor}

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.1,1)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .sig-clip{clip-path:none}
  @view-transition{navigation:none}
}
@media print{.top,#index,#zoom{display:none}}

.case.full>.wrap{display:block}
[id]{scroll-margin-top:60px}

.brandname{font-size:var(--step1);font-weight:700;letter-spacing:-.015em;margin-bottom:.9em}
.tagged{position:relative}
.tag{position:absolute;z-index:2;top:10px;left:10px;right:10px;background:var(--accent);color:var(--on-accent);font-size:var(--step-1);font-weight:700;padding:.25em .6em;border-radius:3px;line-height:1.3}

.cols3 [data-zoom] img{aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}

.reel-link{display:block;position:relative;text-decoration:none}
.reel-link img{border-radius:14px;width:100%}
.reel-link span{position:absolute;left:12px;bottom:12px;background:var(--accent);color:var(--on-accent);font-size:var(--step-1);font-weight:650;padding:.45em .85em;border-radius:4px}
.reel-link:hover span{text-decoration:underline}
.paul-photos.one{grid-template-columns:minmax(0,1fr);max-width:420px;justify-self:end}
@media(max-width:860px){.paul-photos.one{justify-self:start}}
.chap-logo.tile.wide{height:auto;width:clamp(150px,16vw,220px);padding:10px 14px}
.job{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;margin-top:1.3em}
.job>img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:4px;padding:4px}
.job h3{margin-top:0}